/* [agwp_diffs] + [agwp_visual] – "Warum anders"-Bereich
   Empfohlen: Farbsektion "agwp-sec--surf", Spalten 1/2 + 1/2 (gleiche Hoehe),
   links [agwp_diffs], rechts [agwp_visual]. */

/* ---- Karten ---- */
#top .agwp-diffs { display: flex; flex-direction: column; gap: 14px; }

#top .agwp-diffs .agwp-diff {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 20px;
	padding: 26px 28px;
	border-radius: var(--agwp-r-lg);
	background: var(--agwp-bg2);
	border: 1px solid var(--agwp-line);
	transition: transform .25s, border-color .25s, box-shadow .25s;
}
#top .agwp-diffs .agwp-diff:hover {
	transform: translateX(6px);
	border-color: var(--agwp-acc);
	box-shadow: 0 20px 50px -24px var(--agwp-glow);
}

#top .agwp-diffs .agwp-diff__num {
	width: 48px;
	height: 48px;
	border-radius: 16px;
	background: var(--agwp-grad);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 800 1rem/1 var(--agwp-font-body);
	box-shadow: 0 10px 24px var(--agwp-glow);
}

#top .agwp-diffs .agwp-diff__old {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 10px;
	border-radius: var(--agwp-r-pill);
	background: var(--agwp-surf);
	font-size: .8125rem;
	line-height: 1.4;
	color: var(--agwp-ink2);
	text-decoration: line-through;
	text-decoration-color: color-mix(in oklab, var(--agwp-ink2) 60%, transparent);
}
#top .agwp-diffs .agwp-diff__old::before {
	content: "\2715";
	display: inline-block;
	color: var(--agwp-danger);
	font-weight: 800;
	text-decoration: none;
}

#top .agwp-diffs .agwp-diff__title {
	margin: 12px 0 8px;
	font-family: var(--agwp-font-head);
	font-size: clamp(1.3125rem, 1.9vw, 1.5625rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--agwp-ink);
	text-wrap: balance;
}
#top .agwp-diffs .agwp-diff__old + .agwp-diff__title { margin-top: 12px; }
#top .agwp-diffs .agwp-diff__body > .agwp-diff__title:first-child { margin-top: 0; }
#top .agwp-diffs .agwp-diff__text { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--agwp-ink2); text-wrap: pretty; }

@media (max-width: 560px) {
	#top .agwp-diffs .agwp-diff { grid-template-columns: 1fr; gap: 14px; padding: 22px; }
	#top .agwp-diffs .agwp-diff:hover { transform: none; }
}

/* ---- Visual ---- */
#top .agwp-visual {
	position: relative;
	margin: 0;
	height: 100%;
	min-height: 420px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 72px 16px 86px;
	border-radius: var(--agwp-r-xl);
	overflow: hidden;
	background: #F5F9FE;
	border: 1px solid var(--agwp-line);
}
#top .agwp-visual .agwp-visual__img {
	display: block;
	width: 100%;
	max-width: 640px;
	height: auto;
	-webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 64%, transparent 100%);
	mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 64%, transparent 100%);
}

#top .agwp-visual .agwp-visual__badge {
	position: absolute;
	top: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px 10px 10px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #0D1520;
}
#top .agwp-visual .agwp-visual__badge--left  { left: 20px;  box-shadow: 0 14px 34px -14px rgba(57, 79, 255, .35); }
#top .agwp-visual .agwp-visual__badge--right { right: 20px; box-shadow: 0 14px 34px -14px rgba(29, 168, 235, .4); }

#top .agwp-visual .agwp-visual__icon {
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 .75rem/1 var(--agwp-font-mono);
}
#top .agwp-visual .agwp-visual__badge--left  .agwp-visual__icon { background: #EEE9FF; color: #7955FF; }
#top .agwp-visual .agwp-visual__badge--right .agwp-visual__icon { background: #E1F1FC; color: #2464D8; }

#top .agwp-visual .agwp-visual__txt { display: flex; flex-direction: column; line-height: 1.2; }
#top .agwp-visual .agwp-visual__txt strong { font-size: .875rem; font-weight: 700; color: #0D1520; }
#top .agwp-visual .agwp-visual__txt > span { font-size: .75rem; color: #4A5563; }

#top .agwp-visual .agwp-visual__pill {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 18px 10px 10px;
	border-radius: var(--agwp-r-pill);
	background: #0D1520;
	color: #fff;
	font-size: .875rem;
	font-weight: 700;
	white-space: nowrap;
	box-shadow: 0 16px 40px -12px rgba(13, 21, 32, .5);
}
#top .agwp-visual .agwp-visual__num {
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 50%;
	background: var(--agwp-grad);
	display: flex;
	align-items: center;
	justify-content: center;
	font: 800 .75rem/1 var(--agwp-font-body);
	color: #fff;
	animation: agwp-pulse 2.4s infinite;
}

@media (max-width: 560px) {
	#top .agwp-visual { padding: 86px 12px 90px; }
	#top .agwp-visual .agwp-visual__badge { top: 14px; }
	#top .agwp-visual .agwp-visual__badge--left  { left: 12px; }
	#top .agwp-visual .agwp-visual__badge--right { right: 12px; }
	#top .agwp-visual .agwp-visual__txt > span { display: none; }
	#top .agwp-visual .agwp-visual__pill { white-space: normal; width: calc(100% - 24px); justify-content: center; }
}

/* ---- Visual fuellt die Spaltenhoehe (Enfold-Spalten mit gleicher Hoehe) ---- */
@media only screen and (min-width: 768px) {
	#top .flex_column_table:has(.agwp-visual) { display: flex; align-items: stretch; }
	#top .flex_column_table:has(.agwp-visual) > .flex_column { display: flex; flex-direction: column; justify-content: center; }
	#top .flex_column:has(.agwp-visual) :is(section, div):has(.agwp-visual) {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		width: 100%;
	}
	#top .flex_column:has(.agwp-visual) .agwp-visual { flex: 1 1 auto; height: auto; }
}

/* ---- Varianten: [agwp_diffs style="problem" | "solution"] ----
   Kompakte Karten auf Grau, kleines rundes Symbol, kein Hover-Effekt, keine "vorher"-Pille noetig */
#top .agwp-diffs--problem,
#top .agwp-diffs--solution { gap: 12px; }
#top :is(.agwp-diffs--problem, .agwp-diffs--solution) .agwp-diff {
	grid-template-columns: 30px minmax(0, 1fr);
	gap: 16px;
	padding: 20px 22px;
	border-radius: var(--agwp-r-md);
	background: var(--agwp-bg);
	transform: none;
	box-shadow: none;
}
#top :is(.agwp-diffs--problem, .agwp-diffs--solution) .agwp-diff:hover { transform: none; box-shadow: none; border-color: var(--agwp-line); }
#top :is(.agwp-diffs--problem, .agwp-diffs--solution) .agwp-diff__num {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	font: 700 .875rem/1 var(--agwp-font-body);
	box-shadow: none;
}
#top .agwp-diffs--problem .agwp-diff__num  { background: color-mix(in oklab, var(--agwp-danger) 14%, transparent); color: #C2272D; }
#top .agwp-diffs--solution .agwp-diff__num { background: color-mix(in oklab, var(--agwp-success) 16%, transparent); color: #15803D; }
html[data-theme="dark"] #top .agwp-diffs--problem .agwp-diff__num  { color: #FF8A8E; }
html[data-theme="dark"] #top .agwp-diffs--solution .agwp-diff__num { color: #5EE08F; }
#top :is(.agwp-diffs--problem, .agwp-diffs--solution) .agwp-diff__title {
	margin: 4px 0 6px;
	font-family: var(--agwp-font-body);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0;
}
#top :is(.agwp-diffs--problem, .agwp-diffs--solution) .agwp-diff__text { font-size: .96875rem; }

/* Eigenes Zeichen (icon="…") im Standard-Stil: gleiche Groesse wie die Nummer */
#top .agwp-diffs--icon:not(.agwp-diffs--problem):not(.agwp-diffs--solution) .agwp-diff__num { font-size: 1.125rem; }