/* Header nach Vorbild fair-for-fitness.de, Farben über Variablen (hier: Tannengrün des Entwurfs A) */
.ffh{
  --ffh-max:72rem;
  --ffh-h:64px;
  --ffh-accent-rgb:165,212,140;      /* helles Moos für Glühen, Rahmen, aktive Kapsel */
  --ffh-grad-a:#4F8A46;              /* Knopf-Verlauf Anfang (Moos) */
  --ffh-grad-b:#3A7D55;              /* Knopf-Verlauf Ende (Tanne) */
  --ffh-panel-a:#2F6B47;             /* Panel-Verlauf oben */
  --ffh-panel-b:#245538;             /* Panel-Verlauf unten */
  --ffh-panel-label:#D2EBBE;         /* Spaltenüberschriften im Panel */
  --ffh-panel-icon:#DCEFCB;          /* Symbole im Panel */
  --ffh-light-active:#2F6B47;        /* aktive Kapsel in der hellen Variante */
  --ffh-light-more:#2F5A3A;          /* Text von "Alle Bereiche" in der hellen Variante */
  --ffh-ease:cubic-bezier(.23,1,.32,1);
  --ffh-font:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ffh-display:"Space Grotesk","Geist",system-ui,sans-serif;
  position:sticky;top:0;z-index:1100;font-family:var(--ffh-font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
.ffh *,.ffh *::before,.ffh *::after{box-sizing:border-box}
.ffh a{text-decoration:none;color:inherit}
.ffh button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.ffh svg{display:block}
.ffh :focus-visible{outline:2px solid rgb(var(--ffh-accent-rgb));outline-offset:2px;border-radius:8px}
.ffh nav{position:static;inset:auto;padding:0;margin:0}
.ffh nav.ffh-nav{position:relative;z-index:auto;padding:0 16px}
.ffh nav.ffh-menu{position:absolute;left:0;right:0;top:100%;z-index:1095}
.ffh ul{display:block;list-style:none;margin:0;padding:0}

/* Leiste */
.ffh-bar{position:relative;z-index:1100;border-bottom:1px solid rgba(var(--ffh-accent-rgb),.25);
  background:linear-gradient(180deg,rgba(60,120,85,.3) 0%,rgba(42,96,66,.7) 50%,rgba(36,85,56,.94) 100%);
  box-shadow:0 6px 28px -6px rgba(var(--ffh-accent-rgb),.18),inset 0 1px 0 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);color:#fff;
  transition:background-color .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}
.ffh-nav{margin:0 auto;display:flex;height:var(--ffh-h);max-width:var(--ffh-max);align-items:center;justify-content:space-between;gap:8px;padding:0 16px}
.ffh-left,.ffh-right{display:flex;flex-shrink:0;align-items:center;gap:6px}
.ffh-burger{display:inline-flex;height:44px;width:44px;align-items:center;justify-content:center;border-radius:8px;color:#fff;transition:background-color .15s,color .15s}
.ffh-burger:hover{background:rgba(255,255,255,.1)}
.ffh-burger svg{height:24px;width:24px}
.ffh-burger .ffh-ico-x{display:none}
.ffh[data-open] .ffh-burger .ffh-ico-menu{display:none}
.ffh[data-open] .ffh-burger .ffh-ico-x{display:block}
.ffh-chip{display:none;align-items:center;gap:6px;border-radius:8px;padding:6px 10px;font-size:14px;font-weight:500;color:rgba(255,255,255,.85);transition:background-color .15s,color .15s}
.ffh-chip:hover{background:rgba(255,255,255,.1);color:#fff}
.ffh-chip svg{height:16px;width:16px}
.ffh-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:8px;padding:4px 6px}
.ffh-logo span{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.ffh-logo img{height:32px;width:32px;border-radius:9px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.ffh-logo b{font-family:var(--ffh-display);font-size:18px;font-weight:700;line-height:1;letter-spacing:-.025em;color:#fff}
.ffh-logo b i{font-style:normal;font-weight:500;color:#d4d4d8}
.ffh-cta{display:none;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:600;color:#fff;white-space:nowrap;
  background:linear-gradient(90deg,var(--ffh-grad-a),var(--ffh-grad-b));box-shadow:0 0 24px -4px rgba(var(--ffh-accent-rgb),.65);transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}
.ffh-cta:hover{box-shadow:0 0 32px -2px rgba(var(--ffh-accent-rgb),.85)}

/* Kapselzeile */
.ffh-pills{pointer-events:none;position:absolute;left:0;right:0;top:100%;z-index:1085;display:none;grid-template-rows:1fr;opacity:1;overflow:hidden;
  transition:grid-template-rows .25s var(--ffh-ease),opacity .25s var(--ffh-ease)}
.ffh-pills[data-hidden]{grid-template-rows:0fr;opacity:0;transition-duration:.2s}
.ffh-pills-clip{min-height:0}
.ffh-pills-scroll{margin:0 auto;max-width:var(--ffh-max);overflow-x:auto;padding:36px 16px 8px;-ms-overflow-style:none;scrollbar-width:none}
.ffh-pills-scroll::-webkit-scrollbar{display:none}
.ffh-pills-nav{pointer-events:auto;margin:0 auto;display:flex;width:max-content;align-items:center;gap:8px}
/* Kapseln: dunkles Tannengrün-Glas mit hellem Rand, damit sie auch über hellem Himmel im Foto lesbar bleiben */
.ffh-pill{display:inline-flex;flex-shrink:0;align-items:center;gap:6px;white-space:nowrap;border-radius:9999px;border:1px solid rgba(255,255,255,.34);background:rgba(47,107,71,.9);color:#fff;
  padding:7px 15px;font-size:14px;font-weight:500;line-height:20px;box-shadow:0 2px 10px rgba(0,0,0,.18);
  transition:color .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.4,0,.2,1)}
.ffh-pill:hover{border-color:rgba(var(--ffh-accent-rgb),.8);background:rgba(58,125,85,.96);color:#fff;transform:translateY(-1px)}
.ffh-pill[aria-current]{border-color:rgba(var(--ffh-accent-rgb),.9);background:var(--ffh-grad-a);color:#fff;font-weight:600}
.ffh a.ffh-pill,.ffh button.ffh-pill{color:#fff}
.ffh-pill-more{font-weight:600}
.ffh-pill-more svg{height:14px;width:14px;transition:transform .15s cubic-bezier(.4,0,.2,1)}
.ffh[data-open] .ffh-pill-more svg{transform:rotate(180deg)}

/* Panel */
.ffh-menu{display:none;max-height:calc(100dvh - 7rem);overflow-y:auto;overscroll-behavior:contain;border-bottom:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,var(--ffh-panel-a) 0%,var(--ffh-panel-b) 100%);box-shadow:0 25px 50px -12px rgba(20,60,35,.35);color:#EAF3E4}
.ffh[data-open] .ffh-menu{display:block;animation:ffh-in .16s var(--ffh-ease)}
@keyframes ffh-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ffh-menu-glow{pointer-events:none;position:absolute;right:-40px;top:-64px;height:192px;width:192px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--ffh-accent-rgb),.22),transparent)}
.ffh-menu-inner{position:relative;margin:0 auto;max-width:var(--ffh-max);padding:20px 16px 24px}
.ffh-menu-grid{display:grid;gap:24px 32px;grid-template-columns:1fr}
.ffh-menu h2{margin:0;padding:0 12px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ffh-panel-label);font-family:var(--ffh-font)}
.ffh-menu ul{margin:6px 0 0;display:grid;gap:2px}
.ffh-menu-item{display:flex;align-items:center;gap:12px;border-radius:12px;border:1px solid transparent;padding:10px 12px;font-size:14px;font-weight:500;color:#EAF3E4;transition:background-color .15s,color .15s,border-color .15s}
.ffh-menu-item:hover{background:rgba(255,255,255,.05);color:#fff}
.ffh-menu-item[aria-current]{border-color:rgba(var(--ffh-accent-rgb),.5);background:linear-gradient(90deg,rgba(var(--ffh-accent-rgb),.14),rgba(var(--ffh-accent-rgb),.06));color:#fff;font-weight:600}
.ffh-menu-item .ffh-ico{display:flex;height:32px;width:32px;flex-shrink:0;align-items:center;justify-content:center;border-radius:8px;background:rgba(255,255,255,.05);color:var(--ffh-panel-icon)}
.ffh-menu-item[aria-current] .ffh-ico{background:linear-gradient(135deg,var(--ffh-grad-a),var(--ffh-grad-b));color:#fff}
.ffh-menu-item svg{height:18px;width:18px}
.ffh-menu-foot{margin-top:24px;display:flex;flex-direction:column;gap:12px;border-top:1px solid rgba(255,255,255,.1);padding-top:20px}
.ffh-menu-cta{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:12px 16px;font-size:14px;font-weight:600;color:#fff;
  background:linear-gradient(90deg,var(--ffh-grad-a),var(--ffh-grad-b));box-shadow:0 10px 15px -3px rgba(var(--ffh-accent-rgb),.2)}
.ffh-menu-cta svg{height:16px;width:16px}
.ffh-menu-note{margin:0;font-size:13px;color:#CFE2C6}
.ffh-menu-note a{color:#F2F8EE;text-decoration:underline;text-underline-offset:3px}
.ffh-backdrop{position:fixed;inset:0;z-index:1090;display:none;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ffh[data-open] .ffh-backdrop{display:block}

/* helle Variante: Unterseiten oder Panel offen */
.ffh[data-variant="light"] .ffh-bar,.ffh[data-open] .ffh-bar{border-bottom-color:rgba(228,228,231,.9);background:rgba(255,255,255,.85);box-shadow:0 1px 0 0 rgba(0,0,0,.02),0 8px 24px -12px rgba(15,23,42,.12);color:#3f3f46}
.ffh[data-variant="light"] .ffh-burger,.ffh[data-open] .ffh-burger{color:#3f3f46}
.ffh[data-variant="light"] .ffh-burger:hover,.ffh[data-open] .ffh-burger:hover{background:#f4f4f5;color:#18181b}
.ffh[data-variant="light"] .ffh-chip,.ffh[data-open] .ffh-chip{color:#52525b}
.ffh[data-variant="light"] .ffh-chip:hover,.ffh[data-open] .ffh-chip:hover{background:#f4f4f5;color:#18181b}
.ffh[data-variant="light"] .ffh-logo b,.ffh[data-open] .ffh-logo b{color:#18181b}
.ffh[data-variant="light"] .ffh-logo b i,.ffh[data-open] .ffh-logo b i{color:#71717a}
.ffh[data-variant="light"] .ffh-pill,.ffh[data-open] .ffh-pill{border-color:#C9D3C6;background:rgba(255,255,255,.96);color:#2F6B47;box-shadow:0 2px 8px rgba(0,0,0,.14)}
.ffh[data-variant="light"] .ffh-pill:hover,.ffh[data-open] .ffh-pill:hover{border-color:var(--ffh-grad-a);background:#fff;color:#1E3A2B}
.ffh[data-variant="light"] .ffh-pill[aria-current],.ffh[data-open] .ffh-pill[aria-current]{border-color:var(--ffh-grad-a);background:var(--ffh-grad-a);color:#fff}
.ffh[data-variant="light"] .ffh-pill-more,.ffh[data-open] .ffh-pill-more{color:var(--ffh-light-more)}

@media (min-width:768px){.ffh-cta{display:inline-block}}
@media (min-width:640px){.ffh-menu-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){
  .ffh-burger{display:none}.ffh-chip{display:inline-flex}.ffh-pills{display:grid}
  .ffh-menu-grid{grid-template-columns:repeat(4,1fr)}
  .ffh-menu-foot{flex-direction:row;align-items:center;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){.ffh-pills,.ffh-pill,.ffh-pill-more svg,.ffh-bar{transition:none}.ffh[data-open] .ffh-menu{animation:none}}