/*
 * GOAT Ecom, Blog.
 *
 * Artikeltext laeuft ueber .ge-fliess aus base.css, dieselbe
 * Typografie-Absicherung wie bei den eingespielten Rechtstexten.
 * Hier nur, was eigens fuer den Blog dazukommt: Kopfzeile mit Bild,
 * Uebersichtskarten und die drei SVG-Diagramme.
 */

/* -------------------------------------------------------------------
 * Artikelkopf
 * ----------------------------------------------------------------- */
.ge-beitrag__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ge-space-2xs) var(--ge-space-m);
	margin-block-start: var(--ge-space-m);
	font-family: var(--ge-font-text);
	font-weight: var(--ge-gewicht-text-kraeftig);
	font-size: var(--ge-label);
	letter-spacing: var(--ge-laufweite-label);
	text-transform: uppercase;
	color: var(--ge-text-leise);
}

.ge-beitrag__meta span + span::before {
	content: "·";
	margin-inline-end: var(--ge-space-m);
	color: var(--ge-linie);
}

.ge-beitrag__bild {
	position: relative;
	max-height: 60vh;
	overflow: hidden;
	margin-block-start: var(--ge-space-l);
	background: var(--ge-flaeche-2);
	border: var(--ge-haarlinie) solid var(--ge-linie);
	border-radius: var(--ge-radius-flaeche);
}

.ge-beitrag__bild-img {
	display: block;
	width: 100%;
	height: auto;
}

/* -------------------------------------------------------------------
 * Autorenblock, am Ende des Artikeltexts
 * ----------------------------------------------------------------- */
.ge-beitrag__autor {
	display: flex;
	align-items: center;
	gap: var(--ge-space-m);
	margin-block-start: var(--ge-space-xl);
	padding-block-start: var(--ge-space-l);
	border-block-start: var(--ge-haarlinie) solid var(--ge-linie);
}

.ge-beitrag__autor-bild {
	width: 64px;
	height: 64px;
	flex: none;
	border-radius: 50%;
	object-fit: cover;
}

.ge-beitrag__autor-label {
	color: var(--ge-text-leise);
	margin: 0;
}

.ge-beitrag__autor-name {
	font-weight: var(--ge-gewicht-text-kraeftig);
	margin: 0;
}

.ge-beitrag__autor-rolle {
	color: var(--ge-text-leise);
	margin: 0;
}

/* -------------------------------------------------------------------
 * FAQ-Block, am Ende des Artikeltexts
 * ----------------------------------------------------------------- */
.ge-beitrag__faq {
	margin-block-start: var(--ge-space-2xl);
}

/* -------------------------------------------------------------------
 * Uebersicht: Karten ohne Bild
 * ----------------------------------------------------------------- */
.ge-blog-karten {
	display: grid;
	gap: var(--ge-space-l);
	margin-block-start: var(--ge-space-xl);
}

@media (min-width: 700px) {
	.ge-blog-karten {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ge-blog-karte {
	border-block-start: var(--ge-haarlinie) solid var(--ge-akzent);
	padding-block-start: var(--ge-space-s);
}

.ge-blog-karte__kategorie {
	color: var(--ge-text-leise);
	margin-block-end: var(--ge-space-2xs);
}

.ge-blog-karte__titel {
	margin: 0;
}

.ge-blog-karte__link {
	color: var(--ge-text);
}

.ge-blog-karte__link:hover,
.ge-blog-karte__link:focus-visible {
	color: var(--ge-akzent);
}

.ge-blog-karte__meta {
	margin-block-start: var(--ge-space-xs);
	color: var(--ge-text-leise);
}

/* -------------------------------------------------------------------
 * Diagramme, inline im Artikeltext
 *
 * Nur Theme-Tokens, kein Inline-Style: jede Fill-/Stroke-Farbe kommt
 * ueber eine Klasse, nicht ueber ein style-Attribut im SVG.
 * ----------------------------------------------------------------- */
.ge-diagramm {
	margin: var(--ge-space-xl) 0;
}

.ge-diagramm svg {
	display: block;
	width: 100%;
	height: auto;
}

.ge-diagramm__flaeche {
	fill: var(--ge-flaeche-2);
}

.ge-diagramm__linie {
	stroke: var(--ge-linie);
	fill: none;
}

.ge-diagramm__akzentlinie {
	stroke: var(--ge-akzent);
	fill: none;
}

.ge-diagramm__ueberschrift {
	font-family: var(--ge-font-text);
	font-weight: 600;
	font-size: 16px;
	fill: var(--ge-akzent);
}

.ge-diagramm__text {
	font-family: var(--ge-font-text);
	font-weight: 400;
	font-size: 14px;
	fill: var(--ge-text);
}

.ge-diagramm__text--kraeftig {
	font-weight: 600;
	fill: var(--ge-text);
}

.ge-diagramm__hinweis {
	font-family: var(--ge-font-text);
	font-weight: 400;
	font-size: 12px;
	fill: var(--ge-text-leise);
}

.ge-diagramm__haken {
	stroke: var(--ge-akzent);
	fill: none;
}

.ge-diagramm__kreuz {
	stroke: var(--ge-fehler);
	fill: none;
}

.ge-diagramm__pfeilkopf {
	fill: var(--ge-linie);
}

.ge-diagramm__pfeilkopf--akzent {
	fill: var(--ge-akzent);
}