/* FF Tiefenbach-Wietraun — component styles on top of theme.json tokens. */

:root {
	--ff-accent: var(--wp--preset--color--accent, #C0161C);
	--ff-accent-dark: var(--wp--preset--color--accent-dark, #7A1113);
	--ff-gold: var(--wp--preset--color--gold, #C69A3E);
	--ff-line: var(--wp--preset--color--line, #E3DCD1);
	--ff-muted: var(--wp--preset--color--muted, #736A60);
	--ff-fb: var(--wp--preset--color--facebook, #1877F2);
	--ff-radius: 12px;
	--ff-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

/* the root constrained layout adds a block-gap margin above <main>; the hero must butt the header */
body > main.wp-block-group,
.wp-site-blocks > main.wp-block-group { margin-block-start: 0; }

.ff-heading {
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	letter-spacing: .02em;
	font-weight: 600;
}

.ff-eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-size: .875rem;
	color: var(--ff-accent);
}

/* These containers came from hand-written HTML; as core blocks their children
   arrive with block-gap margins and <ul> bullets that the layout must cancel. */
.ff-timeline > .ff-milestone,
.ff-tiles > .ff-tile,
.ff-figures > .ff-figure,
.ff-people > .ff-person,
.ff-panel > *,
.ff-linklist,
.ff-linklist li { margin-block: 0; }

.ff-milestone > p,
.ff-tile > p,
.ff-figure > p { margin-block: 0; }

.ff-linklist { list-style: none; padding-left: 0; }
.ff-badgeline { margin-bottom: 1.375rem; }

.ff-icon svg { display: block; width: 100%; height: 100%; }
.ff-icon { display: inline-block; width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.ff-icon--fb { color: var(--ff-fb); width: 1.5rem; height: 1.5rem; }

/* The motif hangs off the element, not the ::before: on a core/button the icon has to move
   into the inner <a> (see below), and that ::before only inherits the variable through the
   tree. The colour stays on the ::before — otherwise it would tint the label text too. */
.ff-ico--fb {
	--ff-ico: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3l-.5 3H13v6.95c5.05-.5 9-4.76 9-9.95z"/></svg>');
}
.ff-ico--phone {
	--ff-ico: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>');
}

/* Icons as a ::before mask rather than inline SVG. Needed so buttons and cards can stay
   core blocks: `core/html` renders inside a sandbox <iframe> in the editor, which inherits
   neither the background nor the text colour of its surroundings. Mask instead of
   background-image so that `currentColor` still applies. */
.ff-ico::before,
.wp-block-button.ff-ico > .wp-block-button__link::before {
	content: "";
	display: inline-block;
	vertical-align: -.18em;
	width: 1.25em;
	height: 1.25em;
	margin-right: .5em;
	background: currentColor;
	-webkit-mask: var(--ff-ico) center / contain no-repeat;
	mask: var(--ff-ico) center / contain no-repeat;
}
.ff-ico--fb::before,
.wp-block-button.ff-ico--fb > .wp-block-button__link::before { color: var(--ff-fb); }

/* On a core/button the modifier class sits on the wrapper, but the padding sits on the
   inner <a>. If the icon stayed on the wrapper, icon and left padding would lie *beside*
   the link — roughly 48px that look like button but are not clickable, and the focus ring
   would only surround the text. So move it into the <a>. */
.wp-block-button.ff-ico::before { content: none; }

/* ---------- Buttons ---------- */

.ff-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-weight: 700;
	font-size: .9375rem;
	padding: .75rem 1.375rem;
	border-radius: 9px;
	border: none;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.2;
}
.ff-btn:hover { text-decoration: none; }

/* On `core/button` our modifier class sits on the wrapper, but the appearance has to reach
   the inner <a> — otherwise only the text would be clickable, not the padding. The wrapper
   keeps background, colour and border; the link inherits them and provides the box. That
   way none of the modifiers below needs a second variant.

   Specificity has to be high: core sets `.wp-block-buttons > .wp-block-button` (0,2,0) to
   `inline-block` and thereby beats `.ff-btn` (0,1,0). Without that the wrapper stays a
   block, the flex model never applies, and an icon ::before aligns on the baseline instead
   of centred to the text. */
.wp-block-button.ff-btn {
	display: inline-flex;
	align-items: center;
	padding: 0;
}
.wp-block-button.ff-btn > .wp-block-button__link {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	padding: .75rem 1.375rem;
	border-radius: inherit;
	color: inherit;
	font: inherit;
	cursor: pointer;
}
/* `all: unset` also clears the focus ring and outranks the global :focus-visible rule by
   specificity — without this none of the buttons is visible via keyboard. */
.wp-block-button.ff-btn > .wp-block-button__link:focus-visible {
	outline: 3px solid var(--ff-gold);
	outline-offset: 2px;
}
.ff-btn--fb { background: var(--ff-fb); color: #fff; }
.ff-btn--fb:hover { background: #166fe0; color: #fff; }
.ff-btn--fbsoft { background: #E7F3FF; color: var(--ff-fb); white-space: nowrap; }
.ff-btn--fbsoft:hover { background: #d8ebff; }
.ff-btn--ghost { background: #fff; border: 1px solid #dfe1e5; color: var(--ff-fb); }
.ff-btn--ghost:hover { background: #f5f6f7; }
.ff-btn--outline { background: none; border: 1px solid var(--ff-accent); color: var(--ff-accent); }
.ff-btn--outline:hover { background: var(--ff-accent); color: #fff; }
.ff-btn--accent { background: var(--ff-accent); color: #fff; }
.ff-btn--accent:hover { background: var(--ff-accent-dark); color: #fff; }
.ff-btn--light { background: #fff; color: var(--ff-accent-dark); }
.ff-btn--light:hover { color: var(--ff-accent-dark); transform: translateY(-1px); }
.ff-btn--onred { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .55); }
.ff-btn--onred:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ---------- Emergency bar ---------- */

.ff-emergency {
	background: var(--ff-accent-dark);
	color: #fff;
	font-size: .875rem;
	border-bottom: 2px solid var(--ff-gold);
}
.ff-emergency__inner {
	padding-block: 7px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 18px;
}
.ff-emergency span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ff-emergency strong {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	line-height: 1;
	letter-spacing: .04em;
}
.ff-emergency__label { font-weight: 700; letter-spacing: .02em; }
/* only the first of the pair pushes right — the second stays glued to it */
.ff-emergency__rest { margin-left: auto; opacity: .85; }
.ff-emergency__rest + .ff-emergency__rest { margin-left: 0; }
.ff-emergency__rest strong { font-size: .9375rem; }
.ff-emergency a { color: inherit; }

/* ---------- Header ---------- */

.ff-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid var(--ff-line);
	box-shadow: 0 1px 8px rgba(0, 0, 0, .04);
}
.ff-header__inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ff-brand { display: flex; align-items: center; gap: 12px; padding: 12px 0; text-decoration: none; }
.ff-brand:hover { text-decoration: none; }
.ff-brand img,
.ff-brand .custom-logo { width: 96px; height: 72px; object-fit: contain; display: block; max-width: none; }
.ff-brand .wp-block-site-logo { margin: 0; line-height: 0; }
/* site-title and site-tagline are core paragraphs — their default margins would space the two lines apart */
.ff-brand__text > * { margin-block: 0; }
.ff-brand__text { display: flex; flex-direction: column; gap: 2px; }
.ff-brand__name a { color: inherit; text-decoration: none; }
.ff-brand__name {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.1875rem;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--wp--preset--color--ink);
	line-height: 1.05;
}
.ff-brand__sub {
	font-size: .75rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ff-muted);
	font-weight: 600;
}

/* WP's flex layout emits `.wp-container-…-is-layout-flex > * { margin: 0 }` at equal
   specificity but later in the cascade, so this needs the extra class to win.
   `nav.ff-nav`, not `.ff-nav`: core copies the class onto the <ul> inside the mobile
   overlay, where an auto margin would shove the menu to the right. */
.ff-header__inner nav.ff-nav { margin-left: auto; }
.ff-nav .wp-block-navigation__container { gap: 26px; }
.ff-nav a {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-size: .9375rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #3a332e;
	padding: 22px 2px;
	position: relative;
}
.ff-nav a:hover { color: var(--ff-accent); text-decoration: none; }
.ff-nav .current-menu-item > a::after,
.ff-nav .current_page_item > a::after {
	content: "";
	position: absolute;
	left: -2px;
	right: -2px;
	bottom: 0;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--ff-accent);
}

/* ---------- Hero ---------- */

/* Full bleed out of <main>'s root padding. Core would do this itself, but its
   `.has-global-padding :where(.has-global-padding) > .alignfull { margin: 0 }` rule
   cancels it for our nested main > post-content pair — so re-apply it one level down.
   Root-padding vars, not 100vw: 100vw overflows by the scrollbar width. */
/* post-content is alignfull so heroes can reach the viewport edge; the gutter every
   other block needs therefore has to be re-applied here (the has-global-padding class
   core puts on it carries no padding of its own). */
/* Only the alignfull variant: single/index/404 let `main` keep its core padding, where a
   second layer of padding would double the margin. */
main > .wp-block-post-content.alignfull {
	padding-inline: var(--wp--style--root--padding-left);
}

main > .wp-block-post-content.alignfull > .alignfull {
	margin-inline: calc(var(--wp--style--root--padding-left) * -1);
}

.ff-hero {
	background: linear-gradient(135deg, var(--ff-accent-dark), var(--ff-accent));
	color: #fff;
	overflow: hidden;
}
.ff-hero :where(h1, h2, p) { color: #fff; }
.ff-hero__badge {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, .16);
	padding: 6px 14px;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--heading);
	letter-spacing: .1em;
	font-size: .75rem;
	text-transform: uppercase;
	font-weight: 500;
}
.ff-hero__lead { font-size: 1.1875rem; line-height: 1.55; color: rgba(255, 255, 255, .92); text-wrap: pretty; }
.ff-hero img { border-radius: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, .4); }

.ff-hero__cta { gap: 14px; margin-bottom: 34px; }
.ff-stats { gap: 34px; align-items: stretch; }
/* Separators as borders rather than as their own elements — otherwise every gap would need
   an empty block that an editor could delete by accident. */
.ff-stat + .ff-stat { border-left: 1px solid rgba(255, 255, 255, .25); padding-left: 34px; }
.ff-stat > * { margin-block: 0; }
.ff-stats__n { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 2rem; line-height: 1; }
.ff-stats__l { font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }

/* ---------- Feed ---------- */

.ff-feedwrap { background: var(--wp--preset--color--feed); border-top: 1px solid #dfe1e5; }

.ff-feed__intro { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; }
.ff-feed__title { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .02em; margin: 0; }
.ff-feed__sub { font-size: .8125rem; color: #65676B; margin: 0; }
.ff-feed__more { text-align: center; margin: .5rem 0 0; }

.ff-card {
	background: #fff;
	border-radius: var(--ff-radius);
	box-shadow: var(--ff-shadow);
	margin-bottom: 20px;
	overflow: hidden;
}
.ff-card--page { padding: 16px; display: flex; align-items: center; gap: 14px; }
.ff-card--page .ff-card__pagemeta { flex: 1; min-width: 0; }
.ff-card__pagemeta strong { display: block; font-size: 1rem; color: #050505; line-height: 1.2; }
.ff-card__pagemeta span { font-size: .875rem; color: #65676B; }
.ff-card--empty { padding: 20px; text-align: center; }
.ff-card--empty p { margin: 0 0 1rem; color: #65676B; }

.ff-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ff-accent);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.0625rem;
	flex-shrink: 0;
}
.ff-card--page .ff-avatar { width: 48px; height: 48px; font-size: 1.125rem; }

.ff-post__head { padding: 14px 16px 10px; display: flex; align-items: flex-start; gap: 11px; }
.ff-post__meta { flex: 1; min-width: 0; }
.ff-post__meta strong { display: block; font-size: .9375rem; color: #050505; }
.ff-post__meta span { color: #65676B; font-size: .8125rem; }
.ff-badge {
	background: var(--ff-accent);
	color: #fff;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: .6875rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 6px;
	white-space: nowrap;
}
.ff-post__text { padding: 0 16px 12px; font-size: .9375rem; line-height: 1.5; color: #050505; text-wrap: pretty; }
.ff-post__text p { margin: 0 0 .5em; }
.ff-post__text p:last-child { margin-bottom: 0; }

.ff-post__media { background: #050505; display: grid; gap: 3px; }
.ff-post__media--single { grid-template-columns: 1fr; }
.ff-post__media--double { grid-template-columns: 1fr 1fr; }
.ff-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ff-post__media--single img { max-height: 380px; }
.ff-post__media--double img { height: 240px; }

.ff-post__stats {
	padding: 11px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px;
	color: #65676B;
	font-size: .875rem;
	border-bottom: 1px solid #E4E6E9;
}
.ff-reactions { display: inline-flex; align-items: center; gap: 7px; }
.ff-reaction { width: 21px; height: 21px; border-radius: 50%; border: 2px solid #fff; display: inline-block; }
.ff-reaction--like { background: var(--ff-fb); }
.ff-reaction--love { background: #F3425F; margin-left: -6px; }

.ff-post__link {
	display: block;
	padding: 11px 16px;
	text-align: center;
	font-weight: 600;
	font-size: .9375rem;
	color: #65676B;
}
.ff-post__link:hover { background: #F2F2F2; color: var(--ff-fb); text-decoration: none; }

/* ---------- Rail ---------- */

.ff-rail { display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 1000px) {
	.ff-rail { position: sticky; top: 96px; align-self: flex-start; }
}

.ff-panel { background: #fff; border: 1px solid var(--ff-line); border-radius: var(--ff-radius); padding: 18px; }
.ff-panel__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.0625rem;
	text-transform: uppercase;
	margin: 0 0 .75rem;
}
.ff-panel p { font-size: .90625rem; line-height: 1.55; color: #4a433d; }

.ff-notruf { background: var(--ff-accent); color: #fff; border-radius: var(--ff-radius); padding: 20px; box-shadow: 0 6px 20px rgba(192, 22, 28, .25); }
.ff-notruf__head { margin: 0 0 8px; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1.125rem; text-transform: uppercase; }
.ff-notruf__n { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 2.75rem; line-height: 1; letter-spacing: .02em; }
.ff-notruf__n a { color: #fff; text-decoration: none; }
/* Since the card is built from core paragraphs, the heading and the number are <p> too —
   the body-copy rule must not override them. */
.ff-notruf p:not([class*="ff-notruf__"]) { font-size: .875rem; color: rgba(255, 255, 255, .85); margin: 6px 0 0; }

.ff-linklist { display: flex; flex-direction: column; gap: 2px; }
.ff-linklist a { display: flex; align-items: center; gap: 9px; font-size: .90625rem; color: #3a332e; padding: 7px 8px; border-radius: 7px; }
.ff-linklist a::before { content: "›"; color: var(--ff-accent); }
.ff-linklist a:hover { background: #faf8f5; color: var(--ff-accent); text-decoration: none; }

/* ---------- Events ---------- */

.ff-events { display: flex; flex-direction: column; gap: 12px; }
.ff-event {
	background: #fff;
	border: 1px solid var(--ff-line);
	border-radius: var(--ff-radius);
	padding: 16px 20px;
	display: flex;
	gap: 20px;
	align-items: center;
}
.ff-event:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .06); }
.ff-event__date { width: 70px; flex-shrink: 0; text-align: center; background: #F6EEEE; border-radius: 10px; padding: 10px 0; }
.ff-event__day { display: block; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.875rem; line-height: 1; color: var(--ff-accent); }
.ff-event__month { display: block; font-size: .75rem; letter-spacing: .1em; color: #a86a6a; font-weight: 600; }
/* min-width:0 lets the flex item shrink below its content; hyphens/overflow-wrap then break
   the long compounds that calendar titles are full of ("Abschnittsfeuerwehrfest"). Without
   both, a single word pushes the card past the viewport on a phone. */
.ff-event__body { flex: 1; min-width: 0; hyphens: auto; overflow-wrap: break-word; }
.ff-event__title { display: block; font-weight: 700; font-size: 1.125rem; line-height: 1.25; }
.ff-event__sub { display: block; font-size: .90625rem; color: var(--ff-muted); margin-top: 2px; }
.ff-event__tag {
	background: #F6EEEE;
	color: var(--ff-accent);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 6px;
	white-space: nowrap;
}

.ff-events--compact { gap: 0; }
.ff-events--compact .ff-event { border: none; border-radius: 0; padding: 10px 0; gap: 14px; }
.ff-events--compact .ff-event:hover { box-shadow: none; background: #faf8f5; }
.ff-events--compact .ff-event__date { width: 52px; border: 1px solid #eadada; border-radius: 9px; padding: 6px 0; }
.ff-events--compact .ff-event__day { font-size: 1.375rem; }
.ff-events--compact .ff-event__month { font-size: .6875rem; }
.ff-events--compact .ff-event__title { font-size: .90625rem; }
.ff-events--compact .ff-event__sub { font-size: .8125rem; }
.ff-events__empty { color: var(--ff-muted); }

/* ---------- Timeline (Geschichte) ---------- */

/* border-box: as a block the timeline inherits the 1200px of the constrained column as its
   max-width, and the 34px rail padding would otherwise push it past that. */
.ff-timeline { position: relative; box-sizing: border-box; padding-left: 34px; display: flex; flex-direction: column; gap: 26px; }
/* Rail centre = dot centre: the dot sits 1px from the left edge and is 28px wide including
   its 4px ring, so its centre is at 15px — minus half the rail width. */
.ff-timeline::before { content: ""; position: absolute; left: 14px; top: 6px; bottom: 6px; width: 2px; background: #e3d6d6; }
.ff-milestone { position: relative; }
.ff-milestone::before {
	content: "";
	position: absolute;
	left: -33px;
	top: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--ff-accent);
	border: 4px solid #fff;
	box-shadow: 0 0 0 2px #e3d6d6;
}
.ff-milestone__y { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.375rem; color: var(--ff-accent); line-height: 1; }
.ff-milestone__t { font-weight: 700; font-size: 1.125rem; margin: 2px 0 4px; }
.ff-milestone__d { font-size: .96875rem; line-height: 1.55; color: #4a433d; }

/* ---------- Info cards (Jugend) ---------- */

.ff-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
/* hyphens/overflow-wrap: German compounds outgrow a 220px column —
   "Bundesleistungsabzeichen" alone runs past the card edge. `hyphens` breaks it properly
   (the document is lang="de-AT"), `overflow-wrap` catches what the hyphenation dictionary
   does not know. */
.ff-tile {
	background: #fff;
	border: 1px solid var(--ff-line);
	border-radius: var(--ff-radius);
	padding: 22px;
	hyphens: auto;
	overflow-wrap: break-word;
}
.ff-tile__n {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: #F6EEEE;
	color: var(--ff-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.25rem;
	margin-bottom: 14px;
}
/* A year needs four digits where the Jugend tiles carry one — widen instead of shrinking the
   type, so both variants keep the same badge height and the same optical weight. */
/* fit-content, not auto: the badge is a flex container, so `auto` stretches it to the full
   tile width and the year floats in the middle of an empty bar. */
.ff-tile__n--year { width: fit-content; padding-inline: 12px; }
.ff-tile__t { font-weight: 700; font-size: 1.125rem; margin-bottom: 6px; }
.ff-tile__d { font-size: .90625rem; line-height: 1.55; color: #4a433d; }

/* ---------- Result tables (Erfolge) ---------- */

/* The figure scrolls, not the page: the result rows are long and a narrow phone would
   otherwise widen the whole document. */
.ff-table { overflow-x: auto; }
.ff-table table { border-collapse: collapse; width: 100%; }
/* `.ff-table table th` and not `.ff-table :where(th, td)`: core ships
   `.wp-block-table :where(td,th){border:1px solid}` at the same specificity and later in the
   cascade, so the boxed grid would win and every cell keeps its outline. */
.ff-table table th,
.ff-table table td {
	border: 0;
	border-bottom: 1px solid var(--ff-line);
	padding: 10px 14px 10px 0;
	text-align: left;
	vertical-align: top;
	font-size: .9375rem;
	line-height: 1.5;
}
.ff-table table th {
	font-family: var(--wp--preset--font-family--heading);
	font-size: .8125rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #7a706a;
	font-weight: 500;
}
/* Years must not wrap, and the column should not grow with the widest result text. */
.ff-table table td:first-child { white-space: nowrap; font-weight: 700; width: 1%; }

/* Source arrow behind a result. Muted until hovered — it must be findable without competing
   with the result itself, which is what people came to read. */
.ff-table__src { color: var(--ff-muted); text-decoration: none; padding-inline: .25em; }
.ff-table__src:hover { color: var(--ff-accent); text-decoration: none; }

.ff-cta { background: var(--ff-accent); color: #fff; border-radius: 16px; padding: 36px; text-align: center; }
.ff-cta :where(h2, p) { color: #fff; }
.ff-cta p { font-size: 1.0625rem; max-width: 560px; margin: 0 auto 1.375rem; color: rgba(255, 255, 255, .9); }

/* ---------- Kommando ---------- */

.ff-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.ff-person { background: #fff; border: 1px solid var(--ff-line); border-radius: 14px; padding: 22px; text-align: center; }
.ff-person__img {
	width: 110px;
	height: 110px;
	margin: 0 auto 14px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid #F6EEEE;
	background: #F6EEEE;
}
.ff-person__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ff-person__n { font-weight: 700; font-size: 1.125rem; }
.ff-person__r { font-size: .875rem; color: var(--ff-accent); font-weight: 600; margin-top: 2px; }

.ff-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.ff-figure { background: #fff; border: 1px solid var(--ff-line); border-radius: var(--ff-radius); padding: 24px; text-align: center; }
.ff-figure--accent { background: var(--ff-accent); color: #fff; border-color: var(--ff-accent); }
.ff-figure__n { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 2.5rem; line-height: 1; color: var(--ff-accent); }
.ff-figure--accent .ff-figure__n { color: #fff; }
.ff-figure__l { font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ff-muted); margin-top: 4px; }
.ff-figure--accent .ff-figure__l { color: rgba(255, 255, 255, .85); }

/* ---------- Footer ---------- */

.ff-footer__cols { padding-block: 52px 30px; gap: 36px; }
.ff-footer .wp-block-page-list { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 9px; }
.ff-footer .wp-block-page-list li { margin: 0; }
.ff-colophon__inner span + a, .ff-colophon__inner a { margin-left: 0; }

.ff-footer { background: var(--wp--preset--color--dark); color: #cfc6bd; border-top: 3px solid var(--ff-gold); }
.ff-footer :where(h2, h3, .ff-footer__h) {
	color: #fff;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .9375rem;
	margin: 0 0 14px;
}
.ff-footer p { font-size: .875rem; line-height: 1.6; color: #a79e94; }
.ff-footer a { color: #cfc6bd; font-size: .90625rem; }
.ff-footer a:hover { color: var(--ff-gold); text-decoration: none; }
.ff-footer .ff-btn--fb { color: #fff; }
.ff-footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ff-footer__brand img { width: 84px; height: 64px; object-fit: contain; }
.ff-footer__brand span { line-height: 1.1; color: #fff; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1.0625rem; text-transform: uppercase; }
.ff-footer .wp-block-navigation__container { flex-direction: column; gap: 9px; align-items: flex-start; }
.ff-colophon { border-top: 1px solid #35291f; }
.ff-colophon__inner {
	padding-block: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	align-items: center;
	font-size: .8125rem;
	color: #8a8178;
}
.ff-colophon a { color: #8a8178; font-size: inherit; }
.ff-colophon__note { margin-left: auto; }
.ff-colophon__note strong { color: var(--ff-accent); }

/* ---------- Small screens ---------- */

@media (max-width: 781px) {
	.ff-brand img { width: 64px; height: 52px; }
	/* would wrap onto its own row; the same link sits in the hero and footer */
	.ff-header .ff-btn--fb { display: none; }
	.ff-emergency__rest { margin-left: 0; }
	/* the auto margins squeeze both of these against a neighbour instead of wrapping */
	.ff-colophon__note { margin-left: 0; }
	.ff-card--page { flex-wrap: wrap; }
	.ff-card--page .ff-btn { flex-basis: 100%; justify-content: center; }
	.ff-post__media--double img { height: 180px; }
	.ff-timeline { padding-left: 26px; }
	.ff-cta { padding: 24px; }
}

/* Skip link + focus visibility */
:where(a, button, input, summary):focus-visible {
	outline: 3px solid var(--ff-gold);
	outline-offset: 2px;
}

/* ---------- Block-editor variants of the hand-built components ---------- */

/* fallback avatar filling the round photo frame in the Mannschaft block */
.ff-avatar--fill { width: 100%; height: 100%; border-radius: 0; font-size: 2rem; }

/* core/button inside the Jugend call-to-action */
.ff-button--light .wp-block-button__link {
	background: #fff;
	color: var(--ff-accent-dark);
	border-radius: 9px;
	font-weight: 700;
}
.ff-button--light .wp-block-button__link:hover { background: #f3ede4; color: var(--ff-accent-dark); }

/* the Mannschaft/Termine blocks render their own grid wrapper */
.wp-block-fftiewie-mannschaft.ff-people { display: grid; }

/* A full-bleed hero butts the header; anything else opens with the standard top spacing.
   Templates carry no top padding of their own, so both cases come out of one rule. */
main .wp-block-post-content > :first-child:not(.alignfull) {
	margin-block-start: var(--wp--preset--spacing--60);
}
main .wp-block-post-content > * + * { margin-block-start: var(--wp--preset--spacing--40); }
main .wp-block-post-content > .alignfull + * { margin-block-start: var(--wp--preset--spacing--60); }

/* One 1200px column everywhere means prose would run to ~150 characters. Cap the measure —
   but core's constrained layout sets margin-inline:auto, which would centre the narrower box,
   so the start margin has to be forced back to 0 to keep the shared left edge. */
main .wp-block-post-content > p {
	max-width: 72ch;
	/* core sets margin-inline:auto !important, which would centre the narrowed box. Re-derive
	   the column's own left edge instead of using 0 — post-content spans the full viewport. */
	margin-inline-start: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-inline-end: auto !important;
}