/**
 * Sulforaphan-/Brokkolisprossen-Wissensseite ( /sulforaphan/ ).
 *
 * Alle Regeln sind unter `.sf` gescoped. Farben & Schriften stammen aus den
 * Theme-Variablen (siehe style.css). Wird nur auf der Seite „sulforaphan"
 * geladen. Ergänzt wird ein dezenter, botanischer Salbei-Grünton (--sf-green)
 * als Natur-Akzent – bewusst nur lokal, ohne die globale CI zu verändern.
 * Mobile-first, ruhig, viel Weißraum, keine aufdringlichen Animationen.
 *
 * @package Martina_Steurer
 */

.sf {
	--sf-green: #6E7A57;        /* dezenter Salbei/Oliv – botanischer Akzent */
	--sf-green-deep: #55603F;
	--sf-line: rgba(110, 122, 87, 0.28);
	--sf-gold-line: rgba(172, 137, 109, 0.24);

	background:
		radial-gradient(1000px 480px at 84% -6%, rgba(110, 122, 87, 0.10), transparent 62%),
		linear-gradient(180deg, var(--soft-beige) 0%, var(--creme) 34%);
	color: var(--anthrazit);
	overflow-x: hidden;
}
.sf * { box-sizing: border-box; }

/* Etwas engere Lesebreite als der Theme-Standard – ruhiger Lesefluss. */
.sf .container { padding: 0 22px; }
.sf-narrow { max-width: 720px; }
.sf-center { text-align: center; }

/* ---------- gemeinsame Typo ---------- */
.sf-kicker {
	font-family: var(--sans);
	text-transform: uppercase;
	letter-spacing: 0.26em;
	font-size: 0.68rem;
	font-weight: 600;
	color: var(--sf-green-deep);
	margin: 0 0 12px;
}
.sf-h2 {
	font-family: var(--serif);
	color: var(--schwarz);
	font-weight: 500;
	line-height: 1.1;
	font-size: clamp(1.85rem, 6vw, 2.6rem);
	letter-spacing: -0.01em;
	margin: 0 0 20px;
}
.sf-h2 em { font-style: italic; color: var(--sf-green-deep); }
.sf-h3 {
	font-family: var(--serif);
	font-weight: 500;
	font-size: 1.35rem;
	color: var(--schwarz);
	margin: 0 0 10px;
}
.sf-subhead {
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(1.15rem, 4.4vw, 1.5rem);
	line-height: 1.3;
	color: var(--sf-green-deep);
	margin: -6px 0 18px;
}
.sf-subhead em { font-style: italic; color: var(--gold-deep); }
.sf-p {
	font-size: 1.04rem;
	font-weight: 300;
	line-height: 1.72;
	color: var(--anthrazit);
	margin: 0 0 16px;
}
.sf-p-lead { font-size: 1.1rem; }
.sf-p-small { font-size: 0.95rem; line-height: 1.7; }
.sf-p-xsmall { font-size: 0.86rem; line-height: 1.65; color: var(--gold-deep); }
.sf-p strong, .sf-step-list strong { font-weight: 600; color: var(--schwarz); }

.sf-section { padding: 56px 0; }
.sf-alt {
	background: var(--weiss);
	border-top: 1px solid var(--sf-gold-line);
	border-bottom: 1px solid var(--sf-gold-line);
}

/* ============================ HERO ============================ */
/* Oben genug Platz für die fixe Kopfleiste (Logo macht sie ~128px hoch),
   damit Eyebrow und Überschrift nicht dahinter verschwinden – siehe die
   gleiche Korrektur auf /erstgespraech/. */
.sf-hero { padding: 150px 0 44px; text-align: center; }
.sf-hero-inner { max-width: 640px; }
.sf-eyebrow {
	font-family: var(--sans);
	text-transform: uppercase;
	letter-spacing: 0.3em;
	font-size: 0.66rem;
	font-weight: 600;
	color: var(--gold-deep);
	margin: 0 0 18px;
}
.sf-hero-title {
	font-family: var(--serif);
	font-weight: 600;
	color: var(--schwarz);
	line-height: 0.92;
	letter-spacing: -0.02em;
	font-size: clamp(3rem, 15vw, 5.4rem);
	margin: 0;
	text-transform: uppercase;
}
.sf-hero-title-2 {
	display: block;
	font-style: italic;
	font-weight: 500;
	text-transform: none;
	color: var(--sf-green-deep);
	font-size: 0.66em;
	letter-spacing: 0.01em;
	margin-top: 2px;
}
.sf-hero-sub {
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(1.15rem, 4.4vw, 1.5rem);
	color: var(--anthrazit);
	margin: 16px auto 0;
	max-width: 22em;
	line-height: 1.4;
}
.sf-hero-lead {
	font-size: 1.02rem;
	font-weight: 300;
	line-height: 1.7;
	color: var(--anthrazit);
	max-width: 30em;
	margin: 22px auto 0;
}
.sf-hero-lead strong { color: var(--sf-green-deep); font-weight: 600; }
.sf-hero-art {
	color: var(--sf-green);
	width: 132px;
	margin: 26px auto 0;
}
.sf-sprout-svg { width: 100%; height: auto; display: block; }
.sf-hero-time {
	font-family: var(--sans);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: var(--gold-deep);
	margin: 18px 0 0;
}

/* ---------- Karten ---------- */
.sf-cards { display: grid; gap: 16px; margin: 26px 0; }
.sf-cards-2 { grid-template-columns: 1fr; }
.sf-card {
	background: var(--weiss);
	border: 1px solid var(--sf-gold-line);
	border-top: 2px solid var(--sf-green);
	border-radius: 14px;
	padding: 22px 22px 20px;
}
.sf-card p { margin: 0; font-size: 0.98rem; line-height: 1.65; }
.sf-card p strong { color: var(--sf-green-deep); font-weight: 600; }
.sf-card-num {
	display: block;
	font-family: var(--serif);
	font-style: italic;
	font-size: 1.5rem;
	color: var(--sf-green);
	margin-bottom: 8px;
}
.sf-card-plain { border-top-color: var(--gold); }
.sf-card-h {
	font-family: var(--sans);
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--schwarz);
	margin: 0 0 8px;
	letter-spacing: 0.01em;
}

/* ---------- Aha-Kette ---------- */
.sf-chain {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: 6px 4px;
	background: var(--creme);
	border: 1px dashed var(--sf-line);
	border-radius: 16px;
	padding: 22px 12px;
	margin: 8px 0 22px;
}
.sf-chain-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 5.4em;
	text-align: center;
	font-family: var(--sans);
	font-size: 0.72rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--anthrazit);
	color: var(--sf-green-deep);
}
.sf-chain-ico { width: 40px; height: 40px; color: var(--sf-green); }
.sf-chain-final .sf-chain-ico { color: var(--sf-green-deep); }
.sf-chain-final span { color: var(--schwarz); font-weight: 600; }
.sf-chain-arrow {
	align-self: center;
	color: var(--gold-beige);
	font-size: 1.05rem;
	padding-top: 14px;
}

.sf-note {
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--anthrazit);
	border-left: 2px solid var(--sf-green);
	padding: 4px 0 4px 16px;
	margin: 0;
}
.sf-note-sub {
	display: block;
	margin-top: 4px;
	font-size: 0.8rem;
	color: var(--gold-deep);
	font-style: italic;
}

.sf-disclaimer {
	margin: 24px 0 0;
	padding: 16px 18px;
	background: var(--soft-beige);
	border-radius: 12px;
	font-size: 0.9rem;
	line-height: 1.62;
	color: var(--anthrazit);
}
.sf-disclaimer strong { color: var(--schwarz); }

/* ---------- Schritt-für-Schritt ---------- */
.sf-steps { list-style: none; counter-reset: none; margin: 8px 0 0; padding: 0; }
.sf-step {
	position: relative;
	background: var(--weiss);
	border: 1px solid var(--sf-gold-line);
	border-radius: 16px;
	padding: 22px 22px 8px;
	margin-bottom: 16px;
}
.sf-step-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.sf-step-day {
	font-family: var(--sans);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--weiss);
	background: var(--sf-green);
	padding: 5px 11px;
	border-radius: 999px;
	white-space: nowrap;
}
.sf-step-title {
	font-family: var(--serif);
	font-style: italic;
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--schwarz);
	margin: 0;
}
.sf-step-list { margin: 0; padding: 0; list-style: none; }
.sf-step-list li {
	position: relative;
	padding: 0 0 12px 22px;
	font-size: 0.97rem;
	line-height: 1.62;
	color: var(--anthrazit);
}
.sf-step-list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 9px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--sf-green);
	opacity: 0.75;
}

/* ---------- Verwendung ---------- */
.sf-use { margin-top: 30px; }
.sf-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 9px; margin: 6px 0 16px; padding: 0; }
.sf-chips li {
	font-family: var(--sans);
	font-size: 0.86rem;
	font-weight: 500;
	color: var(--sf-green-deep);
	background: var(--creme);
	border: 1px solid var(--sf-line);
	padding: 7px 14px;
	border-radius: 999px;
}

/* ---------- Tagesportion / Dosis ---------- */
.sf-dose {
	margin: 0 0 16px;
	padding: 12px 16px;
	background: var(--creme);
	border-left: 3px solid var(--sf-green);
	border-radius: 8px;
	font-size: 0.98rem;
	line-height: 1.55;
	color: var(--anthrazit);
}
.sf-dose strong { color: var(--sf-green-deep); font-weight: 600; }

/* ---------- Aha-Zwischenruf ---------- */
.sf-pull {
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(1.4rem, 5.4vw, 2rem);
	line-height: 1.4;
	color: var(--schwarz);
	max-width: 20em;
	margin: 0 auto 18px;
}
.sf-pull em { color: var(--sf-green-deep); font-style: italic; }
.sf-center-p { max-width: 30em; margin-left: auto; margin-right: auto; }

/* ---------- Inline-CTA ---------- */
.sf-cta-inline {
	margin-top: 30px;
	text-align: center;
	padding: 30px 24px;
	background: var(--creme);
	border: 1px solid var(--sf-gold-line);
	border-radius: 18px;
}
.sf-cta-inline-q {
	font-family: var(--serif);
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--schwarz);
	margin: 0 0 8px;
}
.sf-cta-inline-sub {
	font-size: 0.96rem;
	font-weight: 300;
	line-height: 1.6;
	color: var(--anthrazit);
	max-width: 26em;
	margin: 0 auto 20px;
}

/* ---------- Buttons ---------- */
.sf-btn {
	display: inline-block;
	font-family: var(--sans);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 15px 28px;
	border-radius: 999px;
	text-decoration: none;
	transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.sf-btn-solid {
	background: var(--gold);
	color: var(--weiss);
	box-shadow: 0 12px 26px -14px rgba(140, 112, 90, 0.7);
}
.sf-btn-solid:hover { background: var(--gold-deep); transform: translateY(-2px); }
.sf-btn-ghost {
	background: transparent;
	border: 1px solid var(--sf-green);
	color: var(--sf-green-deep);
}
.sf-btn-ghost:hover { background: var(--sf-green); color: var(--weiss); }

/* ---------- Finaler CTA ---------- */
.sf-cta-band {
	padding: 66px 0 78px;
	text-align: center;
	background:
		radial-gradient(700px 340px at 50% 0%, rgba(110, 122, 87, 0.10), transparent 65%),
		var(--creme);
}
.sf-leaf { width: 58px; color: var(--sf-green); margin: 0 auto 18px; }
.sf-leaf svg { width: 100%; height: auto; }
.sf-cta-lead {
	font-family: var(--serif);
	font-size: clamp(1.55rem, 6vw, 2.3rem);
	line-height: 1.3;
	color: var(--schwarz);
	margin: 0 0 12px;
}
.sf-cta-sub {
	font-family: var(--sans);
	font-size: 0.98rem;
	color: var(--gold-deep);
	margin: 0 0 26px;
}
.sf-cta-actions { display: flex; flex-direction: column; gap: 12px; align-items: center; }

/* ---------- Mobile Sticky-CTA (dezent) ---------- */
.sf-sticky {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 40;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
	background: rgba(245, 231, 220, 0.94);
	backdrop-filter: blur(6px);
	border-top: 1px solid var(--sf-gold-line);
	text-align: center;
	transform: translateY(100%);
	transition: transform 0.3s ease;
}
.sf-sticky-btn {
	display: block;
	font-family: var(--sans);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	background: var(--sf-green);
	color: var(--weiss);
	padding: 13px 18px;
	border-radius: 999px;
	text-decoration: none;
}
.sf-sticky-btn:hover { background: var(--sf-green-deep); }

/* ============================ Ab Tablet ============================ */
@media (min-width: 680px) {
	.sf .container { padding: 0 28px; }
	.sf-cards-2 { grid-template-columns: 1fr 1fr; }
	.sf-section { padding: 72px 0; }
	.sf-hero { padding: 150px 0 56px; }
	.sf-cta-actions { flex-direction: row; justify-content: center; }
	.sf-chain-step { font-size: 0.78rem; width: 6.4em; }
	.sf-chain { gap: 6px 10px; padding: 26px 20px; }
}

/* Sticky-CTA nur auf kleinen Screens – am Desktop sind die CTAs ohnehin präsent. */
@media (min-width: 768px) {
	.sf-sticky { display: none; }
}
@media (max-width: 767px) {
	/* Sanft einblenden, sobald gescrollt werden kann – ohne JavaScript. */
	.sf-sticky { transform: translateY(0); }
}