/* ERZEUGT — nicht von Hand aendern.
   Quelle: trainexus_webseite_v2/assets/site.css
   Erzeuger: trainexus_webseite_v2/tools/gen_extern_chrome.py

   Enthaelt nur die Regeln, die Kopf und Fuss betreffen. Die Farbwerte
   stehen bewusst NICHT auf :root, sondern auf .topbar/.mobile-nav/.footer:
   sonst uebernaehmen sie das ganze Dokument und faerbten die Anleitungen
   indigo statt in ihrer eigenen Gattungsfarbe. */

/* Was site.css global setzt, hier auf den Kopf/Fuss begrenzt. */
.topbar, .mobile-nav, .footer {
  box-sizing: border-box; line-height: 1.6;
  font-family: var(--font); color: var(--text);
  -webkit-font-smoothing: antialiased;
}
.topbar *, .mobile-nav *, .footer * { box-sizing: border-box; }
.topbar a, .mobile-nav a, .footer a { text-decoration: none; color: inherit; }
.topbar button, .mobile-nav button, .footer button { font-family: inherit; }
.topbar p, .topbar h1, .topbar h2, .topbar h3, .topbar h4, .topbar ul, .topbar li, .mobile-nav p, .mobile-nav h1, .mobile-nav h2, .mobile-nav h3, .mobile-nav h4, .mobile-nav ul, .mobile-nav li, .footer p, .footer h1, .footer h2, .footer h3, .footer h4, .footer ul, .footer li { margin: 0; padding: 0; }

.topbar, .mobile-nav, .footer {
  --accent:        #6366f1;
  --accent-strong: #8b5cf6;
  --accent-bright: #a5b4fc;
  --va:            #3b82f6;
  --positive:      #22c55e;
  --negative:      #ec4899;
  --btn-gradient:  linear-gradient(135deg, #6366f1, #8b5cf6);
  --bg:        #f0f4f1;
  --text:      #1a1a2e;
  --text-dim:  #5c5c72;
  --text-faint:#8888a0;
  --card:      #ffffff;
  --card-glass: color-mix(in srgb, var(--card) 82%, transparent);
  --border:    rgba(0,0,0,0.07);
  --border-soft: rgba(120,120,150,0.25);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.06);
  --shadow-product: 0 6px 18px rgba(0,0,0,0.08);
  --topbar-bg: color-mix(in srgb, var(--bg) 72%, transparent);
  --font: 'Geist', system-ui, -apple-system, sans-serif;
  --maxw: 1400px;
  --ease: cubic-bezier(0.25, 0.8, 0.25, 1);
}
:root[data-theme="dark"] .topbar, :root[data-theme="dark"] .mobile-nav, :root[data-theme="dark"] .footer {
  --bg:        #0f172a;
  --text:      #f1f5f9;
  --text-dim:  #94a3b8;
  --text-faint:#64748b;
  --card:      #1e293b;
  --border:    rgba(255,255,255,0.08);
  --border-soft: rgba(148,163,184,0.28);
  --shadow-card: 0 4px 20px rgba(0,0,0,0.4);
  --shadow-product: 0 6px 22px rgba(0,0,0,0.45);
  --warm:      #fbbf24;
}
.topbar {
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: 18px; padding: 12px 24px;
}
.brand { display: flex; align-items: center; gap: 10px; color: inherit; flex-shrink: 0; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px; background: var(--btn-gradient);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; letter-spacing: -0.02em;
}
.brand-word { font-weight: 800; letter-spacing: -0.02em; font-size: 17px; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 14.5px; }
.nav a, .nav .navbtn {
  color: inherit; opacity: 0.82; padding: 8px 10px; border-radius: 10px;
  background: none; border: none; cursor: pointer; font-size: 14.5px; font-weight: 500;
  transition: opacity 0.2s, color 0.2s, background 0.2s;
  display: inline-flex; align-items: center; gap: 5px;
}
.nav a:hover, .nav .navbtn:hover { opacity: 1; color: var(--accent); }
.has-menu { position: relative; }
.menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 264px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.18); padding: 8px; z-index: 70;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.has-menu:hover .menu, .has-menu:focus-within .menu, .menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.menu-item { display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px; border-radius: 10px; transition: background 0.2s; }
.menu-item:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.menu-ico {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center;
  font-weight: 800; font-size: 14px; color: #fff;
}
.menu-ico.indigo { background: var(--btn-gradient); }
.menu-ico.violet { background: linear-gradient(135deg,#8b5cf6,#a855f7); }
.menu-ico.blue { background: linear-gradient(135deg,#3b82f6,#2563eb); }
.menu-ico.green { background: linear-gradient(135deg,#10b981,#059669); }
.menu-ico.slate { background: linear-gradient(135deg,#64748b,#475569); }
.menu-title { font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 6px; }
.menu-sub { font-size: 12.5px; color: var(--text-dim); line-height: 1.4; }
.ext { font-size: 11px; opacity: 0.5; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--border-soft);
  background: transparent; color: inherit; cursor: pointer; font-size: 16px; display: grid; place-items: center;
  transition: border-color 0.2s, color 0.2s;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.lang-pill { display: flex; gap: 2px; border: 1px solid var(--border-soft); border-radius: 12px; padding: 3px; font-size: 12.5px; font-weight: 700; }
.lang-pill span, .lang-pill a { padding: 4px 10px; border-radius: 9px; }
.lang-pill .on { background: rgba(99,102,241,0.12); color: var(--accent); }
.lang-pill span.off { opacity: 0.45; cursor: not-allowed; }
.lang-pill a.off { color: var(--text-dim); cursor: pointer; transition: color 0.2s, background 0.2s; }
.lang-pill a.off:hover, .lang-pill a.off:focus-visible { color: var(--accent); background: rgba(99,102,241,0.10); }
.cta-pill { background: var(--btn-gradient); color: #fff; font-weight: 700; font-size: 14px; padding: 10px 16px; border-radius: 14px; white-space: nowrap; transition: transform 0.25s var(--ease), box-shadow 0.25s; }
.cta-pill:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 24px rgba(99,102,241,0.35); }
.burger { display: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border-soft); background: transparent; color: inherit; cursor: pointer; font-size: 20px; }
.flow-num .lbl { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.ch-marker .lbl { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.footer { position: relative; z-index: 1; border-top: 1px solid var(--border); margin-top: 20px; }
.footer-eco { max-width: var(--maxw); margin: 0 auto; padding: 32px 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; border-bottom: 1px solid var(--border); }
.footer-eco .lbl { font-size: 13px; font-weight: 700; color: var(--text-dim); margin-right: 4px; }
.eco-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--card-glass); transition: border-color 0.2s, transform 0.2s; }
.eco-chip:hover { transform: translateY(-1px); }
.eco-chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.dot.indigo { background: var(--accent); }
.dot.violet { background: var(--accent-strong); }
.dot.blue { background: var(--va); }
.dot.green { background: #10b981; }
.dot.slate { background: #64748b; }
.footer-main { max-width: var(--maxw); margin: 0 auto; padding: 44px 28px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.footer-brand .brand { margin-bottom: 12px; }
.footer-brand p { font-size: 13.5px; color: var(--text-dim); max-width: 320px; }
.footer-col h4 { font-size: 13px; font-weight: 800; letter-spacing: 0.01em; margin-bottom: 14px; color: var(--text); }
.footer-col a, .footer-col button { display: block; font-size: 14px; color: var(--text-dim); padding: 5px 0; background: none; border: none; cursor: pointer; font-family: inherit; text-align: left; transition: color 0.2s; }
.footer-col a:hover, .footer-col button:hover { color: var(--accent); }
.footer-bar { border-top: 1px solid var(--border); }
.footer-bar-inner { max-width: var(--maxw); margin: 0 auto; padding: 20px 28px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text-dim); }
@media (max-width: 1080px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .nav, .lang-pill { display: none; }
  .lang-pill:has(a) { display: flex; }
  .burger { display: grid; place-items: center; }
  .topbar-actions { gap: 8px; }
  .mobile-nav { position: fixed; inset: 0; max-width: 100vw; z-index: 90; background: var(--bg); padding: 80px 28px 40px; overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform 0.3s var(--ease), visibility 0s linear 0.3s; }
  .mobile-nav.open { transform: none; visibility: visible; transition: transform 0.3s var(--ease), visibility 0s; }
  .mobile-nav a, .mobile-nav .mob-h { display: block; padding: 12px 0; font-size: 18px; font-weight: 700; border-bottom: 1px solid var(--border); color: inherit; }
  .mobile-nav .mob-h { color: var(--text-dim); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; border: none; padding-bottom: 4px; margin-top: 18px; }
  .mobile-close { position: fixed; top: 18px; right: 24px; z-index: 91; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border-soft); background: transparent; color: inherit; font-size: 20px; cursor: pointer; }
}
@media (max-width: 560px) {
  .topbar .cta-pill { display: none; }
}
.mobile-nav { display: none; }
@media (max-width: 900px) {
  .mobile-nav { display: block; }
}
@media (max-width: 380px) {
  .topbar-actions { gap: 6px; }
  .icon-btn, .burger { width: 34px; height: 34px; }
  .lang-pill { font-size: 11px; }
  .lang-pill span, .lang-pill a { padding: 4px 6px; }
  .section, .tint, .phero, .szn-grid,
  .footer, .footer-main, .footer-bar-inner, .footer-eco {
    padding-left: 14px; padding-right: 14px;
  }
}