/* ════════════════════════════════════════════════════════════
   BOWHUMAN SHARED COMPONENTS v1.0  ·  2026-06-10
   ────────────────────────────────────────────────────────────
   Geteilte UI-Komponenten: Skip-Link, Nav, Lang-Picker,
   Mobile-Menu, Footer, Reveal-Animation.

   Jede Site definiert in :root{} eigene Accent-Variablen:
     --accent        Primärfarbe  (z.B. var(--cyan))
     --accent-dk     Dunklere Variante für Gradienten
     --accent-on     Textfarbe auf Accent-Hintergrund
     --accent-t07    rgba(r,g,b,.07)  — leichter Tint
     --accent-t12    rgba(r,g,b,.12)
     --accent-t15    rgba(r,g,b,.15)
     --accent-t25    rgba(r,g,b,.25)
     --dropdown-bg   Hintergrund des Lang-Dropdowns

   Kanonische Quelle: Websites/shared/bowhuman-components.css
   deploy-all.sh kopiert diese Datei in alle Site-css/-Verzeichnisse.
════════════════════════════════════════════════════════════ */

/* ── Accent-Defaults (Robin/Cyan — wird pro Site überschrieben) ── */
:root {
  --accent:     var(--cyan);
  --accent-dk:  var(--cyan-dk);
  --accent-on:  var(--navy);
  --accent-t07: rgba(0,188,212,.07);
  --accent-t12: rgba(0,188,212,.12);
  --accent-t15: rgba(0,188,212,.15);
  --accent-t25: rgba(0,188,212,.25);
  --dropdown-bg: #0e1a1e;
}

/* ════ SKIP LINK ════ */
.skip-link {
  position: absolute; top: -100%; left: 0; z-index: 9999;
  padding: 10px 22px;
  background: var(--accent); color: var(--accent-on);
  font-weight: 700; font-size: 14px; text-decoration: none;
  border-radius: 0 0 var(--r-md) 0;
  transition: top .15s; white-space: nowrap;
}
.skip-link:focus { top: 0 }

/* ════ NAV ════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-sticky);
  height: 60px; background: rgba(13,17,23,.93);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; overflow: visible;
}
.nav-inner {
  width: 100%; max-width: var(--content-max); margin: 0 auto;
  padding: 0 24px; display: flex; align-items: center;
}
/* nav-brand: Flex-Wrapper (kein <a> mehr — enthält zwei separate Links) */
.nav-brand { display: flex; align-items: center; gap: 8px; margin-right: 32px; flex-shrink: 0 }

/* BOWHUMAN (Text) → www.bowhuman.eu */
.nav-brand-root { text-decoration: none; flex-shrink: 0 }
.nav-brand-root:hover .nav-wordmark { color: rgba(255,255,255,.8) }

/* [R] robin. → subdomain.bowhuman.eu */
.nav-brand-sub {
  display: flex; align-items: center; gap: 7px;
  text-decoration: none; font-size: 15px; font-weight: 700;
  color: #fff; letter-spacing: -.2px; white-space: nowrap;
}
.nav-brand-sub:hover { opacity: .75 }

/* Produkt-Icon-Badge (robin/sherwood-static: .nav-b  |  marian: .nav-logo als div)
   :not(a) — sherwood-nav.js verwendet .nav-logo als <a>-Wrapper; den NICHT als Badge stylen */
.nav-b, .nav-logo:not(a) {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-dk));
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: var(--accent-on);
}

.nav-wordmark { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.5); letter-spacing: .05em }

/* Trennlinie (robin: .nav-sep  |  sherwood: .nav-logo-sep) */
.nav-sep, .nav-logo-sep {
  width: 1px; height: 16px; background: rgba(255,255,255,.15); flex-shrink: 0;
}

/* Desktop-Nav-Links — standardmäßig versteckt; sherwood überschreibt mit display:flex */
.nav-links { display: none !important }

.nav-end { display: flex; align-items: center; gap: 10px; margin-left: auto }

/* Theme-Toggle */
.nav-theme {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15); background: transparent;
  color: rgba(255,255,255,.5); cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, color .2s;
}
.nav-theme:hover { border-color: var(--accent); color: var(--accent) }

/* CTA-Button */
.nav-cta {
  background: linear-gradient(135deg, var(--accent), var(--accent-dk));
  color: var(--accent-on);
  border: none; border-radius: var(--r-lg); padding: 7px 18px;
  font-size: 13px; font-weight: 700; font-family: var(--font-base); cursor: pointer;
  transition: opacity .2s, transform .2s;
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap; text-decoration: none;
}
.nav-cta:hover { opacity: .9; transform: translateY(-1px) }

/* Burger-Button */
.nav-burger {
  width: 36px; height: 36px; border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,.15); background: transparent;
  color: rgba(255,255,255,.7); cursor: pointer; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, color .2s; margin-left: 8px; flex-shrink: 0;
}
.nav-burger:hover { border-color: var(--accent); color: var(--accent) }

/* < 520 px: CTA, Lang, Theme und Trennzeichen in den Burger verlagern */
@media (max-width: 520px) {
  .nav-sep, .nav-logo-sep, .nav-wordmark, .nav-cta,
  .lang-picker, .nav-theme { display: none }
}

/* ════ LANGUAGE PICKER ════ */
.lang-picker { position: relative; flex-shrink: 0 }
.lang-btn {
  display: flex; align-items: center; gap: 5px; padding: 5px 10px;
  height: 32px; border-radius: var(--r-md); background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.7);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; cursor: pointer;
  font-family: var(--font-base); transition: background .2s, color .2s; white-space: nowrap;
}
.lang-btn:hover { background: rgba(255,255,255,.12); color: var(--accent) }
.lang-btn i { font-size: 13px }

.lang-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--dropdown-bg); border: 1px solid var(--accent-t25);
  border-radius: var(--r-lg); padding: 6px; min-width: 160px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  display: none; flex-direction: column; gap: 2px; z-index: var(--z-modal);
}
.lang-dropdown.open { display: flex }
.lang-flag { font-size: 14px; line-height: 1 }
.lang-option {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-radius: var(--r-md); font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,.65); cursor: pointer; transition: all .15s;
  border: none; background: none; font-family: var(--font-base); text-align: left;
}
.lang-option:hover { background: var(--accent-t12); color: var(--accent) }
.lang-option.active { color: var(--accent); background: var(--accent-t07) }

/* ════ MOBILE MENU ════ */
/* Mobile: full-screen slide-in von rechts */
.nav-mobile-menu {
  position: fixed; inset: 0; z-index: calc(var(--z-sticky) - 1);
  background: var(--dropdown-bg, rgba(13,17,23,.98));
  display: flex; flex-direction: column;
  padding: calc(var(--nav-h) + 24px) 28px 40px;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .2s;
  overflow-y: auto; opacity: 1;
}
.nav-mobile-menu.open { transform: translateX(0) }

/* Desktop ≥ 768px: kompaktes Dropdown-Panel unter dem Burger */
@media (min-width: 768px) {
  .nav-mobile-menu {
    top: calc(var(--nav-h) + 8px);
    right: 12px;
    bottom: auto;
    left: auto;
    width: 292px;
    max-height: calc(100vh - var(--nav-h) - 32px);
    padding: 12px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow:
      0 28px 60px rgba(0,0,0,.55),
      0 6px 20px rgba(0,0,0,.3),
      inset 0 1px 0 rgba(255,255,255,.09);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transform: translateY(-10px) scale(.96);
    transform-origin: top right;
    opacity: 0;
    pointer-events: none;
    transition: transform .22s cubic-bezier(.2,.7,.2,1), opacity .18s;
  }
  .nav-mobile-menu.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
  }
  /* Kompakte Abstände im Desktop-Dropdown */
  .nav-mobile-links { gap: 2px; margin-bottom: 10px }
  .nav-mobile-links li a,
  .nav-mobile-links li button,
  .nav-mobile-links a { font-size: 14px; padding: 9px 12px }
  .nav-mobile-links li a i,
  .nav-mobile-links li button i,
  .nav-mobile-links a i { font-size: 16px }
  .nav-mobile-actions { padding-top: 10px; gap: 7px }
  .nav-mobile-cta { font-size: 14px; padding: 10px 16px }
  .nav-mobile-login { font-size: 13px; padding: 9px }
  .nav-mobile-meta { padding-top: 10px; margin-top: 0 }
  .nav-mobile-theme { padding: 8px 12px; font-size: 12px }
  .nav-mobile-langs { padding-top: 10px; gap: 5px }
  .nav-mobile-lang { padding: 6px 4px; font-size: 10px }
  .nav-mobile-lang-flag { font-size: 13px }
}

.nav-mobile-links {
  list-style: none; display: flex; flex-direction: column;
  gap: 4px; margin-bottom: 32px;
}
.nav-mobile-links li a,
.nav-mobile-links li button,
.nav-mobile-links a {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: var(--r-xl);
  color: rgba(255,255,255,.75); font-size: 17px; font-weight: 600;
  text-decoration: none; border: 1px solid transparent;
  background: none; font-family: var(--font-base); cursor: pointer;
  width: 100%; text-align: left;
  transition: color .15s, background .15s, border-color .15s;
}
.nav-mobile-links li a:hover,
.nav-mobile-links li button:hover,
.nav-mobile-links a:hover {
  color: #fff;
  background: var(--accent-t07); border-color: var(--accent-t15);
}
.nav-mobile-links li a i,
.nav-mobile-links li button i,
.nav-mobile-links a i {
  color: var(--accent); font-size: 20px; flex-shrink: 0;
}

.nav-mobile-actions {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1);
}
.nav-mobile-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px; border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--accent), var(--accent-dk));
  color: var(--accent-on);
  font-size: 15px; font-weight: 700; text-decoration: none; border: none;
  font-family: var(--font-base); cursor: pointer;
}
.nav-mobile-login {
  display: flex; align-items: center; justify-content: center;
  padding: 13px; border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.7); font-size: 15px; font-weight: 600;
  text-decoration: none;
}
.nav-mobile-meta {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 8px; gap: 12px;
}
.nav-mobile-theme {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  border-radius: var(--r-xl); border: 1px solid rgba(255,255,255,.15);
  background: transparent; color: rgba(255,255,255,.7);
  font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: var(--font-base); transition: border-color .2s, color .2s;
}
.nav-mobile-theme:hover { border-color: var(--accent); color: var(--accent) }

.nav-mobile-langs {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 6px;
  padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08);
}
.nav-mobile-lang {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 6px; border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,.1); background: transparent;
  color: rgba(255,255,255,.55); font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: var(--font-base); transition: all .15s;
}
.nav-mobile-lang:hover {
  background: var(--accent-t07); border-color: var(--accent-t15); color: var(--accent);
}
.nav-mobile-lang.active {
  background: var(--accent-t12); border-color: var(--accent-t25); color: var(--accent);
}
.nav-mobile-lang-flag { font-size: 18px; line-height: 1 }

/* ════ FOOTER ════ */
.footer { background: var(--navy); border-top: 1px solid rgba(255,255,255,.07); padding: 48px 24px 32px }
.footer-inner { max-width: var(--content-max); margin: 0 auto }
.footer-top {
  display: grid; grid-template-columns: 1fr auto auto auto;
  gap: 48px; margin-bottom: 40px; align-items: start;
}
.footer-brand-name { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 8px }
.footer-brand-name span { color: var(--accent) }
.footer-brand p { font-size: 13px; color: rgba(255,255,255,.4); line-height: 1.6; max-width: 230px }
.footer-col h4 {
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 14px;
}
.footer-col a {
  display: block; font-size: 14px; color: rgba(255,255,255,.5);
  text-decoration: none; margin-bottom: 8px; transition: color .2s;
}
.footer-col a:hover { color: #fff }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07); padding-top: 20px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.footer-copy { font-size: 12px; color: rgba(255,255,255,.55) }  /* WCAG AA auf --navy */
.footer-products { display: flex; gap: 16px; flex-wrap: wrap }
.footer-products a {
  font-size: 12px; color: rgba(255,255,255,.50);  /* WCAG AA auf --navy */
  text-decoration: none; transition: color .2s;
}
.footer-products a:hover { color: rgba(255,255,255,.65) }

@media (max-width: 960px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 32px } }
@media (max-width: 600px) {
  .footer-top { grid-template-columns: 1fr; gap: 28px }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px }
}

/* ════ REVEAL ANIMATION ════ */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .55s, transform .55s }
  .reveal.visible { opacity: 1; transform: none }
  /* Hover: höhere Spezifität damit translateY nicht durch .reveal.visible{transform:none} blockiert wird */
  .feat-card.reveal.visible  { transition: transform .25s, box-shadow .25s }
  .feat-card.reveal.visible:hover { transform: translateY(-5px) }
  .eco-card.reveal.visible   { transition: transform .25s, box-shadow .25s }
  .eco-card.reveal.visible:hover  { transform: translateY(-5px) }
  .cta-path.reveal.visible   { transition: transform .25s, box-shadow .25s }
  .cta-path.reveal.visible:hover  { transform: translateY(-5px) }
}

/* ════════════════════════════════════════════════════════════
   FEAT-CARD — Einheitliche Inhaltskachel
   Goldstandard: product-card von www.bowhuman.eu
   • nm-a-bg/out/sm  → Neumorphismus hell + dunkel
   • ::before        → 3px Akzentbalken (var(--accent))
   • hover           → translateY(-5px) + stärkerer nm-Schatten
   Multi-Akzent-Overrides (Robin/Marian) in jeweiliger Site-CSS.
════════════════════════════════════════════════════════════ */

/* ── Grid ── */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

/* ── Card ── */
.feat-card {
  background: var(--nm-a-bg);
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--nm-a-out);
  transition: transform .25s, box-shadow .25s;
  position: relative; overflow: hidden;
}
.feat-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px; border-radius: 20px 20px 0 0;
  background: var(--accent);
}
.feat-card:hover { transform: translateY(-5px) }
html:not(.dark) .feat-card:hover {
  box-shadow: 8px 8px 20px rgba(163,177,198,.60), -8px -8px 20px rgba(255,255,255,.95);
}
html.dark .feat-card:hover {
  box-shadow: 8px 8px 20px rgba(0,0,0,.55), -8px -8px 20px rgba(255,255,255,.05);
}

/* ── Icon ── */
.feat-icon, .feat-card-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--nm-a-bg);
  box-shadow: var(--nm-a-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 14px;
  color: var(--accent-dk);
  flex-shrink: 0;
}
html.dark .feat-icon, html.dark .feat-card-icon { color: var(--accent) }

/* ── Text ── */
.feat-card h3, .feat-card-title {
  font-size: 16px; font-weight: 700;
  color: var(--text-primary); margin-bottom: 6px; line-height: 1.25;
}
.feat-card p, .feat-card-desc {
  font-size: 14px; color: var(--text-secondary); line-height: 1.65;
}

/* ── Badge ── */
.feat-badge {
  position: absolute; top: 14px; right: 16px;
  font-size: 9px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-full);
  background: var(--accent-t12);
  color: var(--accent);
  border: 1px solid var(--accent-t25);
}