/*
 * wikifit v2 - public site design system.
 * Classes are namespaced `wf-` so this sheet can be loaded next to the legacy styles/main_v2.css
 * during the migration (see View.class.php's v2 fallback tree) without colliding with its
 * generic class names (.button, .content, .header, ...). Brand blue and wordmark grey are
 * unchanged from the existing logo; everything else is new.
 */

:root {
	/* neutral graphite, no blue anywhere in the palette - the inline-link/eyebrow/focus-ring
	   colour. Buttons use --wf-app-accent instead (see below); this is no longer paired with
	   button text. */
	--wf-brand: #2b2b2b;
	--wf-brand-deep: #171717;
	/* text-on-light variant, for links/eyebrows/hover states */
	--wf-brand-tint: #ececec;
	--wf-brand-line: #d4d4d4;

	/* neutrals - true gray, no hue bias */
	--wf-ink: #171717;
	--wf-ink-2: #525252;
	/* kept >=4.5:1 against --wf-ground/--wf-surface-2 (WCAG AA text minimum), same constraint
	   as the fix this replaced. */
	--wf-ink-3: #636363;
	/* One flat background across header/content/footer - cards and panels sit on it as their
	   own --wf-card fill and are told apart by elevation (--wf-shadow), not by a border.
	   --wf-surface-2 stays a shade off for functional wells (progress tracks, nested
	   comments, tile placeholders) that need to read against a card. */
	--wf-ground: #fbfbfb;
	--wf-surface: #f7f7f7;
	--wf-surface-2: #ececec;
	--wf-card: #ffffff;
	--wf-line: #d4d4d4;
	--wf-line-soft: #e5e5e5;

	/* landing bands - the homepage is built from full-width sections that alternate
	   --wf-ground / --wf-band / --wf-band-ink (see the landing block at the end of this file).
	   --wf-band is *recessed* rather than raised in both themes, so a --wf-card sitting on it
	   still separates by fill alone - the dark theme carries card elevation in the fill, not
	   the shadow, so a band lighter than --wf-card would swallow every card on it.
	   --wf-band-ink is the inverted closing CTA and ships its own foreground, being the one
	   surface in the sheet not built on --wf-ink. */
	--wf-band: #f1f1f1;
	--wf-band-ink: #1c1c1c;
	--wf-band-ink-fg: #fafafa;

	/* semantic, kept separate from the brand accent. The ok/warn/bad triple is the coach-score
	   ramp on the kalorientabelle detail page: the -bg tints fill the whole score card, the solid
	   values carry its border, marker dot and verdict word, so each needs >=4.5:1 on its own tint
	   *and* on --wf-card (a score card can be tinted or plain depending on state). */
	--wf-ok: #2f7a55;
	--wf-ok-bg: #e6f2eb;
	--wf-warn: #8f6410;
	--wf-warn-bg: #f7efdd;
	--wf-bad: #a63e2a;
	--wf-bad-bg: #f8e8e4;

	/* macro split (protein / carbs / fat). Previously three hardcoded hex values inline in
	   diet/calories_detail.html, which meant the bar kept its light-theme colors on the dark
	   ground. Tokenised so the same three hues drive the bar, its legend and the key-figure
	   tiles, and so the dark theme can lift them off the near-black background. */
	--wf-macro-p: #3f7f5f;
	--wf-macro-c: #a8801f;
	--wf-macro-f: #b0503f;

	/* water tracker (Tagebuch) - the app's systemBlue, darkened to hold 4.5:1 as text on white */
	--wf-water: #1f6fc4;
	--wf-water-tint: rgba(31, 111, 196, 0.12);

	/* card elevation - a tight contact shadow under a wider ambient one, so the lift reads
	   at any card size without ever showing a hard edge. --wf-shadow-lift is the hover state
	   of the fully-linked cards (blog/exercise grids). */
	--wf-shadow: 0 1px 2px rgba(23, 23, 23, 0.05), 0 4px 14px -6px rgba(23, 23, 23, 0.13);
	--wf-shadow-lift: 0 2px 4px rgba(23, 23, 23, 0.07), 0 12px 28px -10px rgba(23, 23, 23, 0.2);
	--wf-radius: 10px;
	--wf-shell-max: 1180px;

	/* brand accent - originally the member-area ("wf-app") accent only, now also the public
	   site's primary CTA fill (.wf-btn--primary) so a button reads the same color everywhere in
	   v2, logged in or not. Same value in light/dark (it's already >=4.5:1 against white at the
	   weights used for text) - only the hover/press step differs. */
	--wf-app-accent: #fe4d01;
	--wf-app-accent-hover: #e64500;
	--wf-app-accent-fg: #ffffff;
	--wf-app-accent-tint: rgba(254, 77, 1, 0.1);

	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--wf-brand: #525252;
		--wf-brand-deep: #e5e5e5;
		--wf-brand-tint: #2a2a2a;
		--wf-brand-line: #3d3d3d;

		--wf-ink: #ececec;
		--wf-ink-2: #a3a3a3;
		--wf-ink-3: #999999;
		/* same AA fix as the light value, mirrored for dark surfaces */
		--wf-ground: #141414;
		--wf-surface: #141414;
		--wf-surface-2: #1f1f1f;
		/* a shadow alone barely registers on a near-black ground, so the dark card carries the
		   elevation mostly in its fill, one step above --wf-ground. */
		--wf-card: #1d1d1d;
		--wf-line: #3d3d3d;
		--wf-line-soft: #292929;

		/* recessed below --wf-ground (#141414) for the same reason as the light value, so the
		   #1d1d1d cards on a band keep their fill separation. */
		--wf-band: #0e0e0e;
		--wf-band-ink: #242424;
		--wf-band-ink-fg: #ececec;

		--wf-ok: #6cbb90;
		--wf-ok-bg: #17271f;
		--wf-warn: #d2a34e;
		--wf-warn-bg: #2a2317;
		--wf-bad: #e08c76;
		--wf-bad-bg: #2b1a16;

		--wf-macro-p: #6cbb90;
		--wf-macro-c: #d2a34e;
		--wf-macro-f: #e08c76;

		--wf-water: #6aaaf0;
		--wf-water-tint: rgba(106, 170, 240, 0.16);

		--wf-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 14px -6px rgba(0, 0, 0, 0.6);
		--wf-shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.55), 0 14px 30px -10px rgba(0, 0, 0, 0.7);

		--wf-app-accent: #ff6a2b;
		--wf-app-accent-hover: #ff8752;
		--wf-app-accent-tint: rgba(255, 106, 43, 0.16);
	}
}

/* ---------- reset & base ---------- */
.wf-root,
.wf-root *,
.wf-root *::before,
.wf-root *::after {
	box-sizing: border-box;
}

.wf-root img,
.wf-root svg {
	max-width: 100%;
	display: block;
}

.wf-root {
	/* styles/main_v2.css (kept loaded for legacy-fallback pages, see layout_v2.tpl) sets a
	   bare `body { width: 1380px }` for its own desktop-only layout - unscoped, so it silently
	   overrode every v2 page's width too and defeated responsiveness site-wide on every
	   viewport below 1380px (found via the Phase 3 cross-browser/device pass: body measured
	   1380px wide at a 375px viewport in Chromium, Firefox AND WebKit alike). `body.wf-root`
	   (0,1,1) outranks the legacy `body` (0,0,1) regardless of load order. */
	width: auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wf-ink);
	background: var(--wf-ground);
	-webkit-font-smoothing: antialiased;
	/* A single token longer than its container cannot wrap by default, so it spills out of
	   the box and drags the whole page's scroll width with it. That is a constant hazard
	   here: German compounds ("Datenschutzbestimmungen" alone overflows an h1 at 320px) and
	   user/DB content that is not prose at all - pasted URLs in forum posts and comments,
	   long food, recipe and gym names. break-word (not anywhere) only breaks a word that
	   would otherwise overflow, so ordinary text still wraps at spaces as before. */
	overflow-wrap: break-word;
}

/* Site-wide guard against sideways page scroll on phones. Every overflow fix above and below
   (header wordmark, grid tracks, nutrition tables, visually-hidden spans...) chased one
   element at a time, and the next wide child - an ad iframe, a pasted URL, a submenu - slips
   past again. Clipping the page's x-axis stops the viewport from ever panning sideways, while
   any element that really is too wide still scrolls itself (.wf-table-scroll etc.).
   clip, not hidden: hidden makes body a scroll container and breaks position: sticky on
   .wf-rail and friends; clip does not. html needs it too, because iOS Safari ignores
   overflow on body alone for touch panning. Scoped via :has so legacy pages without
   .wf-root (desktop-only 1380px body) keep scrolling as before. */
html:has(> body.wf-root),
body.wf-root {
	overflow-x: clip;
}

/* Headings are the most likely place for a compound to outgrow its line, and the document
   is lang="de" - hyphens: auto breaks them at real syllable boundaries. overflow-wrap above
   is still the guarantee; this only makes the break look intentional where it can. */
.wf-root h1,
.wf-root h2,
.wf-root h3 {
	hyphens: auto;
}

.wf-root h1,
.wf-root h2,
.wf-root h3,
.wf-root h4 {
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 0.5em;
	text-wrap: balance;
	color: var(--wf-ink);
}

.wf-root h1 {
	font-size: clamp(26px, 4vw, 38px);
}

.wf-root h2 {
	font-size: clamp(21px, 2.6vw, 27px);
}

.wf-root h3 {
	font-size: 18px;
}

.wf-root p {
	margin: 0 0 1em;
}

/* Underlined by default so an inline link in body text isn't distinguished by color alone
   (WCAG 1.4.1 / axe "link-in-text-block") - every chrome link (nav, cards, buttons, breadcrumb,
   footer, comments...) already sets its own text-decoration: none at equal-or-higher
   specificity, so this only affects genuine inline prose links. */
.wf-root a {
	color: var(--wf-brand-deep);
	text-decoration: underline;
}

.wf-root a.wf-plain {
	color: inherit;
	text-decoration: none;
}

/* A link that wraps (or sits inside) a heading is a title/category acting as a headline, not
   inline prose - never underline it and never recolour it away from the heading's own ink,
   regardless of whether the template remembered a .wf-plain on that particular anchor. Centralizes
   a fix that individual templates (foodlist_tag_list.html, trainingsplaene_list.html,
   dietplans_list.html, home.html's cards, forum thread rows, ...) kept needing one at a time -
   font-weight already comes along for free since .wf-root h1-h4 are bold and this only touches
   color/text-decoration. (0,2,1) beats the plain `.wf-root a` rule above (0,1,1). */
.wf-root h1 a,
.wf-root h2 a,
.wf-root h3 a,
.wf-root h4 a {
	color: inherit;
	text-decoration: none;
}

/* .wf-root a's specificity (0,1,1) otherwise beats .wf-btn--primary/--ghost (0,1,0) on any
   <a class="wf-btn ...">, silently overriding their button text color back to brand-deep -
   e.g. near-invisible white-on-blue-ish text on the primary CTA. Axe-core caught this as a
   sitewide WCAG contrast failure (Phase 3 a11y audit). */
.wf-root a.wf-btn--primary {
	color: #fff;
}

.wf-root a.wf-btn--ghost {
	color: var(--wf-ink-2);
}

/* Same .wf-root a vs .wf-btn specificity gap as above, but for text-decoration: .wf-root a's
   underline (0,1,1) beats .wf-btn's text-decoration: none (0,1,0), so every <a class="wf-btn
   ...">  rendered underlined despite the rule above. */
.wf-root a.wf-btn {
	text-decoration: none;
}

/* Same specificity gap once more, for every <a> that wraps a whole card / tile / row instead of
   sitting inside prose: those are chrome, so an underline on them is never wanted, but each sets
   (or assumes) text-decoration: none at 0,1,0 and lost to .wf-root a (0,1,1). Repeat them here at
   0,2,1. Card-like wrappers styled as .wf-app a.* or a.* elsewhere already win on their own. */
.wf-root a.wf-card,
.wf-root a.wf-tile,
.wf-root a.wf-cat-tile,
.wf-root a.wf-goal,
.wf-root a.wf-feature,
.wf-root a.wf-person,
.wf-root a.wf-timeline__item,
.wf-root a.wf-photo-grid__item,
.wf-root a.wf-forum-section__item,
.wf-root a.wf-post__date,
.wf-root a.wf-comment__link,
.wf-root a.wf-body-hero,
.wf-root a.wf-app-card,
.wf-root a.wf-app-list-item,
.wf-root a.wf-app-food__main,
.wf-root a.wf-app-icon-btn,
.wf-root a.wf-app-actionbar__icon,
.wf-root a.wf-app-water__preset,
.wf-root a.wf-app-tabbar__item {
	text-decoration: none;
}

.wf-root :focus-visible {
	outline: 2px solid var(--wf-brand);
	outline-offset: 2px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.wf-root * {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

.wf-skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	z-index: 1000;
	background: var(--wf-brand-deep);
	color: #fff;
	padding: 10px 16px;
	border-radius: 0 0 6px 0;
}

.wf-skip-link:focus {
	left: 0;
}

.wf-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- shell & grid ---------- */
.wf-shell {
	max-width: var(--wf-shell-max);
	margin: 0 auto;
	padding: 0 20px;
}

.wf-layout {
	display: grid;
	/* minmax(0, 1fr), not bare 1fr: a bare 1fr track's implicit minimum is its content's
	   min-content size, not 0, so a wide child (an unbroken heading, an unwrapped table...)
	   forces the whole track - and every element inside it - past the viewport width. Found
	   the same way as the body-width bug above: real overflow in the Phase 3 cross-browser
	   pass, not visible from the template source alone. */
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	/* padding-block, not the padding shorthand: this element also carries .wf-shell (same
	   selector specificity, declared above), and a later shorthand rule for the same property
	   fully overwrites every side - so a bare `padding: 28px 0 56px` here silently zeroed out
	   .wf-shell's `0 20px` horizontal padding on every content page (header/footer use
	   .wf-shell alone, so they were never affected). padding-block only ever touches
	   top/bottom, so .wf-shell's left/right padding survives regardless of rule order. */
	padding-block: 28px 56px;
}

@media (min-width: 1024px) {
	.wf-layout--rail {
		grid-template-columns: minmax(0, 1fr) 300px;
		align-items: start;
	}

	/* Detail pages carry their own two-column layout (.wf-detail-layout) and don't need
	   a separate outer rail column competing for the same horizontal space. Span <main>
	   to full width and hide the outer rail so the article + sidebar get the full shell. */
	.wf-layout--rail:has(.wf-detail-layout) > main {
		grid-column: 1 / -1;
	}
	.wf-layout--rail:has(.wf-detail-layout) > .wf-rail {
		display: none;
	}
}

.wf-rail {
	display: none;
}

@media (min-width: 1024px) {
	.wf-rail {
		display: flex;
		flex-direction: column;
		gap: 20px;
		position: sticky;
		top: 20px;
	}
}

/* ---------- header ---------- */
.wf-header {
	background: var(--wf-surface);
	border-bottom: 1px solid var(--wf-line);
}

/* padding-block, not the padding shorthand - same .wf-shell-clobbering issue as .wf-layout
   above: this class lands on the same element as .wf-shell, and a later shorthand rule for
   the same property overwrites every side, silently zeroing the shell's horizontal padding. */
.wf-header__bar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 12px 20px;
	padding-block: 14px;
	min-width: 0;
}

.wf-logo {
	display: flex;
	align-items: center;
	flex: none;
}

.wf-logo img {
	height: 45px;
	width: auto;
}

/* The header bar is flex-wrap: nowrap with a flex: none logo and a flex-shrink: 0 actions
   group, so nothing in it can give: at 320px the 175px wordmark plus the 20px gap plus the
   124px of Apps button + hamburger needed 319px of a 280px content box and pushed *every
   page on the site* 19px wider than the viewport. Scaling the wordmark down (175 -> ~132px
   at this height) buys back more than the shortfall. 400px rather than 360px so small
   Androids and a zoomed-in iPhone clear it too. */
@media (max-width: 400px) {
	.wf-logo img {
		height: 34px;
	}
}

.wf-nav {
	display: none;
	flex: 1;
}

/* Child combinators throughout, not `.wf-nav ul` / `.wf-nav a`: the descendant forms also
   matched the nested .wf-nav__submenu lists and turned every dropdown into a horizontal
   row of top-level-sized pills. Top-level and submenu styles are now fully separate. */
.wf-nav > ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 4px;
}

/* flex (not block) so the .wf-nav__item chevron ::after below is a sized flex item - this
   rule outranks a plain `.wf-nav__item > a`, so the display has to live here. */
.wf-nav > ul > li > a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	border-radius: 7px;
	color: var(--wf-ink-2);
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
}

.wf-nav > ul > li > a:hover,
.wf-nav > ul > li > a[aria-current="page"],
.wf-nav__item:hover > a,
.wf-nav__item:focus-within > a {
	color: var(--wf-brand-deep);
	background: var(--wf-brand-tint);
}

/* Dropdown submenus (Training / Ernährung / Community) - hover for pointer users,
   focus-within so the submenu is reachable and stays open while tabbing through it
   with a keyboard. */
.wf-nav__item {
	position: relative;
}

.wf-nav__item > a::after {
	content: "";
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.55;
	transition: transform 0.15s ease, margin-top 0.15s ease;
}

.wf-nav__item:hover > a::after,
.wf-nav__item:focus-within > a::after {
	margin-top: 3px;
	transform: rotate(225deg);
}

.wf-nav__submenu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 200px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--wf-card);
	border: 1px solid var(--wf-line-soft);
	border-radius: var(--wf-radius);
	box-shadow: var(--wf-shadow-lift);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	/* visibility flips only after the fade-out, so a slightly diagonal mouse path from the
	   trigger into the panel doesn't snap it shut. */
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}

/* Invisible bridge over the 6px gap between trigger and panel - without it the pointer
   leaves .wf-nav__item's hover area on the way down and the menu closes. */
.wf-nav__submenu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 8px;
}

.wf-nav__item:hover > .wf-nav__submenu,
.wf-nav__item:focus-within > .wf-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

.wf-nav__submenu a {
	display: block;
	padding: 9px 12px;
	border-radius: 7px;
	color: var(--wf-ink-2);
	text-decoration: none;
	font-weight: 500;
	font-size: 14.5px;
	white-space: nowrap;
}

.wf-nav__submenu a:hover,
.wf-nav__submenu a:focus-visible,
.wf-nav__submenu a[aria-current="page"] {
	color: var(--wf-ink);
	background: var(--wf-brand-tint);
}

@media (min-width: 900px) {
	.wf-nav {
		display: flex;
	}
}

.wf-header__actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px 14px;
	margin-left: auto;
	flex-shrink: 0;
}

/* Progressive hiding of header actions as space shrinks.
   Priority (highest → lowest): Apps button, Login, Kostenlos-registrieren button.
   The hamburger toggle is always available at non-desktop widths (see .wf-header__toggle
   rules below) so users can still reach all nav items. */

/* Below 760 px: hide "Kostenlos registrieren" — keep Apps + Login + hamburger */
@media (max-width: 759px) {
	.wf-header__actions .wf-btn--primary {
		display: none;
	}
}

/* Below 480 px: also hide Login from the header bar — keep Apps + hamburger only.
   Login is still reachable at this width via the hamburger drawer; see
   a.wf-mobile-nav__login in webcontent_v2/templates/layout_v2.tpl. */
@media (max-width: 479px) {
	a.wf-header__login {
		display: none;
	}
}

/* a.wf-header__login, not .wf-header__login: needs the same (0,1,1) specificity as
   .wf-root a's default underline (line ~143) to actually beat it - a bare class
   selector here is (0,1,0) and would lose that fight regardless of source order. */
a.wf-header__login {
	color: var(--wf-ink-2);
	font-weight: 600;
	font-size: 14.5px;
	text-decoration: none;
	white-space: nowrap;
}

a.wf-header__login:hover {
	color: var(--wf-ink);
}

.wf-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	border: 1px solid var(--wf-line);
	background: var(--wf-surface);
	color: var(--wf-ink);
	cursor: pointer;
}

/* Must come after the base .wf-header__toggle rule above: same specificity, so an
   earlier occurrence of this query here previously lost the cascade to that later
   unconditional rule and left the hamburger visible even at desktop widths where
   .wf-nav is already showing the full menu. */
@media (min-width: 900px) {
	.wf-header__toggle {
		display: none;
	}
}

.wf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 16px;
	/* Fully rounded, same as the app shell's .wf-app-btn - previously an 8px rect, the one other
	   corner radius a button used anywhere in v2 (.wf-btn--lg already matched this). */
	border-radius: 999px;
	font-weight: 600;
	font-size: 14.5px;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	/* NOT white-space: nowrap. German CTA labels are long ("Trainingsplan erneut
	   durchführen" measures 364px, "Persönliche Ernährungsplanung festlegen" 324px) and
	   nowrap made those buttons wider than the 320px of content space a 360px phone has,
	   scrolling the whole page sideways. These are inline-flex, so shrink-to-fit already
	   keeps them at max-content width wherever there is room - the header actions
	   (flex-shrink: 0) are sized by their content and so never wrap. Only a button that
	   would otherwise overflow its container now wraps to a second line instead. */
	white-space: normal;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.wf-btn--primary {
	background: var(--wf-app-accent);
	color: #fff;
}

.wf-btn--primary:hover {
	background: var(--wf-app-accent-hover);
}

.wf-btn--ghost {
	background: transparent;
	color: var(--wf-ink-2);
	border-color: var(--wf-line);
}

.wf-btn--ghost:hover {
	color: var(--wf-ink);
	border-color: var(--wf-ink-3);
}

.wf-btn--block {
	width: 100%;
}

.wf-mobile-nav {
	display: none;
	flex-direction: column;
	gap: 2px;
	padding: 12px 0 18px;
	border-top: 1px solid var(--wf-line);
}

.wf-mobile-nav.is-open {
	display: flex;
}

.wf-mobile-nav a {
	padding: 11px 6px;
	color: var(--wf-ink);
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px solid var(--wf-line-soft);
}

.wf-mobile-nav a.wf-mobile-nav__login {
	color: var(--wf-brand);
}

@media (min-width: 900px) {
	.wf-mobile-nav {
		display: none !important;
	}
}

/* The header bar carries no search field at all now - it lived in .wf-header__bar
   (see git history) but stretched to fill whatever space .wf-nav left unused and
   dominated the bar, so it moved into the .wf-mobile-nav panel below as
   .wf-mobile-search, reachable via the hamburger at every width instead of sitting
   permanently in the chrome. */
.wf-mobile-search {
	display: flex;
	margin-bottom: 10px;
}

.wf-mobile-search input {
	flex: 1;
	min-width: 0;
	border: 1px solid var(--wf-line);
	border-right: 0;
	border-radius: 8px 0 0 8px;
	padding: 10px 12px;
	font-size: 15px;
	background: var(--wf-surface);
	color: var(--wf-ink);
}

.wf-mobile-search button {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wf-app-accent);
	background: var(--wf-app-accent);
	color: #fff;
	border-radius: 0 8px 8px 0;
	padding: 0 16px;
	cursor: pointer;
}

.wf-mobile-search button:hover {
	background: var(--wf-app-accent-hover);
	border-color: var(--wf-app-accent-hover);
}

/* ---------- hero ---------- */
.wf-hero {
	padding: 8px 0 4px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wf-hero p {
	color: var(--wf-ink-2);
	font-size: 17px;
	max-width: 62ch;
}

.wf-app-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 4px 0 0;
}

.wf-app-badges img {
	display: block;
	height: 40px;
	width: auto;
}

.wf-hero__media {
	order: -1;
	max-width: 180px;
	margin: 0 auto;
}

.wf-hero__media img {
	width: 100%;
	height: auto;
}

@media (min-width: 900px) {
	.wf-hero {
		flex-direction: row;
		align-items: center;
		gap: 40px;
	}

	.wf-hero__content {
		flex: 1;
	}

	.wf-hero__media {
		order: initial;
		flex: none;
		max-width: 240px;
		margin: 0;
	}
}

.wf-eyebrow {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wf-brand-deep);
}

/* ---------- cards ---------- */
.wf-card-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin-bottom: 20px;
}

@media (min-width: 640px) {
	.wf-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.wf-card-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.wf-card {
	background: var(--wf-card);
	border: 0;
	border-radius: var(--wf-radius);
	box-shadow: var(--wf-shadow);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

/* the grids wrap the whole card in an <a class="wf-card wf-plain">, so the elevation doubles as
   the hover affordance the removed border used to provide. */
a.wf-card:hover,
a.wf-card:focus-visible {
	box-shadow: var(--wf-shadow-lift);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.wf-card {
		transition: none;
	}

	a.wf-card:hover,
	a.wf-card:focus-visible {
		transform: none;
	}
}

.wf-card h3 {
	margin: 0;
	font-size: 17px;
	color: var(--wf-ink);
}

.wf-card h3 a {
	color: var(--wf-ink);
	text-decoration: none;
}

.wf-card h3 a:hover {
	color: var(--wf-brand-deep);
}

/* h2 variant: the homepage's standalone .wf-card sections (not grid items under their own h2,
   like every other page's card grids - each is its own top-level page section) need h2 to
   avoid an h1->h3 skip (Phase 3 a11y audit). Same look as the h3 styling above. */
.wf-card h2 {
	margin: 0;
	font-size: 17px;
	color: var(--wf-ink);
}

.wf-card h2 a {
	color: var(--wf-ink);
	text-decoration: none;
}

.wf-card h2 a:hover {
	color: var(--wf-brand-deep);
}

.wf-card p {
	color: var(--wf-ink-2);
	font-size: 14.5px;
	margin: 0;
}

.wf-card__meta {
	font-size: 12.5px;
	color: var(--wf-ink-3);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.wf-card__img {
	border-radius: 7px;
	overflow: hidden;
	aspect-ratio: 16/9;
	background: var(--wf-surface-2);
}

.wf-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Card item without its own photo (recipe, exercise, gym, ...): a flat tint instead of the
   legacy per-type placeholder icon (apple, dumbbell, ...). */
.wf-card__img--empty {
	background: var(--wf-brand-tint);
}

/* Standalone placeholder for images rendered outside a .wf-card__img box (detail-page hero
   photos, small inline thumbnails, ...). Pair with the same inline width/height/border-radius
   the real <img> would have carried, so the box doesn't jump when a photo is added later. */
.wf-noimg {
	display: block;
	background: var(--wf-brand-tint);
}

.wf-card__links {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wf-card__links a {
	font-size: 14px;
	text-decoration: none;
}

.wf-card__links a:hover {
	text-decoration: underline;
}

.wf-panel {
	background: var(--wf-card);
	border: 0;
	border-radius: var(--wf-radius);
	box-shadow: var(--wf-shadow);
	padding: 22px;
}

.wf-wiki-tabs {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

@media (min-width: 720px) {
	.wf-wiki-tabs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- forms ---------- */
.wf-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-bottom: 12px;
}

.wf-field label {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--wf-ink-2);
}

/* .wf-input is the same control, for the places where a control is not wrapped in a
   .wf-field - a row in a grid or a flex line (see the food editor). Keeping both in one
   declaration is what stops the two from drifting apart in height, radius or type size. */
.wf-field input[type="text"],
.wf-field input[type="search"],
.wf-field input[type="password"],
.wf-field input[type="email"],
.wf-field input[type="number"],
.wf-field input[type="date"],
.wf-field select,
.wf-field textarea,
.wf-input {
	padding: 9px 12px;
	border: 1px solid var(--wf-line);
	border-radius: 7px;
	font-size: 15px;
	background: var(--wf-surface);
	color: var(--wf-ink);
	width: 100%;
	font-family: inherit;
}

/* Safari/Chrome give input[type=search] its own UA chrome (pill shape, inset padding) that
   fights the border-radius/padding above - drop it so a search field matches every other
   .wf-field control instead of looking like a different component. */
.wf-field input[type="search"] {
	-webkit-appearance: none;
	appearance: none;
}

.wf-field textarea {
	resize: vertical;
}

/* a file input can't take the control styling above (it would box the UA's own button and
   file name), so only its button is brought in line with .wf-btn--ghost */
.wf-field input[type="file"] {
	font-size: 13.5px;
	color: var(--wf-ink-2);
}

.wf-field input[type="file"]::file-selector-button {
	margin-right: 10px;
	padding: 8px 12px;
	border: 1px solid var(--wf-line);
	border-radius: 7px;
	background: var(--wf-surface);
	color: var(--wf-ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.wf-field input[type="file"]::file-selector-button:hover {
	background: var(--wf-surface-2);
}

.wf-form {
	max-width: 560px;
}

.wf-checkbox-row {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 13px;
	color: var(--wf-ink-2);
}

.wf-checkbox-row input {
	margin-top: 3px;
}

.wf-checkbox-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 6px 16px;
	margin-bottom: 12px;
}

@media (min-width: 560px) {
	.wf-checkbox-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.wf-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- ad slots (see libs/config/ad_slots.php) ---------- */
/* Reserved heights up front so a loading unit never shifts the layout (CLS). */
.wf-ad {
	margin: 4px 0;
	text-align: center;
}

.wf-ad__label {
	display: block;
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wf-ink-3);
	margin-bottom: 4px;
}

/* No leaderboard above the fold on mobile (plan: "AdSense" section) - first unit appears
   after the first content block, at >=900px only. */
.wf-ad--leaderboard {
	display: none;
}

@media (min-width: 900px) {
	.wf-ad--leaderboard {
		display: block;
		min-height: 100px;
	}
}

.wf-ad--rectangle,
.wf-ad--infeed,
.wf-ad--multiplex {
	min-height: 280px;
}

.wf-ad--skyscraper {
	min-height: 600px;
}

/* This slot has no id in ad_slots.php yet (never shipped to real traffic), but reserving its
   height now avoids a CLS surprise the day someone fills in a real id without re-reading this
   file (Phase 3 ad-placement pass). Google's own anchor/overlay ad format manages its own
   space and a close button when requested via data-ad-format="anchor" - slot.tpl currently
   requests the generic "auto" format for every slot, so revisit that format choice together
   with the real id, not just this min-height. */
.wf-ad--anchor {
	position: sticky;
	bottom: 0;
	z-index: 20;
	background: var(--wf-surface);
	min-height: 50px;
	border-top: 1px solid var(--wf-line);
}

/* ---------- consent banner ---------- */
.wf-consent {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 100;
	background: var(--wf-surface);
	border-top: 1px solid var(--wf-line);
	box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, 0.3);
	padding: 16px 20px;
}

.wf-consent__inner {
	max-width: var(--wf-shell-max);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	justify-content: space-between;
}

.wf-consent p {
	margin: 0;
	font-size: 13.5px;
	color: var(--wf-ink-2);
	max-width: 60ch;
}

.wf-consent__actions {
	display: flex;
	gap: 8px;
	flex: none;
}

/* ---------- footer ---------- */
.wf-footer {
	background: var(--wf-surface);
	border-top: 1px solid var(--wf-line);
	margin-top: 40px;
}

/* padding-block, not the padding shorthand - same .wf-shell-clobbering issue noted on
   .wf-layout/.wf-header__bar above. */
.wf-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
	padding-block: 40px 24px;
}

@media (min-width: 720px) {
	.wf-footer__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.wf-footer h2 {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wf-ink-3);
	margin: 0 0 10px;
	font-weight: 700;
}

.wf-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.wf-footer a {
	color: var(--wf-ink-2);
	text-decoration: none;
	font-size: 14px;
}

.wf-footer a:hover {
	color: var(--wf-brand-deep);
}

/* padding-block, not the padding shorthand - same .wf-shell-clobbering issue noted on
   .wf-layout/.wf-header__bar above. */
.wf-footer__legal {
	border-top: 1px solid var(--wf-line);
	padding-block: 16px 32px;
	font-size: 12.5px;
	color: var(--wf-ink-3);
}

.wf-footer__legal p {
	margin: 0 0 6px;
}

/* ---------- misc ---------- */
.wf-chip {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 4px;
	background: var(--wf-brand-tint);
	color: var(--wf-brand-deep);
}

.wf-actionmessage {
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 14.5px;
	margin-bottom: 16px;
}

.wf-actionmessage--success {
	background: var(--wf-ok-bg);
	color: var(--wf-ok);
}

.wf-actionmessage--error {
	background: var(--wf-warn-bg);
	color: var(--wf-warn);
}

/* ActionMessage('warning', …) - emitted by /fortschritt/charts among others, and previously
   unstyled, so those messages rendered as bare unpadded text on the page background. */
.wf-actionmessage--warning {
	background: var(--wf-warn-bg);
	color: var(--wf-warn);
}

/* ---------- breadcrumb ---------- */
.wf-breadcrumb {
	margin: 14px 0;
	font-size: 13px;
	color: var(--wf-ink-3);
}

.wf-breadcrumb ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.wf-breadcrumb li {
	display: flex;
	align-items: center;
	gap: 4px;
}

.wf-breadcrumb li:not(:last-child)::after {
	content: "/";
	margin-left: 4px;
	color: var(--wf-line);
}

.wf-breadcrumb a {
	color: var(--wf-ink-3);
	text-decoration: none;
}

.wf-breadcrumb a:hover {
	color: var(--wf-brand-deep);
}

.wf-breadcrumb li:last-child {
	color: var(--wf-ink-2);
	font-weight: 600;
}

/* ---------- detail article layout (a template-local sidebar nested inside the main
   rail column - the two anatomy detail pages this ships for both need it) ---------- */
.wf-detail-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

@media (min-width: 860px) {
	.wf-detail-layout {
		grid-template-columns: minmax(0, 1fr) 260px;
	}
}

/* Microdata-only wrappers (<span itemprop=...> holding nothing but <meta>) are inline, not
   display:none the way a bare <meta>/<link> is, so as a direct child they take a real grid
   cell and shove the article into the sidebar column. Belt-and-braces for the templates. */
.wf-detail-layout > span[itemprop] {
	display: none;
}

.wf-detail-sidebar {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* Static/legal/help pages and other single-column article pages that don't carry a
   template-local sidebar (the shell's own rail ad still applies independently of this). */
.wf-detail-layout--single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 760px;
}

.wf-article h2 {
	margin-top: 1.6em;
}

.wf-article__lead {
	font-size: 15px;
	color: var(--wf-ink-2);
}

.wf-app-features {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	margin: 24px 0;
}

@media (min-width: 640px) {
	.wf-app-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.wf-app-feature {
	background: var(--wf-card);
	border: 0;
	border-radius: var(--wf-radius);
	box-shadow: var(--wf-shadow);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wf-app-feature h2 {
	margin: 0;
	font-size: 17px;
	color: var(--wf-ink);
}

.wf-app-feature p {
	margin: 0;
	font-size: 14.5px;
	color: var(--wf-ink-2);
}

.wf-actionbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0;
}

.wf-video {
	position: relative;
	aspect-ratio: 16/9;
	border-radius: var(--wf-radius);
	overflow: hidden;
	background: var(--wf-surface-2);
	margin-bottom: 16px;
}

.wf-video iframe,
.wf-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* stacked overlay images (muscle-load maps): every layer, including the base anatomy
   image, is absolutely positioned to cover the whole box so they overlay at the same
   visual position - a responsive replacement for the legacy fixed-px `top: -{n*height}px`
   stacking trick, which didn't scale on mobile at all. The box needs a definite height for
   that to work; `aspect-ratio` gives it one (matching the anatomy artwork's native 450x399),
   and templates that need a different display size override it inline. Keeping the base
   image itself in normal flow (as `:first-child { position: relative }` used to) made the
   box's height depend on that image successfully laying out first - which broke down for
   the floated, capped-width variant on the exercise list page and left the overlay
   underneath it instead of on top. */
.wf-muscle-stack {
	position: relative;
	width: 100%;
	aspect-ratio: 450 / 399;
	margin: 12px 0;
}

.wf-muscle-stack img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.wf-muscle-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	font-size: 13px;
	color: var(--wf-ink-2);
	margin: 10px 0 20px;
}

.wf-muscle-legend span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.wf-muscle-legend i {
	width: 13px;
	height: 13px;
	border-radius: 3px;
	display: inline-block;
}

.wf-facts {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.wf-facts th {
	text-align: left;
	color: var(--wf-ink-3);
	font-weight: 600;
	padding: 6px 10px 6px 0;
	vertical-align: top;
	white-space: nowrap;
}

.wf-facts td {
	padding: 6px 0;
}

.wf-facts tr+tr {
	border-top: 1px solid var(--wf-line-soft);
}

.wf-tile-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

@media (min-width: 640px) {
	.wf-tile-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.wf-tile-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.wf-tile {
	display: block;
	padding: 12px 14px;
	border-radius: 8px;
	border: 1px solid var(--wf-line);
	background: var(--wf-surface);
	color: var(--wf-ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
}

.wf-tile:hover {
	border-color: var(--wf-brand);
	color: var(--wf-brand-deep);
}

/* ---------- star rating ---------- */
.wf-stars {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.wf-stars__row {
	display: inline-flex;
}

.wf-stars__star {
	width: 18px;
	height: 18px;
	border: 0;
	background: url(/img/stars/star_empty.png) center / contain no-repeat;
	cursor: pointer;
	padding: 0;
}

.wf-stars__count {
	font-size: 13px;
	color: var(--wf-ink-3);
}

.wf-stars__hint {
	font-size: 12.5px;
	color: var(--wf-brand-deep);
}

/* ---------- comments ---------- */
.wf-comments {
	margin-top: 8px;
}

.wf-comment-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 20px;
}

.wf-comment-form textarea {
	min-height: 64px;
}

.wf-comments textarea {
	width: 100%;
	border: 1px solid var(--wf-line);
	border-radius: 8px;
	padding: 10px 12px;
	font: inherit;
	color: var(--wf-ink);
	background: var(--wf-surface);
	resize: vertical;
}

.wf-comment-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.wf-comment-list--nested {
	margin: 10px 0 0 24px;
	gap: 10px;
}

.wf-comment {
	border: 1px solid var(--wf-line);
	border-radius: var(--wf-radius);
	padding: 14px 16px;
	background: var(--wf-surface);
}

.wf-comment--nested {
	background: var(--wf-surface-2);
}

.wf-comment__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* The date is flex: none and the author row was unshrinkable (a flex item's default
	   min-width: auto floors it at its content), so avatar + a long username + the
	   timestamp pushed past the viewport - worse inside .wf-comment-list--nested, which
	   spends another 24px of width per level. Wrapping lets the date drop to its own line
	   on the narrowest screens rather than widening the page. */
	flex-wrap: wrap;
	gap: 4px 10px;
	margin-bottom: 8px;
}

.wf-comment__author {
	display: flex;
	align-items: center;
	gap: 8px;
	/* min-width: 0 to opt out of the automatic minimum size, so a username longer than the
	   remaining space shrinks (and ellipsises, below) instead of forcing .wf-comment__head
	   wider than its column. */
	min-width: 0;
	text-decoration: none;
	color: var(--wf-ink);
	font-weight: 600;
	font-size: 14px;
}

.wf-comment__author span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wf-comment__avatar {
	border-radius: 50%;
	object-fit: cover;
}

.wf-comment__date {
	font-size: 12px;
	color: var(--wf-ink-3);
	flex: none;
}

.wf-comment__text {
	margin: 0 0 10px;
	font-size: 14.5px;
}

.wf-comment__actions {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
}

.wf-comment__like,
.wf-comment__link,
.wf-comment__delete-btn {
	background: none;
	border: 0;
	padding: 0;
	font-size: 13px;
	color: var(--wf-ink-3);
	cursor: pointer;
}

.wf-comment__like.is-liked,
.wf-comment__like:hover,
.wf-comment__link:hover {
	color: var(--wf-brand-deep);
}

.wf-comment__delete {
	display: inline;
}

.wf-comment__delete-btn:hover {
	color: var(--wf-warn);
}

.wf-comment-reply {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
}

.wf-comment-reply[hidden] {
	display: none;
}

/* ---------- pagination ---------- */
.wf-pagination {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	margin: 24px 0;
}

.wf-pagination a,
.wf-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	border-radius: 7px;
	text-decoration: none;
	font-size: 14px;
	color: var(--wf-ink-2);
	border: 1px solid var(--wf-line);
}

.wf-pagination a:hover {
	border-color: var(--wf-brand);
	color: var(--wf-brand-deep);
}

.wf-pagination a.wf-pagination__current,
.wf-pagination span.wf-pagination__current {
	background: var(--wf-brand);
	color: #fff;
	border-color: var(--wf-brand);
}

.wf-pagination span:not(.wf-pagination__current) {
	border: 0;
	color: var(--wf-ink-3);
}

/* ---------- food search & index (kalorientabelle) ---------- */
.wf-field--inline {
	flex-direction: row;
	margin: 0;
}

/* The .wf-btn base rule deliberately allows wrapping/mid-word breaks for long CTA labels
   (see its comment), which backfires here: the search input's flex-grow squeezes the
   submit button below its own text width, so even a short label like "Suchen" got
   split mid-word. Keep the button at its natural content width instead. */
.wf-field--inline .wf-btn {
	flex-shrink: 0;
}

.wf-food-search {
	margin-bottom: 20px;
}

.wf-food-search__advanced {
	margin-top: 14px;
	border-top: 1px solid var(--wf-line);
	padding-top: 14px;
}

.wf-food-search__advanced summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--wf-brand-deep);
}

.wf-food-search__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px 16px;
	margin: 14px 0;
}

@media (min-width: 640px) {
	.wf-food-search__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.wf-food-search__grid input,
.wf-food-search__grid select {
	padding: 8px 10px;
	border: 1px solid var(--wf-line);
	border-radius: 7px;
	font-size: 14px;
	background: var(--wf-surface);
	color: var(--wf-ink);
	width: 100%;
}

.wf-cat-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 20px;
}

@media (min-width: 640px) {
	.wf-cat-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.wf-cat-tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.wf-cat-tile {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid var(--wf-line);
	background: var(--wf-surface);
	text-decoration: none;
	color: var(--wf-ink);
	/* Bold, matching every other category treatment (the heading-wrapped category links above,
	   .wf-cat-link) instead of sitting a step lighter at 600. */
	font-weight: 700;
	font-size: 13.5px;
}

.wf-cat-tile:hover {
	border-color: var(--wf-brand);
	color: var(--wf-brand-deep);
}

.wf-cat-tile img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

/* Recipe category references outside a tile/heading context (e.g. the detail page's
   "Kategorien" fact row) still read as chrome, not inline prose - style like a small
   headline instead of the underlined `.wf-root a` default. */
.wf-root a.wf-cat-link {
	color: var(--wf-ink);
	font-weight: 700;
	text-decoration: none;
}

.wf-root a.wf-cat-link:hover {
	color: var(--wf-brand-deep);
}

.wf-link-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 4px 24px;
}

@media (min-width: 640px) {
	.wf-link-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.wf-link-columns {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.wf-link-columns a {
	font-size: 14px;
	padding: 4px 0;
	text-decoration: none;
}

.wf-link-columns a:hover {
	text-decoration: underline;
}

.wf-food-index__group {
	margin: 22px 0;
}

.wf-food-index__group h2 {
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--wf-ink-3);
	margin-bottom: 8px;
}

.wf-food-index__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 3px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 640px) {
	.wf-food-index__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.wf-food-index__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.wf-food-index__list li {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 0;
	font-size: 14.5px;
}

.wf-food-index__add {
	flex: none;
	color: var(--wf-brand);
	text-decoration: none;
	font-weight: 700;
}

/* ---------- nutrition facts table (kalorientabelle detail) ---------- */
/* Fixed legacy `width="160"`/`width="120"` <td>s overflowed the viewport on mobile - this
   scrolls its own axis instead of the page ever going wider than the shell. */
.wf-table-scroll {
	overflow-x: auto;
	/* position: relative so this element is the containing block for the absolutely
	   positioned .wf-visually-hidden spans inside these tables (the <th> labels on
	   dietplan_detail, calories_detail, foodlist_detail...). An abs-positioned box is only
	   clipped by ancestors that are in its containing-block chain, so while this element
	   was static those 1px spans resolved against the initial containing block instead:
	   overflow-x here did NOT clip them, and their static position deep inside a table
	   wider than the viewport (981px on dietplan_detail at 390px) extended the *root*
	   scroll area to match. The page scrolled ~530px sideways onto nothing at all - the
	   spans are clipped to 1px and paint nothing, so there was no visible content out
	   there to explain it. Making the scroller their containing block puts them back
	   inside the box that already scrolls. */
	position: relative;
	margin: 16px 0;
}

.wf-nutrition-table {
	width: 100%;
	min-width: 360px;
	border-collapse: collapse;
	font-size: 14.5px;
	font-variant-numeric: tabular-nums;
}

.wf-nutrition-table th,
.wf-nutrition-table td {
	padding: 8px 10px;
	text-align: left;
}

.wf-nutrition-table thead th {
	color: var(--wf-ink-3);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .03em;
	border-bottom: 2px solid var(--wf-line);
}

.wf-nutrition-table td:not(:first-child),
.wf-nutrition-table th:not(:first-child) {
	text-align: right;
	white-space: nowrap;
}

.wf-nutrition-table tr:not(:last-child) td {
	border-bottom: 1px solid var(--wf-line-soft);
}

.wf-nutrition-table tr.wf-nutrition-table__main td {
	font-weight: 700;
}

.wf-nutrition-table tr.wf-nutrition-table__sub td:first-child {
	padding-left: 22px;
	color: var(--wf-ink-2);
	font-size: 13.5px;
}

/* Identity chips (glutenfrei / vegan / ...). Row chips rather than the old 40px icon + 11px
   caption stack: at that caption size the label was barely legible and the tap target was the
   icon only, so each one is now a pill the whole of which is the link. */
.wf-diet-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0;
}

.wf-diet-badges a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 14px 5px 5px;
	border: 1px solid var(--wf-line);
	border-radius: 999px;
	background: var(--wf-card);
	font-size: 13px;
	font-weight: 600;
	color: var(--wf-ink-2);
	text-decoration: none;
}

.wf-diet-badges a:hover {
	border-color: var(--wf-brand);
	color: var(--wf-ink);
}

.wf-diet-badges img {
	width: 28px;
	height: 28px;
}

/* ---------- key figures (kalorientabelle detail) ---------- */
/* The numbers the page is looked up for - energy and the macro split - read straight off the
   card under the H1 instead of only out of the 15-row nutrition table further down. */
.wf-food-hero {
	background: var(--wf-card);
	border-radius: var(--wf-radius);
	box-shadow: var(--wf-shadow);
	padding: 20px;
	margin: 18px 0;
	display: grid;
	gap: 18px;
}

@media (min-width: 620px) {
	.wf-food-hero {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
	}

	.wf-food-hero__split {
		grid-column: 1 / -1;
	}
}

/* Also worn by the "Brennwertverteilung von X" <h2> inside the card, which keeps the heading in
   the outline at the visual weight of a caption - hence the doubled class, to outrank
   `.wf-article h2`'s margin-top. */
.wf-food-hero .wf-food-hero__label {
	margin: 0 0 6px;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--wf-ink-3);
}

.wf-food-hero__kcal {
	font-size: 40px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

.wf-food-hero__kcal span {
	font-size: 17px;
	font-weight: 600;
	color: var(--wf-ink-2);
	margin-left: 5px;
}

.wf-food-hero__kj {
	font-size: 13px;
	color: var(--wf-ink-3);
	margin: 6px 0 0;
}

/* One tile per row - name on the left, grams and share of energy on the right - at every width
   rather than three side-by-side columns. Side by side, the track is ~100px even on a wide
   desktop (the hero's own second column inside an article column the rail and sidebar have
   already narrowed), which is less than "Kohlenhydrate" needs at the label size, so the labels
   overlapped. Rows are the one arrangement that doesn't depend on how much width the page
   chrome happens to leave. */
.wf-macro-tiles {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
}

.wf-macro-tile {
	border-left: 3px solid var(--wf-macro, var(--wf-line));
	padding: 2px 0 2px 10px;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 8px;
}

.wf-macro-tile--p {
	--wf-macro: var(--wf-macro-p);
}

.wf-macro-tile--c {
	--wf-macro: var(--wf-macro-c);
}

.wf-macro-tile--f {
	--wf-macro: var(--wf-macro-f);
}

.wf-macro-tile b {
	display: block;
	flex: 1 1 auto;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--wf-ink-3);
}

.wf-macro-tile strong {
	font-size: 18px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.wf-macro-tile span {
	font-size: 12.5px;
	color: var(--wf-ink-3);
	font-variant-numeric: tabular-nums;
}

/* macro split - a CSS stacked bar replacing the legacy Chart.js v1 pie (an API that no longer
   exists in any maintained Chart.js release) with the same $chartProz percentages */
.wf-macro-bar {
	display: flex;
	height: 14px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--wf-surface-2);
	margin: 0 0 10px;
}

.wf-macro-bar span {
	display: block;
	height: 100%;
}

.wf-macro-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	font-size: 13px;
	color: var(--wf-ink-2);
	font-variant-numeric: tabular-nums;
}

.wf-macro-legend span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.wf-macro-legend i {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	display: inline-block;
	flex: none;
}

/* category comparison - a percentage-based bar replacing the legacy fixed-163px slider math */
/* single-value fill, e.g. challenge goal progress - distinct from .wf-range-bar's min/max marker */
.wf-progress-bar {
	height: 14px;
	border-radius: 7px;
	background: var(--wf-surface-2);
	overflow: hidden;
	margin: 8px 0;
}

.wf-progress-bar__fill {
	height: 100%;
	background: var(--wf-brand);
	border-radius: 7px;
}

.wf-range-row {
	margin: 14px 0;
}

.wf-range-row__label {
	display: flex;
	justify-content: space-between;
	font-size: 13.5px;
	color: var(--wf-ink-2);
	margin-bottom: 4px;
}

.wf-range-row__label b {
	color: var(--wf-ink);
	font-variant-numeric: tabular-nums;
}

.wf-range-bar {
	position: relative;
	height: 8px;
	border-radius: 4px;
	background: var(--wf-surface-2);
}

.wf-range-bar__marker {
	position: absolute;
	top: 50%;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--wf-brand);
	border: 2px solid var(--wf-surface);
	transform: translate(-50%, -50%);
	box-shadow: 0 1px 3px rgba(23, 23, 23, 0.25);
}

/* ---------- coach score (kalorientabelle detail) ---------- */
/* The score used to be a 4px top border on an otherwise neutral card, which is the whole of
   what "not recognizable" meant: four identical grey boxes, the verdict encoded only in a hair
   of color, and nothing at all for anyone who can't separate red from green. Now each card is
   tinted end to end in its semantic pair, and the rating is stated three ways - fill, glyph and
   a spelled-out verdict - so color is reinforcement rather than the only carrier. */
/* Two fixed columns rather than auto-fit: the article column is ~850px wide at the shell max,
   which auto-fit resolves to three tracks and leaves the fourth diet card orphaned on a row of
   its own. The 570px switch is below the 860px point where the sidebar claims 288px, so the
   two tracks stay wide enough on both sides of it. */
.wf-score-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	margin: 14px 0;
}

@media (min-width: 570px) {
	.wf-score-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.wf-score {
	--wf-score-color: var(--wf-ink-3);
	--wf-score-bg: var(--wf-surface);
	border: 1px solid var(--wf-score-color);
	border-left-width: 5px;
	border-radius: var(--wf-radius);
	background: var(--wf-score-bg);
	overflow: hidden;
}

.wf-score--good {
	--wf-score-color: var(--wf-ok);
	--wf-score-bg: var(--wf-ok-bg);
}

.wf-score--mid {
	--wf-score-color: var(--wf-warn);
	--wf-score-bg: var(--wf-warn-bg);
}

.wf-score--bad {
	--wf-score-color: var(--wf-bad);
	--wf-score-bg: var(--wf-bad-bg);
}

.wf-score__head {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 12px;
}

.wf-score__head::-webkit-details-marker {
	display: none;
}

.wf-score__head:focus-visible {
	outline: 2px solid var(--wf-score-color);
	outline-offset: -3px;
}

/* Glyph on the solid semantic fill. --wf-ground is the *page* ground in both themes - near
   white on light, near black on dark - and the semantic colors invert with it, so this single
   pairing stays legible either way without a per-theme override. */
.wf-score__icon {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--wf-score-color);
	color: var(--wf-ground);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.wf-score__text {
	flex: 1 1 auto;
	min-width: 0;
}

.wf-score__name {
	display: block;
	font-size: 14px;
	font-weight: 600;
}

.wf-score__verdict {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--wf-score-color);
	margin-top: 1px;
}

.wf-score__head::after {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	margin-right: 3px;
	border-right: 2px solid var(--wf-ink-3);
	border-bottom: 2px solid var(--wf-ink-3);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .15s ease;
}

.wf-score[open] .wf-score__head::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.wf-score__list {
	list-style: none;
	margin: 0;
	padding: 4px 12px 12px 12px;
}

/* Per-criterion rating. Replaces four static menu_blank_{gg,y,r}.png requests per card with a
   token-driven dot, which is also the only version of these that changes with the theme. */
.wf-score__item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13.5px;
	line-height: 1.45;
	padding: 4px 0;
}

.wf-score__item::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	margin-top: 6px;
	border-radius: 50%;
	background: var(--wf-dot, var(--wf-ink-3));
}

.wf-score__item--good {
	--wf-dot: var(--wf-ok);
}

.wf-score__item--mid {
	--wf-dot: var(--wf-warn);
}

.wf-score__item--bad {
	--wf-dot: var(--wf-bad);
}

.wf-score-note {
	font-size: 13px;
	color: var(--wf-ink-3);
	margin: 0;
}

/* ---------- daily-need panel (kalorientabelle sidebar) ---------- */
.wf-need__value {
	font-size: 28px;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	margin: 4px 0 0;
}

.wf-need__value span {
	font-size: 13px;
	font-weight: 600;
	color: var(--wf-ink-3);
	margin-left: 4px;
}

.wf-need__hint {
	font-size: 13px;
	color: var(--wf-ink-2);
	margin: 8px 0 0;
}

/* ---------- recipes (fitnessrezepte) ---------- */
.wf-recipe-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 16px 0;
}

.wf-recipe-stats div {
	text-align: center;
	padding: 14px 8px;
	border-radius: var(--wf-radius);
	background: var(--wf-surface);
	border: 1px solid var(--wf-line);
}

.wf-recipe-stats strong {
	display: block;
	font-size: 18px;
}

.wf-recipe-stats span {
	font-size: 12px;
	color: var(--wf-ink-3);
	text-transform: uppercase;
	letter-spacing: .03em;
}

.wf-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	counter-reset: wf-step;
}

.wf-steps li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.wf-steps li::before {
	counter-increment: wf-step;
	content: counter(wf-step);
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--wf-brand-tint);
	color: var(--wf-brand-deep);
	font-weight: 700;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wf-ingredients {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
}

.wf-ingredients td {
	padding: 7px 0;
	border-bottom: 1px solid var(--wf-line-soft);
}

.wf-ingredients td:first-child {
	width: 110px;
	color: var(--wf-ink-2);
	white-space: nowrap;
}

.wf-ingredients td:last-child a {
	text-decoration: none;
}

.wf-ingredients td:last-child a:hover {
	text-decoration: underline;
}

.wf-recipe-card__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px 10px;
	font-size: 12.5px;
	color: var(--wf-ink-3);
}

/* ---------- training plan detail ---------- */
.wf-equip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 14px 0;
}

.wf-equip-list span {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--wf-ink-2);
	text-align: center;
	width: 70px;
}

.wf-equip-list img {
	width: 36px;
	height: 36px;
}

.wf-plan-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin: 16px 0;
	font-size: 14.5px;
}

.wf-plan-meta div {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wf-plan-meta img {
	width: 20px;
	height: 20px;
	flex: none;
}
/* ---------- landing pages (home, Ernährungstagebuch) ----------
   These are the templates that render outside .wf-layout: their action assigns $wfFullBleed
   (home.class.php; ernaehrungstagebuch.class.php for its guest view) and layout_v2.tpl then
   hands them a bare <main> with no .wf-shell wrapper and no ad rail, so each section here
   paints its own edge-to-edge band and re-applies .wf-shell to its own inner container. Without that the sections could never reach past the 1180px shell,
   and the alternating ground/--wf-band/--wf-band-ink rhythm the page is built on would be
   impossible. The rail ad unit moves into the page flow instead - see home/home.html. */
.wf-main--bleed {
	display: block;
}

.wf-section {
	padding-block: clamp(44px, 7vw, 84px);
}

/* Tighter at the top (it sits directly under the header) than at the bottom, so the hero does
   not float in the middle of its own band. */
.wf-section--hero {
	padding-block: clamp(26px, 4vw, 52px) clamp(44px, 7vw, 80px);
}

.wf-section--tint {
	background: var(--wf-band);
}

.wf-section--ink {
	background: var(--wf-band-ink);
	color: var(--wf-band-ink-fg);
}

/* .wf-eyebrow pins itself to --wf-brand-deep and .wf-root p to nothing, so both need pulling
   back onto the band's own foreground rather than the page's. */
.wf-section--ink .wf-eyebrow,
.wf-section--ink h2,
.wf-section--ink h3 {
	color: inherit;
}

.wf-section--ink p {
	color: inherit;
	opacity: 0.78;
}

.wf-section__head {
	max-width: 60ch;
	margin: 0 auto clamp(26px, 4vw, 44px);
	text-align: center;
}

.wf-section__head h2 {
	font-size: clamp(24px, 3.4vw, 34px);
	letter-spacing: -0.015em;
	margin: 8px 0 10px;
}

.wf-section__head p {
	color: var(--wf-ink-2);
	font-size: 16.5px;
	margin: 0;
}

/* ---------- landing: hero ---------- */
.wf-lander-hero {
	display: grid;
	gap: clamp(30px, 5vw, 56px);
	align-items: center;
}

@media (min-width: 900px) {
	.wf-lander-hero {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	}
}

.wf-lander-hero h1 {
	font-size: clamp(32px, 5.2vw, 52px);
	letter-spacing: -0.025em;
	margin: 10px 0 14px;
}

/* Both are <p> elements, so their margin has to be set at (0,2,0)+ to outrank the base
   `.wf-root p { margin: 0 0 1em }` rule (0,1,1) - the same specificity trap the button rules
   near the top of this sheet document. */
.wf-lander-hero__lead {
	font-size: clamp(16.5px, 1.5vw, 19px);
	color: var(--wf-ink-2);
	max-width: 46ch;
}

.wf-root .wf-lander-hero__lead {
	margin: 0 0 24px;
}

.wf-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.wf-root .wf-cta-row {
	margin: 0 0 20px;
}

.wf-btn--lg {
	padding: 14px 26px;
	font-size: 16px;
}

/* Inverted CTA for .wf-section--ink, a light pill for the one near-black full-width band.
   Written as `.wf-root a.wf-btn--invert` (0,2,1) so it matches the specificity of the
   `.wf-root a.wf-btn--primary` colour rule near the top of this sheet - a bare `.wf-btn--invert`
   (0,1,0) loses to it and the label renders in the primary colour instead, the same trap
   documented there. */
.wf-btn--invert {
	background: var(--wf-band-ink-fg);
	color: var(--wf-band-ink);
}

.wf-root a.wf-btn--invert {
	color: var(--wf-band-ink);
}

.wf-btn--invert:hover {
	background: #fff;
}

.wf-trustline {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13.5px;
	color: var(--wf-ink-3);
}

.wf-trustline li {
	display: flex;
	align-items: center;
	gap: 7px;
}

.wf-trustline svg {
	width: 15px;
	height: 15px;
	flex: none;
	color: var(--wf-ok);
}

/* ---------- landing: phone mock ----------
   Drawn in markup rather than shipped as a screenshot: the only app screenshots in the repo
   (img/mobile/phones/ios-screen*.png) are 640x1136 iOS-8-era captures, and the hero image the
   previous homepage pointed at (wikifit-app-home.png) does not exist in the repo at all - that
   <img> was a 404. A token-built mock also follows the reader's colour scheme, which a PNG
   cannot. It is decorative: aria-hidden in the template, no text that matters for SEO. */
/* 9/17 rather than a true 9/19.5 handset ratio: the mock's content (header, ring, macros, four
   rows) fills 9/17 almost exactly, and a taller frame left a dead band of empty screen between
   the macro bars and the entry rows that read as a rendering fault rather than as design. */
.wf-phone {
	width: min(268px, 74vw);
	margin: 0 auto;
	aspect-ratio: 9 / 17;
	border-radius: 38px;
	background: var(--wf-card);
	border: 1px solid var(--wf-line);
	box-shadow: var(--wf-shadow-lift);
	padding: 11px;
	display: flex;
}

.wf-phone__screen {
	flex: 1;
	min-width: 0;
	border-radius: 28px;
	background: var(--wf-band);
	padding: 20px 15px 15px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	overflow: hidden;
}

.wf-phone__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wf-ink-3);
}

.wf-ring {
	position: relative;
	width: 130px;
	height: 130px;
	margin: 2px auto;
}

.wf-ring svg {
	width: 100%;
	height: 100%;
	/* the dasharray below starts the arc at 3 o'clock; rotating the whole element moves it to
	   12 o'clock without having to recompute the offset. */
	transform: rotate(-90deg);
}

.wf-ring__track {
	fill: none;
	stroke: var(--wf-line);
	stroke-width: 9;
}

.wf-ring__value {
	fill: none;
	stroke: var(--wf-ink);
	stroke-width: 9;
	stroke-linecap: round;
}

.wf-ring__label {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.wf-ring__label b {
	font-size: 27px;
	line-height: 1;
	letter-spacing: -0.02em;
}

.wf-ring__label span {
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wf-ink-3);
	margin-top: 5px;
}

.wf-macros {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 11px;
}

.wf-macro b {
	display: block;
	font-size: 12.5px;
	margin-bottom: 5px;
}

.wf-macro span {
	display: block;
	font-size: 10.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wf-ink-3);
	margin-bottom: 6px;
}

.wf-macro i {
	display: block;
	height: 4px;
	border-radius: 999px;
	background: var(--wf-line);
}

.wf-macro i::before {
	content: "";
	display: block;
	height: 100%;
	width: var(--wf-macro-fill, 50%);
	border-radius: 999px;
	background: var(--wf-ink-2);
}

.wf-phone__rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: auto;
}

.wf-phone__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 12px;
	border-radius: 10px;
	background: var(--wf-card);
	font-size: 12.5px;
}

.wf-phone__row b {
	font-weight: 600;
}

.wf-phone__row span {
	font-size: 11px;
	color: var(--wf-ink-3);
	white-space: nowrap;
}

/* ---------- landing: goal grid ---------- */
.wf-goals {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

@media (min-width: 700px) {
	.wf-goals {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* the anchors also carry .wf-plain, which is what strips the inherited link colour and
   underline at the (0,2,1) specificity `.wf-root a` demands. */
.wf-goal {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 18px 16px;
	border-radius: var(--wf-radius);
	background: var(--wf-card);
	box-shadow: var(--wf-shadow);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.wf-goal:hover,
.wf-goal:focus-visible {
	box-shadow: var(--wf-shadow-lift);
	transform: translateY(-2px);
}

.wf-goal svg {
	width: 26px;
	height: 26px;
	color: var(--wf-ink-2);
}

/* ---------- landing: feature cards ---------- */
.wf-features {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

@media (min-width: 700px) {
	.wf-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.wf-features {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.wf-feature {
	display: flex;
	flex-direction: column;
	background: var(--wf-card);
	border-radius: var(--wf-radius);
	box-shadow: var(--wf-shadow);
	overflow: hidden;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.wf-feature:hover,
.wf-feature:focus-visible {
	box-shadow: var(--wf-shadow-lift);
	transform: translateY(-2px);
}

/* The photos behind these cards have four different intrinsic ratios (425x282, 347x346,
   400x269, 425x282). The box is positioned and the <img> absolutely filled rather than merely
   sized at 100%/100%: against a parent whose own height comes from aspect-ratio, a percentage
   height is indefinite and resolves to auto, so each image fell back to its intrinsic ratio
   and the four cards' titles landed at four different heights. */
.wf-feature__img {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wf-surface-2);
}

.wf-feature__img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wf-feature__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	padding: 18px;
}

.wf-feature h3 {
	margin: 0;
	font-size: 17px;
}

.wf-feature p {
	margin: 0;
	font-size: 14.5px;
	color: var(--wf-ink-2);
}

.wf-feature__more {
	margin-top: auto;
	padding-top: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wf-brand-deep);
}

@media (prefers-reduced-motion: reduce) {

	.wf-goal:hover,
	.wf-goal:focus-visible,
	.wf-feature:hover,
	.wf-feature:focus-visible {
		transform: none;
	}
}

/* The in-content ad unit trails the feature grid inside that section's shell rather than
   getting a band of its own: templates/ads/slot.tpl renders nothing at all when the reader has
   not consented or the slot has no id yet, and a dedicated <section> would then leave an empty
   padded band in the middle of the page. As a sibling it simply is not there. */
.wf-features + .wf-ad {
	margin-top: clamp(24px, 4vw, 40px);
}

/* ---------- landing: sign-up + closing CTA ---------- */
.wf-signup {
	max-width: 560px;
	margin: 0 auto;
}

.wf-signup__providers {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 4px 0 18px;
}

.wf-appcta {
	display: grid;
	gap: 26px;
	align-items: center;
	justify-items: center;
	text-align: center;
}

@media (min-width: 860px) {
	.wf-appcta {
		grid-template-columns: minmax(0, 1fr) auto;
		justify-items: start;
		text-align: left;
	}
}

.wf-appcta h2 {
	margin: 0 0 8px;
	font-size: clamp(23px, 3vw, 31px);
	letter-spacing: -0.015em;
}

.wf-appcta p {
	margin: 0;
	max-width: 48ch;
}

.wf-appcta .wf-cta-row {
	margin: 18px 0 0;
}

/* the store badges are fixed-artwork PNGs, so they keep their own colour on the ink band -
   only the row's alignment changes with the breakpoint above. */
.wf-section--ink .wf-app-badges {
	justify-content: center;
}

@media (min-width: 860px) {
	.wf-section--ink .wf-app-badges {
		justify-content: flex-start;
	}
}

/* Shared host for the <use> icons in the landing sprite (see home/home.html). fill/stroke and
   the stroke-* properties are all inherited, so they cross into the <use> shadow tree from
   here and each <symbol> can stay pure geometry. .wf-trustline svg and .wf-goal svg override
   the size at (0,1,1), which outranks this rule's (0,1,0). */
.wf-icon {
	width: 24px;
	height: 24px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wf-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* ---------- landing: diary day-card mock ----------
   The stand-in for the Ernährungstagebuch landing page's product shot. It replaces
   /hilfe/ernaehrungstagebuch.png, a 250px-wide capture of the 2011 diary UI (file date:
   2011-01-25) that no longer resembled anything the site renders. Same reasoning as the phone
   mock above: drawn from tokens so it follows the reader's colour scheme, stays sharp at any
   density and cannot go stale the way a screenshot does.

   It reuses .wf-ring and .wf-macro rather than restating them - only the card, the entry rows
   and the water strip are new here. Decorative: aria-hidden in the template, so none of its
   numbers are read out or indexed. */
.wf-diary-mock {
	width: min(400px, 100%);
	margin: 0 auto;
	background: var(--wf-card);
	border: 1px solid var(--wf-line);
	border-radius: var(--wf-radius);
	box-shadow: var(--wf-shadow-lift);
	padding: 20px 18px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.wf-diary-mock__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wf-ink-3);
	border-bottom: 1px solid var(--wf-line-soft);
	padding-bottom: 12px;
}

/* The three macro bars carry the same hues as the split bar on a food page, so a reader who
   has seen one recognises the other. .wf-macro i::before pins itself to --wf-ink-2 at (0,1,1),
   hence the (0,2,1) selectors here. */
.wf-diary-mock .wf-macro--p i::before {
	background: var(--wf-macro-p);
}

.wf-diary-mock .wf-macro--c i::before {
	background: var(--wf-macro-c);
}

.wf-diary-mock .wf-macro--f i::before {
	background: var(--wf-macro-f);
}

.wf-diary-mock__rows {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

/* grid rather than flex: the meal name and its kcal figure are fixed-width columns and the
   food line takes what is left, so the three kcal values stay in one column down the card
   however long the food line is. */
.wf-diary-mock__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2px 10px;
	align-items: baseline;
	padding: 9px 12px;
	border-radius: 8px;
	background: var(--wf-surface);
	font-size: 13px;
}

.wf-diary-mock__row b {
	font-weight: 600;
}

.wf-diary-mock__row em {
	font-style: normal;
	font-weight: 600;
	white-space: nowrap;
	grid-row: span 2;
	align-self: center;
}

.wf-diary-mock__row span {
	grid-column: 1;
	font-size: 11.5px;
	color: var(--wf-ink-3);
}

.wf-diary-mock__water {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: var(--wf-ink-3);
	border-top: 1px solid var(--wf-line-soft);
	padding-top: 14px;
}

.wf-diary-mock__glasses {
	display: flex;
	gap: 5px;
	margin-left: auto;
}

.wf-diary-mock__glasses i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wf-surface-2);
	border: 1px solid var(--wf-line);
}

.wf-diary-mock__glasses i.is-full {
	background: var(--wf-ink-2);
	border-color: var(--wf-ink-2);
}

/* ============================================================================================
   wf-app - member-area design system (dashboard, settings, messages, notifications, photos,
   progress, login/registration/password-recovery). Deliberately its own namespace rather than
   an extension of the marketing components above: the member area has its own app-shell layout
   (webcontent_v2/templates/layout_v2_app.tpl) with no mega-nav/footer/ad rail, its own accent
   color (--wf-app-accent, the native app's brand orange), and a card/row language modeled on
   that app's SwiftUI screens (MoreView.swift, SettingsView.swift) rather than the marketing
   site's editorial cards. Still built entirely on the shared neutral tokens above (--wf-card,
   --wf-line, --wf-shadow, --wf-ok/--wf-warn/--wf-bad) so light/dark and elevation stay consistent
   with the rest of v2.
   ============================================================================================ */

.wf-app {
	background: var(--wf-ground);
	min-height: 100vh;
}

.wf-app-icon-lg {
	width: 22px;
	height: 22px;
}

/* ---------- top bar (member screens) ---------- */

.wf-app-topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 52px;
	padding: 0 6px;
	background: color-mix(in srgb, var(--wf-ground) 88%, transparent);
	backdrop-filter: saturate(180%) blur(10px);
	border-bottom: 1px solid var(--wf-line-soft);
	/* Cross-document view transitions (see the @view-transition rule in
	   layout_v2_app.tpl) match this name between the outgoing and incoming page so the
	   bar reads as one persistent wrapper instead of flashing out/in on every navigation. */
	view-transition-name: wf-app-topbar;
}

.wf-app-topbar__back,
.wf-app-topbar__back--placeholder {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--wf-ink);
	/* .wf-root a's underline (0,1,1) otherwise beats these single-class selectors (0,1,0) - same
	   gap documented near .wf-root a at the top of this file. */
	text-decoration: none;
}

.wf-app-topbar__back:hover {
	background: var(--wf-surface-2);
}

.wf-app-topbar__back .wf-icon,
.wf-app-topbar__avatar .wf-icon {
	width: 20px;
	height: 20px;
}

.wf-app-topbar__title {
	flex: 1 1 auto;
	min-width: 0;
	text-align: center;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0 4px;
}

.wf-app-topbar__avatar {
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--wf-surface-2);
	color: var(--wf-ink-2);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	text-decoration: none;
}

.wf-app-topbar__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- bottom tab bar ---------- */

.wf-app-tabbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	display: flex;
	background: color-mix(in srgb, var(--wf-card) 92%, transparent);
	backdrop-filter: saturate(180%) blur(10px);
	border-top: 1px solid var(--wf-line-soft);
	padding-bottom: env(safe-area-inset-bottom, 0);
	view-transition-name: wf-app-tabbar;
}

.wf-app-tabbar__item {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 7px 4px 8px;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--wf-ink-3);
	text-decoration: none;
}

.wf-app-tabbar__item .wf-icon {
	width: 23px;
	height: 23px;
}

.wf-app-tabbar__item.is-active {
	color: var(--wf-app-accent);
}

/* Extra destinations (Trainingspläne, Fasten) that only fit once the bar becomes a sidebar -
   the mobile bar stays at four items so it's reachable with one thumb. */
.wf-app-tabbar__item--wide {
	display: none;
}

/* ---------- page scaffolding ---------- */

.wf-app-main {
	max-width: 640px;
	margin: 0 auto;
	padding: 16px 16px calc(84px + env(safe-area-inset-bottom, 0));
}

.wf-app-section {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 20px;
}

.wf-app-hello {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 4px 0 0;
}

.wf-app-lead {
	font-size: 13.5px;
	color: var(--wf-ink-2);
	margin: 2px 0 0;
}

@media (min-width: 900px) {
	.wf-app-topbar {
		padding-left: 96px;
	}

	.wf-app-tabbar {
		top: 0;
		bottom: 0;
		left: 0;
		right: auto;
		width: 84px;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		gap: 6px;
		padding: 18px 8px;
		border-top: none;
		border-right: 1px solid var(--wf-line-soft);
	}

	.wf-app-tabbar__item {
		flex: 0 0 auto;
		padding: 10px 4px;
		border-radius: 12px;
	}

	.wf-app-tabbar__item.is-active {
		background: var(--wf-app-accent-tint);
	}

	.wf-app-tabbar__item--wide {
		display: flex;
	}

	.wf-app-main {
		max-width: 720px;
		padding: 28px 24px 48px;
	}
}

/* ---------- persistent nav on public content pages (layout_v2.tpl, logged-in only) ----------
   Reuses .wf-app-tabbar via templates/app_tabbar.tpl for a logged-in visitor on a public page
   (fitnessrezepte, kalorientabelle, ...), not just inside the app shell. The app shell already
   reserves room for the bar in .wf-app-main/.wf-app-topbar's own padding; this public layout
   does not, hence its own offset here, scoped to the body class the layout adds with it. */
body.wf-has-app-nav {
	padding-bottom: calc(84px + env(safe-area-inset-bottom, 0));
}

@media (min-width: 900px) {
	body.wf-has-app-nav {
		padding-bottom: 0;
	}

	/* .wf-shell is the recurring container class for the header bar, mobile nav, main content
	   and footer alike - shifting it once here clears the sidebar everywhere the layout uses it,
	   the same way .wf-app-topbar's own padding-left clears it for the app shell. */
	body.wf-has-app-nav .wf-shell {
		padding-left: 96px;
	}
}

/* ---------- auth chrome (login / registration / password recovery / logout) ---------- */

.wf-app-authbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 60px;
	padding: 0 20px;
}

.wf-app-authbar__logo img {
	display: block;
}

.wf-app-authbar__close {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wf-ink-2);
}

.wf-app-authbar__close:hover {
	background: var(--wf-surface-2);
}

.wf-app-authbar__close .wf-icon {
	width: 16px;
	height: 16px;
}

.wf-app-auth {
	max-width: 420px;
	margin: 0 auto;
	padding: 12px 24px 48px;
}

.wf-app-auth__title {
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 8px 0 6px;
}

.wf-app-auth__subtitle {
	font-size: 14px;
	color: var(--wf-ink-2);
	margin: 0 0 24px;
	line-height: 1.5;
}

.wf-app-auth__foot {
	text-align: center;
	font-size: 13.5px;
	color: var(--wf-ink-2);
	margin-top: 20px;
}

.wf-app-auth__divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 22px 0;
	font-size: 12.5px;
	color: var(--wf-ink-3);
}

.wf-app-auth__divider::before,
.wf-app-auth__divider::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--wf-line);
}

/* ---------- cards & grouped rows ---------- */

.wf-app-card {
	background: var(--wf-card);
	border-radius: 20px;
	box-shadow: var(--wf-shadow);
	padding: 16px;
}

.wf-app-card__header {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wf-ink-3);
	margin: 0 0 12px;
}

.wf-app-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	color: inherit;
}

a.wf-app-row,
button.wf-app-row {
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
}

.wf-app-row__label {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14.5px;
	color: var(--wf-ink);
}

.wf-app-row__value {
	font-size: 13.5px;
	color: var(--wf-ink-2);
	max-width: 45%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wf-app-row__chevron {
	width: 14px;
	height: 14px;
	color: var(--wf-ink-3);
	flex: 0 0 auto;
}

.wf-app-row__badge {
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.wf-app-row__badge .wf-icon {
	width: 16px;
	height: 16px;
}

.wf-app-row__badge--blue { background: #3b82f6; }
.wf-app-row__badge--green { background: #22a559; }
.wf-app-row__badge--orange { background: var(--wf-app-accent); }
.wf-app-row__badge--gray { background: #8a8f98; }
.wf-app-row__badge--red { background: var(--wf-bad); }

.wf-app-divider {
	height: 1px;
	background: var(--wf-line-soft);
	margin: 0;
}

.wf-app-row + .wf-app-divider,
.wf-app-divider + .wf-app-row {
	margin: 0;
}

/* ---------- stats, rings, macro bars ---------- */

.wf-app-ring-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 128px;
	height: 128px;
	flex: 0 0 auto;
}

.wf-app-ring-wrap svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.wf-app-ring-wrap circle {
	fill: none;
	stroke-width: 10;
	stroke-linecap: round;
}

.wf-app-ring-wrap circle:first-child {
	stroke: var(--wf-surface-2);
}

.wf-app-ring-wrap__label {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1.15;
}

.wf-app-ring-wrap__label b {
	font-size: 21px;
	font-weight: 800;
}

.wf-app-ring-wrap__label span {
	font-size: 10.5px;
	color: var(--wf-ink-3);
}

.wf-app-ring-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.wf-app-ring-row__stat {
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
}

.wf-app-ring-row__stat b {
	display: block;
	font-size: 18px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.wf-app-ring-row__stat span {
	font-size: 11.5px;
	color: var(--wf-ink-3);
}

.wf-app-macros {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
}

.wf-app-macros--cols {
	flex-direction: row;
	gap: 16px;
	margin-top: 16px;
}

.wf-app-macro.wf-app-macro--col {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	flex: 1 1 0;
}

.wf-app-macro.wf-app-macro--col b {
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}

.wf-app-macro.wf-app-macro--col i {
	width: 100%;
	height: 4px;
}

.wf-app-macro.wf-app-macro--col span {
	font-size: 12px;
	color: var(--wf-ink-2);
}

.wf-app-macro {
	display: grid;
	grid-template-columns: 60px 1fr 44px;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
}

.wf-app-macro span {
	color: var(--wf-ink-2);
}

.wf-app-macro b {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.wf-app-macro i {
	display: block;
	height: 6px;
	border-radius: 3px;
	background: var(--wf-surface-2);
	position: relative;
	overflow: hidden;
}

.wf-app-macro i::after {
	content: "";
	position: absolute;
	inset: 0;
	width: var(--wf-macro-fill, 0%);
	border-radius: inherit;
	background: var(--wf-macro-color, var(--wf-app-accent));
}

.wf-app-macro--p i { --wf-macro-color: var(--wf-macro-p); }
.wf-app-macro--c i { --wf-macro-color: var(--wf-macro-c); }
.wf-app-macro--f i { --wf-macro-color: var(--wf-macro-f); }

.wf-app-stat-row {
	display: flex;
	gap: 10px;
}

.wf-app-stat {
	flex: 1 1 0;
	background: var(--wf-surface);
	border-radius: 14px;
	padding: 10px 12px;
	text-align: center;
}

.wf-app-stat b {
	display: block;
	font-size: 16px;
	font-weight: 800;
}

.wf-app-stat span {
	font-size: 11px;
	color: var(--wf-ink-3);
}

.wf-app-progress {
	height: 8px;
	border-radius: 4px;
	background: var(--wf-surface-2);
	overflow: hidden;
}

.wf-app-progress > i {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--wf-app-accent);
}

.wf-app-progress--ok > i { background: var(--wf-ok); }
.wf-app-progress--warn > i { background: var(--wf-warn); }
.wf-app-progress--bad > i { background: var(--wf-bad); }

/* ---------- buttons ---------- */

.wf-app-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 13px 20px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	border: 0;
	cursor: pointer;
	background: var(--wf-app-accent);
	color: var(--wf-app-accent-fg);
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.wf-app-btn:hover {
	background: var(--wf-app-accent-hover);
}

/* the UA rule for [hidden] loses to display:inline-flex above */
.wf-app-btn[hidden] {
	display: none;
}

.wf-app-btn:disabled {
	opacity: 0.5;
	cursor: default;
}

.wf-app-btn--ghost {
	background: var(--wf-surface-2);
	color: var(--wf-ink);
}

.wf-app-btn--ghost:hover {
	background: var(--wf-line-soft);
}

.wf-app-btn--danger {
	background: transparent;
	color: var(--wf-bad);
	font-weight: 700;
}

.wf-app-btn--danger:hover {
	background: var(--wf-bad-bg);
}

.wf-app-btn--auto {
	width: auto;
	padding: 9px 16px;
	font-size: 13.5px;
}

.wf-app-link {
	color: var(--wf-app-accent);
	font-weight: 600;
	font-size: 13.5px;
}

/* Small circular icon button - day-nav prev/next (mirrors #wf-app-i-chevron via
   transform:scaleX(-1) for "prev") and the per-card "+" add action (Tagebuch). */
.wf-app-icon-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wf-surface-2);
	color: var(--wf-ink-2);
	flex: 0 0 auto;
}

.wf-app-icon-btn .wf-icon {
	width: 16px;
	height: 16px;
}

/* ---------- forms ---------- */

.wf-app-field {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--wf-surface);
	border: 1px solid transparent;
	border-radius: 14px;
	padding: 12px 14px;
}

.wf-app-field:focus-within {
	border-color: var(--wf-app-accent);
}

.wf-app-field .wf-icon {
	width: 18px;
	height: 18px;
	color: var(--wf-ink-3);
	flex: 0 0 auto;
}

.wf-app-field input,
.wf-app-field select,
.wf-app-field textarea {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--wf-ink);
	padding: 0;
}

.wf-app-field input:focus,
.wf-app-field select:focus,
.wf-app-field textarea:focus {
	outline: none;
}

.wf-app-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wf-app-form-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
}

.wf-app-form-row > label:not(.wf-app-switch) {
	font-size: 14.5px;
	flex: 1 1 auto;
}

.wf-app-form-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--wf-ink-3);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Checkbox/toggle switch, styled from a plain checkbox input - no JS required. */
.wf-app-switch {
	position: relative;
	display: inline-block;
	width: 42px;
	height: 25px;
	flex: 0 0 auto;
}

.wf-app-switch input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}

.wf-app-switch__track {
	position: absolute;
	inset: 0;
	background: var(--wf-line);
	border-radius: 999px;
	transition: background-color 0.15s ease;
	pointer-events: none;
}

.wf-app-switch__track::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease;
}

.wf-app-switch input:checked + .wf-app-switch__track {
	background: var(--wf-app-accent);
}

.wf-app-switch input:checked + .wf-app-switch__track::after {
	transform: translateX(17px);
}

.wf-app-switch input:focus-visible + .wf-app-switch__track {
	outline: 2px solid var(--wf-app-accent);
	outline-offset: 2px;
}

/* Single-select "choice card" (onboarding wizard: gender, activity level, primary goal, ...).
   Same hidden-input + sibling-selector trick as .wf-app-switch above - a real radio under the
   hood, so it still works with no JS and degrades to a plain radio list if the CSS fails. */
.wf-app-choice {
	display: block;
	position: relative;
	cursor: pointer;
}

.wf-app-choice + .wf-app-choice {
	margin-top: 10px;
}

.wf-app-choice__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.wf-app-choice__label {
	display: block;
	padding: 14px 16px;
	border-radius: 14px;
	background: var(--wf-surface);
	border: 1.5px solid transparent;
	font-size: 14.5px;
	color: var(--wf-ink);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.wf-app-choice__label small {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--wf-ink-2);
}

.wf-app-choice__input:checked + .wf-app-choice__label {
	border-color: var(--wf-app-accent);
	background: var(--wf-app-accent-tint);
}

.wf-app-choice__input:focus-visible + .wf-app-choice__label {
	outline: 2px solid var(--wf-app-accent);
	outline-offset: 2px;
}

/* ---------- lists (messages, notifications, activity feed) ---------- */

.wf-app-list {
	display: flex;
	flex-direction: column;
}

.wf-app-list-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0;
	color: inherit;
}

.wf-app-list-item__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	flex: 0 0 auto;
	background: var(--wf-surface-2);
}

.wf-app-list-item__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wf-app-list-item__body {
	flex: 1 1 auto;
	min-width: 0;
}

.wf-app-list-item__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.wf-app-list-item__name {
	font-size: 14px;
	font-weight: 700;
}

.wf-app-list-item.is-unread .wf-app-list-item__name {
	color: var(--wf-app-accent);
}

.wf-app-list-item__time {
	font-size: 11.5px;
	color: var(--wf-ink-3);
	white-space: nowrap;
}

.wf-app-list-item__text {
	font-size: 13.5px;
	color: var(--wf-ink-2);
	margin: 2px 0 0;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.wf-app-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wf-app-accent);
	flex: 0 0 auto;
	margin-top: 5px;
}

.wf-app-pills {
	display: flex;
	gap: 8px;
}

.wf-app-pill {
	padding: 7px 14px;
	border: 0;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	background: var(--wf-surface);
	color: var(--wf-ink-2);
}

.wf-app-pill.is-active {
	background: var(--wf-app-accent);
	color: var(--wf-app-accent-fg);
}

.wf-app-empty {
	text-align: center;
	padding: 36px 16px;
	color: var(--wf-ink-3);
	font-size: 13.5px;
}

.wf-app-empty .wf-icon {
	width: 30px;
	height: 30px;
	margin: 0 auto 10px;
	display: block;
	color: var(--wf-ink-3);
}

/* ---------- destructive confirmation cards (quit membership, delete) ---------- */

.wf-app-warn-card {
	background: var(--wf-bad-bg);
	border-radius: 16px;
	padding: 16px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 13.5px;
	color: var(--wf-ink);
}

.wf-app-warn-card .wf-icon {
	width: 18px;
	height: 18px;
	color: var(--wf-bad);
	flex: 0 0 auto;
	margin-top: 1px;
}

/* ---------- positive status cards (premium active) ---------- */

.wf-app-premium-card {
	background: var(--wf-app-accent-tint);
	border-radius: 16px;
	padding: 16px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 13.5px;
	color: var(--wf-ink);
}

.wf-app-premium-card .wf-icon {
	width: 18px;
	height: 18px;
	color: var(--wf-app-accent);
	flex: 0 0 auto;
	margin-top: 1px;
}

/* ---------- focused sub-flows (diary add-food screens) ----------
   $wfAppFocus in layout_v2_app.tpl: no tab bar, so the page's own fixed bottom action bar
   (.wf-app-actionbar) takes its place - like the app's full-screen sheets. */

.wf-app--focus .wf-app-main {
	padding-bottom: calc(96px + env(safe-area-inset-bottom, 0));
}

.wf-app-actionbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	background: color-mix(in srgb, var(--wf-card) 92%, transparent);
	backdrop-filter: saturate(180%) blur(10px);
	border-top: 1px solid var(--wf-line-soft);
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0));
}

.wf-app-actionbar__inner {
	max-width: 640px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
}

.wf-app-actionbar__icon {
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wf-surface-2);
	color: var(--wf-bad);
}

.wf-app-actionbar__icon .wf-icon {
	width: 20px;
	height: 20px;
}

/* The action bar's second slot is destructive by default (delete); --accent marks the one case
   where it is an alternative way in rather than out - "Mit KI beschreiben" on the food picker. */
.wf-app-actionbar__icon--accent {
	color: var(--wf-app-accent);
}

/* the UA rule for [hidden] loses to display:flex above */
.wf-app-actionbar__icon[hidden] {
	display: none;
}

@media (min-width: 900px) {
	.wf-app--focus .wf-app-topbar {
		padding-left: 6px;
	}

	.wf-app--focus .wf-app-main {
		padding-bottom: 110px;
	}

	.wf-app-actionbar__inner {
		max-width: 720px;
	}
}

/* ---------- add-food picker (myfitness/tagebuch_add.html) ---------- */

.wf-app-picker__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.wf-app-picker__day {
	flex: 1 1 auto;
	text-align: right;
	font-size: 13px;
	color: var(--wf-ink-3);
}

.wf-app-picker__search {
	margin-bottom: 18px;
}

.wf-app-picker__search input[type="search"] {
	-webkit-appearance: none;
	appearance: none;
}

.wf-app-picker__label {
	margin: 18px 4px 8px;
}

.wf-app-picker__list {
	padding-top: 2px;
	padding-bottom: 2px;
}

.wf-app-picker__more {
	margin-top: 14px;
}

/* Pill-shaped native <select> (meal switcher) - the app's "Meal ⌄" title button. */
.wf-app-select {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-width: 0;
	background: var(--wf-surface-2);
	border-radius: 999px;
}

.wf-app-select select {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	background: none;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	color: var(--wf-ink);
	padding: 8px 34px 8px 14px;
	max-width: 60vw;
	text-overflow: ellipsis;
	cursor: pointer;
}

.wf-app-select .wf-icon {
	position: absolute;
	right: 12px;
	width: 14px;
	height: 14px;
	transform: rotate(90deg);
	pointer-events: none;
	color: var(--wf-ink-2);
}

.wf-app-select select:focus-visible {
	outline: 2px solid var(--wf-app-accent);
	outline-offset: 2px;
	border-radius: 999px;
}

/* <details> dropdown menu ("+" → new food / recipe / meal). */
.wf-app-menu {
	position: relative;
	flex: 0 0 auto;
}

.wf-app-menu > summary {
	list-style: none;
	cursor: pointer;
}

.wf-app-menu > summary::-webkit-details-marker {
	display: none;
}

.wf-app-menu__list {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 30;
	min-width: 210px;
	background: var(--wf-card);
	border-radius: 14px;
	box-shadow: var(--wf-shadow), 0 8px 24px rgba(0, 0, 0, 0.12);
	padding: 6px;
	display: flex;
	flex-direction: column;
}

.wf-app-menu__list a {
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 14.5px;
	color: var(--wf-ink);
}

.wf-app-menu__list a:hover {
	background: var(--wf-surface);
}

/* CSS-only tabs: the radios come first, then .wf-app-segmented (their labels) and
   .wf-app-tabs__panels, in the same order - the n-th checked radio shows the n-th panel. */
.wf-app-tabs__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.wf-app-segmented {
	display: flex;
	gap: 2px;
	padding: 3px;
	border-radius: 12px;
	background: var(--wf-surface-2);
}

.wf-app-segmented label {
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
	padding: 7px 6px;
	border-radius: 9px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wf-ink-2);
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wf-app-tabs__panel {
	display: none;
}

.wf-app-tabs__input:nth-of-type(1):checked ~ .wf-app-segmented label:nth-child(1),
.wf-app-tabs__input:nth-of-type(2):checked ~ .wf-app-segmented label:nth-child(2),
.wf-app-tabs__input:nth-of-type(3):checked ~ .wf-app-segmented label:nth-child(3),
.wf-app-tabs__input:nth-of-type(4):checked ~ .wf-app-segmented label:nth-child(4) {
	background: var(--wf-card);
	color: var(--wf-ink);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.wf-app-tabs__input:nth-of-type(1):focus-visible ~ .wf-app-segmented label:nth-child(1),
.wf-app-tabs__input:nth-of-type(2):focus-visible ~ .wf-app-segmented label:nth-child(2),
.wf-app-tabs__input:nth-of-type(3):focus-visible ~ .wf-app-segmented label:nth-child(3),
.wf-app-tabs__input:nth-of-type(4):focus-visible ~ .wf-app-segmented label:nth-child(4) {
	outline: 2px solid var(--wf-app-accent);
	outline-offset: 1px;
}

.wf-app-tabs__input:nth-of-type(1):checked ~ .wf-app-tabs__panels > .wf-app-tabs__panel:nth-child(1),
.wf-app-tabs__input:nth-of-type(2):checked ~ .wf-app-tabs__panels > .wf-app-tabs__panel:nth-child(2),
.wf-app-tabs__input:nth-of-type(3):checked ~ .wf-app-tabs__panels > .wf-app-tabs__panel:nth-child(3),
.wf-app-tabs__input:nth-of-type(4):checked ~ .wf-app-tabs__panels > .wf-app-tabs__panel:nth-child(4) {
	display: block;
}

/* Food row: tappable name/amount area + round checkmark (the app's SelectionIndicator). */
.wf-app-food {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
}

.wf-app-food + .wf-app-food {
	border-top: 1px solid var(--wf-line-soft);
}

.wf-app-food__main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	color: inherit;
}

/* the recipe/meal editor's ingredient rows are a <button> (they submit the form so its other
   fields aren't lost), not a link - undo the UA button chrome the same way button.wf-app-row does */
button.wf-app-food__main {
	border: 0;
	background: none;
	padding: 0;
	width: 100%;
	text-align: left;
	cursor: pointer;
	font: inherit;
}

.wf-app-food__text {
	flex: 1 1 auto;
	min-width: 0;
}

.wf-app-food__text b,
.wf-app-food__text small {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wf-app-food__text b {
	font-size: 14.5px;
	font-weight: 500;
	color: var(--wf-ink);
}

.wf-app-food__text small,
.wf-app-food__meta small {
	font-size: 12px;
	color: var(--wf-ink-3);
}

.wf-app-food__meta {
	flex: 0 0 auto;
	text-align: right;
	max-width: 40%;
}

.wf-app-food__meta b,
.wf-app-food__meta small {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wf-app-food__meta b {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--wf-ink-2);
	font-variant-numeric: tabular-nums;
}

.wf-app-food__toggle {
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	border-radius: 50%;
	border: 1.5px solid var(--wf-line);
	background: none;
	color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wf-app-food__toggle .wf-icon {
	width: 16px;
	height: 16px;
	stroke-width: 2.4;
}

.wf-app-food__toggle:hover {
	border-color: var(--wf-app-accent);
	color: var(--wf-app-accent);
}

.wf-app-food.is-added .wf-app-food__toggle,
.wf-app-food__check:checked + .wf-app-food__toggle {
	background: var(--wf-app-accent);
	border-color: var(--wf-app-accent);
	color: var(--wf-app-accent-fg);
}

.wf-app-food__toggle:disabled {
	opacity: 0.5;
	cursor: default;
}

/* checkbox variant (detail screen's "Häufig kombiniert"): the label is the whole row */
label.wf-app-food {
	cursor: pointer;
}

.wf-app-food__check {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.wf-app-food__check:focus-visible + .wf-app-food__toggle {
	outline: 2px solid var(--wf-app-accent);
	outline-offset: 2px;
}

/* ---------- add-food amount screen (myfitness/tagebuch_food.html) ---------- */

.wf-app-hero {
	position: relative;
	height: 220px;
	margin: -16px -16px 20px;
	overflow: hidden;
	background: var(--wf-surface-2);
	display: flex;
	align-items: center;
	justify-content: center;
}

.wf-app-hero > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wf-app-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 60%);
	pointer-events: none;
}

.wf-app-hero--placeholder {
	height: 170px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--wf-app-accent) 35%, var(--wf-card)), color-mix(in srgb, var(--wf-app-accent) 12%, var(--wf-card)));
}

.wf-app-hero__icon {
	width: 40px;
	height: 40px;
	margin-bottom: 40px;
	color: color-mix(in srgb, var(--wf-app-accent) 70%, var(--wf-ink));
}

.wf-app-hero__text {
	position: absolute;
	left: 16px;
	right: 64px;
	bottom: 14px;
	z-index: 1;
	color: #fff;
}

.wf-app-hero__text h1 {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.wf-app-hero__text p {
	margin: 2px 0 0;
	font-size: 13.5px;
	opacity: 0.88;
}

.wf-app-hero__fav {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 1;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, 0.9);
	color: #8a8f98;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.wf-app-hero__fav .wf-icon {
	width: 20px;
	height: 20px;
}

.wf-app-hero__fav.is-active {
	color: #e0245e;
}

.wf-app-hero__fav.is-active .wf-icon {
	fill: currentColor;
}

@media (min-width: 900px) {
	.wf-app-hero {
		margin: 0 0 20px;
		border-radius: 20px;
	}
}

.wf-app-qty {
	display: flex;
	gap: 10px;
}

.wf-app-qty__amount {
	flex: 0 0 auto;
	width: 120px;
}

.wf-app-qty__amount input {
	text-align: center;
	font-size: 17px;
	font-weight: 700;
	width: 100%;
}

.wf-app-qty__unit {
	font-size: 14px;
	color: var(--wf-ink-3);
	white-space: nowrap;
}

.wf-app-qty__portion {
	flex: 1 1 auto;
	min-width: 0;
}

.wf-app-qty__portion select {
	font-size: 15px;
	text-overflow: ellipsis;
}

.wf-app-chips {
	display: flex;
	flex-direction: row;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	margin-left: -2px;
	margin-right: -2px;
	padding: 0 2px;
}

.wf-app-chips::-webkit-scrollbar {
	display: none;
}

.wf-app-chip {
	flex: 0 0 auto;
	padding: 8px 14px;
	border-radius: 999px;
	border: 0;
	background: var(--wf-surface-2);
	color: var(--wf-ink);
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.wf-app-chip.is-active {
	background: var(--wf-app-accent-tint);
	color: var(--wf-app-accent);
}

/* Tag picker (diet/foodlist_edit.html): the same pills, but wrapped over several lines rather
   than scrolled sideways, each one toggling its own checkbox. The checkbox stays visible, so a
   browser without :has() still shows which categories are picked - it just doesn't tint them. */
.wf-app-chips--wrap {
	flex-wrap: wrap;
	overflow: visible;
	row-gap: 8px;
}

.wf-app-chip--check {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 500;
}

.wf-app-chip--check input {
	margin: 0;
	accent-color: var(--wf-app-accent);
}

.wf-app-chip--check:has(input:checked) {
	background: var(--wf-app-accent-tint);
	color: var(--wf-app-accent);
	font-weight: 600;
}

.wf-app-chip--check:focus-within {
	outline: 2px solid var(--wf-app-accent);
	outline-offset: 2px;
}

.wf-app-inline-select {
	border: 0;
	background: none;
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--wf-app-accent);
	text-align: right;
	max-width: 55%;
	cursor: pointer;
}

/* Coach score card: tinted badge + expandable breakdown (the app's coachScoreCard). */
.wf-app-coach {
	margin-bottom: 20px;
}

.wf-app-coach__head {
	display: flex;
	align-items: center;
	gap: 12px;
	list-style: none;
}

summary.wf-app-coach__head {
	cursor: pointer;
}

summary.wf-app-coach__head::-webkit-details-marker {
	display: none;
}

.wf-app-coach__badge {
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wf-surface-2);
	color: var(--wf-ink-3);
}

.wf-app-coach__badge .wf-icon {
	width: 20px;
	height: 20px;
	stroke-width: 2.4;
}

.wf-app-coach--ok .wf-app-coach__badge { background: var(--wf-ok-bg); color: var(--wf-ok); }
.wf-app-coach--warn .wf-app-coach__badge { background: var(--wf-warn-bg); color: var(--wf-warn); }
.wf-app-coach--bad .wf-app-coach__badge { background: var(--wf-bad-bg); color: var(--wf-bad); }

.wf-app-coach__title {
	flex: 1 1 auto;
	min-width: 0;
}

.wf-app-coach__title b {
	display: block;
	font-size: 15px;
}

.wf-app-coach__title small {
	font-size: 12.5px;
	color: var(--wf-ink-3);
}

.wf-app-coach__chevron {
	width: 14px;
	height: 14px;
	color: var(--wf-app-accent);
	transform: rotate(90deg);
	transition: transform 0.15s ease;
}

details[open] .wf-app-coach__chevron {
	transform: rotate(-90deg);
}

.wf-app-coach__hint {
	margin: 14px 0 8px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wf-ink-3);
}

.wf-app-coach__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 13.5px;
}

.wf-app-coach__list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.wf-app-coach__dot {
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	margin-top: 6px;
	border-radius: 50%;
}

.wf-app-coach__dot--ok { background: var(--wf-ok); }
.wf-app-coach__dot--warn { background: var(--wf-warn); }
.wf-app-coach__dot--bad { background: var(--wf-bad); }

.wf-app-nutrition .wf-app-row {
	padding: 9px 0;
}

.wf-app-nutrition__strong .wf-app-row__label,
.wf-app-nutrition__strong .wf-app-row__value {
	font-weight: 700;
	color: var(--wf-ink);
}

.wf-app-nutrition__sub .wf-app-row__label {
	padding-left: 16px;
	color: var(--wf-ink-2);
}

.wf-app-nutrition__more > summary,
.wf-app-more > summary {
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--wf-app-accent);
	padding-top: 4px;
}

/* ---------- app links: beat the prose-link base rule ----------
   .wf-root a (0,1,1) is meant for inline prose links but also out-specifies every app-shell
   class applied to an <a> (.wf-app-btn, .wf-app-link, .wf-app-chip - all 0,1,0), turning link
   buttons brand-grey and underlined. Same fix as .wf-root a.wf-btn above, for the app shell. */
.wf-app a.wf-app-btn,
.wf-app a.wf-app-link,
.wf-app a.wf-app-chip,
.wf-app a.wf-app-row,
.wf-app a.wf-app-actionbar__icon,
.wf-app .wf-app-segmented a {
	text-decoration: none;
}

.wf-app a.wf-app-actionbar__icon { color: var(--wf-bad); }
.wf-app a.wf-app-actionbar__icon--accent { color: var(--wf-app-accent); }

.wf-app a.wf-app-btn { color: var(--wf-app-accent-fg); }
.wf-app a.wf-app-btn--ghost { color: var(--wf-ink); }
.wf-app a.wf-app-link { color: var(--wf-app-accent); }
.wf-app a.wf-app-chip { color: var(--wf-ink); }
.wf-app a.wf-app-chip.is-active { color: var(--wf-app-accent); }

/* Segmented control made of links (server-side range switch) instead of the radio tabs above. */
.wf-app .wf-app-segmented a {
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
	padding: 7px 10px;
	border-radius: 9px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wf-ink-2);
	white-space: nowrap;
}

.wf-app .wf-app-segmented a.is-active {
	background: var(--wf-card);
	color: var(--wf-ink);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* ============================================================================================
   Body progress - Fortschritt tab (myfitness/body_overview.html, myfitness/body_detail.html).
   The native app's body screens (BodyWeightView, the statistics body card, BodySilhouetteView)
   rebuilt for the web: one column on phones in the app's card order, two columns on desktop
   where the pages get the wide app column (.wf-app-main--wide) instead of the 720px one.
   ============================================================================================ */

@media (min-width: 900px) {
	.wf-app-main--wide {
		max-width: 1160px;
	}
}

.wf-body-cols {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* phones: the columns dissolve so their cards become siblings and can be re-ordered
   (detail page: chart, entry form, goal, entries - the app's order) */
.wf-body-col {
	display: contents;
}

.wf-body-col > * {
	order: var(--wf-body-order, 0);
}

@media (min-width: 1024px) {
	.wf-body-cols {
		display: grid;
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		gap: 20px;
		align-items: start;
	}

	.wf-body-cols--detail {
		grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr);
	}

	.wf-body-col {
		display: flex;
		flex-direction: column;
		gap: 20px;
		min-width: 0;
	}
}

.wf-app .wf-body-group__title,
.wf-app h2.wf-app-card__header {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wf-ink-3);
	margin: 0 0 12px;
	text-wrap: wrap;
}

.wf-app .wf-body-group__title {
	margin: 4px 4px 10px;
}

.wf-body-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 4px;
}

.wf-body-card-head .wf-app-card__header {
	margin-bottom: 8px;
}

.wf-app .wf-body-muted {
	font-size: 12.5px;
	color: var(--wf-ink-3);
	margin: 0;
}

.wf-body-good {
	color: var(--wf-ok);
}

/* ---------- headline goal card ---------- */

.wf-body-hero {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	transition: box-shadow 0.15s ease;
}

a.wf-body-hero:hover {
	box-shadow: var(--wf-shadow-lift);
}

.wf-body-hero__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.wf-body-hero__top .wf-app-card__header {
	margin-bottom: 4px;
}

.wf-app .wf-body-hero__value {
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	margin: 0 0 6px;
}

.wf-body-hero__value small {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--wf-ink-2);
	margin-left: 5px;
}

.wf-app .wf-body-hero__foot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	font-size: 13px;
	color: var(--wf-ink-2);
	margin: 0;
}

.wf-body-hero__foot .wf-icon {
	width: 16px;
	height: 16px;
	color: var(--wf-ok);
	stroke-width: 2.4;
}

.wf-body-hero--empty {
	align-items: flex-start;
}

.wf-body-hero--empty > .wf-icon {
	color: var(--wf-app-accent);
}

.wf-app .wf-body-hero__title {
	font-size: 18px;
	font-weight: 800;
	margin: 0;
}

.wf-body-delta {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	background: var(--wf-surface-2);
	color: var(--wf-ink-2);
}

.wf-body-delta > span {
	font-weight: 500;
	color: var(--wf-ink-3);
}

.wf-body-delta--good {
	background: var(--wf-ok-bg);
	color: var(--wf-ok);
}

/* start / current / goal (and start value / start date) in one row, like the app */
.wf-body-trio {
	display: flex;
	justify-content: space-between;
	gap: 8px;
}

.wf-body-trio > div {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.wf-body-trio > div:nth-child(2) { align-items: center; text-align: center; }
.wf-body-trio > div:nth-child(3) { align-items: flex-end; text-align: right; }

.wf-body-trio span {
	font-size: 11.5px;
	color: var(--wf-ink-3);
}

.wf-body-trio b {
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.wf-body-trio--start {
	padding-top: 12px;
	border-top: 1px solid var(--wf-line-soft);
}

.wf-body-trio--start > div:nth-child(2) { align-items: flex-end; text-align: right; }

/* ---------- sparklines ---------- */

.wf-body-spark {
	width: 100%;
	height: 36px;
	overflow: visible;
}

.wf-body-spark--hero {
	height: 88px;
}

.wf-body-spark__line {
	fill: none;
	stroke: var(--wf-app-accent);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

/* no fill here: the gradient comes from the element's fill="url(#wfSparkFade)" attribute, and a
   fill declared in CSS would win over it */
.wf-body-spark__area {
	stroke: none;
}

/* fades out downwards, so a sparkline never reads as a solid block (dark theme especially) */
.wf-body-spark__stop-top {
	stop-color: var(--wf-app-accent);
	stop-opacity: 0.2;
}

.wf-body-spark__stop-bottom {
	stop-color: var(--wf-app-accent);
	stop-opacity: 0;
}

.wf-body-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.wf-body-actions .wf-app-btn {
	padding: 12px 10px;
	font-size: 14px;
	gap: 6px;
}

.wf-body-actions .wf-icon {
	width: 17px;
	height: 17px;
	stroke-width: 2.2;
}

/* ---------- metric tiles ---------- */

.wf-body-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

@media (min-width: 640px) {
	.wf-body-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.wf-app a.wf-body-tile {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-height: 138px;
	padding: 14px 14px 12px;
	border-radius: 18px;
	background: var(--wf-card);
	box-shadow: var(--wf-shadow);
	color: var(--wf-ink);
	text-decoration: none;
	transition: box-shadow 0.15s ease;
}

.wf-app a.wf-body-tile:hover {
	box-shadow: var(--wf-shadow-lift);
}

.wf-body-tile__name {
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--wf-ink-2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	hyphens: auto;
}

.wf-body-tile__value {
	font-size: 13px;
	color: var(--wf-ink-2);
	font-variant-numeric: tabular-nums;
}

.wf-body-tile__value b {
	font-size: 23px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--wf-ink);
}

.wf-body-tile__meta {
	font-size: 11.5px;
	color: var(--wf-ink-3);
	min-height: 1.3em;
}

.wf-body-tile .wf-body-spark {
	margin-top: auto;
	padding-top: 6px;
}

.wf-body-tile__bar {
	height: 5px;
	margin-top: 8px;
}

.wf-body-chipwrap {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* ---------- anatomy figure with circumference rings ---------- */

.wf-body-figure-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.wf-body-figure-card__hint {
	font-size: 11.5px;
	color: var(--wf-ink-3);
}

.wf-body-figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

/* the rings define the stage height; the figure fills it behind them */
.wf-body-figure__stage {
	position: relative;
	width: 100%;
	max-width: 420px;
}

.wf-body-figure__stage picture {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	aspect-ratio: 410 / 798;
}

.wf-root .wf-body-figure__img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
}

.wf-body-figure__rows {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 4px 0 28px;
}

.wf-body-figure__row {
	display: flex;
	justify-content: space-between;
}

.wf-app a.wf-body-ring {
	width: 88px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	color: var(--wf-ink);
	text-decoration: none;
	text-align: center;
}

.wf-body-ring__dial {
	position: relative;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--wf-card);
	box-shadow: var(--wf-shadow);
	transition: transform 0.15s ease;
}

.wf-body-ring:hover .wf-body-ring__dial {
	transform: scale(1.06);
}

.wf-body-ring__dial svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.wf-body-ring__dial circle {
	fill: none;
	stroke-width: 5;
	stroke-linecap: round;
	stroke: var(--wf-app-accent);
}

.wf-body-ring__dial circle:first-child {
	stroke: var(--wf-surface-2);
}

.wf-body-ring__dial b {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.wf-body-ring--empty .wf-body-ring__dial b {
	color: var(--wf-ink-3);
	font-weight: 600;
}

.wf-body-ring__cap {
	font-size: 11px;
	line-height: 1.25;
	color: var(--wf-ink-2);
	hyphens: auto;
	overflow-wrap: anywhere;
	padding: 1px 4px;
	border-radius: 6px;
	background: color-mix(in srgb, var(--wf-card) 80%, transparent);
}

.wf-body-ring__cap small {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	color: var(--wf-app-accent);
}

.wf-body-row-sub {
	display: block;
	font-size: 12px;
	color: var(--wf-ink-3);
	margin-top: 1px;
}

/* ---------- detail: switcher, chart card ---------- */

.wf-body-switch {
	margin-bottom: 14px;
}

@media (min-width: 1024px) {
	.wf-body-switch {
		flex-wrap: wrap;
		overflow: visible;
	}
}

.wf-body-chart-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 16px;
	margin-bottom: 14px;
}

.wf-body-chart-card__head .wf-app-card__header {
	margin-bottom: 4px;
}

.wf-body-ranges {
	flex: 0 1 340px;
	min-width: 0;
	background: var(--wf-surface);
}

.wf-app .wf-body-ranges a.is-active {
	background: var(--wf-app-accent-tint);
	color: var(--wf-app-accent);
	box-shadow: none;
}

@media (max-width: 639px) {
	.wf-body-ranges {
		flex-basis: 100%;
	}
}

.wf-chart {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	grid-template-rows: 1fr auto;
	column-gap: 6px;
	height: 230px;
	margin-bottom: 16px;
}

@media (min-width: 1024px) {
	.wf-chart {
		height: 320px;
	}
}

.wf-chart__y {
	position: relative;
}

.wf-chart__y span {
	position: absolute;
	right: 0;
	transform: translateY(-50%);
	font-size: 11px;
	color: var(--wf-ink-3);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.wf-chart__plot {
	position: relative;
	touch-action: pan-y;
	cursor: crosshair;
	border-radius: 6px;
}

.wf-chart__plot:focus-visible {
	outline: 2px solid var(--wf-app-accent);
	outline-offset: 4px;
}

.wf-chart__plot svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	overflow: visible;
}

.wf-chart__grid {
	stroke: var(--wf-line-soft);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.wf-chart__goal {
	stroke: var(--wf-ok);
	stroke-width: 1.5;
	stroke-dasharray: 5 5;
	vector-effect: non-scaling-stroke;
}

.wf-chart__goal-label {
	position: absolute;
	right: 0;
	transform: translateY(calc(-100% - 3px));
	font-size: 11px;
	font-weight: 700;
	color: var(--wf-ok);
	background: color-mix(in srgb, var(--wf-card) 85%, transparent);
	padding: 0 4px;
	border-radius: 4px;
}

.wf-chart__line {
	fill: none;
	stroke: var(--wf-app-accent);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.wf-chart__area-top {
	stop-color: var(--wf-app-accent);
	stop-opacity: 0.22;
}

.wf-chart__area-bottom {
	stop-color: var(--wf-app-accent);
	stop-opacity: 0;
}

.wf-chart__dot,
.wf-chart__mark {
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wf-card);
	border: 2px solid var(--wf-app-accent);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.wf-chart__dot--last {
	width: 12px;
	height: 12px;
	background: var(--wf-app-accent);
	border-color: var(--wf-card);
	box-shadow: 0 0 0 1px var(--wf-app-accent);
}

.wf-chart__mark {
	display: none;
	width: 13px;
	height: 13px;
	background: var(--wf-app-accent);
	border-color: var(--wf-card);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	z-index: 2;
}

.wf-chart__cursor {
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 0;
	border-left: 1px dashed color-mix(in srgb, var(--wf-app-accent) 55%, transparent);
	pointer-events: none;
}

.wf-chart__tip {
	display: none;
	position: absolute;
	z-index: 3;
	transform: translate(-50%, calc(-100% - 12px));
	padding: 5px 10px;
	border-radius: 10px;
	background: var(--wf-card);
	box-shadow: var(--wf-shadow-lift);
	text-align: center;
	white-space: nowrap;
	pointer-events: none;
	line-height: 1.25;
}

.wf-chart__tip.is-below {
	transform: translate(-50%, 12px);
}

.wf-chart__tip b {
	display: block;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.wf-chart__tip span {
	font-size: 11px;
	color: var(--wf-ink-3);
}

.wf-chart.is-active .wf-chart__tip,
.wf-chart.is-active .wf-chart__cursor,
.wf-chart.is-active .wf-chart__mark {
	display: block;
}

.wf-chart__x {
	grid-column: 2;
	position: relative;
	height: 20px;
	margin-top: 6px;
}

.wf-chart__x span {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	font-size: 11px;
	color: var(--wf-ink-3);
	white-space: nowrap;
}

.wf-chart__x span.is-first { transform: none; }
.wf-chart__x span.is-last { transform: translateX(-100%); }

/* start / current / difference (+ low / high on wider screens) */
.wf-body-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	padding-top: 14px;
	border-top: 1px solid var(--wf-line-soft);
	text-align: center;
}

.wf-body-stats > div {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.wf-body-stats span {
	font-size: 11.5px;
	color: var(--wf-ink-3);
}

.wf-body-stats b {
	font-size: 19px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.wf-body-stats small {
	font-size: 11px;
	color: var(--wf-ink-3);
}

.wf-body-stats__extra {
	display: none !important;
}

@media (min-width: 640px) {
	.wf-body-stats {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.wf-body-stats__extra {
		display: flex !important;
	}
}

/* ---------- detail: entries ---------- */

.wf-body-entry-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wf-body-entry {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto 64px auto;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	border-top: 1px solid var(--wf-line-soft);
}

.wf-body-entry:first-child {
	border-top: 0;
}

.wf-body-entry.is-editing {
	background: var(--wf-app-accent-tint);
	margin: 0 -10px;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 10px;
}

.wf-body-entry__date {
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.wf-body-entry__value {
	font-size: 14.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.wf-body-entry__value small {
	font-weight: 500;
	color: var(--wf-ink-3);
	font-size: 12px;
}

.wf-body-entry__delta {
	font-size: 12px;
	font-weight: 600;
	color: var(--wf-ink-3);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.wf-body-entry__delta.wf-body-good {
	color: var(--wf-ok);
}

.wf-body-entry__actions {
	display: flex;
	gap: 2px;
}

.wf-body-entry__actions form {
	margin: 0;
}

.wf-app .wf-body-icon-btn {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--wf-ink-3);
	cursor: pointer;
}

.wf-app .wf-body-icon-btn:hover {
	background: var(--wf-surface-2);
	color: var(--wf-ink);
}

.wf-app .wf-body-icon-btn--danger:hover {
	background: var(--wf-bad-bg);
	color: var(--wf-bad);
}

.wf-body-icon-btn .wf-icon {
	width: 16px;
	height: 16px;
}

.wf-app a.wf-body-more {
	display: inline-block;
	margin-top: 10px;
}

/* ---------- detail: entry form & goal card ---------- */

.wf-body-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 10px;
}

.wf-body-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.wf-body-field .wf-app-form-label small {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
}

.wf-body-field .wf-app-field {
	padding: 10px 12px;
}

.wf-body-field input[type="text"] {
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: 16px;
}

.wf-body-field input[type="date"] {
	font-size: 15px;
	min-height: 24px;
}

.wf-body-unit {
	font-size: 13px;
	color: var(--wf-ink-3);
	flex: 0 0 auto;
}

.wf-body-goal {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 12px;
}

.wf-app-ring-wrap.wf-body-goal__ring {
	width: 104px;
	height: 104px;
}

.wf-body-goal__ring .wf-app-ring-wrap__label b {
	font-size: 19px;
}

.wf-body-goal__facts {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.wf-body-goal__facts > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
}

.wf-body-goal__facts dt {
	font-size: 12.5px;
	color: var(--wf-ink-3);
}

.wf-body-goal__facts dd {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.wf-app .wf-body-goal__line {
	font-size: 13px;
	color: var(--wf-ink-2);
	margin: 0 0 12px;
}

.wf-app .wf-body-goal__intro {
	margin-bottom: 14px;
	font-size: 13.5px;
	line-height: 1.5;
}

.wf-body-pace {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 14px;
}

.wf-body-pace > div {
	background: var(--wf-surface);
	border-radius: 12px;
	padding: 9px 11px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wf-body-pace span {
	font-size: 11px;
	color: var(--wf-ink-3);
}

.wf-body-pace b {
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.wf-body-goal-edit {
	margin-top: 14px;
}

.wf-body-goal-edit > summary {
	list-style: none;
	cursor: pointer;
	display: inline-block;
	margin-bottom: 4px;
}

.wf-body-goal-edit > summary::-webkit-details-marker {
	display: none;
}

.wf-body-goal-edit[open] > summary {
	margin-bottom: 14px;
}

.wf-body-goal-edit > form + form {
	margin-top: 6px;
}

/* ---------- water tracker (myfitness/tagebuch.html, the app's WaterSectionView) ---------- */

.wf-app-water__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.wf-app-water__amount {
	margin: 0;
	font-size: 15px;
	color: var(--wf-ink-2);
}

.wf-app-water__amount b {
	font-size: 26px;
	font-weight: 700;
	color: var(--wf-ink);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

.wf-app-water__goal {
	margin: 2px 0 0;
	font-size: 12.5px;
	color: var(--wf-ink-3);
}

.wf-app-water__done-mark {
	display: none;
	color: var(--wf-ok);
	font-weight: 600;
}

.wf-app-water__done-mark .wf-icon {
	width: 13px;
	height: 13px;
	stroke-width: 2.4;
	vertical-align: -2px;
}

.wf-app-water.is-done .wf-app-water__done-mark {
	display: inline;
}

.wf-app-water__bar {
	height: 10px;
	border-radius: 6px;
	margin: 12px 0 14px;
}

.wf-app-water__bar > i {
	background: var(--wf-water);
	transition: width 0.35s ease, background-color 0.2s ease;
}

.wf-app-water.is-done .wf-app-water__bar > i {
	background: var(--wf-ok);
}

.wf-app-water__presets {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.wf-app-water__presets form {
	display: contents;
}

.wf-app-water__preset {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 10px 4px 8px;
	border: 0;
	border-radius: 16px;
	background: none;
	color: var(--wf-ink);
	font: inherit;
	text-decoration: none;
	cursor: pointer;
	/* the long press subtracts - keep the touch callout/text selection out of its way */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	touch-action: manipulation;
	transition: background-color 0.15s ease;
}

/* the free-amount preset is a link (it opens the sheet) - .wf-root a's underline/brand color
   has the same specificity, so it needs the a-qualified selector to lose, like a.wf-app-row */
a.wf-app-water__preset {
	color: var(--wf-ink);
	text-decoration: none;
}

.wf-app-water__preset:hover {
	background: var(--wf-surface);
}

.wf-app-water__preset:focus-visible {
	outline: 2px solid var(--wf-water);
	outline-offset: 1px;
}

.wf-app-water__icon {
	position: relative;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wf-water-tint);
	color: var(--wf-water);
}

.wf-app-water__icon > .wf-icon {
	width: 28px;
	height: 28px;
}

.wf-app-water__icon--bottle > .wf-icon {
	width: 32px;
	height: 32px;
}

.wf-app-water__icon--free {
	font-size: 14px;
	font-weight: 700;
}

.wf-app-water__badge {
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wf-water);
	color: #fff;
	box-shadow: 0 0 0 2px var(--wf-card);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.wf-app-water__badge .wf-icon {
	width: 12px;
	height: 12px;
	stroke-width: 3;
}

.wf-app-water__preset.is-added .wf-app-water__badge {
	background: var(--wf-ok);
	transform: scale(1.15);
}

.wf-app-water__preset.is-subtracted .wf-app-water__badge {
	background: var(--wf-bad);
	transform: scale(1.15);
}

/* the badge's plus turns into a check (added) or minus (long press subtracted) for a moment */
.wf-app-water__badge .wf-app-water__b-check,
.wf-app-water__badge .wf-app-water__b-minus,
.wf-app-water__preset.is-added .wf-app-water__b-plus,
.wf-app-water__preset.is-subtracted .wf-app-water__b-plus {
	display: none;
}

.wf-app-water__preset.is-added .wf-app-water__b-check,
.wf-app-water__preset.is-subtracted .wf-app-water__b-minus {
	display: block;
}

.wf-app-water__label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--wf-ink-2);
	font-variant-numeric: tabular-nums;
}

.wf-app-water__hint,
.wf-app-water__status {
	margin: 6px 0 0;
	font-size: 11.5px;
	text-align: center;
	color: var(--wf-ink-3);
}

.wf-app-water__status {
	color: var(--wf-bad);
}

.wf-app-water__status:empty {
	display: none;
}

.wf-app-water__modes {
	position: relative;
}

.wf-app-water__unit {
	color: var(--wf-ink-3);
	font-size: 14px;
	flex: 0 0 auto;
}

.wf-app-water__num {
	width: 132px;
	flex: 0 0 auto;
	padding: 9px 12px;
}

.wf-app-water__num input {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.wf-app-water__small {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--wf-ink-3);
}

.wf-app-form-row[hidden] {
	display: none;
}

/* destructive entry in a .wf-app-menu (a POST form, so a button rather than a link) */
.wf-app-menu__list form {
	display: flex;
}

.wf-app-menu__danger {
	flex: 1 1 auto;
	text-align: left;
	padding: 10px 12px;
	border: 0;
	border-radius: 10px;
	background: none;
	font: inherit;
	font-size: 14.5px;
	color: var(--wf-bad);
	cursor: pointer;
}

.wf-app-menu__danger:hover {
	background: var(--wf-bad-bg);
}

/* ---------- bottom sheet (<dialog class="wf-app-sheet">) ----------
   A modal <dialog> opened with showModal(); docked to the bottom edge on phones like the app's
   .sheet presentations, a centered card from tablet width up. Without JS the opener links jump
   to the dialog's id and :target shows it inline in the page instead. */
.wf-app-sheet {
	width: 100%;
	max-width: 440px;
	margin: auto auto 0;
	padding: 18px 16px calc(20px + env(safe-area-inset-bottom, 0px));
	border: 0;
	border-radius: 22px 22px 0 0;
	background: var(--wf-card);
	color: var(--wf-ink);
	box-shadow: var(--wf-shadow-lift);
}

.wf-app-sheet::backdrop {
	background: rgba(0, 0, 0, 0.4);
}

.wf-app-sheet[open] {
	animation: wf-app-sheet-in 0.22s ease-out;
}

@keyframes wf-app-sheet-in {
	from { transform: translateY(24px); opacity: 0; }
	to { transform: none; opacity: 1; }
}

.wf-app-sheet:target:not([open]) {
	display: block;
	position: static;
	margin: 12px 0;
	border-radius: 20px;
	box-shadow: var(--wf-shadow);
}

.wf-app-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.wf-app-sheet__title {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
}

@media (min-width: 600px) {
	.wf-app-sheet {
		margin: auto;
		border-radius: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wf-app-sheet[open] {
		animation: none;
	}

	.wf-app-water__bar > i,
	.wf-app-water__badge {
		transition: none;
	}
}

/* ---------- forum ----------
   Hub, thread lists, thread pages and the post editor (templates/forum_*.tpl, assets/v2/
   forum.js). Post bodies are user-written HTML from ForumMarkup's allow-list, so .wf-post__body
   styles bare element selectors rather than classes - it is the one place in this sheet that
   has to. */

.wf-forum-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--wf-line-soft);
}

.wf-forum-nav__links {
	display: flex;
	gap: 16px;
	font-size: 14px;
}

.wf-forum-nav__links a {
	color: var(--wf-ink-2);
	text-decoration: none;
	padding: 4px 0;
	border-bottom: 2px solid transparent;
}

.wf-forum-nav__links a:hover {
	color: var(--wf-ink);
}

.wf-forum-nav__links a[aria-current="page"] {
	color: var(--wf-ink);
	font-weight: 600;
	border-bottom-color: var(--wf-brand);
}

.wf-forum-nav__search {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1 1 200px;
	max-width: 320px;
	margin-left: auto;
	background: var(--wf-surface);
	border: 1px solid var(--wf-line);
	border-radius: 999px;
	padding: 2px 6px 2px 12px;
}

.wf-forum-nav__search input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	color: var(--wf-ink);
	font: inherit;
	font-size: 14px;
	padding: 7px 0;
}

.wf-forum-nav__search input:focus {
	outline: none;
}

.wf-forum-nav__search button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--wf-ink-2);
	cursor: pointer;
}

.wf-forum-nav__search button:hover {
	color: var(--wf-ink);
}

/* page header: title block plus the one primary action */
.wf-forum-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px 20px;
	margin-bottom: 20px;
}

.wf-forum-head > div {
	flex: 1 1 260px;
	min-width: 0;
}

.wf-forum-head h1 {
	margin-bottom: 0.25em;
}

.wf-forum-head p {
	margin: 0;
}

.wf-forum-head__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	color: var(--wf-ink-3);
}

/* ---------- thread lists ---------- */

.wf-thread-list {
	background: var(--wf-card);
	border-radius: var(--wf-radius);
	box-shadow: var(--wf-shadow);
	overflow: hidden;
}

.wf-thread-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 18px;
	padding: 14px 18px;
}

.wf-thread-row + .wf-thread-row {
	border-top: 1px solid var(--wf-line-soft);
}

.wf-thread-row__main {
	flex: 1 1 240px;
	min-width: 0;
}

.wf-thread-row__forum {
	margin: 0 0 2px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wf-ink-3);
}

.wf-thread-row__title {
	font-size: 16px;
	margin: 0 0 3px;
}

.wf-thread-row__title a {
	color: var(--wf-ink);
	text-decoration: none;
}

.wf-thread-row__title a:hover {
	text-decoration: underline;
}

.wf-thread-row__excerpt {
	margin: 0 0 3px;
	font-size: 13.5px;
	color: var(--wf-ink-2);
}

.wf-thread-row__meta {
	margin: 0;
	font-size: 12.5px;
	color: var(--wf-ink-3);
}

.wf-thread-row__side {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	font-size: 12.5px;
	color: var(--wf-ink-3);
	text-align: right;
}

.wf-thread-row__count {
	color: var(--wf-ink-2);
	text-decoration: none;
	white-space: nowrap;
}

.wf-thread-row__count:hover {
	text-decoration: underline;
}

/* the two side facts sit under the title on a phone and beside it from tablet up */
@media (min-width: 640px) {
	.wf-thread-row__side {
		flex: 0 0 auto;
		flex-direction: column;
		align-items: flex-end;
		gap: 3px;
	}
}

.wf-forum-section h2 {
	margin: 0 0 10px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wf-ink-3);
}

.wf-forum-section__item {
	display: block;
	padding: 8px 0;
	text-decoration: none;
	color: var(--wf-ink);
	border-top: 1px solid var(--wf-line-soft);
}

.wf-forum-section__item:first-of-type {
	border-top: 0;
}

.wf-forum-section__item b {
	display: block;
	font-size: 14.5px;
}

.wf-forum-section__item:hover b {
	text-decoration: underline;
}

.wf-forum-section__item span {
	display: block;
	font-size: 12.5px;
	color: var(--wf-ink-3);
}

/* ---------- posts ---------- */

.wf-post-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.wf-post {
	background: var(--wf-card);
	border-radius: var(--wf-radius);
	box-shadow: var(--wf-shadow);
	padding: 16px 18px;
	scroll-margin-top: 16px;
}

/* the post someone was linked to */
.wf-post:target {
	box-shadow: var(--wf-shadow), 0 0 0 2px var(--wf-brand);
}

.wf-post__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin-bottom: 10px;
}

.wf-post__author {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-weight: 600;
	font-size: 14.5px;
	color: var(--wf-ink);
	text-decoration: none;
}

.wf-post__author span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wf-post__avatar {
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.wf-post__count {
	font-size: 12px;
	color: var(--wf-ink-3);
}

.wf-post__date {
	margin-left: auto;
	font-size: 12px;
	color: var(--wf-ink-3);
	text-decoration: none;
	flex: none;
}

.wf-post__date:hover {
	color: var(--wf-ink-2);
}

.wf-post__edited {
	margin: 8px 0 0;
	font-size: 12px;
	font-style: italic;
	color: var(--wf-ink-3);
}

.wf-post__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--wf-line-soft);
	font-size: 13px;
}

.wf-post__actions a {
	color: var(--wf-ink-3);
	text-decoration: none;
}

.wf-post__actions a:hover {
	color: var(--wf-ink);
}

.wf-post__inline-form {
	display: inline;
}

/* post body: user content, so plain element selectors */
.wf-post__body {
	font-size: 15px;
	line-height: 1.6;
	overflow-wrap: break-word;
}

.wf-post__body > *:first-child {
	margin-top: 0;
}

.wf-post__body > *:last-child {
	margin-bottom: 0;
}

.wf-post__body p {
	margin: 0 0 0.8em;
}

.wf-post__body ul,
.wf-post__body ol {
	margin: 0 0 0.8em;
	padding-left: 1.4em;
}

.wf-post__body li {
	margin-bottom: 0.25em;
}

.wf-post__body blockquote {
	margin: 0 0 0.8em;
	padding: 8px 14px;
	border-left: 3px solid var(--wf-line);
	background: var(--wf-surface);
	border-radius: 0 8px 8px 0;
	color: var(--wf-ink-2);
}

.wf-post__body blockquote > *:last-child {
	margin-bottom: 0;
}

/* the legacy quote attribution ("geschrieben von ... am ...") */
.wf-post__body blockquote > span {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	font-style: italic;
	color: var(--wf-ink-3);
}

.wf-post__body img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

.wf-post__body pre {
	white-space: pre-wrap;
	font-size: 13.5px;
	background: var(--wf-surface);
	padding: 10px 12px;
	border-radius: 8px;
}

/* a pasted table must not widen the page */
.wf-post__body table {
	display: block;
	overflow-x: auto;
	max-width: 100%;
	border-collapse: collapse;
	margin-bottom: 0.8em;
	font-size: 14px;
}

.wf-post__body td,
.wf-post__body th {
	border: 1px solid var(--wf-line-soft);
	padding: 5px 8px;
	text-align: left;
}

/* ---------- moderation ---------- */

.wf-forum-mod {
	margin-bottom: 14px;
	padding: 10px 14px;
	background: var(--wf-surface);
	border-radius: var(--wf-radius);
	font-size: 13.5px;
}

.wf-forum-mod > summary {
	cursor: pointer;
	color: var(--wf-ink-2);
	font-weight: 600;
}

.wf-forum-mod__form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.wf-forum-mod__form select {
	flex: 1 1 200px;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid var(--wf-line);
	border-radius: 7px;
	background: var(--wf-card);
	color: var(--wf-ink);
	font: inherit;
	font-size: 14px;
}

/* ---------- editor ---------- */

.wf-reply {
	margin-top: 28px;
	scroll-margin-top: 16px;
}

.wf-reply__form {
	padding: 16px;
}

.wf-reply__prompt p:last-child {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.wf-reply__closed {
	color: var(--wf-ink-3);
	font-style: italic;
}

.wf-reply__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

.wf-forum-compose__in {
	font-size: 13.5px;
	color: var(--wf-ink-2);
	margin: 0 0 14px;
}

.wf-editor {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wf-line);
	border-radius: 10px;
	background: var(--wf-card);
	overflow: hidden;
}

.wf-editor:focus-within {
	border-color: var(--wf-ink-3);
}

.wf-editor__label {
	padding: 10px 12px 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--wf-ink-2);
}

.wf-editor__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	padding: 6px 8px;
	border-bottom: 1px solid var(--wf-line-soft);
	background: var(--wf-surface);
	/* stays reachable while writing a long post on a phone */
	position: sticky;
	top: 0;
	z-index: 1;
}

.wf-editor__tools,
.wf-editor__tabs {
	display: flex;
	align-items: center;
	gap: 2px;
}

/* the UA rule for [hidden] loses to display:flex above */
.wf-editor__tools[hidden],
.wf-editor__tabs[hidden],
.wf-editor__preview[hidden] {
	display: none;
}

.wf-editor__tools button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 36px keeps every control at a comfortable touch size */
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 7px;
	background: none;
	color: var(--wf-ink-2);
	font-size: 15px;
	cursor: pointer;
}

.wf-editor__tools button:hover {
	background: var(--wf-surface-2);
	color: var(--wf-ink);
}

.wf-editor__tools svg {
	width: 16px;
	height: 16px;
}

.wf-editor__sep {
	width: 1px;
	height: 20px;
	margin: 0 4px;
	background: var(--wf-line);
}

.wf-editor__tabs button {
	padding: 7px 12px;
	border: 0;
	border-radius: 7px;
	background: none;
	color: var(--wf-ink-3);
	font: inherit;
	font-size: 13.5px;
	cursor: pointer;
}

.wf-editor__tabs button[aria-selected="true"] {
	background: var(--wf-card);
	color: var(--wf-ink);
	font-weight: 600;
	box-shadow: var(--wf-shadow);
}

.wf-editor textarea {
	width: 100%;
	min-height: 120px;
	border: 0;
	padding: 12px;
	background: var(--wf-card);
	color: var(--wf-ink);
	font: inherit;
	font-size: 15px;
	line-height: 1.55;
	resize: vertical;
}

.wf-editor textarea:focus {
	outline: none;
}

.wf-editor__preview {
	padding: 12px;
	min-height: 120px;
}

.wf-editor__help {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 12px;
	margin: 0;
	padding: 7px 12px;
	border-top: 1px solid var(--wf-line-soft);
	background: var(--wf-surface);
	font-size: 12px;
	color: var(--wf-ink-3);
}

.wf-editor__help-mark {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.wf-editor__count {
	white-space: nowrap;
}

.wf-editor__notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 8px 12px;
	background: var(--wf-ok-bg);
	color: var(--wf-ok);
	font-size: 13px;
}

.wf-editor__notice-btn {
	border: 0;
	background: none;
	padding: 0;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* ============================================================================================
   Community / member profiles - /athleten (webcontent_v2/community/member_*.html).

   App-shell components only: the member hub, the search list, the profile header and its tabs,
   the activity feed and the photo/progress galleries. Everything here sits inside .wf-app-main's
   single reading column, so the desktop story is "the same card, wider" rather than a second
   layout - except the two galleries, which grow their column count with the viewport.
   ============================================================================================ */

/* --- people: the new-member and friends rails, one avatar + name per person ----------------- */

.wf-people-rail {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scrollbar-width: none;
	/* the negative margin lets the rail bleed to the screen edge while its items keep the
	   column's own gutter, so a scrolled rail reads as "there is more" rather than "cut off" */
	margin: 0 -16px;
	padding: 2px 16px 4px;
}

.wf-people-rail::-webkit-scrollbar {
	display: none;
}

.wf-person {
	flex: 0 0 auto;
	width: 74px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}

.wf-person__avatar {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--wf-surface-2);
}

.wf-person__name {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--wf-ink-2);
	/* two lines maximum: usernames here are arbitrary length and a third line would bump the
	   rail's height for every other tile in the row */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wf-search-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.wf-search-pager__page {
	font-size: 13px;
	color: var(--wf-ink-3);
}

/* --- profile header ------------------------------------------------------------------------ */

.wf-profile-hero {
	display: flex;
	align-items: center;
	gap: 16px;
}

.wf-profile-hero__avatar {
	flex: 0 0 auto;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--wf-surface-2);
}

.wf-profile-hero__ident {
	min-width: 0;
}

.wf-app .wf-profile-hero__name {
	margin: 0;
	font-size: 22px;
	line-height: 1.25;
}

.wf-profile-hero__motto {
	margin: 4px 0 0;
	font-size: 14px;
	font-style: italic;
	color: var(--wf-ink-2);
}

.wf-profile-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin-top: 8px;
	font-size: 13px;
	color: var(--wf-ink-3);
}

.wf-profile-hero__stats b {
	color: var(--wf-ink);
}

.wf-profile-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.wf-profile-actions .wf-app-btn {
	width: 100%;
}

.wf-profile-actions .wf-icon {
	width: 16px;
	height: 16px;
}

.wf-profile-actions__pending {
	font-size: 13px;
	font-style: italic;
	color: var(--wf-ink-3);
}

.wf-profile-note {
	display: block;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--wf-ink-3);
}

.wf-profile-empty {
	margin: 0;
	font-size: 14px;
	color: var(--wf-ink-3);
}

/* Free-text profile facts ("Über mich" …) - a label over prose rather than the label/value row
   used for the short measured values above them. */
.wf-profile-fact {
	padding: 10px 0;
}

.wf-profile-fact b {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wf-ink-3);
}

.wf-profile-fact p {
	margin: 4px 0 0;
	font-size: 14.5px;
}

/* --- activity feed (templates/activities.tpl) ----------------------------------------------- */

.wf-feed {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wf-feed__item {
	padding: 14px 16px;
	border-radius: var(--wf-radius);
	background: var(--wf-card);
	box-shadow: var(--wf-shadow);
}

.wf-feed__head {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wf-feed__author {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.wf-feed__avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--wf-surface-2);
}

.wf-feed__avatar--sm {
	width: 30px;
	height: 30px;
}

.wf-feed__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--wf-ink);
}

.wf-feed__time {
	margin-left: auto;
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--wf-ink-3);
}

.wf-feed__body {
	margin-top: 8px;
	font-size: 14.5px;
	color: var(--wf-ink-2);
}

/* The activity text is server-built HTML carrying links to profiles and objects; keep them
   readable as links without the body-prose underline. */
.wf-app .wf-feed__body a {
	color: var(--wf-app-accent);
	text-decoration: none;
	font-weight: 600;
}

.wf-feed__body img {
	border-radius: 8px;
	margin-top: 8px;
}

.wf-feed__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin-top: 10px;
	font-size: 13px;
}

.wf-feed__count {
	color: var(--wf-ink-3);
}

.wf-feed__answers:not(:empty) {
	margin-top: 10px;
	border-left: 2px solid var(--wf-line-soft);
	padding-left: 12px;
}

.wf-feed__answer + .wf-feed__answer {
	margin-top: 12px;
	border-top: 1px solid var(--wf-line-soft);
	padding-top: 12px;
}

/* --- galleries ------------------------------------------------------------------------------ */

.wf-photo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 8px;
}

.wf-photo-grid__item {
	display: block;
	aspect-ratio: 1;
	border-radius: 8px;
	overflow: hidden;
	background: var(--wf-surface-2);
}

.wf-photo-grid__item img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
}

.wf-photo-view {
	margin: 0;
	padding: 12px;
	border-radius: var(--wf-radius);
	background: var(--wf-card);
	box-shadow: var(--wf-shadow);
}

.wf-photo-view img {
	width: 100%;
	border-radius: 8px;
	display: block;
}

.wf-photo-view figcaption {
	margin-top: 10px;
	font-size: 14px;
	color: var(--wf-ink-2);
}

.wf-photo-view figcaption p {
	margin: 6px 0 0;
}

/* Progress photos, grouped by month - a labelled horizontal strip per month so a long history
   scrolls sideways inside its own group instead of growing the page. */
.wf-timeline {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.wf-timeline__label {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wf-ink-3);
}

.wf-timeline__row {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 2px;
}

.wf-timeline__row::-webkit-scrollbar {
	display: none;
}

.wf-timeline__item {
	flex: 0 0 auto;
	width: 104px;
	aspect-ratio: 3 / 4;
	border-radius: 8px;
	overflow: hidden;
	background: var(--wf-surface-2);
}

.wf-timeline__item img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
}

@media (min-width: 560px) {
	.wf-photo-grid {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}

	.wf-timeline__item {
		width: 132px;
	}
}

/* ---------- food editor (kalorientabelle: neues Lebensmittel / bearbeiten) ----------
   Card-per-section form, laid out to match the iOS app's FoodEditView: one card each for
   Grunddaten, Portionen and Nährwerte, a segmented g/ml switch, and nutrient rows whose
   inputs and unit labels line up in a column no matter how long the label runs.

   Every control here is a .wf-input (see the forms section) - this block only places them.
   The form carries .wf-form as well, so it keeps the same 560px measure as the other v2
   forms; without it a nutrient row would stretch its label and its value to opposite ends
   of an 800px card. */
.wf-foodform .wf-panel {
	margin-top: 16px;
}

.wf-foodform > .wf-panel:first-of-type {
	margin-top: 0;
}

/* the card's own padding is the trailing space after its last field */
.wf-foodform .wf-panel > .wf-field:last-child {
	margin-bottom: 0;
}

/* the values are typed, never stepped, and the spinner overlaps the right-aligned number
   in the 88px value column */
.wf-foodform input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.wf-foodform input[type="number"]::-webkit-outer-spin-button,
.wf-foodform input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* checkbox and radio chrome is the one part of the form the palette can't reach otherwise -
   it would paint itself in the UA accent (blue) next to the graphite brand */
.wf-foodform input[type="checkbox"],
.wf-foodform input[type="radio"] {
	accent-color: var(--wf-brand);
}

/* .wf-root-prefixed: the global heading rules are (0,1,1) and would otherwise keep these
   section heads at h2/h3 size and --wf-ink, which is what made the card heads shout over
   the form they label */
.wf-root .wf-foodform__legend {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wf-ink-3);
}

/* one step below the section legend: same type as a field label, not the browser's bold
   h3, which rendered larger than the section head above it */
.wf-root .wf-foodform__subhead {
	margin: 22px 0 2px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--wf-ink-2);
}

.wf-root .wf-foodform__hint {
	margin: 0 0 12px;
	font-size: 12.5px;
	color: var(--wf-ink-3);
}

.wf-root .wf-field .wf-foodform__hint {
	margin-bottom: 0;
}

/* fieldset carries browser defaults (border, inline-size: min-content) that would break the
   .wf-field flex column it shares its markup with */
.wf-foodform__unitchoice {
	border: 0;
	padding: 0;
	margin-bottom: 0;
	min-inline-size: 0;
}

.wf-foodform__unitchoice legend {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--wf-ink-2);
	padding: 0;
}

/* radio pair rendered as one segmented control (the app's Picker(.segmented)); the radios
   themselves stay in the DOM for keyboard and form semantics, hidden behind their labels */
.wf-segmented {
	display: inline-flex;
	/* the fieldset is a .wf-field flex column, which stretches its children: without this
	   the two segments are pulled apart across the full width of the card */
	align-self: flex-start;
	border: 1px solid var(--wf-line);
	border-radius: 7px;
	overflow: hidden;
	background: var(--wf-surface);
	margin-top: 5px;
}

.wf-segmented input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.wf-segmented label {
	padding: 9px 18px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--wf-ink-2);
	cursor: pointer;
}

.wf-segmented label + input + label {
	border-left: 1px solid var(--wf-line);
}

.wf-segmented input:checked + label {
	background: var(--wf-brand);
	color: #fff;
}

.wf-segmented input:focus-visible + label {
	outline: 2px solid var(--wf-brand);
	outline-offset: -2px;
}

.wf-portions {
	display: flex;
	flex-direction: column;
}

/* name | "entspricht" | menge | einheit | entfernen, on one line where there is room and
   wrapping to two on a phone */
.wf-portion {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 10px 0;
	border-top: 1px solid var(--wf-line-soft);
}

.wf-portion:first-child {
	border-top: 0;
	padding-top: 0;
}

.wf-portion input[type="text"] {
	flex: 1 1 150px;
	min-width: 0;
}

/* same width as the nutrient value column, so the two cards line their numbers up */
.wf-portion input[type="number"] {
	flex: 0 0 88px;
	text-align: right;
}

.wf-portion__eq,
.wf-portion__unit {
	font-size: 13.5px;
	color: var(--wf-ink-3);
}

.wf-portion__unit {
	min-width: 16px;
}

.wf-portion__remove {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 8px;
	background: none;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	color: var(--wf-ink-3);
}

.wf-portion__remove:hover {
	background: var(--wf-surface-2);
	color: var(--wf-bad);
}

.wf-foodform__add {
	margin-top: 12px;
}

/* label | input | unit, so every value column lines up - the same reason FoodEditView pins
   its unit labels to a fixed width */
.wf-nutrients {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.wf-nutrient {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 88px 34px;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-top: 1px solid var(--wf-line-soft);
}

.wf-nutrients > .wf-nutrient:first-child {
	border-top: 0;
	padding-top: 0;
}

.wf-nutrient label {
	font-size: 13.5px;
	color: var(--wf-ink-2);
}

.wf-nutrient input {
	text-align: right;
}

.wf-nutrient__unit {
	font-size: 13px;
	color: var(--wf-ink-3);
}

/* the vitamin and mineral lists are long and their labels short, so they get two columns
   where there is room - the macro list above stays single-column */
@media (min-width: 700px) {
	.wf-nutrients--split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 24px;
	}

	.wf-nutrients--split > .wf-nutrient:nth-child(2) {
		border-top: 0;
		padding-top: 0;
	}

	.wf-nutrients--split > .wf-nutrient {
		grid-template-columns: minmax(0, 1fr) 72px 34px;
	}
}

/* the disclosure heads the second half of the card, so it is set like a section legend
   rather than as a link */
.wf-foodform__more {
	margin-top: 16px;
	border-top: 1px solid var(--wf-line);
	padding-top: 14px;
}

.wf-foodform__more summary {
	cursor: pointer;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wf-ink-3);
}

.wf-foodform__more summary:hover {
	color: var(--wf-ink-2);
}

.wf-foodform__more[open] summary {
	margin-bottom: 10px;
}

/* a phone has no room for a 88px value column next to a label like "davon mehrfach
   ungesättigte Fettsäuren": the value moves under its label instead */
@media (max-width: 479px) {
	.wf-nutrient {
		grid-template-columns: minmax(0, 1fr) auto;
		row-gap: 4px;
	}

	.wf-nutrient label {
		grid-column: 1 / -1;
	}

	.wf-nutrient input {
		text-align: left;
	}
}

/* ---------- training plan schedule & editor (trainingsplaene: detail views + editor) ----------
   The plan detail page kept rendering its schedule through the legacy templates
   (webcontent/training/trainingsplan_detail_list.html and _table.html), whose .tabshead /
   .tabsbody / .days / .commentbox classes live in styles/main_v2.css with hardcoded white
   fills and #3b5998-ish link colors - on the dark theme that produced white day tables with
   near-invisible links (and a 7-column fixed table that overflowed a phone). This block is
   the v2 replacement, shared by the two detail views, the workout popup-turned-page and the
   plan editor, so all five screens carry one set of tokens.

   The week is a grid rather than a table: every cell names its own weekday, so it can reflow
   to 2 columns on a phone instead of scrolling sideways. */
.wf-plan-viewswitch {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	margin: 16px 0 8px;
}

.wf-root a.wf-plan-viewswitch__item {
	padding: 6px 12px;
	border: 1px solid var(--wf-line);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wf-ink-2);
	text-decoration: none;
	background: var(--wf-card);
}

.wf-root a.wf-plan-viewswitch__item:hover {
	background: var(--wf-surface-2);
}

.wf-root a.wf-plan-viewswitch__item[aria-current="page"] {
	background: var(--wf-brand);
	border-color: var(--wf-brand);
	color: #fff;
}

.wf-plan-block {
	background: var(--wf-card);
	border-radius: var(--wf-radius);
	box-shadow: var(--wf-shadow);
	padding: 16px;
	margin: 16px 0;
}

.wf-plan-block__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 12px;
	margin-bottom: 12px;
}

.wf-root .wf-plan-block__title {
	margin: 0;
	font-size: 17px;
	line-height: 1.3;
}

.wf-plan-block__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--wf-ink-3);
}

.wf-plan-block__meta img {
	width: 16px;
	height: 16px;
}

.wf-root .wf-plan-block__note {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--wf-ink-2);
}

/* the week grid: 7 named day cells. Two columns on a phone, seven from 720px up. */
.wf-plan-week {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.wf-plan-day {
	border: 1px solid var(--wf-line-soft);
	border-radius: 8px;
	background: var(--wf-surface);
	padding: 8px;
	min-height: 68px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.wf-plan-day__label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--wf-ink-3);
}

.wf-plan-day__value {
	font-size: 14px;
	font-weight: 600;
	color: var(--wf-ink);
	overflow-wrap: anywhere;
}

.wf-root a.wf-plan-day__value {
	color: var(--wf-ink);
	text-decoration: underline;
	text-decoration-color: var(--wf-line);
	text-underline-offset: 3px;
}

.wf-root a.wf-plan-day__value:hover {
	text-decoration-color: currentColor;
}

.wf-plan-day--rest {
	background: transparent;
	border-style: dashed;
}

.wf-plan-day--rest .wf-plan-day__value {
	font-weight: 400;
	color: var(--wf-ink-3);
}

/* the "recommended training days" strip on a week-wise plan: a tick per weekday */
.wf-plan-daystrip {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
	margin: 0 0 12px;
	max-width: 380px;
}

.wf-plan-daystrip > div {
	text-align: center;
	border: 1px solid var(--wf-line-soft);
	border-radius: 7px;
	padding: 6px 2px;
	font-size: 12px;
	font-weight: 600;
	color: var(--wf-ink-3);
	background: var(--wf-surface);
}

.wf-plan-daystrip > div.is-on {
	border-color: var(--wf-brand);
	background: var(--wf-brand-tint);
	color: var(--wf-ink);
}

.wf-plan-daystrip__week {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}

.wf-plan-daystrip__week b {
	font-size: 12px;
	color: var(--wf-ink-3);
	min-width: 62px;
}

/* one exercise inside a workout */
.wf-plan-unit {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid var(--wf-line-soft);
}

.wf-plan-unit:first-of-type {
	border-top: 0;
}

.wf-plan-unit__img {
	align-self: start;
	border-radius: 8px;
	overflow: hidden;
	background: var(--wf-surface-2);
}

.wf-plan-unit__img img {
	width: 100%;
	height: auto;
}

/* Exercise without its own photo or video thumbnail: a flat tint instead of the legacy
   dumbbell icon (/img/uebung.gif). The real img sets its own height via width:100%/height:auto,
   so this needs an explicit aspect-ratio to hold the same box open. */
.wf-plan-unit__img--empty {
	aspect-ratio: 1/1;
	background: var(--wf-brand-tint);
}

.wf-plan-unit__body {
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	align-content: flex-start;
}

.wf-plan-unit__main {
	flex: 1 1 200px;
	min-width: 0;
}

.wf-root .wf-plan-unit__title {
	margin: 0 0 2px;
	font-size: 15px;
	font-weight: 600;
}

.wf-root .wf-plan-unit__meta {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--wf-ink-3);
}

.wf-plan-unit__meta img {
	display: inline-block;
	vertical-align: -3px;
	margin-right: 4px;
}

.wf-plan-sets {
	flex: 0 1 auto;
	font-size: 13.5px;
	color: var(--wf-ink-2);
	font-variant-numeric: tabular-nums;
	border-collapse: collapse;
}

.wf-plan-sets td {
	padding: 1px 0 1px 8px;
	white-space: nowrap;
}

.wf-plan-sets td:first-child {
	padding-left: 0;
	color: var(--wf-ink-3);
}

/* table view: muscle group / exercise / sets / reps */
.wf-plan-table {
	width: 100%;
	min-width: 460px;
	border-collapse: collapse;
	font-size: 14.5px;
}

.wf-plan-table th,
.wf-plan-table td {
	padding: 8px 10px;
	text-align: left;
	vertical-align: top;
}

.wf-plan-table thead th {
	color: var(--wf-ink-3);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .03em;
	border-bottom: 2px solid var(--wf-line);
}

.wf-plan-table tbody tr + tr td {
	border-top: 1px solid var(--wf-line-soft);
}

.wf-plan-table td:nth-child(3),
.wf-plan-table th:nth-child(3),
.wf-plan-table td:nth-child(4),
.wf-plan-table th:nth-child(4) {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.wf-root .wf-plan-table p {
	margin: 2px 0 0;
	font-size: 12.5px;
	color: var(--wf-ink-3);
}

/* ---------- editor ---------- */
/* two-step wizard header shared by trainingsplan_edit / _edit_workouts */
.wf-plan-steps {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.wf-plan-steps li {
	padding: 10px 14px;
	border: 1px solid var(--wf-line);
	border-radius: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--wf-ink-3);
	background: var(--wf-card);
}

.wf-plan-steps li.is-current {
	border-color: var(--wf-brand);
	color: var(--wf-ink);
}

.wf-root .wf-plan-steps a {
	color: inherit;
	text-decoration: none;
}

.wf-root .wf-plan-steps a:hover {
	text-decoration: underline;
}

/* weekday checkboxes in the workout editor - same 7-across rhythm as .wf-plan-daystrip,
   but each cell is a real <label> wrapping its checkbox so the whole box is a hit target */
.wf-plan-daypicker {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
	max-width: 380px;
}

.wf-plan-daypicker label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 6px 2px;
	border: 1px solid var(--wf-line-soft);
	border-radius: 7px;
	background: var(--wf-surface);
	font-size: 12px;
	font-weight: 600;
	color: var(--wf-ink-2);
	cursor: pointer;
}

.wf-plan-daypicker label:has(input:checked) {
	border-color: var(--wf-brand);
	background: var(--wf-brand-tint);
	color: var(--wf-ink);
}

.wf-plan-daypicker label:focus-within {
	outline: 2px solid var(--wf-brand);
	outline-offset: 2px;
}

.wf-plan-daypicker input {
	margin: 0;
}

.wf-plan-daypicker__row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}

.wf-plan-daypicker__row > b {
	font-size: 12px;
	color: var(--wf-ink-3);
	min-width: 62px;
}

/* a unit as it appears in the editor list: same two-column shape as .wf-plan-unit plus a
   row of actions (edit / delete / move) that must stay reachable without a drag library -
   v2 carries no jQuery, so the legacy tableDnD reordering became up/down submits. */
.wf-plan-edit-unit {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	align-items: start;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid var(--wf-line-soft);
}

.wf-plan-edit-unit:first-of-type {
	border-top: 0;
}

.wf-plan-edit-unit__actions {
	display: flex;
	align-items: center;
	gap: 2px;
}

.wf-root .wf-plan-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 7px;
	background: none;
	color: var(--wf-ink-3);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
}

.wf-root .wf-plan-iconbtn:hover {
	background: var(--wf-surface-2);
	color: var(--wf-ink);
}

.wf-root .wf-plan-iconbtn[aria-disabled="true"] {
	opacity: .35;
	pointer-events: none;
}

.wf-root .wf-plan-iconbtn--danger:hover {
	color: var(--wf-bad);
}

/* set rows in the unit editor: a label column plus the numeric inputs for that set */
.wf-plan-setedit {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}

.wf-plan-setedit th {
	text-align: left;
	padding: 0 8px 6px 0;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--wf-ink-3);
	font-weight: 600;
}

.wf-plan-setedit td {
	padding: 0 8px 8px 0;
	vertical-align: middle;
}

.wf-plan-setedit td:first-child {
	white-space: nowrap;
	color: var(--wf-ink-3);
}

.wf-plan-setedit .wf-input {
	max-width: 110px;
}

.wf-plan-editbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	margin: 16px 0;
}

@media (min-width: 560px) {
	.wf-plan-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 720px) {
	.wf-plan-week {
		grid-template-columns: repeat(7, minmax(0, 1fr));
	}
}

@media (max-width: 479px) {
	.wf-plan-unit {
		grid-template-columns: 72px minmax(0, 1fr);
	}

	.wf-plan-edit-unit {
		grid-template-columns: 56px minmax(0, 1fr);
	}

	.wf-plan-edit-unit__actions {
		grid-column: 1 / -1;
	}
}

/* ---------- recipe list search & filters (diet/foodlist_list.html, foodlist_tag_list.html) ---------- */
.wf-recipe-filter {
	margin: 20px 0 24px;
}

.wf-recipe-filter .wf-field--inline {
	display: flex;
	gap: 8px;
}

.wf-recipe-filter .wf-field--inline input {
	flex: 1 1 auto;
	min-width: 0;
}

/* two columns already at phone width: six stacked selects pushed the results a full screen down */
.wf-recipe-filter__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 12px;
	margin-top: 14px;
}

@media (min-width: 900px) {
	.wf-recipe-filter__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.wf-recipe-filter__grid .wf-field {
	margin: 0;
}

.wf-recipe-filter__grid label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--wf-ink-3);
}

.wf-recipe-filter__grid select {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--wf-line);
	border-radius: 7px;
	font-size: 14px;
	background: var(--wf-surface);
	color: var(--wf-ink);
	text-overflow: ellipsis;
}

.wf-recipe-filter__more {
	margin: 10px 0 0;
	font-size: 13.5px;
}

.wf-recipe-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 24px 0 16px;
}

.wf-recipe-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wf-recipe-tabs .wf-app-chip,
.wf-recipe-active__chips .wf-app-chip {
	text-decoration: none;
	color: var(--wf-ink);
}

/* --wf-brand-tint equals the chip's --wf-surface-2 fill, so the active tab takes the solid
   brand fill (same white-on-brand pairing as .wf-btn--primary) to be told apart at all */
.wf-recipe-tabs .wf-app-chip.is-active {
	background: var(--wf-brand);
	color: #fff;
}

.wf-recipe-active {
	margin-bottom: 16px;
}

.wf-recipe-active__count {
	margin: 0 0 8px;
	color: var(--wf-ink-2);
}

.wf-recipe-active__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wf-recipe-active__chips .wf-app-chip {
	padding: 6px 12px;
	white-space: normal;
}

.wf-recipe-active__reset {
	font-size: 13.5px;
}

/* ---------- calculators (Rechner action: /bmi-rechner, /idealgewicht-berechnen, ...) ---------- */
/* Form and result side by side from tablet width up, stacked on phones. The result box is
   server-rendered with a worked example and updated live by assets/v2/rechner.js. */
.wf-calc {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin: 24px 0 8px;
}

@media (min-width: 720px) {
	.wf-calc {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
	}
}

.wf-calc__form,
.wf-calc__result {
	background: var(--wf-card);
	border-radius: var(--wf-radius);
	box-shadow: var(--wf-shadow);
	padding: 20px;
}

.wf-calc__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 12px;
}

.wf-calc__legend {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--wf-ink-2);
	padding: 0;
}

.wf-calc__form .wf-btn {
	margin-top: 4px;
}

.wf-calc__label {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--wf-ink-3);
}

.wf-calc__value {
	margin: 6px 0 4px;
	font-size: 40px;
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: var(--wf-ink);
}

.wf-calc__value small {
	font-size: 15px;
	font-weight: 600;
	color: var(--wf-ink-3);
}

.wf-calc__hint {
	margin: 10px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--wf-ink-2);
}

.wf-calc__facts {
	margin-top: 14px;
	font-variant-numeric: tabular-nums;
}

.wf-calc__facts td {
	text-align: right;
	font-weight: 600;
	white-space: nowrap;
}

/* stale numbers stay in place while an input is half-typed, but visibly out of date */
.wf-calc--invalid .wf-calc__value,
.wf-calc--invalid .wf-calc__verdict,
.wf-calc--invalid .wf-calc__facts,
.wf-calc--invalid .wf-calc__hint {
	opacity: 0.35;
}

.wf-calc--invalid .wf-calc__label {
	color: var(--wf-bad);
}

.wf-calc__verdict {
	display: inline-block;
	margin: 0;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 13.5px;
	font-weight: 700;
	background: var(--wf-surface-2);
	color: var(--wf-ink);
}

.wf-calc__verdict--under1,
.wf-calc__verdict--under2,
.wf-calc__verdict--under3 {
	background: var(--wf-water-tint);
	color: var(--wf-water);
}

.wf-calc__verdict--normal {
	background: var(--wf-ok-bg);
	color: var(--wf-ok);
}

.wf-calc__verdict--over {
	background: var(--wf-warn-bg);
	color: var(--wf-warn);
}

.wf-calc__verdict--obese1,
.wf-calc__verdict--obese2,
.wf-calc__verdict--obese3 {
	background: var(--wf-bad-bg);
	color: var(--wf-bad);
}

/* BMI scale: BMI 15-40 mapped onto 0-100 % (segment widths and tick offsets in bmi.html) */
.wf-calc-scale {
	position: relative;
	display: flex;
	height: 10px;
	margin: 18px 0 0;
	border-radius: 5px;
}

.wf-calc-scale__seg:first-child {
	border-radius: 5px 0 0 5px;
}

.wf-calc-scale__seg:nth-last-child(2) {
	border-radius: 0 5px 5px 0;
}

.wf-calc-scale__seg--under {
	background: var(--wf-water);
}

.wf-calc-scale__seg--normal {
	background: var(--wf-ok);
}

.wf-calc-scale__seg--over {
	background: var(--wf-warn);
}

.wf-calc-scale__seg--obese {
	background: var(--wf-bad);
}

.wf-calc-scale__marker {
	position: absolute;
	top: 50%;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--wf-card);
	border: 3px solid var(--wf-ink);
	transform: translate(-50%, -50%);
	transition: left 0.2s ease;
}

.wf-calc-scale__ticks {
	position: relative;
	height: 16px;
	margin: 4px 9px 0;
	font-size: 11px;
	color: var(--wf-ink-3);
	font-variant-numeric: tabular-nums;
}

.wf-calc-scale__ticks span {
	position: absolute;
	transform: translateX(-50%);
}

.wf-calc-dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: 8px;
	border-radius: 50%;
	vertical-align: 1px;
}

.wf-calc-dot--under1,
.wf-calc-dot--under2,
.wf-calc-dot--under3 {
	background: var(--wf-water);
}

.wf-calc-dot--normal {
	background: var(--wf-ok);
}

.wf-calc-dot--over {
	background: var(--wf-warn);
}

.wf-calc-dot--obese1,
.wf-calc-dot--obese2,
.wf-calc-dot--obese3 {
	background: var(--wf-bad);
}

.wf-calc-formula {
	margin: 12px 0;
	padding: 12px 16px;
	border-left: 3px solid var(--wf-brand);
	border-radius: 0 7px 7px 0;
	background: var(--wf-surface);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.wf-calc-list {
	margin: 12px 0;
	padding-left: 20px;
	color: var(--wf-ink-2);
	line-height: 1.7;
}

.wf-calc-step {
	margin: 4px 0 0;
	color: var(--wf-ink-2);
	line-height: 1.6;
}

.wf-calc-faq__q {
	margin-bottom: 4px;
}

.wf-calc-faq__a {
	margin-top: 0;
	color: var(--wf-ink-2);
	line-height: 1.7;
}