/* ==========================================================================
   FITERIA Komponenten (Entwurf 2026)
   Wiederverwendbar auf allen Unterseiten. Braucht design-tokens.css davor.
   Namensschema: BEM mit Praefix "f-" (Block f-card, Element f-card__title,
   Modifier f-card--fish). Das Praefix verhindert Kollisionen mit dem
   Inline-CSS der bestehenden Seiten. Doku: styleguide.html
   ========================================================================== */

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--size-body-m);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
img,svg,video{display:block;max-width:100%;height:auto}
h1,h2{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:var(--tracking-display);line-height:var(--leading-display);color:var(--text-strong);margin:0}
h3,h4{font-family:var(--font-body);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:var(--tracking-subhead);line-height:var(--leading-heading);color:var(--text-heading);margin:0}
p{margin:0}
a{color:var(--text-link);text-underline-offset:3px}
a:hover{color:var(--text-link-hover)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
::selection{background:var(--fit-lime-500);color:var(--text-on-accent)}

/* ---------- Hilfsklassen ---------- */
.f-container{width:100%;max-width:var(--max-width-page);margin-inline:auto;padding-inline:var(--space-5)}
@media (min-width:768px){.f-container{padding-inline:var(--space-10)}}
.f-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.f-skip-link{position:absolute;left:var(--space-4);top:-100px;z-index:100;background:var(--fit-ink);color:#fff;padding:var(--space-3) var(--space-4);border-radius:var(--radius-m)}
.f-skip-link:focus{top:var(--space-4);color:#fff}
.f-stack>*+*{margin-top:var(--space-4)}
.f-stack--l>*+*{margin-top:var(--space-6)}

/* ---------- Typografie ---------- */
.f-display{font-size:clamp(44px,11vw,var(--size-display-xl))}
.f-h2{font-size:clamp(36px,7vw,var(--size-display-m))}
.f-h3{font-size:var(--size-heading-s)}
.f-eyebrow{display:inline-block;font-size:var(--size-label-m);font-weight:var(--weight-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.f-lead{font-size:var(--size-body-l);font-weight:var(--weight-light);line-height:1.55;max-width:var(--max-width-prose)}
.f-accent{font-family:var(--font-accent);font-weight:400;text-transform:none;letter-spacing:0;line-height:1.2}
.f-muted{color:var(--text-muted)}
.f-small{font-size:var(--size-body-s)}

/* ---------- Buttons ---------- */
.f-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:48px;padding:var(--space-3) var(--space-6);border:2px solid transparent;border-radius:var(--radius-pill);font:inherit;font-weight:var(--weight-semibold);font-size:var(--size-body-m);line-height:1.2;text-decoration:none;cursor:pointer;transition:var(--transition-control)}
.f-btn:active{transform:translateY(1px)}
.f-btn--primary{background:var(--action-primary-bg);color:var(--action-primary-fg)}
.f-btn--primary:hover{background:var(--action-primary-bg-hover);color:var(--action-primary-fg)}
.f-btn--accent{background:var(--action-accent-bg);color:var(--action-accent-fg)}
.f-btn--accent:hover{background:var(--action-accent-bg-hover);color:var(--action-accent-fg)}
.f-btn--ghost{background:transparent;border-color:currentColor;color:var(--text-strong)}
.f-btn--ghost:hover{background:var(--action-quiet-bg-hover);color:var(--text-strong)}
.f-btn--on-dark.f-btn--ghost{color:#fff}
.f-btn--on-dark.f-btn--ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.f-btn--s{min-height:40px;padding:var(--space-2) var(--space-4);font-size:var(--size-body-s)}
.f-btn--block{width:100%}
.f-btn-group{display:flex;flex-wrap:wrap;gap:var(--space-3)}

/* ---------- Badges ---------- */
.f-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);font-size:var(--size-label-s);font-weight:var(--weight-label);letter-spacing:var(--tracking-label);text-transform:uppercase;background:var(--surface-accent-soft);color:var(--text-strong)}
.f-badge--accent{background:var(--surface-accent);color:var(--text-on-accent)}
.f-badge--on-dark{background:rgba(255,255,255,.12);color:var(--text-accent-on-dark)}
.f-badge--veggie{background:var(--cat-veggie);color:#fff}
.f-badge--meat{background:var(--cat-meat);color:#fff}
.f-badge--fish{background:var(--cat-fish);color:#fff}
.f-badge--sweet{background:var(--cat-sweet);color:#fff}
.f-badge--general{background:var(--cat-general);color:var(--fit-ink)}

/* ---------- Liste mit Haken ---------- */
.f-checklist{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.f-checklist__item{position:relative;padding-left:28px}
.f-checklist__item::before{content:"";position:absolute;left:0;top:.3em;width:18px;height:18px;border-radius:50%;background:var(--fit-lime-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E221D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}

/* ---------- Grid ---------- */
.f-grid{display:grid;gap:var(--space-6);grid-template-columns:1fr}
@media (min-width:640px){.f-grid--2,.f-grid--3,.f-grid--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.f-grid--3{grid-template-columns:repeat(3,1fr)}.f-grid--4{grid-template-columns:repeat(4,1fr)}}
.f-split{display:grid;gap:var(--space-10);align-items:center}
@media (min-width:900px){.f-split{grid-template-columns:1fr 1fr;gap:var(--space-16)}.f-split--reverse>:first-child{order:2}}

/* ---------- Sektionen ---------- */
.f-section{padding-block:var(--space-16)}
@media (min-width:900px){.f-section{padding-block:var(--section-y)}}
.f-section--alt{background:var(--surface-page-alt)}
.f-section--inverse{background:var(--surface-inverse);color:var(--text-on-dark-muted)}
.f-section--inverse h2,.f-section--inverse h3{color:#fff}
.f-section--tight{padding-block:var(--space-10)}
.f-section__head{max-width:720px;margin-bottom:var(--space-10)}
.f-section__head>*+*{margin-top:var(--space-4)}
.f-section__head--center{margin-inline:auto;text-align:center}
.f-section__head--center .f-lead{margin-inline:auto}

/* ---------- Karten ---------- */
.f-card{display:flex;flex-direction:column;background:var(--surface-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-inset-hairline);overflow:hidden}
.f-card--raised{box-shadow:var(--shadow-m)}
.f-card__media{aspect-ratio:1/1;background:var(--surface-sunken)}
.f-card__media img{width:100%;height:100%;object-fit:cover}
.f-card__body{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);flex:1}
.f-card__title{font-size:var(--size-heading-s)}
.f-card__text{color:var(--text-body)}
.f-card__footer{margin-top:auto;padding-top:var(--space-2)}
.f-card--veggie .f-card__media{background:var(--cat-veggie-soft)}
.f-card--meat .f-card__media{background:var(--cat-meat-soft)}
.f-card--fish .f-card__media{background:var(--cat-fish-soft)}
.f-card--sweet .f-card__media{background:var(--cat-sweet-soft)}

/* Feature: Icon + Titel + Text, ohne Rahmen */
.f-feature{display:flex;flex-direction:column;gap:var(--space-3)}
.f-feature__icon{width:48px;height:48px;display:grid;place-items:center;border-radius:var(--radius-l);background:var(--surface-accent-soft);color:var(--text-strong)}
.f-feature__icon svg{width:24px;height:24px}
.f-feature__title{font-size:var(--size-heading-s)}

/* Preis-/Bundle-Karte */
.f-price-card{position:relative;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);border-radius:var(--radius-xl);background:var(--surface-card);box-shadow:var(--shadow-inset-hairline)}
.f-price-card--featured{box-shadow:0 0 0 2px var(--fit-green-800),var(--shadow-m)}
.f-price-card__size{font-family:var(--font-display);font-size:var(--size-display-s);line-height:1;color:var(--text-strong)}
.f-price-card__name{font-weight:var(--weight-semibold);color:var(--text-heading)}
.f-price-card__uvp{font-size:var(--size-body-s);color:var(--text-muted);text-decoration:line-through}
.f-price-card__price{font-family:var(--font-numeric);font-size:32px;font-weight:var(--weight-bold);line-height:1.1;color:var(--text-heading)}
.f-price-card__save{font-size:var(--size-body-s);font-weight:var(--weight-semibold);color:var(--text-strong)}
.f-price-card .f-btn{margin-top:auto}

/* Kennzahl */
.f-stat{display:flex;flex-direction:column;gap:var(--space-1)}
.f-stat__value{font-family:var(--font-display);font-size:clamp(40px,8vw,var(--size-display-m));line-height:1;color:var(--text-strong)}
.f-stat__label{font-size:var(--size-body-s);color:var(--text-muted)}
.f-section--inverse .f-stat__value{color:#fff}
.f-section--inverse .f-stat__label{color:var(--text-on-dark-muted)}

/* Schritte */
.f-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-6);counter-reset:f-step}
@media (min-width:768px){.f-steps{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}}
.f-steps__item{counter-increment:f-step;display:flex;flex-direction:column;gap:var(--space-2)}
.f-steps__item::before{content:counter(f-step);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--fit-green-800);color:#fff;font-family:var(--font-display);font-size:24px;line-height:1}
.f-steps__title{font-size:var(--size-heading-s)}
.f-steps__meta{font-size:var(--size-body-s);color:var(--text-muted)}

/* Zitat / Quelle */
.f-sources{font-size:var(--size-body-s);color:var(--text-muted);padding-left:var(--space-5)}
.f-sources li+li{margin-top:var(--space-2)}

/* ---------- FAQ (native details) ---------- */
.f-faq{border-top:1px solid var(--border-default)}
.f-faq__item{border-bottom:1px solid var(--border-default)}
.f-faq__q{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-5) 0;cursor:pointer;list-style:none;font-weight:var(--weight-semibold);color:var(--text-heading)}
.f-faq__q::-webkit-details-marker{display:none}
.f-faq__q::after{content:"+";flex:none;font-size:24px;line-height:1;color:var(--text-strong);transition:transform var(--duration-fast) var(--ease-standard)}
.f-faq__item[open] .f-faq__q::after{transform:rotate(45deg)}
.f-faq__a{padding:0 0 var(--space-5);max-width:var(--max-width-prose)}

/* ---------- Navigation ---------- */
.f-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:var(--blur-veil);-webkit-backdrop-filter:var(--blur-veil);border-bottom:1px solid var(--border-subtle)}
.f-nav__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:64px}
.f-nav__logo img{height:20px;width:auto}
.f-nav__toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:var(--radius-m);background:transparent;color:var(--fit-ink);cursor:pointer}
.f-nav__menu{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--border-subtle);padding:var(--space-4) var(--space-5) var(--space-6);box-shadow:var(--shadow-m)}
.f-nav__menu.is-open{display:block}
.f-nav__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.f-nav__link{display:block;padding:var(--space-3) 0;color:var(--text-heading);font-weight:var(--weight-medium);text-decoration:none}
.f-nav__link:hover{color:var(--text-strong)}
.f-nav__actions{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-4)}
.f-nav__lang{display:flex;gap:var(--space-3);font-size:var(--size-body-s)}
.f-nav__lang a{color:var(--text-muted);text-decoration:none}
.f-nav__lang a[aria-current]{color:var(--text-strong);font-weight:var(--weight-semibold)}
@media (min-width:1024px){
  .f-nav__toggle{display:none}
  .f-nav__menu{display:flex;position:static;align-items:center;gap:var(--space-8);padding:0;border:0;box-shadow:none;background:transparent}
  .f-nav__list{flex-direction:row;gap:var(--space-6)}
  .f-nav__link{padding:var(--space-2) 0;font-size:var(--size-body-s)}
  .f-nav__actions{flex-direction:row;align-items:center;margin-top:0}
}

/* ---------- Hero ---------- */
.f-hero{position:relative;background:var(--surface-inverse);color:var(--text-on-dark-muted);overflow:hidden}
.f-hero__inner{display:grid;gap:var(--space-8);padding-block:var(--space-12) var(--space-16)}
@media (min-width:900px){.f-hero__inner{grid-template-columns:1.05fr .95fr;align-items:center;padding-block:var(--space-20)}}
.f-hero__title{color:#fff;font-size:clamp(48px,11vw,88px)}
.f-hero__title em{font-style:normal;color:var(--fit-green-200)}
.f-hero__lead{color:var(--text-on-dark-muted);font-size:var(--size-body-l);font-weight:var(--weight-light);max-width:52ch}
.f-hero .f-checklist__item{color:#fff}
.f-hero__media{border-radius:var(--radius-2xl);overflow:hidden;box-shadow:var(--shadow-lifted)}
.f-hero__media img{width:100%;height:auto}
.f-hero__note{font-size:var(--size-body-s);color:var(--text-on-dark-muted)}

/* ---------- Kennzahlenleiste ---------- */
.f-statbar{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6)}
@media (min-width:768px){.f-statbar{grid-template-columns:repeat(4,1fr)}}

/* ---------- Pfadwahl (Privat / Unternehmen / Partner) ---------- */
.f-path{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-8);border-radius:var(--radius-xl);background:var(--surface-card);box-shadow:var(--shadow-inset-hairline);height:100%}
.f-path--inverse{background:var(--surface-inverse);color:var(--text-on-dark-muted)}
.f-path--inverse h3{color:#fff}
.f-path .f-btn{margin-top:auto;align-self:flex-start}

/* ---------- Formulare ---------- */
.f-field{display:flex;flex-direction:column;gap:var(--space-2)}
.f-field__label{font-size:var(--size-body-s);font-weight:var(--weight-semibold);color:var(--text-heading)}
.f-field__hint{font-size:var(--size-body-xs);color:var(--text-muted)}
.f-input,.f-select,.f-textarea{width:100%;min-height:48px;padding:var(--space-3) var(--space-4);border:1px solid var(--border-default);border-radius:var(--radius-l);background:#fff;font:inherit;color:var(--text-heading);transition:var(--transition-control)}
.f-input:focus,.f-select:focus,.f-textarea:focus{outline:none;border-color:var(--border-strong);box-shadow:0 0 0 3px var(--fit-green-100)}
.f-field--error .f-input{border-color:var(--status-error-fg)}
.f-field__error{font-size:var(--size-body-xs);color:var(--status-error-fg)}
.f-check{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--size-body-s)}
.f-check input{width:20px;height:20px;margin-top:2px;accent-color:var(--fit-green-800)}

/* ---------- CTA-Band ---------- */
.f-cta{display:flex;flex-direction:column;gap:var(--space-6);align-items:flex-start;padding:var(--space-10) var(--space-8);border-radius:var(--radius-2xl);background:var(--surface-accent);color:var(--text-on-accent)}
.f-cta h2{color:var(--fit-ink)}
@media (min-width:900px){.f-cta{flex-direction:row;align-items:center;justify-content:space-between;padding:var(--space-12) var(--space-16)}}

/* ---------- Trust-Leiste ---------- */
.f-trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3) var(--space-8);font-size:var(--size-body-s);font-weight:var(--weight-semibold);color:var(--text-muted)}
.f-trust li{display:flex;align-items:center;gap:var(--space-2)}
.f-trust svg{width:18px;height:18px;color:var(--text-strong)}

/* ---------- Footer ---------- */
.f-footer{background:var(--surface-ink);color:rgba(255,255,255,.7);padding-block:var(--space-16) var(--space-8);font-size:var(--size-body-s)}
.f-footer__grid{display:grid;gap:var(--space-10)}
@media (min-width:768px){.f-footer__grid{grid-template-columns:1.4fr repeat(3,1fr)}}
.f-footer__logo img{height:20px;width:auto}
.f-footer__title{font-size:var(--size-label-m);letter-spacing:var(--tracking-label);color:#fff;margin-bottom:var(--space-4)}
.f-footer__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.f-footer a{color:rgba(255,255,255,.8);text-decoration:none}
.f-footer a:hover{color:var(--fit-lime-300)}
.f-footer__bottom{margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid rgba(255,255,255,.12)}

/* ---------- Mobile Sticky-CTA ---------- */
.f-sticky-cta{position:fixed;left:var(--space-4);right:var(--space-4);bottom:var(--space-4);z-index:40;box-shadow:var(--shadow-l)}
@media (min-width:1024px){.f-sticky-cta{display:none}}

/* ---------- Medien & Abstaende (Utilities) ---------- */
.f-media img{border-radius:var(--radius-xl)}
.f-container--narrow{max-width:880px}
.f-sources--on-dark{color:var(--text-on-dark-muted)}
.f-sources--on-dark a{color:var(--text-accent-on-dark)}
.f-mt-6{margin-top:var(--space-6)}
.f-mt-8{margin-top:var(--space-8)}
.f-mt-12{margin-top:var(--space-12)}
.f-hero__brand{height:40px;width:auto}
.f-card__title,.f-h3,.f-steps__title{hyphens:auto;overflow-wrap:break-word}
.f-path>.f-badge,.f-card__body>.f-badge{align-self:flex-start}
.f-sticky-cta{transition:transform var(--duration-base) var(--ease-out),opacity var(--duration-base) var(--ease-out)}
.f-sticky-cta.is-hidden{transform:translateY(150%);opacity:0;pointer-events:none}

/* === v3: Produkt, Verpackung, Maskottchen, Sous-vide-Showcase === */
/* Hero mit Produktbild (Verpackung statt Food-Stock) */
.f-hero__media--product{aspect-ratio:3/2;background:var(--fit-paper-100)}
.f-hero__media--product img{height:100%;object-fit:cover}

/* Maskottchen: dezentes Branding-Element, rund, Kategorie-Farbe kommt aus dem Bild */
.f-mascot{display:inline-block;width:72px;height:72px;border-radius:var(--radius-circle);overflow:hidden;box-shadow:var(--shadow-s);flex:none}
.f-mascot img{width:100%;height:100%;object-fit:cover}
.f-mascot--s{width:48px;height:48px}
.f-mascot--l{width:112px;height:112px}
.f-mascot-row{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center}
.f-mascot-row .f-mascot{margin-inline-end:calc(var(--space-4) * -1);border:3px solid var(--surface-page)}
.f-mascot-row .f-mascot:last-child{margin-inline-end:0}

/* Varianten-Karte: stehende Verpackung wie ein DVD-Cover */
.f-variant{position:relative;display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);border-radius:var(--radius-xl);background:var(--surface-card);box-shadow:var(--shadow-s);border:1px solid var(--border-subtle)}
.f-variant__media{display:flex;justify-content:center;align-items:flex-end;aspect-ratio:4/5;border-radius:var(--radius-l);overflow:hidden;background:var(--fit-paper-100)}
.f-variant__media picture{display:block;width:100%;height:100%}
.f-variant__media img{width:100%;height:100%;object-fit:contain;object-position:center bottom}
.f-variant__title{font-family:var(--font-display);font-size:var(--size-heading-m);letter-spacing:var(--tracking-display);color:var(--text-heading);line-height:1}
.f-variant .f-mascot{position:absolute;top:var(--space-3);right:var(--space-3)}
.f-variant--meat{border-top:4px solid var(--cat-meat)}
.f-variant--fish{border-top:4px solid var(--cat-fish)}
.f-variant--veggie{border-top:4px solid var(--cat-veggie)}

/* Bildbühne: grosses Stimmungsbild mit optionaler Bildunterschrift */
.f-stage{position:relative;border-radius:var(--radius-2xl);overflow:hidden;box-shadow:var(--shadow-l)}
.f-stage img{width:100%;height:auto;display:block}
.f-stage__caption{position:absolute;left:var(--space-4);bottom:var(--space-4);padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);background:rgba(255,255,255,.92);color:var(--text-heading);font-size:var(--size-body-s);font-weight:var(--weight-semibold)}

/* Nummerierte Punkte (Unboxing, "So kommt es an") */
.f-numlist{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-5);counter-reset:fnum}
.f-numlist__item{position:relative;padding-inline-start:var(--space-12);counter-increment:fnum}
.f-numlist__item::before{content:counter(fnum);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:var(--radius-circle);display:grid;place-items:center;background:var(--action-primary-bg);color:#fff;font-family:var(--font-display);font-size:20px}
.f-numlist__title{display:block;font-weight:var(--weight-semibold);color:var(--text-heading)}

/* Sous-vide-Showcase: dunkles Vollbild mit Kennzahl-Kacheln */
.f-showcase{position:relative;isolation:isolate;overflow:hidden;background:var(--surface-ink);color:var(--text-on-dark-muted)}
.f-showcase__bg{position:absolute;inset:0;z-index:-2}
.f-showcase__bg img{width:100%;height:100%;object-fit:cover;opacity:.55}
.f-showcase::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,28,18,.55) 0%,rgba(6,28,18,.92) 70%)}
.f-showcase__inner{padding-block:var(--space-20) var(--space-16);display:grid;gap:var(--space-10)}
.f-showcase h2{color:#fff;max-width:18ch}
.f-showcase__lead{max-width:60ch;font-size:var(--size-body-l);font-weight:var(--weight-light)}
.f-showcase__tiles{display:grid;gap:var(--space-4)}
@media (min-width:768px){.f-showcase__tiles{grid-template-columns:repeat(3,1fr)}.f-showcase::before{background:linear-gradient(90deg,rgba(6,28,18,.94) 0%,rgba(6,28,18,.7) 55%,rgba(6,28,18,.35) 100%)}.f-showcase__inner{padding-block:var(--space-32) var(--space-20)}}
.f-glass{padding:var(--space-6);border-radius:var(--radius-xl);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.f-glass__value{display:block;font-family:var(--font-display);font-size:clamp(40px,6vw,56px);line-height:1;color:var(--fit-lime-300)}
.f-glass__label{display:block;margin-top:var(--space-2);color:#fff;font-weight:var(--weight-semibold)}
.f-glass__text{display:block;margin-top:var(--space-1);font-size:var(--size-body-s)}

/* Weiterleitungs-Banner zur Produktlinie */
.f-product-teaser{display:grid;gap:var(--space-8);align-items:center;padding:var(--space-8);border-radius:var(--radius-2xl);background:var(--surface-inverse);color:var(--text-on-dark-muted)}
.f-product-teaser h2{color:#fff}
@media (min-width:900px){.f-product-teaser{grid-template-columns:1fr 1fr;padding:var(--space-12)}}
.f-product-teaser img{border-radius:var(--radius-xl);width:100%;height:auto}
.f-stage{margin-inline:0;margin-bottom:0}
.f-split>.f-stage{margin-top:0}
/* v6: Zwei Einstiege (FITmeal / Cook2Gather), Bundle-Rolle */
.f-choice{display:flex;flex-direction:column;border-radius:var(--radius-2xl);overflow:hidden;background:var(--surface-card);box-shadow:var(--shadow-inset-hairline);height:100%}
.f-choice__media img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.f-choice__body{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-8);flex:1}
.f-choice__body .f-btn{margin-top:auto;align-self:flex-start}
.f-choice__body>.f-badge{align-self:flex-start}
.f-choice--inverse{background:var(--surface-inverse);color:var(--text-on-dark-muted)}
.f-choice--inverse h2,.f-choice--inverse h3{color:#fff}
.f-price-card__role{font-size:var(--text-sm,.875rem);font-weight:600}
/* v7: 5er-Raster (Woche Mo-Fr), Fussnote, mehr Luft in Textblöcken */
@media (min-width:1024px){.f-grid--5{grid-template-columns:repeat(5,1fr)}}
@media (min-width:640px) and (max-width:1023px){.f-grid--5{grid-template-columns:repeat(2,1fr)}}
.f-grid--5{display:grid;gap:var(--space-6)}
.f-stack--l>.f-checklist,.f-stack--l>.f-checklist+*{margin-top:var(--space-10)}
.f-footnote{font-size:var(--size-body-s);color:var(--text-muted,inherit);max-width:70ch}
.f-footnote sup,.f-checklist sup{font-weight:700}
.f-card__meta{font-size:var(--size-body-s);opacity:.8}
/* v8: Motion (nur mit JS-Klasse .f-motion an <html>, die js/motion.js setzt; ohne JS oder bei reduced motion bleibt alles statisch sichtbar) */
.f-motion .f-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--f-i,0) * 90ms)}
.f-motion .f-reveal.is-in{opacity:1;transform:none}
.f-card,.f-price-card,.f-path,.f-choice,.f-variant{transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
@media (hover:hover){.f-card:hover,.f-price-card:hover,.f-path:hover,.f-choice:hover,.f-variant:hover{transform:translateY(-4px);box-shadow:var(--shadow-m,0 12px 32px rgba(0,0,0,.12))}
.f-btn{transition:transform .2s var(--ease-out),background-color .2s,color .2s,box-shadow .2s}.f-btn:hover{transform:translateY(-2px)}.f-btn:active{transform:none}
.f-card__media img,.f-choice__media img{transition:transform .6s var(--ease-out)}.f-card:hover .f-card__media img,.f-choice:hover .f-choice__media img{transform:scale(1.04)}}
@keyframes f-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.f-motion .f-float{animation:f-float 5s ease-in-out infinite;animation-delay:calc(var(--f-i,0) * -1.1s)}
.f-motion .f-parallax{will-change:transform;transform:translate3d(0,var(--f-py,0px),0)}
.f-nav{transition:box-shadow .3s var(--ease-out),background-color .3s}
.f-nav.is-scrolled{box-shadow:0 6px 24px rgba(0,0,0,.08);background:rgba(255,255,255,.98)}
.f-stat__value,.f-glass__value{font-variant-numeric:tabular-nums}
@keyframes f-kenburns{from{transform:scale(1.02)}to{transform:scale(1.1)}}
.f-motion .f-showcase.is-in .f-showcase__bg img{animation:f-kenburns 18s ease-in-out infinite alternate}
.f-motion .f-glass{transition:transform .3s var(--ease-out),background-color .3s}
@media (hover:hover){.f-motion .f-glass:hover{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.f-motion .f-reveal{opacity:1;transform:none}.f-motion .f-parallax{transform:none}}
.f-variant .f-mascot{z-index:2}