/* SG Fakten – Section „Das macht uns besonders“, Variante C „Vom Feld ins Glas“ (entschieden 08.10.2026).
   Werte aus dem SG-Styleguide (Skala B, Papier-Skala, Tanne). Schrift mit !important gegen Salient/SG-Typo. */
.sgfk {
	--sgfk-fg: #2b2619; --sgfk-head: #1a160b; --sgfk-muted: #6b634c; --sgfk-trail: #afa487; --sgfk-primary: #265c40; --sgfk-primary-hover: #174b31;
	--sgfk-font: "EB Garamond", Garamond, "Times New Roman", serif;
	box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: 0 16px;
	display: flex; flex-direction: column; gap: 40px;
	font-family: var(--sgfk-font); color: var(--sgfk-fg); font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased;
}
.sgfk *, .sgfk *::before, .sgfk *::after { box-sizing: border-box; }
/* In einer WPBakery-Spalte gibt das Theme den Seitenrand schon vor */
.wpb_wrapper .sgfk, .vc_column-inner .sgfk { padding-left: 0; padding-right: 0; }
.sgfk p { margin: 0 !important; padding: 0 !important; }
.sgfk a { color: var(--sgfk-primary) !important; text-underline-offset: 3px; }
.sgfk a:hover { color: var(--sgfk-primary-hover) !important; }
.sgfk :focus-visible { outline: 2px solid var(--sgfk-primary); outline-offset: 2px; }

/* Kopf */
.sgfk-top { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.sgfk .sgfk-h2, .sgfk .sgfk-h3 { font-family: var(--sgfk-font) !important; font-style: italic !important; font-weight: 600 !important; color: var(--sgfk-head) !important;
	margin: 0 !important; padding: 0 !important; letter-spacing: 0 !important; text-transform: none !important; text-wrap: balance; }
.sgfk .sgfk-h2 { font-size: 28px !important; line-height: 1.12 !important; }
.sgfk .sgfk-h3 { font-size: 22px !important; line-height: 1.2 !important; }
.sgfk .sgfk-intro { font-family: var(--sgfk-font) !important; font-size: 18px !important; line-height: 1.5 !important; color: var(--sgfk-muted) !important; max-width: 46ch; text-wrap: pretty; }

/* Liste mit Spur */
.sgfk-list { position: relative; display: grid; gap: 40px; }
.sgfk-trail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: var(--sgfk-trail); }
.sgfk-fact { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr); grid-template-areas: "ill head" "ill body"; grid-template-rows: auto 1fr; gap: 4px 16px; align-items: start; }
.sgfk-ill { grid-area: ill; position: relative; width: 100%; aspect-ratio: 1; -webkit-tap-highlight-color: transparent; }
.sgfk-ill img.sgfk-poster, .sgfk-ill .sgfk-lottie { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; }
.sgfk-ill .sgfk-lottie svg { display: block; }
.sgfk-ill.is-live img.sgfk-poster { visibility: hidden; }
.sgfk-head { grid-area: head; display: flex; flex-direction: column; gap: 4px; padding-top: 12px; }
.sgfk .sgfk-kicker { font-family: var(--sgfk-font) !important; font-size: 16px !important; line-height: 1.4 !important; color: var(--sgfk-muted) !important; letter-spacing: .02em; font-style: normal !important; }
.sgfk-body { grid-area: body; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 8px; }
.sgfk .sgfk-text { font-family: var(--sgfk-font) !important; font-size: 18px !important; line-height: 1.5 !important; color: var(--sgfk-fg) !important; max-width: 62ch; text-wrap: pretty; }
.sgfk img.sgfk-seal { display: block; width: 76px !important; height: auto !important; max-width: none !important; margin: 0 !important; }

@media (min-width: 800px) {
	.sgfk { gap: 56px; }
	.sgfk .sgfk-h2 { font-size: 38px !important; }
	.sgfk .sgfk-h3 { font-size: 26px !important; }
	.sgfk .sgfk-intro, .sgfk .sgfk-text { font-size: 20px !important; }
	.sgfk-list { gap: 88px; }
	/* Text als Block mittig neben der Zeichnung */
	.sgfk-fact { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: 1fr auto auto 1fr; grid-template-areas: "ill ." "ill head" "ill body" "ill ."; column-gap: clamp(32px, 6vw, 88px); row-gap: 0; align-items: start; }
	.sgfk-fact:nth-of-type(even) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: ". ill" "head ill" "body ill" ". ill"; }
	.sgfk-ill { width: min(100%, 280px); justify-self: center; align-self: center; }
	.sgfk-head { padding-top: 0; }
	.sgfk-body { padding-top: 12px; }
}