/* FF Auersthal — website template stylesheet (templates/Site/ffau).
   Rebuilt 2026-10-22 from the old site feuerwehr-auersthal.at (old _CMS frontend: Tailwind 2, Vue/Alpine, PhotoSwipe)
   so visitors see no difference: same colours (red #8f0600, grey #ccc, Tailwind greys), the old fonts — the old CSS
   asked for "Inter" (text) and "Work Sans" (headings) without loading them, so they show in the visitor's system
   sans-serif unless installed; kept exactly like that —, the Tailwind breakpoints 640 / 768 / 1024 / 1280 with their
   container widths, the old spacing. No framework, no library: menu = ffau.js, lightbox = /site/_default/lightbox.js,
   embeds = /site/_default/embed.js.
   Sections: 1 tokens + base · 2 header + menu · 3 page head · 4 rhythm · 5 FF elements · 6 footer
   · 7 other elements (generic rules shared with the knie template, re-tokenised) · 8 shop · 9 table */

/* ── 1 tokens + base ───────────────────────────────────────────────────────────────────────── */
:root {
  --ff-red: #8f0600;
  --ff-gray: #cccccc;        /* footer, phone menu panel, form button */
  --ff-gray-200: #e5e7eb;    /* hairlines, form fields */
  --ff-gray-300: #d1d5db;    /* news card border */
  --ff-gray-600: #4b5563;    /* headings */
  --ff-gray-700: #374151;    /* breadcrumb */
  --ff-gray-800: #1f2937;    /* text, menu */
  --ff-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
  --ff-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
  --ff-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
  --ff-heading: "Work Sans", sans-serif;

  /* names shared with the generic rules in sections 7–9 */
  --font: Inter, sans-serif;   /* exactly the old body class "font-body" — the generic sans-serif (Helvetica / Arial), not the system UI font */
  --ink: var(--ff-gray-800);
  --muted: #6b7280;
  --line: var(--ff-gray-200);
  --bg: #ffffff;
  --bg-soft: #f3f4f6;
  --accent: var(--ff-red);
  --accent-ink: var(--ff-red);
  --dark: var(--ff-gray-800);
  --radius: 0;
  --gap: 24px;
  --container: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.5; color: #000; background: #fff; min-height: 100vh; }
img, svg, video, iframe { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, hr { margin: 0; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: inherit; }
button { font: inherit; color: inherit; }
strong, b { font-weight: 700; }
code { font-family: ui-monospace, monospace; font-size: .9em; }
.pre { white-space: pre-line; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--ff-red); outline-offset: 2px; }
.preview-bar { background: #b45309; color: #fff; text-align: center; font-size: .8rem; padding: 4px; letter-spacing: .05em; }

/* the old Tailwind "container": full width, then a fixed max-width per breakpoint, no padding of its own */
.ff-container { width: 100%; margin-inline: auto; }
@media (min-width: 640px)  { .ff-container { max-width: 640px; } }
@media (min-width: 768px)  { .ff-container { max-width: 768px; } }
@media (min-width: 1024px) { .ff-container { max-width: 1024px; } }
@media (min-width: 1280px) { .ff-container { max-width: 1280px; } }
.ff-content { padding-inline: 8px; }   /* the old "px-2" content column */

/* ── 2 header + menu ───────────────────────────────────────────────────────────────────────── */
.ff-header { position: relative; z-index: 50; background: #fff; }
.ff-logo img { width: auto; object-fit: contain; }
.ff-brand { margin: 0; color: var(--ff-gray-800); font-weight: 700; text-align: center; }
.ff-nav__list { list-style: none; }
.ff-nav__link { display: block; border: 0; background: none; padding: 0; cursor: pointer; text-align: inherit; color: var(--ff-gray-800); font-weight: 500; }
.ff-nav__item.is-trail > .ff-nav__link { color: var(--ff-red); font-weight: 700; }
.ff-nav__sub { list-style: none; background: var(--ff-red); }
.ff-nav__sub li { margin: 0; }
.ff-nav__sub a, .ff-nav__sub span { display: block; color: #fff; }
.ff-cart { color: var(--ff-gray-800); white-space: nowrap; }
.ff-cart__count { display: inline-block; min-width: 20px; height: 20px; line-height: 20px; padding: 0 6px; text-align: center; background: var(--ff-red); color: #fff; border-radius: 999px; font-size: 12px; }

/* burger: the old "hamburgers" spin-r button (40 × 24 box, 4px bars, 15px padding), plain CSS */
.ff-burger { display: inline-block; padding: 15px; border: 0; background: none; cursor: pointer; line-height: 0; overflow: visible; }
.ff-burger__box { position: relative; display: inline-block; width: 40px; height: 24px; }
.ff-burger__inner, .ff-burger__inner::before, .ff-burger__inner::after { position: absolute; left: 0; width: 40px; height: 4px; border-radius: 4px; background: #000; }
.ff-burger__inner { top: 50%; margin-top: -2px; transition: transform .22s cubic-bezier(.55, .055, .675, .19); }
.ff-burger__inner::before, .ff-burger__inner::after { content: ""; display: block; }
.ff-burger__inner::before { top: -10px; transition: top .1s .25s ease-in, opacity .1s ease-in; }
.ff-burger__inner::after { bottom: -10px; transition: bottom .1s .25s ease-in, transform .22s cubic-bezier(.55, .055, .675, .19); }
.ff-header.is-open .ff-burger__inner { transform: rotate(-225deg); transition-delay: .12s; transition-timing-function: cubic-bezier(.215, .61, .355, 1); }
.ff-header.is-open .ff-burger__inner::before { top: 0; opacity: 0; transition: top .1s ease-out, opacity .1s .12s ease-out; }
.ff-header.is-open .ff-burger__inner::after { bottom: 0; transform: rotate(90deg); transition: bottom .1s ease-out, transform .22s .12s cubic-bezier(.215, .61, .355, 1); }

@keyframes ff-pop { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }

/* phone + tablet (< 1024px): 64px bar in four columns — logo · brand text (two columns) · burger — and the grey
   menu panel right under the bar */
@media (max-width: 1023.98px) {
  .ff-header__bar.ff-container { max-width: none; height: 64px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ff-logo { align-self: center; justify-self: start; padding-left: 16px; }
  .ff-logo img { height: 56px; }
  .ff-brand { grid-column: span 2; align-self: center; font-size: 20px; line-height: 28px; }
  .ff-burger { grid-column: 4; justify-self: end; align-self: center; }
  .ff-cart { display: none; }
  .ff-nav { display: none; position: absolute; top: 64px; left: 0; right: 0; z-index: 50; border-radius: 12px; background: var(--ff-gray); }
  .ff-header.is-open .ff-nav { display: block; animation: ff-pop .2s ease-out; }
  .ff-nav__list { margin: 0 8px; padding: 16px 8px; border-radius: 4px; background: rgba(204, 204, 204, .95); }
  .ff-nav__item { padding: 16px 0; text-align: center; }
  .ff-nav__link { width: 100%; font-size: 30px; line-height: 36px; text-align: center; }
  .ff-nav__item.is-open > .ff-nav__link { color: var(--ff-red); font-weight: 700; }
  .ff-nav__sub { display: none; position: relative; top: 16px; padding: 8px 0; border-radius: 4px; box-shadow: var(--ff-shadow-xl); }
  .ff-nav__item.is-open > .ff-nav__sub { display: block; animation: ff-pop .2s ease-out; }
  .ff-nav__sub a, .ff-nav__sub span { padding: 8px 16px; font-size: 24px; line-height: 32px; text-align: center; }
}
@media (min-width: 768px) and (max-width: 1023.98px) { .ff-brand { font-size: 30px; line-height: 36px; white-space: nowrap; } }

/* desktop (≥ 1024px): 96px bar, logo + menu items spread evenly and vertically centred, red dropdowns */
@media (min-width: 1024px) {
  .ff-header__bar { height: 96px; display: flex; justify-content: space-evenly; }
  .ff-logo { align-self: center; }
  .ff-logo img { height: 48px; }
  .ff-brand { display: none; }
  .ff-nav, .ff-nav__list { display: contents; }
  .ff-nav__item { position: relative; display: inline-flex; align-items: center; }
  .ff-nav__link { font-size: 20px; line-height: 28px; }
  .ff-nav__sub {
    position: absolute; left: 0; top: 64px; z-index: 20;   /* item = full bar height; the old top-4 + mt-12 */ width: 224px; padding: 8px 0;
    border: 1px solid var(--ff-gray-200); border-radius: 4px; box-shadow: var(--ff-shadow-xl);
    visibility: hidden; opacity: 0; transform: scale(.95);
    transition: opacity .1s ease-in, transform .1s ease-in, visibility 0s linear .1s;
  }
  .ff-nav__item.is-open > .ff-nav__sub { visibility: visible; opacity: 1; transform: none; transition: opacity .2s ease-out, transform .2s ease-out; }
  .ff-nav__sub a, .ff-nav__sub span { padding: 8px 16px; font-size: 16px; line-height: 24px; transition: background-color .2s, color .2s; }
  .ff-nav__sub a:hover, .ff-nav__sub a:focus-visible { background: var(--ff-gray-200); color: var(--ff-red); }
  .ff-burger { display: none; }
  .ff-cart { align-self: center; }
}

/* ── 3 page head: banner, breadcrumb, title ────────────────────────────────────────────────── */
.ff-banner { overflow: hidden; background: #fff; }
.ff-banner img { width: 100%; height: 224px; object-fit: cover; }
@media (min-width: 640px) { .ff-banner img { height: 288px; } }
@media (min-width: 768px) { .ff-banner img { height: 384px; } }

.ff-crumbs { display: none; }
@media (min-width: 1024px) { .ff-crumbs { display: block; min-height: 12px; padding-top: 12px; font-size: 14px; line-height: 20px; color: var(--ff-gray-700); } }
/* the old separator was a Font Awesome svg that made the line 24px high; a page name alone stayed at 20px */
@media (min-width: 1024px) { .ff-crumbs:has(.ff-crumbs__sep) { line-height: 24px; } }
.ff-crumbs__sep { display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 4px; border-top: 1px solid var(--ff-gray-600); border-right: 1px solid var(--ff-gray-600); transform: rotate(45deg); }

.ff-title { margin: 16px 0; font-family: var(--ff-heading); font-size: 30px; line-height: 36px; font-weight: 500; color: var(--ff-gray-600); }
@media (min-width: 1024px) { .ff-title { margin-bottom: 24px; font-size: 36px; line-height: 40px; } }
.ff-pagehead .kicker { margin: 16px 0 -8px; }

/* ── 4 rhythm ──────────────────────────────────────────────────────────────────────────────────
   The old site wrapped every element in a <p> that the browser split into empty paragraphs before and after it
   (16px bottom margin each); the elements' own bottom margins (text 32, line 48, …) collapsed with those. Rebuilt
   as collapsing margins: every element 16px above and below, the old bottom margins where larger. The column has no
   vertical padding, so the first element's margin melts into the title's bottom margin (or the Trennlinie's 48px
   below it) and the last one into the footer's 48px — same as before. */
.ff-content .el { margin: 16px 0; }
.ff-content .el-text, .ff-content .el-textpic, .ff-content .el-picture, .ff-content .ff-link,
.ff-content .ff-news, .ff-content .embed, .ff-content .el-download, .ff-content .el-table { margin-bottom: 32px; }
.ff-content .el-line { margin-bottom: 48px; }
.ff-content h1.el-headline { margin-bottom: 16px; }
@media (min-width: 1024px) { .ff-content h1.el-headline { margin-bottom: 24px; } }

/* ── 7 other elements — the _default rules, re-tokenised (shared with the knie template). The old site had none of
   these; they keep the FF look when editors use them. The FF-specific rules (sections 5 + 6) follow and win. */
.kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; color: var(--accent-ink); margin: 0 0 .5em; font-weight: 600; }
.lead { font-size: 1.1rem; color: var(--muted); }
.pre { white-space: pre-line; }
.btn { display: inline-block; padding: .65em 1.3em; background: var(--accent); color: #fff; border-radius: 999px; text-decoration: none; font-weight: 600; border: 0; cursor: pointer; }
.btn:hover { background: var(--accent-ink); }
.textlink { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.surface { padding: 32px; border-radius: var(--radius); }
.surface--light { background: var(--bg-soft); }
.surface--dark { background: var(--dark); color: #fff; }
.surface--dark .kicker, .surface--dark a { color: #b6e3a4; }
.surface--accent { background: var(--accent); color: #fff; }
.surface--accent .kicker, .surface--accent a { color: #fff; }
.surface--accent .btn { background: #fff; color: var(--accent-ink); }
.surface--plain { padding: 0; }

.el-hero { margin: 0 calc(-1 * var(--gap)) 48px; background: var(--dark); color: #fff; position: relative; overflow: hidden; }
.el-hero .kicker { color: #b6e3a4; }
.el-hero h1 em { font-style: normal; color: var(--accent); }
.el-hero__inner { max-width: var(--container); margin: 0 auto; padding: 64px var(--gap); display: grid; gap: 40px; align-items: center; position: relative; }
.el-hero--split .el-hero__inner { grid-template-columns: 1.1fr 1fr; }
.el-hero__media { margin: 0; position: relative; }
.el-hero__media img { border-radius: var(--radius); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.el-hero__badge { position: absolute; left: 20px; bottom: 20px; background: rgba(255,255,255,.95); color: var(--ink); padding: 14px 18px; border-radius: 8px; display: grid; gap: 2px; max-width: 70%; }
.el-hero__badge .kicker { margin: 0; }
.el-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.el-hero--image .el-hero__inner, .el-hero--plain .el-hero__inner { text-align: center; max-width: 820px; }
.el-hero__actions { display: flex; gap: 20px; align-items: center; justify-content: inherit; margin-top: 24px; }
.el-hero__actions .textlink { color: #fff; }
@media (max-width: 760px) { .el-hero--split .el-hero__inner { grid-template-columns: 1fr; padding: 40px var(--gap); } }
.el-quickfact { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; }
.el-quickfact.surface--dark { border-left-color: #b6e3a4; }
.el-quickfact.surface--accent { border-left-color: #fff; }
.el-quickfact img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.el-quickfact h3 { margin-bottom: .25em; }
.el-quickfact p { margin: 0; }

/* news article */
.el-news__main { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gap); align-items: start; }
.el-news__main:not(:has(.el-news__media)) { grid-template-columns: 1fr; }
.el-news__media { margin: 0; }
.el-news__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.el-news__title { margin-top: 0; }
.el-news__link { margin: 16px 0 0; }
.el-news__download { display: inline-flex; gap: 12px; align-items: center; margin-top: 16px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.el-news__download:hover { border-color: var(--accent); }
.el-news__download small { color: var(--muted); margin-left: 6px; }
.el-news__images { margin-top: var(--gap); }   /* slider5 strip — rules under "gallery sliders" */
@media (max-width: 760px) { .el-news__main { grid-template-columns: 1fr; } }

.el-teaser h3 { margin-top: 0; }
.el-teaser .btn { margin-top: 16px; }
.el-facts { margin-left: calc(-1 * var(--gap)); margin-right: calc(-1 * var(--gap)); border-radius: 0; padding: 48px var(--gap); }
.el-facts__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; max-width: var(--container); margin-inline: auto; }
.el-facts__grid li { display: grid; gap: 2px; }
.el-facts__value { font-size: 2.2rem; font-weight: 700; line-height: 1; font-family: ui-monospace, monospace; }
.el-facts__label { font-weight: 600; }
.el-facts small { color: inherit; opacity: .7; }
.el-facts .el-head { max-width: var(--container); margin-inline: auto; }

.el-dates.has-head { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
.el-dates__list { list-style: none; margin: 0; padding: 0; }
.el-dates__list li { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.el-dates__list li:last-child { border-bottom: 1px solid var(--line); }
.el-dates__list time { font-family: ui-monospace, monospace; font-size: .9rem; color: var(--muted); }
@media (max-width: 760px) { .el-dates.has-head { grid-template-columns: 1fr; gap: 16px; } }

.el-tabs__strip { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 24px; overflow-x: auto; }
.el-tabs__strip button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 14px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.el-tabs__strip button.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.el-tabs__panel { display: none; }
.el-tabs__panel.is-active { display: block; }
.el-tabs__panel > .el:first-child { margin-top: 0; }

.el-card__title { margin-top: 0; }
.el-card__body > .el:first-child { margin-top: 0; }
.el-card__body > .el:last-child { margin-bottom: 0; }
.el-card__body > .el { margin: 20px 0; }
/* gallery sliders (Layout = slider5 / slider1; JS in /site/_default/gallery.js) */
.el-gallery__slider { position: relative; }
.el-gallery__arrow { position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; margin-top: -20px; border: 0; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; cursor: pointer; padding: 0; }
.el-gallery__arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: translate(-30%, -50%) rotate(-135deg); }
.el-gallery__arrow--prev { left: 8px; }
.el-gallery__arrow--next { right: 8px; }
.el-gallery__arrow--next::before { transform: translate(-70%, -50%) rotate(45deg); }
.el-gallery__arrow:hover { background: var(--accent); }
.el-gallery__arrow:disabled { opacity: .3; cursor: default; }
.el-gallery__arrow:disabled:hover { background: rgba(0,0,0,.5); }
/* slider5: strip */
.el-gallery__strip { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; outline: none; }
.el-gallery__strip::-webkit-scrollbar { display: none; }
.el-gallery__strip figure { flex: 0 0 calc((100% - 4 * 12px) / 5); margin: 0; scroll-snap-align: start; }
.el-gallery__strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.el-gallery__strip figcaption { font-size: .8rem; color: var(--muted); margin-top: 4px; }
@media (max-width: 960px) { .el-gallery__strip figure { flex-basis: calc((100% - 2 * 12px) / 3); } }
@media (max-width: 640px) { .el-gallery__strip figure { flex-basis: calc((100% - 12px) / 2); } }
/* slider1: stage */
.el-gallery__slider--stage { outline: none; touch-action: pan-y; }
.el-gallery__stage { display: grid; background: var(--bg-soft); border-radius: 8px; overflow: hidden; }
.el-gallery__stage figure { grid-area: 1 / 1; margin: 0; position: relative; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.el-gallery__stage figure.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.el-gallery__stage a { display: block; }
.el-gallery__stage img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; display: block; }
.el-gallery.is-keepratio .el-gallery__stage img { object-fit: contain; }
.el-gallery__stage figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px; background: linear-gradient(transparent, rgba(0,0,0,.65)); color: #fff; font-size: .85rem; }
.el-gallery__counter { position: absolute; right: 12px; top: 12px; z-index: 2; font-size: .75rem; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.5); color: #fff; }

/* lightbox (gallery "Vergrößern"; JS in /site/_default/lightbox.js) */
html.has-lightbox { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.92); padding: 56px 72px; }
.lightbox.is-open { display: flex; }
.lightbox, .el-gallery__stage img, .slider .slide__media img { touch-action: pan-y; -webkit-user-drag: none; user-select: none; }
.lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lightbox__img { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; display: block; transition: opacity .25s; }
.lightbox.is-loading .lightbox__img { opacity: .4; }
.lightbox__caption { color: #fff; text-align: center; }
.lightbox__close, .lightbox__arrow { position: absolute; z-index: 2; border: 0; background: transparent; color: #fff; cursor: pointer; padding: 0; width: 48px; height: 48px; }
.lightbox__close { top: 12px; right: 12px; }
.lightbox__close::before, .lightbox__close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 1.5px; background: #fff; transform: translate(-50%, -50%) rotate(45deg); }
.lightbox__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.lightbox__arrow { top: 50%; margin-top: -24px; }
.lightbox__arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; transform: translate(-30%, -50%) rotate(-135deg); }
.lightbox__arrow--prev { left: 12px; }
.lightbox__arrow--next { right: 12px; }
.lightbox__arrow--next::before { transform: translate(-70%, -50%) rotate(45deg); }
.lightbox.is-single .lightbox__arrow { display: none; }
.lightbox__counter { position: absolute; left: 16px; top: 24px; color: rgba(255,255,255,.7); }
@media (max-width: 760px) { .lightbox { padding: 56px 12px 40px; } .lightbox__arrow { display: none; } .lightbox__img { max-height: calc(100vh - 120px); } }
.lightbox__caption { font-size: .9rem; }
.lightbox__counter { font-size: .8rem; }
.lightbox__close:hover, .lightbox__arrow:hover { color: var(--accent); }
.lightbox__close:hover::before, .lightbox__close:hover::after, .lightbox__arrow:hover::before { background-color: var(--accent); border-color: var(--accent); }
.el-person { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; }
.el-person__photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }
.el-person__function { color: var(--muted); margin-top: -.25em; }
.el-person__contact { display: flex; flex-wrap: wrap; gap: 16px; }
@media (max-width: 600px) { .el-person { grid-template-columns: 1fr; } .el-person__photo { max-width: 200px; } }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--gap); }
.product-card { position: relative; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.product-card img { aspect-ratio: 1; object-fit: contain; background: var(--bg-soft); border-radius: 8px; margin-bottom: 8px; width: 100%; }
.product-card h3 { margin: 0; font-size: 1.05rem; }
.product-card__sub { margin: 0; color: var(--muted); font-size: .9rem; }
.product-card__price { margin: 8px 0 0; font-weight: 700; }
.product-card__price small { font-weight: 400; color: var(--muted); }
.product-card__badge { position: absolute; top: 12px; left: 12px; background: var(--accent); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.product-card__note { margin: 0; color: #b91c1c; font-weight: 600; font-size: .85rem; }
.is-soldout img { opacity: .5; }

.el-product { display: grid; grid-template-columns: 2fr 3fr; gap: 40px; align-items: start; }
.el-product__media { margin: 0; }
.el-product__media img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--bg-soft); border-radius: var(--radius); }
.el-product__text .product-card__badge { position: static; display: inline-block; margin-bottom: 12px; }
.el-product__attrs { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 20px 0; font-size: .95rem; }
.el-product__attrs dt { color: var(--muted); }
.el-product__attrs dd { margin: 0; }
@media (max-width: 760px) { .el-product { grid-template-columns: 1fr; } }

.el-video { padding: 24px; border: 1px dashed var(--line); border-radius: var(--radius); text-align: center; color: var(--muted); }
/* ── 8 shop (the _default Shop pages + buy buttons, re-tokenised) ──────────────────────────── */
/* ---------- shop: header cart link, buy buttons, cart / checkout / confirmation pages ---------- */
.cart-link { margin-left: auto; text-decoration: none; color: var(--ink); font-weight: 600; padding: 6px 10px; border-radius: 6px; white-space: nowrap; }
.cart-link:hover { background: var(--bg-soft); }
.cart-link__count { display: inline-block; min-width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 999px; background: var(--accent); color: #fff; font-size: .75rem; padding: 0 6px; }
.site-brand + .cart-link { margin-left: 0; }
.site-header__inner .site-brand { margin-right: auto; }
.buy { margin: 8px 0 0; }
.product-card .buy { margin-top: auto; padding-top: 8px; }
.buy .btn { font-size: .85rem; padding: .5em 1em; }
.buy--inline { display: flex; align-items: flex-end; gap: 16px; margin-top: 16px; }
.buy__qty { display: grid; gap: 4px; font-size: .8rem; color: var(--muted); }
.buy__qty input { width: 72px; font: inherit; padding: .45em .6em; border: 1px solid var(--line); border-radius: 8px; }
.shop-head { margin-bottom: 8px; }
.shop-flash { padding: 12px 16px; border-radius: 8px; background: var(--bg-soft); border-left: 4px solid var(--accent); margin: 0 0 20px; }
.shop-flash--warning { border-left-color: #b45309; }
.shop-flash--error { border-left-color: #b91c1c; }
.shop-note { color: var(--muted); font-size: .9rem; }
.shop-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 8px; }
.shop-actions .textlink { margin-right: auto; }
.btn--ghost { background: transparent; color: var(--accent-ink); border: 1px solid var(--accent); }
.btn--ghost:hover { background: var(--bg-soft); }
.btn--block { display: block; width: 100%; text-align: center; }
.icon-btn { background: none; border: 0; font-size: 1.4rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px 8px; }
.icon-btn:hover { color: #b91c1c; }
.cart-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.cart-table th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; padding: 0 8px 10px; border-bottom: 1px solid var(--line); }
.cart-table td { padding: 12px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cart-table .num { text-align: right; white-space: nowrap; }
.cart-table__thumb { width: 64px; }
.cart-table__thumb img { width: 56px; height: 56px; object-fit: contain; background: var(--bg-soft); border-radius: 6px; }
.cart-table__name { display: table-cell; }
.cart-table__name strong { display: block; }
.cart-table__name span { display: block; color: var(--muted); font-size: .85rem; }
.cart-table__warn { display: block; color: #b45309; font-style: normal; font-size: .85rem; font-weight: 600; }
.cart-table__qty input { width: 70px; font: inherit; padding: .4em .5em; border: 1px solid var(--line); border-radius: 8px; }
.cart-table tfoot td { border-bottom: 0; padding-top: 16px; }
.cart-table tfoot .is-grand td { font-size: 1.05rem; }
.cart-table tfoot .is-tax td { color: var(--muted); font-size: .85rem; padding-top: 2px; }
.cart-table--plain td { padding: 10px 8px; }
.is-short td { background: #fff8f1; }
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.checkout__form { display: grid; gap: 28px; }
.checkout__section { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; min-width: 0; }
.checkout__section legend { font-weight: 700; font-size: 1.1rem; margin-bottom: 8px; padding: 0; }
.checkout .field { display: grid; gap: 4px; }
.checkout label { font-weight: 600; font-size: .95rem; }
.checkout input[type=text], .checkout input[type=email], .checkout input[type=tel], .checkout select, .checkout textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; width: 100%; background: var(--bg); }
.checkout .field--check label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.checkout .field--check input { margin-top: 4px; accent-color: var(--accent); }
.checkout .hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-row--zip { grid-template-columns: 120px 1fr; }
.checkout__ship { display: grid; gap: 14px; }
.checkout__ship[hidden] { display: none; }
.field__hint { color: var(--muted); font-size: .85rem; margin: 0; }
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-weight: 400; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--bg-soft); }
.choice input { margin-top: 4px; accent-color: var(--accent); }
.choice__text { flex: 1; display: grid; gap: 2px; }
.choice__text span { color: var(--muted); font-size: .85rem; }
.choice__price { font-weight: 600; white-space: nowrap; }
.checkout__legal { display: flex; gap: 16px; flex-wrap: wrap; font-size: .9rem; margin: 0; }
.checkout__summary { position: sticky; top: 80px; background: var(--bg-soft); border-radius: var(--radius); padding: 24px; display: grid; gap: 16px; }
.checkout__summary h2 { font-size: 1.15rem; margin: 0; }
.summary-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .9rem; }
.summary-lines li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; }
.summary-lines__qty { color: var(--muted); }
.summary-lines__total { white-space: nowrap; }
.summary-totals { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; border-top: 1px solid var(--line); padding-top: 12px; font-size: .95rem; }
.summary-totals dd { margin: 0; text-align: right; white-space: nowrap; }
.summary-totals__grand { font-weight: 700; font-size: 1.05rem; }
.checkout__back { margin: 0; text-align: center; }
.done-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; align-items: start; margin: 24px 0; }
.done-main h2 { font-size: 1.15rem; margin: 24px 0 12px; }
.done-main h2:first-child { margin-top: 0; }
.done-aside { background: var(--bg-soft); border-radius: var(--radius); padding: 24px; }
.done-aside h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 16px 0 4px; }
.done-aside h3:first-child { margin-top: 0; }
.done-aside .address { margin: 0; }
.done-payment { background: var(--bg-soft); border-left: 4px solid var(--accent); padding: 16px 20px; border-radius: 0 var(--radius) var(--radius) 0; }
@media (max-width: 860px) { .checkout, .done-grid { grid-template-columns: 1fr; } .checkout__summary { position: static; } }
@media (max-width: 600px) {
  .cart-table thead { display: none; }
  .cart-table tbody tr { display: grid; grid-template-columns: 64px 1fr auto; gap: 4px 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .cart-table tbody td { border: 0; padding: 0; }
  .cart-table__thumb { grid-row: 1 / 4; }
  .cart-table__remove { grid-column: 3; grid-row: 1; }
  .cart-table tbody .num { grid-column: 2; text-align: left; font-size: .9rem; }
  .cart-table__qty { grid-column: 2; }
  .field-row { grid-template-columns: 1fr; }
}
.product-card__base, .product-card__legal { display: block; font-size: .75rem; color: var(--muted); margin-top: 4px; }

/* withdrawal page (/widerruf) */
.shop-withdrawal .checkout { display: block; max-width: 640px; }
.shop-withdrawal .shop-intro { max-width: 640px; }
.wd-review { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; margin: 0 0 20px; max-width: 640px; }
.wd-review dt { color: var(--muted); }
.wd-review dd { margin: 0; }
.wd-review .pre { white-space: pre-wrap; }
.shop-actions .btn + .btn { margin-left: 12px; }

/* Produktraster: optional per-product link — the name's link covers the whole card, the buy form stays clickable above it */
.product-card .product-card__link { color: inherit; text-decoration: none; }
.product-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.product-card .product-card__link:hover, .product-card .product-card__link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.product-card .buy { position: relative; z-index: 2; }

/* shop pages (templates/Site/_default/Shop/*): their main.page has no .ff-content column → the same column as the content */
main.page:not(.ff-main) { width: 100%; margin-inline: auto; padding: 0 8px; color: var(--ff-gray-800); }
@media (min-width: 640px)  { main.page:not(.ff-main) { max-width: 640px; } }
@media (min-width: 768px)  { main.page:not(.ff-main) { max-width: 768px; } }
@media (min-width: 1024px) { main.page:not(.ff-main) { max-width: 1024px; } }
@media (min-width: 1280px) { main.page:not(.ff-main) { max-width: 1280px; } }
main.page:not(.ff-main) .page-header { margin: 48px 0 16px; }
main.page:not(.ff-main) h1 { font-size: 30px; line-height: 36px; font-weight: 700; }
main.page:not(.ff-main) h2 { margin: 24px 0 12px; font-size: 20px; line-height: 28px; }
main.page:not(.ff-main) .el { margin: 16px 0; }

/* ── 9 table (Elements/table.html + table.js) ─────────────────────────────────────────────── */
.el-table__frame { position: relative; }
.el-table__frame::before, .el-table__frame::after { content: ""; position: absolute; top: 0; bottom: 0; width: 18px; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 1; }
.el-table__frame::before { left: 0; background: linear-gradient(to right, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0)); }
.el-table__frame::after { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0)); }
.el-table__frame.has-more-left::before, .el-table__frame.has-more-right::after { opacity: 1; }
.el-table__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* always-visible scrollbar for wide tables: macOS hides overlay scrollbars until one scrolls, a styled
   ::-webkit-scrollbar is always drawn (Safari, Chrome, Edge); Firefox gets the thin standard bar */
.el-table__scroll::-webkit-scrollbar { height: 10px; }
.el-table__scroll::-webkit-scrollbar-track { background: var(--tbl-track); border-radius: var(--tbl-radius); }
.el-table__scroll::-webkit-scrollbar-thumb { background: var(--tbl-thumb); border: 2px solid var(--tbl-track); border-radius: var(--tbl-radius); }
.el-table__scroll::-webkit-scrollbar-thumb:hover { background: var(--tbl-thumb-hover); }
@supports not selector(::-webkit-scrollbar) {
  .el-table__scroll { scrollbar-width: thin; scrollbar-color: var(--tbl-thumb) var(--tbl-track); }
}
.el-table__frame:is(.has-more-left, .has-more-right) .el-table__scroll { padding-bottom: 6px; }
.el-table { --tbl-track: var(--bg-soft); --tbl-thumb: #c4c9d0; --tbl-thumb-hover: var(--muted); --tbl-radius: 5px; }
.surface--dark .el-table, .surface--accent .el-table { --tbl-track: rgba(255, 255, 255, .12); --tbl-thumb: rgba(255, 255, 255, .45); --tbl-thumb-hover: rgba(255, 255, 255, .7); }
.el-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.el-table th, .el-table td { text-align: left; vertical-align: top; }
.el-table .al-right { text-align: right; }
.el-table .al-center { text-align: center; }
.el-table thead th { white-space: nowrap; }
.el-table .el-table__rep { display: none; }   /* repeat of a cell merged over several rows (Serializer::table) — only the card layout shows it */
@media (max-width: 640px) {
  .el-table--cards .el-table__frame::before, .el-table--cards .el-table__frame::after { display: none; }
  .el-table--cards .el-table__scroll { overflow: visible; }
  .el-table--cards table, .el-table--cards tbody, .el-table--cards tr, .el-table--cards tbody th, .el-table--cards td { display: block; width: 100%; }
  .el-table--cards .el-table__rep { display: block; }
  .el-table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .el-table--cards td, .el-table--cards tbody th { text-align: left !important; border: 0 !important; }
  .el-table--cards td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; }
}
.el-table__title { font-size: 1.15rem; margin: 0 0 12px; }
.el-table__scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.el-table th, .el-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.el-table thead th { font-weight: 600; border-bottom: 2px solid var(--ink); }
.el-table tbody th { font-weight: 600; }
.el-table a { color: var(--accent-ink); }
.el-table--striped th, .el-table--striped td { border-bottom: 0; }
.el-table--striped tbody tr:nth-child(odd) { background: var(--bg-soft); }
.el-table--compact th, .el-table--compact td { padding: 6px 10px; font-size: .92em; }
.el-table__note { font-size: .88rem; color: var(--muted); margin: 10px 0 0; }
@media (max-width: 640px) {
  .el-table--cards tr { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; background: var(--bg); }
  .el-table--cards td, .el-table--cards tbody th { padding: 4px 0; }
  .el-table--cards tbody th { font-size: 1.05em; padding-bottom: 6px; }
  .el-table--cards td[data-label]:not([data-label=""])::before { font-size: .8em; color: var(--muted); }
}

/* ── 5 FF elements ─────────────────────────────────────────────────────────────────────────── */

/* headlines: Work Sans (system fallback), medium, grey */
.el-headline { font-family: var(--ff-heading); font-weight: 500; color: var(--ff-gray-600); }
h1.el-headline { font-size: 30px; line-height: 36px; }
h2.el-headline { font-size: 24px; line-height: 32px; }
h3.el-headline { font-size: 20px; line-height: 28px; }
@media (min-width: 1024px) {
  h1.el-headline { font-size: 36px; line-height: 40px; }
  h2.el-headline { font-size: 30px; line-height: 36px; }
}

/* rich text: paragraphs 16px apart, lists with bullets inside, items 8px apart (the old base rules) */
.rich p { margin: 0 0 16px; }
.rich ul, .rich ol { margin: 8px 0 0; list-style-position: inside; }
.rich ul { list-style-type: disc; }
.rich ol { list-style-type: decimal; }
.rich li { margin-bottom: 8px; }
.rich a { text-decoration: underline; }
.el-text { color: var(--ff-gray-800); font-size: 20px; line-height: 28px; }
@media (min-width: 1024px) { .el-text { font-size: 18px; } }

/* picture: full column width */
.el-picture img { width: 100%; object-fit: cover; }
.el-picture--md { max-width: 60%; }
.el-picture--sm { max-width: 30%; margin-inline: auto; }
.el-picture__caption { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--ff-gray-700); }
@media (max-width: 760px) { .el-picture--sm { max-width: 50%; } }

/* Text + Bild: text 3/5 + picture 2/5 with shadow from 1024px, stacked below */
.el-textpic { display: flex; flex-wrap: wrap; font-size: 20px; line-height: 28px; }
.el-textpic__text { width: 100%; }
.el-textpic__media { width: 100%; margin-top: 16px; }
.el-textpic__media img { object-fit: cover; box-shadow: var(--ff-shadow-lg); }
.el-textpic__text > :last-child { margin-bottom: 0; }
@media (min-width: 1024px) {
  .el-textpic { font-size: 18px; }
  .el-textpic__text { width: 60%; padding-right: 20px; }
  .el-textpic__media { width: 40%; margin-top: 0; }
  .el-textpic--left .el-textpic__media { order: -1; }
  .el-textpic--left .el-textpic__text { padding: 0 0 0 20px; }
}

/* line: the old <hr class="border">, 2px light grey */
.el-line { height: 0; border: 1px solid var(--ff-gray-200); }

/* link (Stil Standard / Dunkel): square chevron + text, underline on hover from 1024px */
.ff-link { font-size: 20px; line-height: 28px; }
.ff-link__icon { display: inline-block; width: .875em; height: 1em; margin-right: 8px; vertical-align: -.125em; fill: currentColor; }
@media (min-width: 1024px) { .ff-link { font-size: 18px; } .ff-link a:hover { text-decoration: underline; } }
/* link boxes (Stil Hell / Akzent) */
.el-link__box { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 18px; line-height: 28px; }
.el-link__box--accent { background: var(--ff-red); color: #fff; }
.el-link__box--light { background: var(--ff-gray-200); color: var(--ff-gray-800); }
.el-link--full .el-link__box { display: flex; width: 100%; }
a.el-link__box:hover .el-link__text { text-decoration: underline; }

/* gallery (Layout "Raster"): square thumbnails 128px (192px from 1280px), 2 / 3 / 5 per row, centred, shadow on
   phones, on hover from 1024px — the old vehicle galleries */
.el-gallery__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; justify-items: center; }
.el-gallery__grid figure { margin: 0; }
.el-gallery__grid img { width: 128px; height: 128px; object-fit: cover; box-shadow: var(--ff-shadow-lg); transition: box-shadow .15s; }
.el-gallery__grid figcaption { margin-top: 4px; font-size: 14px; color: var(--ff-gray-700); text-align: center; }
@media (min-width: 768px)  { .el-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .el-gallery__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .el-gallery__grid img { box-shadow: none; }
  .el-gallery__grid a:hover img, .el-gallery__grid a:focus-visible img { box-shadow: var(--ff-shadow-xl); }
}
@media (min-width: 1280px) { .el-gallery__grid img { width: 192px; height: 192px; } }
.el-columns__zone .el-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* News-Artikel = the old news card */
.ff-news { padding: 16px; background: #fff; border: 1px solid var(--ff-gray-300); box-shadow: var(--ff-shadow-md); }
.ff-news__title { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--ff-gray-800); }
.ff-news__title--top { margin: 8px 0 12px; }
.ff-news__title--side { display: none; }
.ff-news__row { display: flex; flex-wrap: wrap; align-items: flex-start; }
.ff-news__media { width: 100%; margin-bottom: 16px; }
.ff-news__pic img { width: 100%; object-fit: contain; }
.ff-news__pic .el-picture__caption { font-size: 12px; line-height: 16px; }
.ff-news__thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; justify-items: center; margin-top: 16px; }
.ff-news__thumbs li { margin: 0; }
.ff-news__thumbs img { width: 80px; height: 80px; object-fit: cover; }
.ff-news__body { width: 100%; }
.ff-news__body .kicker { margin: 0 0 4px; }
.ff-news__text { margin-top: 16px; }
.ff-news__text > :last-child { margin-bottom: 16px; }
.ff-news__link { margin: 0 0 16px; }
.ff-news__link a { text-decoration: underline; }
.ff-news__link a:hover { color: var(--ff-red); }
.ff-news--noimg .ff-news__media { display: none; }
@media (min-width: 768px) { .ff-news__pic img { width: 384px; margin-inline: auto; } }
@media (min-width: 1024px) {
  .ff-news { box-shadow: var(--ff-shadow-xl); }
  .ff-news__title--top { display: none; }
  .ff-news__title--side { display: block; margin-top: 8px; }
  .ff-news__row { flex-wrap: nowrap; }
  .ff-news__media { width: 25%; margin: 0 32px 0 0; }
  .ff-news__pic img { width: 100%; margin-inline: 0; }
  .ff-news__body { width: 75%; }
}

/* Tabelle „Kompakt“ = the old RTE tables (vehicle data): no lines, 16px text (the old page ran in quirks mode, where
   tables don't inherit the 20px of the text), two-column tables split 50/50. The other styles keep the generic look. */
.el-table--compact table { color: var(--ff-gray-800); font-size: 16px; line-height: 24px; }
.el-table--compact th, .el-table--compact td { padding: 1px; border: 0; }
.el-table--compact tr > :first-child:nth-last-child(2), .el-table--compact tr > :last-child:nth-child(2) { width: 50%; }
.el-table thead th { background: var(--ff-red); color: #fff; border-bottom: 0; }
.el-table thead th.el-table__th-mid { border-bottom: 1px solid rgba(255, 255, 255, .45); }
.el-table thead th[rowspan] { vertical-align: bottom; }

/* download: red box with file type, name and size */
.el-download { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: var(--ff-red); color: #fff; text-decoration: none; max-width: 640px; }
.el-download__type { flex: 0 0 auto; min-width: 48px; padding: 6px 8px; background: #fff; color: var(--ff-red); font-size: 13px; font-weight: 700; text-align: center; }
.el-download__text { display: grid; gap: 2px; }
.el-download__text small { opacity: .85; }
.el-download:hover strong { text-decoration: underline; }

/* columns: full width below 768px, then the preset widths with 24px between */
.el-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; }
@media (min-width: 768px) { .el-columns { grid-template-columns: var(--cols); } }
.el-columns__zone { min-width: 0; }

/* form: label 1/5 + grey field 4/5 (three quarters of the column from 1024px), grey submit button */
.el-form { color: var(--ff-gray-800); }
.el-form .lead { margin: 0 0 8px; }
.el-form .field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 4fr); gap: 16px; align-items: start; padding-top: 20px; }
.el-form .field > label:first-child { font-size: 14px; line-height: 20px; }
.el-form .field > :not(label:first-child) { grid-column: 2; }
.el-form .field--check > label:first-child { grid-column: 2; display: flex; gap: 8px; align-items: flex-start; }
.el-form input[type=text], .el-form input[type=email], .el-form input[type=tel], .el-form input[type=date], .el-form select, .el-form textarea {
  display: block; width: 100%; margin: 0; padding: 8px 12px; border: 0; border-radius: 0; background: var(--ff-gray-200); color: #000; font: inherit; font-size: 16px; line-height: 24px;
}
.el-form input[type=text], .el-form input[type=email], .el-form input[type=tel], .el-form input[type=date], .el-form select { height: 32px; padding-block: 0; }
.el-form textarea { resize: vertical; }
.el-form input[type=checkbox], .el-form input[type=radio] { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--ff-red); flex: 0 0 auto; }
.el-form .field--check label { font-size: 14px; line-height: 20px; }
.el-form .field:has(> .field__group) { display: block; }
.el-form .field:has(> .field__group) > small { margin-left: 20%; }
.el-form .field__group { display: block; border: 0; padding: 0; margin: 0; min-width: 0; }
.el-form .field__group legend { float: left; width: 20%; padding: 0; font-size: 14px; line-height: 20px; }
.el-form .field__opt { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 6px 20%; font-size: 14px; line-height: 20px; }
.el-form small { display: block; margin-top: 4px; font-size: 12px; line-height: 16px; }
.el-form .field__error, .el-form__error { color: #7f1d1d; }
.el-form__error { margin: 16px 0 0; padding: 12px 16px; background: #fee2e2; border-radius: 6px; }
.el-form .has-error input, .el-form .has-error select, .el-form .has-error textarea { box-shadow: inset 0 0 0 1px var(--ff-red); }
.el-form .btn { margin-top: 48px; height: 40px; padding: 0 32px; border: 0; border-radius: 0; background: var(--ff-gray); color: #fff; font-size: 18px; line-height: 28px; font-weight: 400; cursor: pointer; }
.el-form .btn:hover { background: var(--ff-red); }
.el-form .hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.el-form--done .el-form__answer { margin: 16px 0 0; padding: 16px; background: #d1fae5; border-radius: 6px; color: #064e3b; }
@media (min-width: 640px)  {
  .el-form .field > label:first-child, .el-form .field__group legend { padding-top: 8px; }
  .el-form input[type=text], .el-form input[type=email], .el-form input[type=tel], .el-form input[type=date], .el-form select, .el-form textarea { font-size: 14px; line-height: 20px; }
}
@media (min-width: 768px)  { .el-form .field > label:first-child, .el-form .field__group legend, .el-form .field--check label, .el-form .field__opt { font-size: 18px; line-height: 20px; } }
@media (min-width: 1024px) { .el-form .field, .el-form__error, .el-form--done .el-form__answer { width: 75%; } }

/* two-click embeds (YouTube, Google Maps, iFrame) in the site's grey + red */
.embed { margin-left: 0; margin-right: 0; }
.embed__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ff-gray-200); }
.embed__poster, .embed__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.embed__play { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--ff-gray-800); text-decoration: none; }
.embed__icon { position: relative; width: 72px; height: 72px; border-radius: 50%; background: var(--ff-red); transition: background-color .2s; }
.embed__icon--play::after { content: ""; position: absolute; left: 29px; top: 22px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #fff; }
.embed__icon svg { position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; fill: #fff; }
.embed__play:hover .embed__icon, .embed__play:focus-visible .embed__icon { background: var(--ff-gray-800); }
.embed__label { font-size: 16px; font-weight: 600; }
.embed__notice { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: 10px 16px; font-size: 12px; line-height: 1.4; text-align: center; color: var(--ff-gray-800); background: rgba(255, 255, 255, .85); pointer-events: none; }
.embed figcaption { margin-top: 8px; font-size: 14px; color: var(--ff-gray-700); }
.embed--md { max-width: 60%; }
.embed__open { display: inline-block; margin-top: 8px; font-size: 14px; text-decoration: underline; }
.el-iframe .embed__frame iframe { background: #fff; }   /* foreign pages often have no background of their own */
@media (max-width: 760px) { .embed__icon { width: 56px; height: 56px; } .embed__icon--play::after { left: 22px; top: 16px; border-width: 12px 0 12px 18px; } .embed__notice { font-size: 11px; padding: 6px 10px; } .embed--md { max-width: none; } }

/* lightbox: PhotoSwipe's 80 % black of the old site, red accents */
.lightbox { background: rgba(0, 0, 0, .8); }

/* ── 6 footer ──────────────────────────────────────────────────────────────────────────────── */
.ff-footer { display: flex; margin-top: 48px; padding-bottom: 40px; background: var(--ff-gray); color: #fff; font-size: 16px; line-height: 24px; }
.ff-footer__inner { display: grid; grid-template-columns: minmax(0, 1fr); }
.ff-footer__logos, .ff-footer__col { margin-top: 16px; padding-inline: 16px; }
.ff-footer__logos { display: flex; justify-content: space-evenly; align-items: center; align-self: start; }
.ff-footer__logos img { width: auto; height: 128px; margin-top: 20px; padding: 20px 0; object-fit: contain; }
.ff-footer p { margin: 0 0 16px; }
.ff-footer__alert { color: var(--ff-red); }
.ff-footer__social a { display: inline-block; margin-right: 8px; font-size: 24px; line-height: 24px; vertical-align: top; }   /* the old icon line stayed 24px high (quirks mode) */
.ff-footer__social .ff-icon { vertical-align: top; }
.ff-icon { display: inline-block; width: .875em; height: 1em; vertical-align: -.125em; fill: currentColor; }
.ff-footer__nav p { margin: 4px 0 0; }
.ff-footer a:hover, .ff-footer a:focus-visible, .ff-footer__nav a[aria-current] { text-decoration: underline; }
@media (min-width: 1024px) {
  .ff-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; }
  .ff-footer__logos img { height: 192px; margin-top: 40px; }
}