/* [agwp_showcase] + [agwp_problems] – Kundenprobleme-Bereich
   Empfohlen: Farbsektion (agwp-sec--bg2 agwp-sec--lined), Spalten 1/2 + 1/2,
   links [agwp_showcase], rechts [agwp_problems]. */

/* ---- Showcase ---- */
#top .agwp-showcase {
	position: relative;
	margin: 0;
	min-height: clamp(340px, 40vw, 420px);
	height: 100%;
	padding: 0 0 28px;
}
#top .agwp-showcase .agwp-showcase__media {
	position: absolute;
	inset: 0 20px 28px 0;
	border-radius: var(--agwp-r-xl);
	overflow: hidden;
	box-shadow: 0 30px 70px -30px rgba(13, 21, 32, .45);
	background: var(--agwp-surf);
}
#top .agwp-showcase .agwp-showcase__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
}

#top .agwp-showcase .agwp-showcase__badge {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--agwp-bg2);
	border: 1px solid var(--agwp-line);
	box-shadow: 0 18px 40px -16px rgba(13, 21, 32, .35);
	color: var(--agwp-ink);
}
#top .agwp-showcase .agwp-showcase__badge--top { top: 24px; right: 0; padding: 12px 16px 12px 12px; border-radius: 16px; }
#top .agwp-showcase .agwp-showcase__badge--score { left: -10px; bottom: 0; gap: 14px; padding: 14px 18px 14px 14px; border-radius: 18px; }

#top .agwp-showcase .agwp-showcase__icon {
	width: 36px;
	height: 36px;
	flex: none;
	border-radius: 10px;
	background: var(--agwp-grad);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 800 16px/1 var(--agwp-font-body);
}
#top .agwp-showcase .agwp-showcase__txt { display: flex; flex-direction: column; line-height: 1.25; }
#top .agwp-showcase .agwp-showcase__txt strong { font-size: var(--agwp-fs-small); font-weight: 700; color: var(--agwp-ink); }
#top .agwp-showcase .agwp-showcase__txt > span { font-size: .8125rem; color: var(--agwp-ink2); }
#top .agwp-showcase .agwp-showcase__txt .agwp-showcase__meta { font: 500 11px/1.4 var(--agwp-font-mono); color: var(--agwp-ink2); }

/* PageSpeed-Ring */
#top .agwp-showcase .agwp-showcase__ring {
	--ring: #22C55E;
	--ring-text: #16A34A;
	position: relative;
	flex: none;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: conic-gradient(var(--ring) 0 var(--score), var(--agwp-surf) var(--score) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}
#top .agwp-showcase .agwp-showcase__ring--mid { --ring: #F59E0B; --ring-text: #D97706; }
#top .agwp-showcase .agwp-showcase__ring--bad { --ring: #E5484D; --ring-text: #DC2626; }
#top .agwp-showcase .agwp-showcase__ring > span {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--agwp-bg2);
	display: flex;
	align-items: center;
	justify-content: center;
	font: 800 20px/1 var(--agwp-font-body);
	color: var(--ring-text);
}

/* Domain-Pille */
#top .agwp-showcase .agwp-showcase__domain {
	position: absolute;
	right: 40px;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: var(--agwp-r-pill);
	background: var(--agwp-acc);
	color: var(--agwp-onacc);
	font: 800 .8125rem/1.2 var(--agwp-font-body);
	text-decoration: none;
	box-shadow: 0 12px 30px var(--agwp-glow);
}
#top .agwp-showcase a.agwp-showcase__domain:hover { color: var(--agwp-onacc); transform: translateY(-1px); }
#top .agwp-showcase .agwp-showcase__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--agwp-onacc);
	animation: agwp-pulse 2.4s infinite;
}

@media (max-width: 560px) {
	#top .agwp-showcase .agwp-showcase__badge--top { right: 8px; }
	#top .agwp-showcase .agwp-showcase__badge--score { left: 0; }
	#top .agwp-showcase .agwp-showcase__domain { right: 28px; bottom: 76px; }
}

/* ---- Problem-Karten ---- */
#top .agwp-problems {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
@media (max-width: 560px) {
	#top .agwp-problems { grid-template-columns: 1fr; }
}

#top .agwp-problems .agwp-problem {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 26px;
	border-radius: var(--agwp-r-lg);
	background: var(--agwp-bg);
	border: 1px solid var(--agwp-line);
	transition: transform .25s, border-color .25s;
}
#top .agwp-problems .agwp-problem:hover { transform: translateY(-4px); border-color: var(--agwp-acc); }

#top .agwp-problems .agwp-problem__head { display: flex; justify-content: space-between; align-items: center; }
#top .agwp-problems .agwp-problem__icon {
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: var(--agwp-accsoft);
	color: var(--agwp-accink);
	display: flex;
	align-items: center;
	justify-content: center;
	font: 600 17px/1 var(--agwp-font-mono);
}
#top .agwp-problems .agwp-problem__num { font: 500 var(--agwp-fs-meta)/1.4 var(--agwp-font-mono); color: var(--agwp-ink2); }

#top .agwp-problems .agwp-problem__q {
	margin: 0;
	font-family: var(--agwp-font-head);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -.015em;
	color: var(--agwp-ink);
	text-wrap: balance;
}

#top .agwp-problems .agwp-problem__meter { display: flex; flex-direction: column; gap: 6px; }
#top .agwp-problems .agwp-problem__mhead {
	display: flex;
	justify-content: space-between;
	font: 500 11px/1.4 var(--agwp-font-mono);
	color: var(--agwp-ink2);
}
#top .agwp-problems .agwp-problem__mval { color: var(--agwp-accink); }
#top .agwp-problems .agwp-problem__track { height: 6px; border-radius: var(--agwp-r-pill); background: var(--agwp-surf); overflow: hidden; }
#top .agwp-problems .agwp-problem__track > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #2464D8 0%, #1DA8EB 55%, #67D9E9 100%);
}

#top .agwp-problems .agwp-problem__solution {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: auto 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--agwp-line);
	font-size: var(--agwp-fs-small);
	line-height: 1.5;
	color: var(--agwp-ink2);
}
#top .agwp-problems .agwp-problem__solution::before {
	content: "\2713";
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--agwp-acc);
	color: var(--agwp-onacc);
	font: 800 12px/20px var(--agwp-font-body);
	text-align: center;
}
#top .agwp-problems .agwp-problem__solution strong { color: var(--agwp-ink); font-weight: 700; }

/* ---- Showcase fuellt die Spaltenhoehe (wie Vorlage) ----
   Voraussetzung: Enfold-Spalten mit "gleicher Hoehe" (als Tabelle). Die Spaltenreihe wird dann
   als Flex-Reihe gestreckt, das Bild richtet sich nach der Hoehe der Karten-Spalte.
   Mobil (Spalten untereinander) gilt wieder die Mindesthoehe. */
@media only screen and (min-width: 768px) {
	#top .flex_column_table:has(.agwp-showcase) { display: flex; align-items: stretch; }
	#top .flex_column_table:has(.agwp-showcase) > .flex_column { display: flex; flex-direction: column; justify-content: center; }
	#top .flex_column_table:has(.agwp-showcase) > .flex_column:has(.agwp-showcase) { justify-content: stretch; }
	#top .flex_column:has(.agwp-showcase) :is(section, div):has(.agwp-showcase) {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		width: 100%;
	}
	#top .flex_column:has(.agwp-showcase) .agwp-showcase { flex: 1 1 auto; height: auto; }
}