/* ════════════════════════════════════════════════════════════
   BOWHUMAN.EU — Corporate Homepage Styles
   Kanonische Quelle: Websites/www.bowhuman.eu/css/www.css
   Erfordert: bowhuman-tokens.css, bowhuman-components.css
════════════════════════════════════════════════════════════ */

/* ── Fonts ── */
/* ════════════════════════════════════════════════════════════
   SITE-SPEZIFISCHE TOKENS
   (Überschreibt/ergänzt bowhuman-tokens.css für www)
════════════════════════════════════════════════════════════ */
:root {
  --green-fg:     #4a7a00;        /* WCAG AA auf hellem BG: ~5.1:1 */
  --nottingham-orange-dark:  #b85e00;        /* WCAG AA auf hellem BG: ~4.6:1 */
  /* 26.08.2026 (Peter): analoges Problem wie beim sherwood-Gruen - rohes
     --magenta (#E91E8C) hat nur ~3.8:1 auf hellem BG, faellt WCAG AA fuer
     die kleinen Fettschrift-Labels durch. --marian-magenta-dark ergaenzt dieselbe
     Rolle wie --green-fg/--nottingham-orange-dark: hell = dunklere, AA-sichere
     Variante (~6.4:1), dunkel = das volle, satte Magenta. */
  --marian-magenta-dark: #AD1457;        /* WCAG AA auf hellem BG: ~6.4:1 */
  /* Quelltext-Vorschau im Abschnitt "Offene Standards". Liegt immer auf
     dunklem Grund, darum ohne Hell-Fassung. */
  --code-schluessel: #7dd3fc;     /* JSON-Schlüssel — hellblau */
  --code-text:       #86efac;     /* Zeichenketten — grün */
  --code-zahl:       #fca5a5;     /* Zahlen — rot/rosa */
  --amber:        #FFC400;        /* littlejohn — 5. Akzent, ergänzt cyan/magenta/green/orange (nicht in bowhuman-tokens.css, nur hier lokal) */
  --littlejohn-amber-dark:   #8a6300;        /* WCAG AA auf hellem BG */

  /* Neumorphismus-Aliase — zeigen auf canonical tokens */
  --nm-a-bg:  var(--nm-bg);
  --nm-a-out: var(--nm-shadow-out);
  --nm-a-sm:  var(--nm-shadow-sm);
}

html.dark {
  --green-fg:    #B4FF2E;         /* Neon-Lime hat Kontrast auf Dark */
  --nottingham-orange-dark: #FF9100;         /* voller Orange auf dunklem BG */
  --marian-magenta-dark: #E91E8C;        /* volles Magenta auf dunklem BG */
  --littlejohn-amber-dark:  #FFC400;         /* voller Amber auf dunklem BG */
  --nm-a-bg:  #111820;
  --nm-a-out: 6px 6px 14px rgba(0,0,0,.50), -6px -6px 14px rgba(255,255,255,.04);
  --nm-a-sm:  3px 3px 8px rgba(0,0,0,.45), -3px -3px 8px rgba(255,255,255,.03);
}

/* ── Basis ── */
html,body{min-height:100vh;-webkit-font-smoothing:antialiased}
html{scroll-padding-top:60px}
body{font-size:16px;background:var(--bg);color:var(--text-primary);line-height:1.6;padding-top:60px}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--accent-t20)}

/* Smooth theme transition */
*,*::before,*::after{
  transition-property:background-color,border-color,box-shadow,color;
  transition-duration:.25s;transition-timing-function:ease
}
.hero,.product-card,.feature-card,.eco-chip{transition:transform .2s,box-shadow .25s}

/* ════════════════════════════════════════════════════════════
   NAVIGATION

   Hier standen bis 27.08.2026 rund 55 Zeilen eigene Nav-CSS unter dem Namen
   .site-nav — Regel fuer Regel dieselben Werte wie .nav in
   bowhuman-components.css: position:fixed, 60px hoch, rgba(13,17,23,.93),
   backdrop-filter, dieselbe untere Kante. Dazu .nav-logo, .nav-logo-icon,
   .nav-brand-name, .nav-theme-btn und ein eigener 520px-Umbruch, die alle ein
   Gegenstueck in der geteilten Datei hatten.

   Seit die Seite bowhuman-site-nav.js benutzt, ist das Markup dasselbe wie
   auf den anderen vier Sites, und die geteilte CSS greift. Was hier stand,
   war nur noch eine zweite Fassung, die auseinanderlaufen konnte.

   Die feste Leiste braucht weiter body{padding-top:60px} und
   html{scroll-padding-top:60px} — beides steht oben in dieser Datei.
════════════════════════════════════════════════════════════ */

/* Accent-Overrides für den cyan-Accent auf www */
:root {
  /* Dauerhaft dunkle Flaechen. Standen bis 27.08.2026 als blanke Hex-Werte in
     den Regeln. Die Werte sind unveraendert, sie bekommen nur Namen — damit
     man sie findet und nicht zum sechsten Mal neu mischt. Dasselbe Muster wie
     --nott-* auf nottingham und --sherwood-* auf sherwood. */
  --mock-rahmen:      #0a0e14;   /* Geraeterahmen (Telefon, Tablet) */
  --mock-schirm:      #141c28;   /* Bildschirmflaeche darin */
  --mock-titelleiste: #1e2a3a;   /* Titelleiste des Fenster-Nachbaus */
  --mock-codeleiste:  #1a2535;   /* Kopfleiste des Code-Nachbaus */
  --grad-hero: linear-gradient(160deg,var(--navy) 0%,#112233 55%,#0a1e2e 100%);
  --grad-cta:  linear-gradient(135deg,#0a1e2e 0%,#112233 50%,var(--navy) 100%);
  --accent:     var(--cyan);
  --accent-dk:  var(--cyan-dk);
  --accent-on:  var(--navy);
  /* Akzent fuer die dauerhaft dunklen Flaechen .nav und .footer.
     Siehe shared/bowhuman-components.css bei .nav — dort steht warum. */
  --accent-dark-bg: var(--cyan);
  --dropdown-bg: #0e1a1e;
}

/* ════════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════════ */
.hero {
  background:var(--grad-hero);
  min-height:calc(100vh - 56px);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(48px,8vh,96px) clamp(20px,6vw,80px);
  position:relative;overflow:hidden;
}
.hero-grid {
  max-width:1400px;width:100%;
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;gap:48px;
  position:relative;z-index:1;
}
.hero::before {
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(var(--accent-t05) 1px,transparent 1px),
    linear-gradient(90deg,var(--accent-t05) 1px,transparent 1px);
  background-size:48px 48px;pointer-events:none;
}
.hero::after {
  content:'';position:absolute;
  width:700px;height:700px;
  background:radial-gradient(circle,var(--accent-t05) 0%,transparent 70%);
  top:-150px;right:-150px;pointer-events:none;
}
.hero-content{position:relative;z-index:1}
.hero-badge {
  display:inline-flex;align-items:center;gap:6px;
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);border:1px solid var(--accent-t30);
  background:var(--accent-t10);padding:4px 12px;
  border-radius:var(--r-full);margin-bottom:20px;
}
.hero-badge i{font-size:11px}
.hero-title {
  font-size:clamp(42px,6vw,76px);
  font-weight:800;line-height:1.04;
  color:#ffffff;margin-bottom:10px;
  letter-spacing:-.02em;
}
.hero-title .accent{color:var(--cyan)}
.hero-subtitle {
  font-size:clamp(16px,2vw,22px);
  font-weight:300;color:rgba(255,255,255,.55);
  margin-bottom:16px;letter-spacing:.01em;
}
.hero-tagline {
  font-size:clamp(14px,1.4vw,16px);
  color:rgba(255,255,255,.65);
  margin-bottom:40px;max-width:480px;line-height:1.75;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:48px}

.btn-primary {
  display:inline-flex;align-items:center;gap:8px;
  background:var(--cyan);color:var(--navy);
  padding:13px 28px;border-radius:var(--r-xl);
  font-weight:800;font-size:14px;border:none;cursor:pointer;
  font-family:var(--font-base);letter-spacing:.02em;
  box-shadow:0 4px 20px var(--accent-t30);
  text-decoration:none;
}
.btn-primary:hover{background:var(--cyan-dk);transform:translateY(-2px);box-shadow:0 8px 28px var(--accent-t45)}
.btn-secondary {
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.18);color:rgba(255,255,255,.85);
  padding:13px 28px;border-radius:var(--r-xl);
  font-weight:700;font-size:14px;cursor:pointer;
  font-family:var(--font-base);letter-spacing:.02em;
  text-decoration:none;
}
.btn-secondary:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);transform:translateY(-2px)}

.hero-stats{display:flex;gap:32px;flex-wrap:wrap}
.hero-stat{display:flex;flex-direction:column;gap:2px}
.hero-stat-val{font-family:var(--font-mono);font-size:28px;font-weight:700;color:var(--cyan);line-height:1}
.hero-stat-lbl{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4)}

/* Hero Visual */
.hero-visual{position:relative;z-index:1;display:flex;align-items:center;justify-content:center}
.eco-diagram{position:relative;width:420px;height:420px;flex-shrink:0}
.eco-center {
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100px;height:100px;border-radius:28px;
  background:linear-gradient(135deg,var(--cyan),var(--cyan-dk));
  display:flex;align-items:center;justify-content:center;
  font-size:36px;font-weight:900;color:#fff;
  box-shadow:0 0 0 12px var(--accent-t10),0 20px 60px var(--accent-t30);
  z-index:3;
}
.eco-orbit {
  position:absolute;top:50%;left:50%;
  width:300px;height:300px;margin:-150px 0 0 -150px;
  border:1px dashed rgba(255,255,255,.08);
  border-radius:50%;animation:eco-spin 40s linear infinite;
  pointer-events:none;
}
@keyframes eco-spin{to{transform:rotate(360deg)}}
.eco-node {
  position:absolute;
  width:80px;height:80px;border-radius:20px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  cursor:pointer;text-decoration:none;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
  transition:transform .25s,box-shadow .25s;
}
.eco-node:hover{transform:scale(1.1);box-shadow:0 16px 48px rgba(0,0,0,.6)}
.eco-node i{font-size:26px;color:#fff}
.eco-node-name{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.eco-node-robin    {top:20px;left:50%;margin-left:-40px;background:linear-gradient(135deg,var(--cyan),var(--cyan-dk))}
.eco-node-marian   {top:50%;right:20px;margin-top:-40px;background:linear-gradient(135deg,var(--magenta),var(--magenta-dk))}
.eco-node-sherwood {bottom:20px;left:50%;margin-left:-40px;background:linear-gradient(135deg,var(--green-dk),var(--green))}
.eco-node-nottingham{top:50%;left:20px;margin-top:-40px;background:linear-gradient(135deg,var(--orange),var(--orange-dk))}
.eco-line {
  position:absolute;top:50%;left:50%;
  height:1px;background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,.03));
  transform-origin:0 50%;pointer-events:none;
}
.eco-line-t{width:115px;transform:translateY(-1px) rotate(-90deg) translateX(-100%)}
.eco-line-r{width:115px;transform:translateY(-1px) rotate(0deg)}
.eco-line-b{width:115px;transform:translateY(-1px) rotate(90deg)}
.eco-line-l{width:115px;transform:translateY(-1px) rotate(180deg)}
.eco-diagram::before {
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:380px;height:380px;border-radius:50%;
  border:1px solid var(--accent-t05);pointer-events:none;
}

@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero-content{display:flex;flex-direction:column;align-items:center}
  .hero-tagline{margin-left:auto;margin-right:auto}
  .hero-visual{margin-top:16px}
  .eco-diagram{width:320px;height:320px}
  .eco-orbit{width:230px;height:230px;margin:-115px 0 0 -115px}
  .eco-node{width:64px;height:64px;border-radius:16px}
  .eco-node i{font-size:20px}
  .eco-node-name{display:none}
  .eco-node-robin{top:10px;margin-left:-32px}
  .eco-node-marian{right:10px;margin-top:-32px}
  .eco-node-sherwood{bottom:10px;margin-left:-32px}
  .eco-node-nottingham{left:10px;margin-top:-32px}
  .eco-center{width:80px;height:80px;border-radius:22px;font-size:28px}
  .eco-line{display:none}
}
@media(max-width:480px){
  .hero{padding:clamp(32px,6vh,64px) clamp(16px,4vw,24px)}
  .hero-grid{gap:24px}
  .hero-actions{justify-content:center}
  .hero-stats{justify-content:center;gap:20px}
}

/* ════════════════════════════════════════════════════════════
   SECTIONS
════════════════════════════════════════════════════════════ */
.section{padding:clamp(64px,8vw,96px) clamp(20px,6vw,80px)}
.section-inner{max-width:1200px;margin:0 auto}
.section-header{text-align:center;margin-bottom:clamp(40px,5vw,64px)}
.section-tag {
  display:inline-flex;align-items:center;gap:6px;
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:12px;
}
.section-title {
  font-size:clamp(26px,3.5vw,42px);font-weight:800;
  color:var(--text-primary);line-height:1.15;letter-spacing:-.02em;
  margin-bottom:14px;
}
.section-lead {
  font-size:clamp(14px,1.4vw,17px);color:var(--text-secondary);
  max-width:560px;margin:0 auto;line-height:1.75;
}

/* Scroll Animation */
.anim-fade{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s ease}
.anim-fade.visible{opacity:1;transform:translateY(0)}

/* Divider */
.divider{height:1px;background:var(--border)}

/* ════════════════════════════════════════════════════════════
   PRODUCT GRID
════════════════════════════════════════════════════════════ */
.products-bg{background:var(--nm-a-bg)}
.products-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
}
@media(max-width:600px){.products-grid{grid-template-columns:1fr}}

.product-card {
  background:var(--nm-a-bg);
  border-radius:20px;padding:28px 24px;
  box-shadow:var(--nm-a-out);
  transition:transform .25s,box-shadow .25s;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:14px;
  text-decoration:none;
}
.product-card:hover{transform:translateY(-5px);box-shadow:var(--nm-shadow-hover)}
.product-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:20px 20px 0 0}
.product-card-cyan::before{background:var(--cyan)}
.product-card-magenta::before{background:var(--magenta)}
.product-card-green::before{background:var(--green)}
.product-card-orange::before{background:var(--orange)}
.product-card-amber::before{background:var(--amber)}

.product-icon {
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;box-shadow:var(--nm-a-sm);background:var(--nm-a-bg);
}
.product-icon-cyan{color:var(--cyan)}
.product-icon-magenta{color:var(--magenta)}
.product-icon-green{color:var(--green-fg)}
.product-icon-orange{color:var(--nottingham-orange-dark)}
.product-icon-amber{color:var(--littlejohn-amber-dark)}

.product-name{font-size:20px;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.product-badge{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border-radius:var(--r-full)}
/* 26.08.2026 (Peter): .badge-beta/-live/-soon waren STATUS-basiert eingefaerbt
   (jeder "Demnaechst"-Badge wurde orange, jeder "Live"-Badge magenta) -
   sherwoods "Demnaechst"-Badge zeigte dadurch nottinghams Orange statt
   sherwoods eigenem Gruen. Badges brauchen dieselbe produkt-/farbbasierte
   Klasse wie ihre Nachbarn (.product-card-*, .product-icon-*,
   .product-link-*, .pc-*) - .badge-beta/-live/-soon bleiben nur noch als
   reine Text- und Status-Marker im Markup (data-i18n-Bezug), tragen aber
   keine Farbe mehr.
   28.08.2026: Die Aufzaehlung stand hier mit Schraegstrichen zwischen den
   Klassennamen. Ein Sternchen unmittelbar vor einem Schraegstrich beendet
   den Kommentar, egal wie er gemeint war. Ab dort las der Parser Prosa als
   CSS und verwarf die erste echte Regel dahinter: .badge-cyan war zwei Tage
   lang wirkungslos. Aufzaehlungen deshalb mit Komma trennen.
   Farbe kommt jetzt aus einer zusaetzlichen .badge-{farbe}-Klasse. */
.badge-cyan{background:var(--accent-t10);color:var(--cyan-fg);border:1px solid var(--accent-t20)}
.badge-magenta{background:color-mix(in srgb, var(--magenta) 10%, transparent);color:var(--marian-magenta-dark);border:1px solid color-mix(in srgb, var(--magenta) 20%, transparent)}
.badge-green{background:color-mix(in srgb, var(--green) 10%, transparent);color:var(--green-fg);border:1px solid color-mix(in srgb, var(--green) 20%, transparent)}
.badge-orange{background:color-mix(in srgb, var(--orange) 10%, transparent);color:var(--nottingham-orange-dark);border:1px solid color-mix(in srgb, var(--orange) 20%, transparent)}
.badge-amber{background:color-mix(in srgb, var(--amber) 10%, transparent);color:var(--littlejohn-amber-dark);border:1px solid color-mix(in srgb, var(--amber) 25%, transparent)}

.product-desc{font-size:13px;color:var(--text-secondary);line-height:1.65;flex:1}

.product-animal{width:100%;height:90px;display:flex;align-items:center;justify-content:center;opacity:.22;pointer-events:none}
.product-animal img{height:100%;width:auto;object-fit:contain}
html.dark .product-animal{opacity:.18}

.product-link{font-size:12px;font-weight:700;letter-spacing:.06em;display:flex;align-items:center;gap:5px;margin-top:auto}
.product-link i{font-size:11px}
.product-link-cyan{color:var(--cyan)}
.product-link-magenta{color:var(--magenta)}
.product-link-green{color:var(--green-fg)}
.product-link-orange{color:var(--nottingham-orange-dark)}
.product-link-amber{color:var(--littlejohn-amber-dark)}

/* ════════════════════════════════════════════════════════════
   ABOUT
════════════════════════════════════════════════════════════ */
.about-bg{background:var(--bg)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.about-text-block{display:flex;flex-direction:column;gap:18px}
.about-text-block p{font-size:clamp(14px,1.4vw,16px);color:var(--text-secondary);line-height:1.8}
.about-text-block strong{color:var(--text-primary);font-weight:700}

.about-features{display:flex;flex-direction:column;gap:20px}
.about-feature{
  display:flex;gap:16px;align-items:flex-start;
  padding:18px 20px;border-radius:var(--r-xl);
  background:var(--nm-a-bg);box-shadow:var(--nm-a-out);
}
.about-feat-icon{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;box-shadow:var(--nm-a-sm);background:var(--nm-a-bg);color:var(--cyan);
}
.about-feat-body h4{font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:4px}
.about-feat-body p{font-size:13px;color:var(--text-secondary);line-height:1.6}

@media(max-width:860px){.about-grid{grid-template-columns:1fr;gap:40px}}

/* ════════════════════════════════════════════════════════════
   PLATFORM STRIP
════════════════════════════════════════════════════════════ */
.platform-bg{background:var(--nm-a-bg)}
.platform-strip{display:flex;align-items:stretch;gap:1px;border-radius:20px;overflow:hidden;box-shadow:var(--nm-a-out)}
.platform-chip{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:32px 16px;
  background:var(--nm-a-bg);cursor:pointer;text-decoration:none;
  transition:background .2s;
  border-right:1px solid rgba(255,255,255,.06);
}
.platform-chip:last-child{border-right:none}
.platform-chip:hover{background:rgba(255,255,255,.04)}
html.dark .platform-chip:hover{background:rgba(255,255,255,.03)}
.platform-chip-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:var(--nm-a-sm);background:var(--nm-a-bg)}
.pc-cyan{color:var(--cyan)}
.pc-magenta{color:var(--magenta)}
.pc-green{color:var(--green-fg)}
.pc-orange{color:var(--nottingham-orange-dark)}
.pc-amber{color:var(--littlejohn-amber-dark)}
.platform-chip-name{font-size:15px;font-weight:800;letter-spacing:.02em;color:var(--text-primary)}
.platform-chip-role{font-size:11px;color:var(--text-muted);letter-spacing:.04em}
.platform-chip-arrow{font-size:11px;margin-top:4px;opacity:.7;transition:opacity .15s}
.platform-chip:hover .platform-chip-arrow{opacity:1}
.pc-arrow-cyan{color:var(--cyan)}
.pc-arrow-magenta{color:var(--magenta)}
.pc-arrow-green{color:var(--green-fg)}
.pc-arrow-orange{color:var(--nottingham-orange-dark)}
.pc-arrow-amber{color:var(--littlejohn-amber-dark)}

@media(max-width:720px){
  .platform-strip{flex-direction:column}
  .platform-chip{flex-direction:row;justify-content:flex-start;gap:14px;padding:18px 20px;border-right:none;border-bottom:1px solid rgba(255,255,255,.06)}
  .platform-chip:last-child{border-bottom:none}
  .platform-chip-icon{width:44px;height:44px;font-size:18px;flex-shrink:0}
  .platform-chip-role{display:none}
  .platform-chip-arrow{margin-top:0;margin-left:auto}
}

/* ════════════════════════════════════════════════════════════
   CTA BANNER
════════════════════════════════════════════════════════════ */
.cta-section {
  background:var(--grad-cta);
  padding:clamp(64px,8vw,96px) clamp(20px,6vw,80px);
  text-align:center;position:relative;overflow:hidden;
}
.cta-section::before {
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(var(--accent-t05) 1px,transparent 1px),
    linear-gradient(90deg,var(--accent-t05) 1px,transparent 1px);
  background-size:48px 48px;
}
.cta-section::after {
  content:'';position:absolute;
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,var(--accent-t05) 0%,transparent 70%);
  bottom:-150px;left:50%;margin-left:-250px;pointer-events:none;
}
.cta-section .section-inner{position:relative;z-index:1}
.cta-title{font-size:clamp(28px,4vw,52px);font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.1;margin-bottom:14px}
.cta-title .accent{color:var(--cyan)}
.cta-sub{font-size:clamp(14px,1.5vw,17px);color:rgba(255,255,255,.55);margin-bottom:40px}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.btn-store{
  display:flex;align-items:center;gap:10px;
  padding:12px 20px;border-radius:var(--r-xl);
  font-family:var(--font-base);cursor:pointer;
  border:1.5px solid transparent;text-decoration:none;
  opacity:.55;position:relative;
}
.btn-store::after{
  content:attr(data-soon-label);
  position:absolute;top:-8px;right:-4px;
  font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:color-mix(in srgb, var(--orange) 90%, transparent);color:#fff;
  padding:2px 6px;border-radius:var(--r-full);
}
.btn-store-primary{background:var(--cyan);color:var(--navy);box-shadow:0 4px 20px var(--accent-t30)}
.btn-store-secondary{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.85)}
.btn-store-icon{font-size:22px;flex-shrink:0}
.btn-store-text{display:flex;flex-direction:column;line-height:1.2}
.btn-store-label{font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.btn-store-name{font-size:14px;font-weight:800}

/* ════════════════════════════════════════════════════════════
   FOOTER — www-spezifisch (.site-footer statt .footer)
   WCAG AA: rgba(.55) auf --navy (~6.8:1) für footer-copy
════════════════════════════════════════════════════════════ */
/* 02.09.2026: Dieselbe Falle wie bei --accent, siehe shared/bowhuman-components.css
   bei .nav ("in BEIDEN Themes dunkle Flaechen"). Die vier Produktfarben in der
   Spalte "bowhuman" kippen nur an html.dark, der Footer ist aber immer dunkel.
   Im Hellmodus landeten deshalb die auf HELLEM Grund AA-tauglichen Dunkelwerte
   auf --navy: cyan 3.35:1, magenta 2.72:1, green 3.67:1, orange 4.18:1.
   Innerhalb des Footers gelten die Dark-Werte: 8.24 / 4.53 / 15.58 / 8.38.
   Die Links tragen die Farbe als style-Attribut, kommen also nicht ueber
   --accent, das die Regel oben schon abfaengt. */
.site-footer{
  --cyan-fg:                #00BCD4;
  --marian-magenta-dark:    #E91E8C;
  --green-fg:               #B4FF2E;
  --nottingham-orange-dark: #FF9100;
}
.site-footer{background:var(--navy);border-top:1px solid rgba(255,255,255,.07);padding:48px 24px 32px}
.footer-inner{max-width:1200px;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(--cyan)}
.footer-brand p{font-size:13px;color:var(--text-muted-dark-bg);line-height:1.6;max-width:230px}
.footer-col h4{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted-dark-bg);margin-bottom:14px}
.footer-col a{display:block;font-size:14px;color:var(--text-muted-dark-bg);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:var(--text-muted-dark-bg)}  /* WCAG AA: ~6.8:1 auf --navy */
.footer-products{display:flex;gap:16px}
.footer-products a{font-size:12px;color:var(--text-muted-dark-bg);text-decoration:none;transition:color .2s}  /* WCAG AA */
.footer-products a:hover{color:rgba(255,255,255,.85)}
@media(max-width:960px){.footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.footer-top{grid-template-columns:1fr}}

/* ── aus dem <style>-Block der index.html ─────────────────────────
   Zusammengefuehrt am 26.08.2026. Der Block stand direkt nach dem
   Link auf diese Datei; angehaengt bleibt er das Letzte in der
   Kaskade. Bis auf .divider ueberschnitt er sich mit nichts hier.
   ──────────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   NEW SECTIONS — www v2.0
═══════════════════════════════════════════════════════════ */

/* ── MANIFEST ── */
.manifest-section{
  background:var(--navy);
  padding:clamp(80px,10vw,140px) 0;
}
.manifest-inner{
  max-width:860px;margin:0 auto;padding:0 clamp(20px,4vw,48px);
}
.manifest-label{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:24px;display:block;
}
.manifest-headline{
  font-size:clamp(36px,5vw,64px);font-weight:800;color:#fff;
  line-height:1.05;margin-bottom:40px;letter-spacing:-.02em;
}
.manifest-body{
  font-size:clamp(16px,1.5vw,19px);line-height:1.8;color:rgba(255,255,255,.72);
}
.manifest-body p{margin-bottom:20px}
.manifest-body p:last-child{margin-bottom:0}
.manifest-body strong{color:#fff;font-weight:600}
.manifest-principles{
  margin-top:56px;
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
@media(max-width:580px){.manifest-principles{grid-template-columns:1fr}}
.manifest-principle{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:22px 24px;
}
.manifest-principle-title{
  font-size:13px;font-weight:700;color:var(--cyan);
  margin-bottom:6px;letter-spacing:.03em;
}
.manifest-principle-text{
  font-size:14px;color:rgba(255,255,255,.6);line-height:1.6;
}

/* ── PRODUCT DETAIL ── */
.pd-outer{background:var(--bg)}
html.dark .pd-outer{background:var(--nm-bg)}
.pd-section{
  padding:clamp(60px,8vw,100px) 0;
  border-top:1px solid var(--border);
}
.pd-section:first-child{border-top:none}
.pd-inner{
  max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,48px);
}
.pd-meta{
  display:flex;align-items:center;gap:12px;margin-bottom:16px;
}
.pd-product-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--pd-color,var(--cyan));flex-shrink:0;
}
.pd-product-name{
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pd-color,var(--cyan));
}
.pd-badge{
  font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 8px;border-radius:99px;
  background:rgba(var(--pd-rgb,0,188,212),.12);
  color:var(--pd-color,var(--cyan));
  border:1px solid rgba(var(--pd-rgb,0,188,212),.25);
}
.pd-headline{
  font-size:clamp(26px,3.5vw,44px);font-weight:800;
  color:var(--text-primary);line-height:1.12;
  margin-bottom:20px;max-width:640px;
}
.pd-lead{
  font-size:17px;color:var(--text-secondary);
  line-height:1.7;max-width:560px;margin-bottom:48px;
}
.pd-body{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,72px);align-items:start;
}
@media(max-width:900px){
  .pd-body{grid-template-columns:1fr;gap:40px}
  .pd-body.pd-flip{direction:ltr}
}
.pd-body.pd-flip{direction:rtl}
.pd-body.pd-flip>*{direction:ltr}
.pd-text{
  font-size:16px;line-height:1.8;color:var(--text-secondary);
}
.pd-text p+p{margin-top:16px}
.pd-text strong{color:var(--text-primary);font-weight:600}
.pd-callout{
  margin-top:32px;
  background:var(--nm-bg);
  border-left:3px solid var(--pd-color,var(--cyan));
  border-radius:0 12px 12px 0;
  padding:18px 22px;
}
html.dark .pd-callout{background:rgba(255,255,255,.05)}
.pd-callout-label{
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pd-color,var(--cyan));margin-bottom:6px;
}
.pd-callout-text{
  font-size:13px;line-height:1.65;color:var(--text-secondary);
}
.pd-visual{
  display:flex;gap:16px;align-items:flex-start;justify-content:center;
}

/* phone frame */
.phone-frame{
  background:var(--mock-rahmen);border-radius:34px;padding:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.08);
  flex:1;max-width:210px;
}
.phone-frame img{border-radius:26px;width:100%;display:block}
.phone-frame-back{
  margin-top:40px;max-width:185px;opacity:.85;
}

/* browser/desktop frame */
.browser-frame{
  background:var(--mock-schirm);border-radius:12px;overflow:hidden;width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.07);
}
.browser-chrome{
  background:var(--mock-titelleiste);padding:10px 14px;
  display:flex;align-items:center;gap:5px;
}
.browser-dot{width:10px;height:10px;border-radius:50%}
.browser-dot:nth-child(1){background:var(--win-rot)}
.browser-dot:nth-child(2){background:var(--win-gelb)}
.browser-dot:nth-child(3){background:var(--win-gruen)}
.browser-url{
  flex:1;background:rgba(255,255,255,.07);border-radius:5px;
  height:22px;margin-left:10px;
  display:flex;align-items:center;padding:0 10px;
  font-size:10px;color:rgba(255,255,255,.35);
  font-family:var(--font-mono);overflow:hidden;white-space:nowrap;
}
.browser-frame img{width:100%;display:block}

/* nottingham: full-width screenshot */
.pd-full-visual{margin-top:40px}
.pd-full-visual .browser-frame{border-radius:12px}

/* tech shot (small phone screenshot as callout image) */
.tech-shot{
  width:130px;flex-shrink:0;
  background:var(--mock-rahmen);border-radius:26px;padding:8px;
  box-shadow:0 12px 32px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.07);
}
.tech-shot img{border-radius:20px;width:100%;display:block}

/* connection tag */
.pd-connection{
  margin-top:36px;padding-top:20px;
  border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-size:12px;color:var(--text-muted);
}
.pd-connection-arrow{
  color:var(--pd-color,var(--cyan));font-size:14px;margin-right:2px;
}
.pd-link{
  display:inline-flex;align-items:center;gap:4px;
  color:var(--pd-color,var(--cyan));font-weight:600;
  text-decoration:none;font-size:13px;
}
.pd-link:hover{text-decoration:underline;text-underline-offset:3px}

/* ── MODELL ── */
.modell-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  margin-top:48px;
}
@media(max-width:768px){.modell-grid{grid-template-columns:1fr}}
.modell-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:16px;padding:32px 28px;
}
html.dark .modell-card{background:rgba(255,255,255,.04)}
.modell-icon{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;margin-bottom:20px;
}
.mi-cyan{background:var(--accent-t10);color:var(--cyan)}
.mi-green{background:color-mix(in srgb, var(--green) 10%, transparent);color:var(--green-dk)}
html.dark .mi-green{color:var(--green)}
.mi-magenta{background:color-mix(in srgb, var(--magenta) 10%, transparent);color:var(--magenta)}
.modell-card-title{font-size:18px;font-weight:700;color:var(--text-primary);margin-bottom:12px}
.modell-card-text{font-size:15px;line-height:1.7;color:var(--text-secondary)}
.modell-aside{
  margin-top:32px;background:var(--navy);border-radius:16px;
  padding:32px 40px;text-align:center;
}
.modell-aside p{
  font-size:clamp(16px,2vw,21px);font-weight:600;
  color:rgba(255,255,255,.88);line-height:1.55;max-width:600px;margin:0 auto;
}
.modell-aside strong{color:var(--green)}
.modell-optin{
  display:flex;align-items:flex-start;gap:16px;
  margin-top:24px;
  background:var(--nm-bg);border:1px solid var(--border);
  border-radius:12px;padding:20px 24px;
}
html.dark .modell-optin{background:rgba(255,255,255,.04)}
.modell-optin-icon{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:color-mix(in srgb, var(--green) 10%, transparent);color:var(--green-dk);
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
html.dark .modell-optin-icon{color:var(--green)}
.modell-optin-body strong{
  display:block;font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:4px;
}
.modell-optin-body p{font-size:14px;color:var(--text-secondary);line-height:1.6}

/* ── WERTE ── */
.werte-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin-top:48px;
}
@media(max-width:768px){.werte-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.werte-grid{grid-template-columns:1fr}}
.wert-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:16px;padding:26px 22px;
}
html.dark .wert-card{background:rgba(255,255,255,.04)}
.wert-icon{
  font-size:26px;margin-bottom:14px;display:block;
  color:var(--wc,var(--cyan));
}
.wert-title{font-size:15px;font-weight:700;color:var(--text-primary);margin-bottom:7px}
.wert-text{font-size:13px;line-height:1.65;color:var(--text-secondary)}
.werte-hint{
  margin-top:20px;text-align:center;font-size:12px;color:var(--text-muted);
}
.werte-hint a{color:inherit;text-underline-offset:3px;text-decoration:underline}

/* ── TEAM ── */
/* Die vier Zeilen einer Karte — Bild, Name, Zitat, Rolle — liegen als Spuren
   im Raster des Elternteils. Jede Karte klinkt sich per subgrid darin ein,
   statt ihre Zeilen selbst zu bemessen. Damit sitzt die Trennlinie ueber der
   Rolle in allen Karten auf derselben Hoehe, egal wie lang das Zitat ist.
   Vorher wanderte sie mit: bei 1000px Breite lagen 23px zwischen der ersten
   und der zweiten Karte (gemessen 26.08.2026).
   Die dritte Spur bekommt 1fr — sie nimmt den Ueberschuss auf und schiebt die
   Rolle nach unten. row-gap muss 0 sein, weil der Abstand des Elternrasters
   sonst INNERHALB jeder Karte zwischen den vier Zeilen auftauchen wuerde. */
.team-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  grid-template-rows:auto auto 1fr auto;
  column-gap:32px;row-gap:0;
  margin-top:56px;
}
.team-card{
  display:grid;
  grid-row:span 4;
  grid-template-rows:subgrid;
  text-align:center;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:24px;
  padding:36px 28px 28px;
}
/* Einspaltig gibt es nichts auszurichten — dort steht jede Karte fuer sich,
   und row-gap wird wieder zum Abstand ZWISCHEN den Karten. */
@media(max-width:768px){
  .team-grid{
    grid-template-columns:1fr;grid-template-rows:none;
    row-gap:32px;max-width:360px;margin-left:auto;margin-right:auto;
  }
  .team-card{display:block;grid-row:auto}
}
html.dark .team-card{background:rgba(255,255,255,.04)}
.team-avatar-wrap{
  width:160px;height:160px;
  margin:0 auto 24px;
  border-radius:50%;
  /* farbiger Ring über box-shadow — folgt dem border-radius */
  box-shadow:
    0 0 0 3px var(--tc,var(--cyan)),
    0 0 0 7px rgba(0,0,0,.08),
    0 10px 28px rgba(0,0,0,.14);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
html.dark .team-avatar-wrap{
  background:var(--nm-bg);
  box-shadow:
    0 0 0 3px var(--tc,var(--cyan)),
    0 0 0 7px rgba(0,0,0,.35),
    0 14px 36px rgba(0,0,0,.45);
}
.team-avatar-wrap img{
  width:86%;display:block;
  object-fit:contain;
}
.team-name{
  font-size:20px;font-weight:800;
  color:var(--tc,var(--cyan));margin-bottom:10px;
}
.team-quote{
  font-size:13.5px;line-height:1.7;
  color:var(--text-secondary);
  font-style:italic;margin-bottom:14px;
}
.team-role{
  font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-muted);
  padding-top:12px;
  border-top:1px solid var(--border);
}

/* ── FEEDBACK ── */
.feedback-section{
  background:var(--navy);
  padding:clamp(80px,10vw,120px) 0;text-align:center;
}
.feedback-inner{
  max-width:640px;margin:0 auto;padding:0 clamp(20px,4vw,48px);
}
.feedback-headline{
  font-size:clamp(28px,3.5vw,44px);font-weight:800;color:#fff;margin-bottom:20px;
}
.feedback-headline .accent{color:var(--cyan)}
.feedback-text{
  font-size:17px;line-height:1.8;color:rgba(255,255,255,.68);margin-bottom:40px;
}
.feedback-cta{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--cyan);color:var(--navy);
  font-size:15px;font-weight:800;padding:14px 28px;
  border-radius:999px;text-decoration:none;
  transition:opacity .2s,transform .2s;letter-spacing:.02em;
}
.feedback-cta:hover{opacity:.88;transform:translateY(-2px)}
.feedback-cta i{font-size:18px}

/* ── OPEN STANDARDS ── */
.standards-body{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,72px);align-items:start;
  margin-top:48px;
}
@media(max-width:860px){.standards-body{grid-template-columns:1fr}}
.standards-items{display:flex;flex-direction:column;gap:24px}
.standards-item{
  display:flex;gap:16px;align-items:flex-start;
}
.standards-item-icon{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  background:var(--accent-t10);
  color:var(--cyan-dk);
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
html.dark .standards-item-icon{color:var(--cyan);background:var(--accent-t10)}
.standards-item-body strong{
  display:block;font-size:15px;font-weight:700;
  color:var(--text-primary);margin-bottom:4px;
}
.standards-item-body p{font-size:14px;line-height:1.65;color:var(--text-secondary)}
.standards-code{
  background:var(--navy);border-radius:16px;overflow:hidden;
  box-shadow:0 12px 36px rgba(0,0,0,.18);
}
.standards-code-bar{
  background:var(--mock-codeleiste);padding:10px 16px;
  display:flex;align-items:center;gap:6px;
}
.standards-code-dot{width:10px;height:10px;border-radius:50%}
.standards-code-dot:nth-child(1){background:var(--win-rot)}
.standards-code-dot:nth-child(2){background:var(--win-gelb)}
.standards-code-dot:nth-child(3){background:var(--win-gruen)}
.standards-code-filename{
  margin-left:8px;font-size:11px;
  color:rgba(255,255,255,.35);
  font-family:var(--font-mono);
}
.standards-code-copy{
  margin-left:auto;display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:7px;flex-shrink:0;
  background:transparent;border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.5);font-size:13px;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.standards-code-copy:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.2)}
.standards-code-copy.copied{color:var(--cyan);border-color:var(--accent-t30)}
.standards-code pre{
  padding:20px 22px;margin:0;
  font-family:var(--font-mono);font-size:12px;line-height:1.75;
  color:rgba(255,255,255,.75);overflow-x:auto;
}
.sc-key{color:var(--code-schluessel)}
.sc-str{color:var(--code-text)}
.sc-num{color:var(--code-zahl)}
.sc-pun{color:rgba(255,255,255,.3)} /* Interpunktion */
.standards-cta{
  margin-top:32px;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
}
.standards-cta-link{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent-t10);
  border:1px solid var(--accent-t20);
  color:var(--cyan-dk);
  font-size:14px;font-weight:700;
  padding:10px 18px;border-radius:999px;
  text-decoration:none;transition:background .18s;
}
html.dark .standards-cta-link{color:var(--cyan)}
.standards-cta-link:hover{background:var(--accent-t20)}
.standards-cta-link i{font-size:16px}
.standards-cta-note{font-size:12px;color:var(--text-muted)}

/* ── divider ── */
.divider{height:1px;background:var(--border);margin:0}