/* Karten, Kacheln, Schritte, Medien
   Klassen an Enfold-Spalten (Custom CSS Class):
   agwp-card              Karte (weiss, Rahmen, gross gerundet)
   agwp-card agwp-card--surf  Karte auf Grau
   agwp-card agwp-card--sm    kleine Kachel (z. B. "Persoenlich & direkt")
   agwp-card agwp-card--hover Hover-Effekt (nur fuer verlinkte Karten)
   agwp-step              Prozessschritt mit Akzentlinie
   agwp-media             Bild mit Rundung + Rahmen (Enfold-Bild)          */

#top .flex_column.agwp-card,
#top .agwp-card {
	background: var(--agwp-bg2);
	border: 1px solid var(--agwp-line);
	border-radius: var(--agwp-r-lg);
	padding: clamp(24px, 3vw, 34px);
	transition: transform .25s, border-color .25s, box-shadow .25s;
}
#top .flex_column.agwp-card--surf,
#top .agwp-card--surf { background: var(--agwp-surf); border-color: transparent; border-radius: var(--agwp-r-xl); }
#top .flex_column.agwp-card--sm,
#top .agwp-card--sm {
	border-radius: var(--agwp-r-md);
	padding: 18px 20px;
	font-weight: 700;
	color: var(--agwp-ink);
}
#top .flex_column.agwp-card--hover:hover,
#top .agwp-card--hover:hover {
	transform: translateY(-4px);
	border-color: var(--agwp-acc);
	box-shadow: 0 24px 50px -28px var(--agwp-glow);
}
#top .agwp-card > :last-child,
#top .agwp-card .avia_textblock > :last-child { margin-bottom: 0; }

/* Durchgestrichene "vorher"-Pille: <span class="agwp-strike">Design zuerst, SEO irgendwann</span> */
#top .agwp-strike {
	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-strike::before { content: "\2715"; color: var(--agwp-danger); font-weight: 800; text-decoration: none; display: inline-block; }

/* Loesungszeile unten in Problem-Karten: <p class="agwp-solution"><strong>Loesung:</strong> ...</p> */
#top .agwp-solution {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid var(--agwp-line);
	font-size: var(--agwp-fs-small);
	color: var(--agwp-ink2);
}
#top .agwp-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;
}

/* [agwp_meter label="" value="" percent=""] */
.agwp-meter { display: flex; flex-direction: column; gap: 6px; margin: 16px 0; }
#top .agwp-meter .agwp-meter__head {
	display: flex;
	justify-content: space-between;
	font-family: var(--agwp-font-mono);
	font-size: 11px;
	font-weight: 500;
	color: var(--agwp-ink2);
}
#top .agwp-meter .agwp-meter__val { color: var(--agwp-accink); }
.agwp-meter__track { height: 6px; border-radius: var(--agwp-r-pill); background: var(--agwp-surf); overflow: hidden; }
.agwp-meter__track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2464D8 0%, #1DA8EB 55%, #67D9E9 100%); }

/* Prozessschritte */
#top .flex_column.agwp-step,
#top .agwp-step { border-top: 2px solid var(--agwp-acc); padding-top: 22px; }
#top .agwp-num {
	font-family: var(--agwp-font-head);
	font-size: 3.5rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.04em;
	color: var(--agwp-accink);
	margin-bottom: 18px;
}
#top .agwp-num--badge {
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
	background: var(--agwp-grad);
	color: #fff;
	font: 800 1rem/1 var(--agwp-font-body);
	letter-spacing: 0;
	box-shadow: 0 10px 24px var(--agwp-glow);
}

/* Medien */
#top .agwp-media img,
#top .agwp-media .avia_image {
	border-radius: var(--agwp-r-lg);
	border: 1px solid var(--agwp-line);
	overflow: hidden;
}
#top .agwp-media--portrait img { border-radius: 32px; aspect-ratio: 4 / 5; object-fit: cover; }

/* ---- Kennzahlen (z. B. Ergebnisse einer Case Study) ----
   Spalte: agwp-card | Textbloecke: agwp-stat (Zahl mit Verlauf), agwp-stat-label, agwp-stat-note
   Auch als Spezielle Ueberschrift nutzbar: Custom CSS Class agwp-stat */
#top #wrap_all .agwp-stat,
#top #wrap_all .agwp-stat :is(p, .av-special-heading-tag) {
	margin: 0;
	padding: 0;
	font-family: var(--agwp-font-head);
	font-size: clamp(2.75rem, 4.4vw, 4rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.04em;
}
#top #wrap_all .agwp-stat :is(p, .av-special-heading-tag) {
	display: inline-block;
	max-width: 100%;
	white-space: nowrap;   /* "+140 %" nicht umbrechen */
	padding-bottom: .06em; /* Unterlaengen nicht abschneiden */
	background: linear-gradient(90deg, #2464D8 0%, #1DA8EB 60%, #67D9E9 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
#top #wrap_all .agwp-stat.av-special-heading { padding-bottom: 0; }

#top #wrap_all .agwp-stat-label,
#top #wrap_all .agwp-stat-label p {
	margin: 18px 0 0;
	font-family: var(--agwp-font-body);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--agwp-ink);
}
#top #wrap_all .agwp-stat-label p { margin: 0; }

#top #wrap_all .agwp-stat-note,
#top #wrap_all .agwp-stat-note p {
	margin: 10px 0 0;
	font-size: .875rem;
	line-height: 1.5;
	color: var(--agwp-ink2);
}
#top #wrap_all .agwp-stat-note p { margin: 0; }