/*
 * Werte aus getComputedStyle gegen den ds-block der Originalseite gelesen
 * (22.08.2026), nicht geschaetzt.
 *
 * Zwei Dinge, die hier absichtlich so sind:
 *
 * 1. Die Datei heisst nicht frontend.css. Beaver Builder wuerde sie sonst in
 *    sein kompiliertes Layout-CSS backen (<id>-layout.css). Das wird nur beim
 *    Speichern der Seite neu erzeugt, und ohne Shell auf dem Server laesst
 *    sich der Cache nicht leeren - eine CSS-Aenderung waere unsichtbar.
 *
 * 2. Jede Regel ist mit .agps-outlets qualifiziert. Das ist keine Kosmetik:
 *    In bereits kompilierten Layout-CSS-Dateien stecken noch Regeln aus einer
 *    frueheren Fassung dieses Moduls, und die werden nach dieser Datei
 *    geladen. Bei gleicher Spezifitaet wuerden sie gewinnen. Die Qualifizierung
 *    macht diese Datei unabhaengig davon, wann BB seinen Cache erneuert.
 */

section.agps-outlets {
	--agps-accent: #00b0f0;
	--agps-heading: #1a1c20;
	--agps-body: #40464d;
	--agps-line: #e2e6e8;
	--agps-placeholder: #eef1f2;
	--agps-cols: 3;

	background: #fff;
	border-radius: 5px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
	color: #0d0f13;
	padding: 44px 40px;
}

.agps-outlets .agps-outlets__title {
	font-family: Oswald, system-ui, sans-serif;
	font-weight: 700;
	font-size: 26.4px;
	line-height: 36.96px;
	text-transform: uppercase;
	text-align: center;
	color: var(--agps-accent);
	margin: 0;
}

.agps-outlets .agps-outlets__intro {
	font-family: Barlow, system-ui, sans-serif;
	font-weight: 400;
	font-size: 14.72px;
	line-height: 22.816px;
	text-align: center;
	color: var(--agps-body);
	max-width: 640px;
	margin: 10px auto 0;
}

.agps-outlets .agps-outlets__intro p {
	margin: 0;
}

.agps-outlets .agps-outlets__empty {
	font-family: Barlow, system-ui, sans-serif;
	color: var(--agps-body);
	text-align: center;
	margin: 0;
}

.agps-outlets .agps-outlets__grid {
	display: grid;
	grid-template-columns: repeat(var(--agps-cols), minmax(0, 1fr));
	gap: 20px;
	list-style: none;
	margin: 30px 0 0;
	padding: 0;
}

.agps-outlets .agps-outlet {
	display: flex;
	flex-direction: column;
	background: transparent;
	border: 1px solid var(--agps-line);
	border-radius: 6px;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.agps-outlets .agps-outlet::before,
.agps-outlets .agps-outlet::marker {
	content: none;
}

.agps-outlets .agps-outlet__img {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
	background: var(--agps-placeholder);
}

.agps-outlets .agps-outlet__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px;
}

.agps-outlets .agps-outlet__name {
	font-family: Oswald, system-ui, sans-serif;
	font-weight: 700;
	font-size: 14.72px;
	line-height: 18.4px;
	text-transform: uppercase;
	color: var(--agps-heading);
	margin: 0;
}

.agps-outlets .agps-outlet__place {
	font-family: Barlow, system-ui, sans-serif;
	font-weight: 400;
	font-size: 12.8px;
	line-height: 21.12px;
	color: var(--agps-body);
	margin: 0;
}

.agps-outlets .agps-outlet__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}

.agps-outlets .agps-outlet__links li {
	margin: 0;
	padding: 0;
}

.agps-outlets .agps-outlet__link {
	display: inline-block;
	font-family: Oswald, system-ui, sans-serif;
	font-weight: 500;
	font-size: 9.6px;
	line-height: 15.84px;
	letter-spacing: 0.768px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--agps-heading);
	background: transparent;
	border: 1px solid var(--agps-line);
	border-radius: 100px;
	padding: 6px 12px;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.agps-outlets .agps-outlet__link:hover,
.agps-outlets .agps-outlet__link:focus-visible {
	color: #fff;
	background: var(--agps-accent);
	border-color: var(--agps-accent);
	text-decoration: none;
}

.agps-outlets .agps-outlet__cp {
	font-family: Barlow, system-ui, sans-serif;
	font-weight: 400;
	font-size: 11.84px;
	line-height: 19.536px;
	color: var(--agps-body);
	border-top: 1px solid var(--agps-line);
	margin: 12px 0 0;
	padding: 10px 0 0;
}

/* Die Karten sind schmal; unter 1024 px passen hoechstens zwei nebeneinander. */
@media (max-width: 1024px) {
	.agps-outlets .agps-outlets__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	section.agps-outlets {
		padding: 28px 20px;
	}

	.agps-outlets .agps-outlets__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}