/* =====================================================================
   Blog v2 — Entwürfe zur Abnahme (Daniel Ackermann, 05.09.2026)
   Herkunft: 1:1-Kopie von downloads/media/acko/blog/quelle/blog.css,
   MINUS die Regeln für den nachgebauten Header (.blg-header*, .blg-nav*,
   .blg-logo*) — die Seiten nutzen den echten Elementor-Header/-Footer via
   get_header()/get_footer() (inc/entwuerfe-v2.php).
   PLUS --header-h (157px) und die Hero-Überlappung analog zu .pv2-hero in
   css/projekte-v2.css (margin-top: -header-h, padding-top: +header-h),
   damit .blg-hero wie /projekte-v2/ hinter dem transparenten Header sitzt.

   Eigene Handschrift auf Basis der Projekte-v2-Tokens: dunkel, Farbe nur
   Ackermann-Cyan #00ABD7 auf Grau/Schwarz. Fonts Manrope (Display) + Inter
   (Text). Breakpoints 767 / 1023 / 1199.
   ===================================================================== */

.blg {
	--c-canvas: #111318;
	--c-surface: #1E2025;
	--c-panel: #262930;
	--c-text: #FFFFFF;
	--c-text-2: #E3E5E8;
	--c-text-3: #B4B8BF;
	--c-cyan: #00ABD7;
	--c-cyan-hover: #33C4E8;
	--c-line: rgba(255, 255, 255, 0.14);
	--c-line-soft: rgba(255, 255, 255, 0.09);
	--r-sm: 8px;
	--r-md: 14px;
	--r-lg: 20px;
	--f-display: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-text: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	--t-ui: 200ms;
	--w-max: 1290px;
	--w-read: 700px;
	--gutter: 30px;
	--header-h: 157px; /* Elementor-Header liegt über dem Hero, wie auf /projekte-v2/ */

	/* Neu 06.09.2026 fuers Artikel-Detail-Raster (Aufhellung wirkt bewusst
	   auf alle drei Blog-Entwuerfe, die Grid-/Hell-Tokens nur auf den
	   Beitrag): helle Flaechen fuer Callout/Autorbox/Statistik/Karten-Tag,
	   plus die Grid-Spaltenbreiten und der Sticky-Offset der TOC. */
	--c-light: #F3F4F6;
	--c-light-2: #E6E8EC;
	--c-on-light: #14161A;
	--c-on-light-2: #4B5058;
	--w-aside: 240px;
	--w-content: 1000px;
	--toc-top: calc(var(--header-h) + 24px);

	position: relative;
	isolation: isolate;
	background: var(--c-canvas);
	color: var(--c-text);
	font-family: var(--f-text);
	overflow: clip;
}

.blg *,
.blg *::before,
.blg *::after { box-sizing: border-box; }

.blg .sr-only {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------
   Hintergrund — viewport-fest, Radialverläufe, Gitter, Ring
   --------------------------------------------------------------------- */

.blg__bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	background:
		radial-gradient(ellipse 90% 55% at 50% 100%, rgba(0, 171, 215, 0.08), transparent 60%),
		linear-gradient(180deg, #0B0C0E 0%, #121316 55%, #0B0C0E 100%);
}

.blg__bg-glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(40px);
}

.blg__bg-glow--a {
	width: 56vw; height: 56vw; max-width: 760px; max-height: 760px;
	right: -16vw; top: -18vw;
	background: radial-gradient(circle, rgba(0, 171, 215, 0.18) 0%, rgba(0, 171, 215, 0.05) 42%, transparent 68%);
}

.blg__bg-glow--b {
	width: 50vw; height: 50vw; max-width: 620px; max-height: 620px;
	left: -14vw; bottom: 6vh;
	background: radial-gradient(circle, rgba(0, 171, 215, 0.12) 0%, rgba(0, 171, 215, 0.03) 45%, transparent 70%);
}

.blg__bg-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 22%, #000 10%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 55% at 50% 22%, #000 10%, transparent 75%);
}

.blg__bg-ring {
	position: absolute;
	width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
	left: -12vw; bottom: -16vw;
	color: rgba(0, 171, 215, 0.14);
}

/* ---------------------------------------------------------------------
   Gemeinsame Bausteine
   --------------------------------------------------------------------- */

.blg-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-cyan);
}

.blg-eyebrow::before {
	content: "";
	width: 16px; height: 1px;
	background: var(--c-cyan);
	opacity: 0.7;
}

.blg .blg-btn,
.blg .blg-btn:visited {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	border: 1px solid var(--c-cyan);
	border-radius: 999px;
	background: transparent;
	color: var(--c-cyan);
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--t-ui), color var(--t-ui), border-color var(--t-ui), transform var(--t-ui);
}

.blg .blg-btn:hover,
.blg .blg-btn:focus-visible {
	background: var(--c-cyan);
	color: #0B0C0E;
	outline: none;
}

.blg .blg-btn--solid,
.blg .blg-btn--solid:visited { background: var(--c-cyan); color: #0B0C0E; }
.blg .blg-btn--solid:hover,
.blg .blg-btn--solid:focus-visible { background: var(--c-cyan-hover); border-color: var(--c-cyan-hover); }

.blg-btn__arrow { transition: transform var(--t-ui); }
.blg .blg-btn:hover .blg-btn__arrow { transform: translateX(4px); }

/* Kategorie-Chip auf Bildern */
.blg-catchip {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(11, 12, 14, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(6px);
	color: var(--c-text);
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 0.68rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	white-space: nowrap;
}

.blg-catchip--cyan {
	background: rgba(0, 171, 215, 0.16);
	border-color: rgba(0, 171, 215, 0.5);
	color: var(--c-cyan-hover);
}

/* Tag-Chips */
.blg-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.blg .blg-tag,
.blg .blg-tag:visited {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid var(--c-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.03);
	color: var(--c-text-2);
	font-size: 0.82rem;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color var(--t-ui), color var(--t-ui), background var(--t-ui);
}

.blg .blg-tag:hover,
.blg .blg-tag:focus-visible {
	border-color: var(--c-cyan);
	color: var(--c-cyan);
	background: rgba(0, 171, 215, 0.08);
	outline: none;
}

/* Avatar-Monogramm */
.blg-avatar {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(155deg, #133038 0%, #0B0C0E 70%);
	border: 1px solid rgba(0, 171, 215, 0.35);
	color: var(--c-cyan-hover);
	font-family: var(--f-display);
	font-weight: 800;
	letter-spacing: 0.02em;
}

.blg-avatar--sm { width: 28px; height: 28px; font-size: 0.66rem; }
.blg-avatar--md { width: 44px; height: 44px; font-size: 0.92rem; }
.blg-avatar--lg { width: 92px; height: 92px; font-size: 1.9rem; border-width: 2px; }

/* Meta-Zeile: Autor · Datum · Lesezeit */
.blg-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 14px;
	margin: 0;
	color: var(--c-text-3);
	font-size: 0.86rem;
}

.blg-meta__author {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--c-text-2);
	font-weight: 600;
}

.blg-meta__dot { opacity: 0.5; }

/* ---------------------------------------------------------------------
   Hero (Übersicht) — margin-top/padding-top wie .pv2-hero: der Hero rutscht
   um --header-h nach oben unter den transparenten Elementor-Header, der
   Innenabstand gleicht das wieder aus (Prinzip aus css/projekte-v2.css).
   --------------------------------------------------------------------- */

.blg-hero {
	margin-top: calc(-1 * var(--header-h));
	padding: calc(var(--header-h) + 76px) var(--gutter) 44px;
}

.blg-hero__inner {
	max-width: var(--w-max);
	margin: 0 auto;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
}

.blg-hero__title {
	margin: 0 0 18px;
	font-family: var(--f-display);
	font-weight: 800;
	font-size: clamp(2.6rem, 5.4vw, 4.2rem);
	line-height: 0.98;
	letter-spacing: -0.02em;
}

.blg-hero__lead {
	margin: 0;
	max-width: 42em;
	font-size: clamp(1.02rem, 1.3vw, 1.15rem);
	line-height: 1.6;
	color: var(--c-text-2);
}

.blg-hero__stats {
	flex: 0 0 auto;
	display: flex;
	gap: 32px;
	padding-bottom: 6px;
}

.blg-hero__stat { text-align: right; }

.blg-hero__stat-n {
	display: block;
	font-family: var(--f-display);
	font-weight: 800;
	font-size: 1.7rem;
	color: var(--c-text);
	font-variant-numeric: tabular-nums;
}

.blg-hero__stat-l {
	display: block;
	margin-top: 2px;
	font-size: 0.76rem;
	color: var(--c-text-3);
}

/* ---------------------------------------------------------------------
   Filter
   --------------------------------------------------------------------- */

.blg-filter {
	padding: 0 var(--gutter) 40px;
}

.blg-filter__inner {
	max-width: var(--w-max);
	margin: 0 auto;
	padding-top: 26px;
	border-top: 1px solid var(--c-line-soft);
}

.blg-filter__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.blg-filter__head .blg-eyebrow { margin: 0; }

.blg-filter__status {
	margin: 0;
	font-size: 0.85rem;
	color: var(--c-text-3);
	font-variant-numeric: tabular-nums;
}

.blg-filter__status b { color: var(--c-text); font-weight: 600; }

.blg-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.blg-chip,
.blg-chip:hover,
.blg-chip:focus {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px;
	border: 1px solid var(--c-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.03);
	color: var(--c-text-2);
	font-family: var(--f-text);
	font-size: 0.87rem;
	line-height: 1.2;
	white-space: normal;
	cursor: pointer;
	transition: border-color var(--t-ui), color var(--t-ui), background var(--t-ui);
}

.blg-chip:hover,
.blg-chip:focus-visible {
	border-color: var(--c-cyan);
	color: var(--c-cyan);
	background: rgba(0, 171, 215, 0.08);
	outline: none;
}

.blg-chip.is-active,
.blg-chip.is-active:hover,
.blg-chip.is-active:focus {
	border-color: var(--c-cyan);
	background: var(--c-cyan);
	color: #0B0C0E;
}

.blg-chip__n {
	padding: 2px 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	font-size: 0.72rem;
	font-variant-numeric: tabular-nums;
	color: inherit;
}

.blg-chip.is-active .blg-chip__n { background: rgba(0, 0, 0, 0.18); }

.blg-chip--reset::before {
	content: "";
	width: 8px; height: 8px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.6;
}

/* ---------------------------------------------------------------------
   Aufmacher — Poster-Karte, Bild als Hintergrund mit Scrim
   --------------------------------------------------------------------- */

.blg-feature {
	padding: 0 var(--gutter) 56px;
}

.blg-feature__inner {
	max-width: var(--w-max);
	margin: 0 auto;
}

.blg-feature__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 560px;
	border-radius: var(--r-lg);
	border: 1px solid var(--c-line-soft);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background: var(--c-panel);
}

.blg-feature__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
}

.blg-feature__card:hover .blg-feature__img,
.blg-feature__card:focus-visible .blg-feature__img { transform: scale(1.02); }

.blg-feature__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(0deg, rgba(6, 7, 8, 0.94) 0%, rgba(6, 7, 8, 0.72) 30%, rgba(6, 7, 8, 0.18) 62%, transparent 78%),
		linear-gradient(90deg, rgba(6, 7, 8, 0.55) 0%, transparent 46%);
}

.blg-feature__label {
	position: absolute;
	top: 24px; left: 24px;
	display: flex;
	gap: 8px;
	align-items: center;
}

.blg-feature__num {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.55);
}

.blg-feature__body {
	position: relative;
	max-width: 720px;
	padding: 40px 44px 44px;
}

.blg-feature__eyebrow {
	margin: 0 0 14px;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-text-3);
}

.blg-feature__eyebrow strong { color: var(--c-cyan); }

.blg-feature__title {
	margin: 0 0 14px;
	font-family: var(--f-display);
	font-weight: 800;
	font-size: clamp(1.7rem, 3vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.blg-feature__teaser {
	margin: 0 0 22px;
	max-width: 52em;
	color: var(--c-text-2);
	font-size: 1.02rem;
	line-height: 1.55;
}

.blg-feature__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px 24px;
}

.blg-feature .blg-meta { color: rgba(216, 216, 216, 0.85); }
.blg-feature .blg-meta__author { color: #fff; }

/* ---------------------------------------------------------------------
   Karten-Grid
   --------------------------------------------------------------------- */

.blg-listwrap { padding: 0 var(--gutter) 20px; }

.blg-grid {
	max-width: var(--w-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 36px 32px;
}

.blg-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-lg);
	background: linear-gradient(180deg, rgba(32, 34, 39, 0.6), rgba(11, 12, 14, 0.6));
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 300ms ease, border-color var(--t-ui), box-shadow 300ms ease;
}

.blg-card:hover,
.blg-card:focus-visible {
	transform: translateY(-4px);
	border-color: rgba(0, 171, 215, 0.45);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 171, 215, 0.14);
	outline: none;
}

.blg-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--c-panel);
}

.blg-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

.blg-card:hover .blg-card__media img { transform: scale(1.04); }

.blg-card__chip {
	position: absolute;
	top: 14px; left: 14px;
	z-index: 1;
}

.blg-card__num {
	position: absolute;
	top: 16px; right: 16px;
	z-index: 1;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.75);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.blg-card__body {
	padding: 20px 22px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 12px;
}

.blg-card__title {
	margin: 0;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 1.14rem;
	line-height: 1.3;
	color: var(--c-text);
}

.blg-card:hover .blg-card__title { color: var(--c-cyan-hover); }

.blg-card__teaser {
	margin: 0;
	color: var(--c-text-3);
	font-size: 0.9rem;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blg-card__body .blg-meta { margin-top: auto; font-size: 0.8rem; }

/* CSS-Bild-Ersatz für Karten ohne Foto */
.blg-artfield {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.blg-artfield::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 85%);
	mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 85%);
}

.blg-artfield--backup { background: radial-gradient(ellipse 90% 90% at 30% 20%, rgba(0,171,215,0.28), transparent 60%), linear-gradient(155deg, #1B2A2E 0%, #0B0C0E 75%); }
.blg-artfield--dark { background: radial-gradient(ellipse 90% 90% at 70% 25%, rgba(0,171,215,0.22), transparent 60%), linear-gradient(200deg, #26221B 0%, #0B0C0E 75%); }

.blg-artfield__icon {
	position: relative;
	width: 30%;
	height: 30%;
	max-width: 84px;
	max-height: 84px;
	color: var(--c-cyan);
	filter: drop-shadow(0 0 22px rgba(0, 171, 215, 0.35));
}

/* ---------------------------------------------------------------------
   Pagination / Mehr laden
   --------------------------------------------------------------------- */

.blg-pagination {
	max-width: var(--w-max);
	margin: 8px auto 0;
	padding: 24px var(--gutter) 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.blg-pagination__status {
	margin: 0;
	color: var(--c-text-3);
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}

.blg-pagination__bar {
	width: 220px;
	height: 3px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}

.blg-pagination__bar span {
	display: block;
	height: 100%;
	width: 44%;
	background: var(--c-cyan);
	border-radius: 2px;
}

/* ---------------------------------------------------------------------
   Artikel-Detail — "OpenAI-Artikelraster" (Daniel Ackermann, 06.09.2026)
   Kopf + Cover liegen VOR dem Grid (eigene Full-Bleed-Logik). Danach
   .blg-article__body: ein CSS-Grid mit benannten Linien (full/wrap/
   aside/content), darin die sticky .blg-toc (grid-row: 1 / span 200) neben
   den Inhalts-Blöcken .blg-prose/.blg-callout (Spalte "content"),
   .blg-bleed (Spalte "full", Bild-/Kartenblöcke randlos) und .blg-wide
   (Spalte "wrap", Statistik-Streifen). Tags/Autorbox/Weiterlesen liegen
   NACH dem Grid, aber auf derselben "wrap"-Breite (1288px).
   --------------------------------------------------------------------- */

.blg-article__head {
	/* Erste Sektion der Beitragsseite (kein .blg-hero davor) — dieselbe
	   Header-Überlappung wie .blg-hero (siehe dort). */
	margin-top: calc(-1 * var(--header-h));
	padding: calc(var(--header-h) + 64px) var(--gutter) 0;
}

.blg-article__head-inner {
	max-width: 1288px;
	margin: 0 auto;
}

.blg-article__title {
	max-width: 18em;
	margin: 0 0 16px;
	font-family: var(--f-display);
	font-weight: 800;
	font-size: clamp(2.4rem, 4.6vw, 3.6rem);
	line-height: 1.08;
	letter-spacing: -0.015em;
}

.blg-article__subtitle {
	margin: 0 0 24px;
	max-width: 40em;
	color: var(--c-text-2);
	font-size: 1.12rem;
	line-height: 1.55;
}

.blg-article__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--c-line-soft);
}

.blg-article__meta .blg-meta { font-size: 0.9rem; }

/* Cover — randloser Full-Bleed, unabhaengig vom eingeschnuerten Kopf.
   100vw allein wuerde auf dem Desktop um die Breite der Bildlaufleiste
   ueberstehen (siehe .ao-testimonials in testimonials.css) — dieselbe
   Loesung: js/blog-v2.js setzt --ao-viewport-width auf die Fensterbreite
   OHNE Scrollleiste, 100vw bleibt nur der No-JS-Rueckfall. */
.blg-article__cover {
	position: relative;
	width: var(--ao-viewport-width, 100vw);
	margin: 36px 0 0;
	margin-left: calc(50% - (var(--ao-viewport-width, 100vw) / 2));
	margin-right: calc(50% - (var(--ao-viewport-width, 100vw) / 2));
	padding: 0;
	border-bottom: 1px solid var(--c-line-soft);
}

.blg-article__cover img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	border-radius: 0;
	border: 0;
}

/* ---- Seitenraster ab 1024px: aside | 48px Luecke | content, randlos
   ausbrechbar ueber "full" ------------------------------------------- */

.blg-article__body {
	display: grid;
	grid-template-columns:
		[full-start] minmax(var(--gutter), 1fr)
		[wrap-start aside-start] minmax(0, var(--w-aside)) [aside-end]
		48px
		[content-start] minmax(0, var(--w-content)) [content-end wrap-end]
		minmax(var(--gutter), 1fr) [full-end];
	padding-top: 48px;
}

/* ---- Sticky-Inhaltsmenü ---- */

.blg-toc {
	grid-column: aside;
	/* Kein grid-template-rows → das explizite Raster hat nur EINE Zeile, "1 / -1"
	   hiesse also nur Zeile 1, die dann auf Menue-Hoehe aufgeblasen wuerde
	   (gemessen 06.09.: 270px Luecke nach dem ersten Absatz). Ein grosser Span
	   verteilt die Hoehe ueber alle Inhaltszeilen; ueberzaehlige implizite
	   Zeilen bleiben leer und 0px hoch. */
	grid-row: 1 / span 200;
	align-self: start;
	position: sticky;
	z-index: 1; /* Bleed-/Wide-Bloecke (z-index 2) schieben sich beim Scrollen ueber das Menue, statt darunter durchzuscheinen */
	top: var(--toc-top);
	transition: opacity var(--t-ui) ease;
	max-height: calc(100vh - var(--toc-top) - 24px);
	overflow: auto;
	padding-bottom: 4px;
}

/* Waehrend ein randloser Block (Galerie, Karte, Statistik) die Menue-Hoehe
   passiert, blendet das JS das Menue aus — sonst scheint es in den
   transparenten Zonen des Blocks (Leiste mit Pfeilen, Raender) durch. */
.blg-toc.is-covered {
	opacity: 0;
	pointer-events: none;
}

.blg-toc summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 16px;
	list-style: none;
	cursor: default;
}

.blg-toc summary::-webkit-details-marker,
.blg-toc summary::marker { display: none; }

.blg-toc summary .blg-eyebrow { margin: 0; }

.blg-toc__chevron {
	display: none;
	flex: 0 0 auto;
	width: 13px; height: 13px;
	color: var(--c-text-3);
	transition: transform var(--t-ui);
}

.blg-toc[open] .blg-toc__chevron { transform: rotate(180deg); }

.blg-toc__progress {
	height: 2px;
	margin-bottom: 18px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}

.blg-toc__progress span {
	display: block;
	height: 100%;
	width: 0%;
	background: var(--c-cyan);
}

.blg-toc__list {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.blg-toc__list a {
	position: relative;
	display: block;
	padding: 8px 0 8px 16px;
	font-size: 0.92rem;
	line-height: 1.4;
	color: var(--c-text-3);
	text-decoration: none;
	transition: color 200ms;
}

.blg-toc__list a::before {
	content: "";
	position: absolute;
	left: 0; top: 8px; bottom: 8px;
	width: 2px;
	background: transparent;
	transition: background 200ms;
}

.blg-toc__list a:hover { color: var(--c-text-2); }

.blg-toc__list li.is-active > a { color: var(--c-text); }
.blg-toc__list li.is-active > a::before { background: var(--c-cyan); }

.blg-toc__divider {
	height: 1px;
	margin: 0 0 18px;
	background: var(--c-line-soft);
}

.blg-toc__share {
	display: flex;
	gap: 10px;
	margin-bottom: 18px;
}

.blg-toc__share-btn {
	position: relative;
	width: 36px; height: 36px;
	padding: 0; /* Theme-Button-Padding (8px 16px) wuerde das 16px-Icon auf 2px quetschen */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--c-line);
	border-radius: 50%;
	background: transparent;
	color: var(--c-text-2);
	font-family: var(--f-display);
	font-weight: 800;
	font-size: 0.72rem;
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--t-ui), color var(--t-ui);
}

.blg-toc__share-btn:hover,
.blg-toc__share-btn:focus-visible { border-color: var(--c-cyan); color: var(--c-cyan); outline: none; }

.blg-toc__share-btn svg { width: 16px; height: 16px; flex: 0 0 16px; }

.blg-toc__share-feedback {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 9px;
	border-radius: 6px;
	border: 1px solid var(--c-line);
	background: var(--c-panel);
	color: var(--c-text);
	font-size: 0.7rem;
	font-weight: 400;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms;
}

.blg-toc__share-btn.is-copied .blg-toc__share-feedback { opacity: 1; }

.blg-toc__meta {
	margin: 0;
	font-size: 0.8rem;
	color: var(--c-text-3);
}

/* ---- Fließtext, jetzt als Grid-Item(s) in der Spalte "content" ---- */

.blg-prose {
	grid-column: content;
	font-size: 1.12rem;
	line-height: 1.72;
	color: var(--c-text-2);
}

.blg-prose p { margin: 0 0 26px; }

.blg-prose h2 {
	margin: 48px 0 18px;
	font-family: var(--f-display);
	font-weight: 800;
	font-size: 1.65rem;
	line-height: 1.25;
	color: var(--c-text);
	letter-spacing: -0.01em;
	scroll-margin-top: calc(var(--header-h) + 16px);
}

.blg-prose blockquote {
	margin: 32px 0;
	padding: 4px 0 4px 26px;
	border-left: 3px solid var(--c-cyan);
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 1.28rem;
	line-height: 1.42;
	color: var(--c-text);
	letter-spacing: -0.005em;
}

.blg-prose ul {
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.blg-prose ul li {
	position: relative;
	padding-left: 28px;
}

.blg-prose ul li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.55em;
	width: 9px; height: 9px;
	border-radius: 2px;
	background: rgba(0, 171, 215, 0.9);
	transform: rotate(45deg);
}

.blg-prose strong { color: var(--c-text); font-weight: 700; }

.blg-prose figure {
	margin: 36px 0;
}

.blg-prose figcaption {
	margin-top: 12px;
	color: var(--c-text-3);
	font-size: 0.86rem;
	line-height: 1.5;
}

/* Funnel-Diagramm im Fließtext */
.blg-funnel {
	padding: 28px 26px;
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-md);
	background: linear-gradient(180deg, rgba(32, 34, 39, 0.55), rgba(11, 12, 14, 0.55));
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.blg-funnel__row {
	display: grid;
	grid-template-columns: 168px 1fr 52px;
	align-items: center;
	gap: 14px;
}

.blg-funnel__label {
	font-size: 0.85rem;
	color: var(--c-text-2);
}

.blg-funnel__track {
	height: 20px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.05);
	overflow: hidden;
}

.blg-funnel__fill {
	height: 100%;
	border-radius: 6px;
	background: linear-gradient(90deg, rgba(0, 171, 215, 0.55), var(--c-cyan));
}

.blg-funnel__row--dim .blg-funnel__fill { background: rgba(255, 255, 255, 0.16); }

.blg-funnel__val {
	text-align: right;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--c-text);
	font-variant-numeric: tabular-nums;
}

/* ---- Helle Callout-Karte ("Kurz gesagt") — Spalte "content" ---- */

.blg-callout {
	grid-column: content;
	margin: 8px 0 40px;
	padding: 28px 32px;
	border-left: 4px solid var(--c-cyan);
	border-radius: var(--r-lg);
	background: var(--c-light);
	color: var(--c-on-light);
}

.blg-callout__title {
	margin: 0 0 14px;
	font-family: var(--f-display);
	font-weight: 800;
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-on-light);
}

.blg-callout__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.blg-callout__list li {
	position: relative;
	padding-left: 26px;
	font-size: 0.98rem;
	line-height: 1.55;
	color: var(--c-on-light-2);
}

.blg-callout__list li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.5em;
	width: 8px; height: 8px;
	border-radius: 2px;
	background: var(--c-cyan);
	transform: rotate(45deg);
}

.blg-callout__list strong { color: var(--c-on-light); font-weight: 700; }

/* ---- Full-Bleed-Bloecke — Spalte "full", randlos ---- */

.blg-bleed {
	grid-column: full;
	position: relative;
	z-index: 2; /* ueber dem sticky Inhaltsmenue, das die aside-Spalte ueber die volle Artikelhoehe belegt */
	margin: 40px 0;
	padding: 0;
}

/* ---- Breit, aber nicht Bleed — Spalte "wrap" ---- */

.blg-wide {
	grid-column: wrap;
	position: relative;
	z-index: 2; /* wie .blg-bleed */
	margin: 40px 0;
}

/* ---- Galerie: horizontaler Scroll-Snap-Track ---- */

.blg-gallery__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0 var(--gutter);
	margin-bottom: 16px;
}

.blg-gallery__counter {
	margin: 0;
	font-size: 0.85rem;
	color: var(--c-text-3);
	font-variant-numeric: tabular-nums;
}

.blg-gallery__nav { display: flex; gap: 10px; }

.blg-gallery__arrow {
	width: 40px; height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--c-line);
	border-radius: 50%;
	background: var(--c-panel);
	color: var(--c-text-2);
	cursor: pointer;
	transition: border-color var(--t-ui), color var(--t-ui), background var(--t-ui);
}

.blg-gallery__arrow:hover,
.blg-gallery__arrow:focus-visible { border-color: var(--c-cyan); color: var(--c-cyan); outline: none; }

.blg-gallery__arrow svg { width: 18px; height: 18px; }

.blg-gallery__track {
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 0 var(--gutter);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--gutter);
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.blg-gallery__track::-webkit-scrollbar { display: none; }

.blg-gallery__track:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 4px; }

.blg-gallery__slide {
	flex: 0 0 auto;
	width: min(62vw, 880px);
	margin: 0;
	scroll-snap-align: start;
}

.blg-gallery__slide img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--r-md);
}

.blg-gallery__slide figcaption {
	margin-top: 10px;
	font-size: 0.86rem;
	color: var(--c-text-3);
}

/* ---- Karte ---- */

.blg-map { position: relative; }

.blg-map__canvas {
	width: 100%;
	height: clamp(380px, 56vh, 620px);
	background: var(--c-panel);
}

.blg-map__tag {
	position: absolute;
	left: 20px; bottom: 20px;
	z-index: 1;
	padding: 10px 16px;
	border-radius: var(--r-sm);
	background: var(--c-light);
	color: var(--c-on-light);
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.blg-map__pin {
	width: 14px; height: 14px;
	border-radius: 50%;
	background: var(--c-cyan);
	border: 2px solid #fff;
	box-shadow: 0 0 0 8px rgba(0, 171, 215, 0.25), 0 0 0 16px rgba(0, 171, 215, 0.12);
}

/* ---- Heller Statistik-Streifen ---- */

.blg-stats {
	padding: 36px 40px;
	border-radius: var(--r-lg);
	background: var(--c-light-2);
	color: var(--c-on-light);
}

.blg-stats__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.blg-stats__tile { text-align: center; }

.blg-stats__n {
	margin: 0 0 6px;
	font-family: var(--f-display);
	font-weight: 800;
	font-size: 2.4rem;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: #0086A8;
	font-variant-numeric: tabular-nums;
}

.blg-stats__l {
	margin: 0;
	font-size: 0.88rem;
	color: var(--c-on-light-2);
}

.blg-stats__note {
	margin: 20px 0 0;
	text-align: center;
	font-size: 0.78rem;
	color: var(--c-on-light-2);
}

/* ---- Tags / Autorbox / Weiterlesen — NACH dem Grid, wrap-Breite ---- */

.blg-article__tags {
	max-width: 1288px;
	margin: 8px auto 0;
	padding: 0 var(--gutter) 48px;
}

/* Autorenkasten — helle Karte, Avatar bleibt Cyan (.blg-avatar unveraendert) */
.blg-authorbox {
	max-width: 1288px;
	margin: 0 auto 64px;
	padding: 0 var(--gutter);
}

.blg-authorbox__inner {
	display: flex;
	gap: 20px;
	padding: 28px;
	border-radius: var(--r-lg);
	background: var(--c-light);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.22);
}

.blg-authorbox__name {
	margin: 0 0 2px;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 1.06rem;
	color: var(--c-on-light);
}

.blg-authorbox__role {
	margin: 0 0 10px;
	font-size: 0.82rem;
	color: #0086A8;
	letter-spacing: 0.02em;
}

.blg-authorbox__bio {
	margin: 0 0 12px;
	color: var(--c-on-light-2);
	font-size: 0.94rem;
	line-height: 1.55;
}

.blg-authorbox__link {
	color: var(--c-on-light);
	font-weight: 600;
	font-size: 0.88rem;
	text-decoration: none;
	border-bottom: 1px solid rgba(20, 22, 26, 0.25);
	padding-bottom: 2px;
	transition: color var(--t-ui), border-color var(--t-ui);
}

.blg-authorbox__link:hover { color: #0086A8; border-color: #0086A8; }

/* Weiterlesen */
.blg-related {
	padding: 8px var(--gutter) 110px;
	border-top: 1px solid var(--c-line-soft);
}

.blg-related__inner {
	max-width: 1288px;
	margin: 0 auto;
	padding-top: 48px;
}

.blg-related .blg-eyebrow { margin-bottom: 20px; }

/* ---------------------------------------------------------------------
   Autorenansicht — „Über mich" mit Einzelfoto und vollflächig unscharfem
   Hintergrund (Daniel 07.09.; bewusst kein Vollbild-Porträt mit Text links)
   --------------------------------------------------------------------- */

.blg-authorhead--foto {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.blg-authorhead__bg {
	position: absolute;
	inset: -60px;
	z-index: -1;
	pointer-events: none;
}
.blg-authorhead__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% 26%;
	filter: blur(20px) saturate(0.85) brightness(0.72) contrast(1.05);
	transform: scale(1.12);
}
.blg-authorhead__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 55% 65% at 20% 55%, rgba(0, 171, 215, 0.20), transparent 72%),
		linear-gradient(100deg, rgba(17, 19, 24, 0.94) 0%, rgba(17, 19, 24, 0.80) 42%, rgba(17, 19, 24, 0.28) 78%, rgba(17, 19, 24, 0.18) 100%),
		linear-gradient(180deg, rgba(17, 19, 24, 0.35) 0%, transparent 30%, rgba(17, 19, 24, 0.35) 78%, var(--c-canvas) 100%);
}
.blg-authorhead--foto .blg-authorhead__inner {
	display: grid;
	grid-template-columns: 380px minmax(0, 1fr);
	column-gap: 64px;
	align-items: center;
	min-height: 560px;
	padding-bottom: 72px;
	border-bottom: 0;
}
.blg-authorhead__foto {
	margin: 0;
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 60px rgba(0, 171, 215, 0.18);
}
.blg-authorhead__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 20%;
}
.blg-authorhead__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 70%, rgba(17, 19, 24, 0.35) 100%);
	pointer-events: none;
}
.blg-authorhead--foto .blg-authorhead__name { font-size: clamp(2.2rem, 3.8vw, 3.1rem); letter-spacing: -0.02em; }
.blg-authorhead--foto .blg-authorhead__bio { max-width: 40em; }
.blg-authorhead--foto .blg-authorhead__bio p { margin: 0 0 12px; }
.blg-authorhead--foto .blg-authorhead__bio p:last-child { margin-bottom: 0; }
.blg-authorhead__fakten {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 36px;
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
}
.blg-authorhead__fakten li { display: flex; flex-direction: column; }
.blg-authorhead__fakten b {
	font-family: var(--f-display);
	font-weight: 800;
	font-size: 1.6rem;
	line-height: 1.1;
	color: var(--c-text);
}
.blg-authorhead__fakten span { margin-top: 4px; font-size: 0.8rem; color: var(--c-text-3); }
.blg-authorhead__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 18px;
	margin-top: 26px;
}
.blg .blg-btn--ghost,
.blg .blg-btn--ghost:visited { background: transparent; }
.blg-authorhead__mehr {
	color: var(--c-cyan);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
}
.blg-authorhead__mehr:hover { color: var(--c-cyan-hover); }

.blg-authorhead {
	/* Erste Sektion der Autorenseite (kein .blg-hero davor) — dieselbe
	   Header-Überlappung wie .blg-hero (siehe dort). */
	margin-top: calc(-1 * var(--header-h));
	padding: calc(var(--header-h) + 76px) var(--gutter) 40px;
}

.blg-authorhead__inner {
	max-width: var(--w-max);
	margin: 0 auto;
	display: flex;
	gap: 30px;
	align-items: flex-start;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--c-line-soft);
}

.blg-authorhead__name {
	margin: 0 0 6px;
	font-family: var(--f-display);
	font-weight: 800;
	font-size: clamp(1.9rem, 3.4vw, 2.5rem);
	letter-spacing: -0.01em;
}

.blg-authorhead__role {
	margin: 0 0 16px;
	color: var(--c-cyan);
	font-size: 0.92rem;
	letter-spacing: 0.02em;
}

.blg-authorhead__bio {
	margin: 0;
	max-width: 46em;
	color: var(--c-text-2);
	font-size: 1.02rem;
	line-height: 1.6;
}

.blg-authorhead__stat {
	margin-left: auto;
	flex: 0 0 auto;
	text-align: right;
	padding-left: 20px;
}

.blg-authorhead__stat-n {
	display: block;
	font-family: var(--f-display);
	font-weight: 800;
	font-size: 2.4rem;
	line-height: 1;
	color: var(--c-text);
}

.blg-authorhead__stat-l {
	display: block;
	margin-top: 6px;
	font-size: 0.8rem;
	color: var(--c-text-3);
}

/* ---------------------------------------------------------------------
   Responsiv
   --------------------------------------------------------------------- */

@media (max-width: 1199px) {
	.blg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
	.blg-feature__body { max-width: 620px; }
}

@media (max-width: 1023px) {
	.blg-hero { padding-top: calc(var(--header-h) + 48px); }
	.blg-hero__inner { flex-direction: column; align-items: flex-start; gap: 22px; }
	.blg-hero__stats { padding-bottom: 0; }
	.blg-feature__card { min-height: 460px; }
	.blg-feature__body { padding: 32px 28px 32px; max-width: 100%; }
	.blg-authorhead__inner { flex-wrap: wrap; }
	.blg-authorhead--foto .blg-authorhead__inner { grid-template-columns: 280px minmax(0, 1fr); column-gap: 36px; }
	.blg-authorhead__stat { margin-left: 0; text-align: left; padding-left: 0; }
	.blg-funnel__row { grid-template-columns: 140px 1fr 44px; }

	/* Artikel-Detail: Raster wird einspaltig, TOC wird ein details-Element
	   oberhalb des ersten Textblocks (order: -1), nicht mehr sticky. */
	.blg-article__body {
		grid-template-columns:
			[full-start] var(--gutter)
			[wrap-start aside-start content-start] 1fr
			[content-end aside-end wrap-end] var(--gutter)
			[full-end];
		padding-top: 32px;
	}

	.blg-toc {
		grid-row: auto;
		order: -1;
		position: static;
		align-self: auto;
		max-height: none;
		overflow: visible;
		margin: 0 0 32px;
		padding: 18px 20px;
		border: 1px solid var(--c-line-soft);
		border-radius: var(--r-md);
		background: var(--c-panel);
	}

	.blg-toc summary { cursor: pointer; }
	.blg-toc__chevron { display: block; }
	.blg-toc__progress { display: none; } /* Fortschritt bezieht sich auf die Spalte, ergibt liegend im Akkordeon keinen Sinn */

	.blg-gallery__slide { width: min(74vw, 560px); }
}

@media (max-width: 767px) {
	.blg { --gutter: 20px; --header-h: 0px; }
	/* 70px = gemessene Klarhöhe von Logo/Burger des echten Headers auf Mobile
	   (72.4px bei 320…767px Breite, wie /projekte-v2/ .pv2-hero); --header-h
	   ist hier 0, weil der Header ab 767px selbst keine Restfläche mehr belegt. */
	.blg-hero { padding: 70px var(--gutter) 32px; }
	.blg-filter { padding-bottom: 28px; }
	.blg-feature { padding-bottom: 40px; }
	.blg-feature__card { min-height: 0; }
	.blg-feature__img { position: relative; height: 240px; }
	.blg-feature__scrim { background: linear-gradient(0deg, rgba(6,7,8,0.98) 0%, rgba(6,7,8,0.7) 60%, rgba(6,7,8,0.35) 100%); }
	.blg-feature__body { position: relative; padding: 24px 20px 28px; }
	.blg-grid { grid-template-columns: 1fr; gap: 26px; }
	.blg-listwrap { padding-bottom: 8px; }
	.blg-pagination { padding: 8px var(--gutter) 72px; }
	.blg-article__head { padding-top: 70px; }
	.blg-article__meta { flex-wrap: wrap; }
	.blg-article__cover { margin-top: 26px; }
	.blg-article__body { padding-top: 24px; }
	.blg-prose { font-size: 1.02rem; }
	.blg-prose blockquote { font-size: 1.12rem; }
	.blg-funnel { padding: 20px 18px; }
	.blg-funnel__row { grid-template-columns: 1fr; gap: 6px; }
	.blg-funnel__val { text-align: left; }
	.blg-callout { padding: 22px 20px; }
	.blg-stats { padding: 26px 18px; }
	.blg-stats__grid { gap: 10px; }
	.blg-stats__n { font-size: 1.7rem; }
	.blg-stats__l { font-size: 0.76rem; }
	.blg-gallery__slide { width: min(82vw, 420px); }
	.blg-map__canvas { height: clamp(300px, 52vh, 460px); }
	.blg-map__tag { left: 16px; bottom: 16px; padding: 8px 12px; font-size: 0.74rem; }
	.blg-authorbox__inner { flex-direction: column; }
	.blg-related { padding-bottom: 72px; }
	.blg-authorhead { padding: 70px var(--gutter) 28px; }
	.blg-authorhead__inner { flex-direction: column; gap: 20px; }
	.blg-authorhead--foto { padding-top: 120px; }
	.blg-authorhead--foto .blg-authorhead__inner { grid-template-columns: 1fr; row-gap: 24px; }
	.blg-authorhead__foto { max-width: 300px; }
}

@media (prefers-reduced-motion: reduce) {
	.blg *, .blg *::before, .blg *::after { transition-duration: 0.01ms !important; }
}