/*
Theme Name:        Konvex Investment
Theme URI:         https://konvexinvestment.de
Description:       Eigenes Theme der Website von Konvex Investment, eigenständig ohne Elterntheme (bis November 2026 Child-Theme von BuddyBoss Theme).
Author:            Konvex Investment
Version:           2.0.0
Requires at least: 6.6
Requires PHP:      8.1
License:           GNU General Public License v3 or later
License URI:       https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:       konvex-child
*/

/* ===========================================
   WEB FONTS — Inter Tight (self-hosted, OFL)
   =========================================== */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/inter-tight-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/inter-tight-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/inter-tight-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/inter-tight-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/inter-tight-800.woff2") format("woff2");
}
/* ===========================================
   CSS CUSTOM PROPERTIES
   =========================================== */
:root {
  --konvex-bg: var(--gray-50);
  --konvex-dark: var(--gray-950);
  --konvex-gray: var(--gray-550);
  --konvex-gray-light: var(--gray-450);
  --konvex-accent: #38b6ff;
  --konvex-accent-deep: #0080cc;
  --konvex-accent-hover: #269add;
  /* Text und Links in Akzentfarbe auf hellem Grund (WCAG AA, 5,5 : 1 auf Weiß; Issue #11). */
  --konvex-accent-text: #0a6fa8;
  --konvex-gold: #d4a574;
  --konvex-gold-soft: rgba(212, 165, 116, 0.15);
  --konvex-violet: #8b5cf6;
  --konvex-green: #34d399;
  --konvex-border: var(--gray-200);
  --konvex-border-light: #f3f4f6;
  --konvex-white: #ffffff;
  --konvex-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --konvex-font-display: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --konvex-radius: 12px;
  --konvex-container: 1200px;

  /* Neutrale Grau-Skala (konsolidiert, helligkeits-sortiert).
     Werte in rgb()-Notation, damit Hex-Sweeps die Definition nicht treffen. */
  --gray-50:  rgb(249, 250, 252);
  --gray-100: rgb(245, 245, 247);
  --gray-200: rgb(229, 231, 235);
  --gray-300: rgb(209, 213, 219);
  --gray-400: rgb(161, 161, 166);
  --gray-450: rgb(156, 163, 175);
  --gray-500: rgb(134, 134, 139);
  --gray-550: rgb(107, 114, 128);
  --gray-600: rgb(110, 110, 115);
  --gray-700: rgb(82, 82, 91);
  --gray-750: rgb(66, 66, 69);
  --gray-800: rgb(55, 65, 81);
  --gray-900: rgb(29, 29, 31);
  --gray-950: rgb(17, 24, 39);

  /* Button-System: einheitliche Form, Farbe, Schatten */
  --btn-radius: var(--radius-pill);
  /* Weiße Knopfschrift braucht 4,5 : 1 (WCAG AA); dieser Verlauf hält mindestens 5,1 : 1,
     mit brightness(1.06) im Hover noch 4,6 : 1. Der alte Verlauf lag bei 2,3 bis 4,2 : 1. */
  --btn-gradient: linear-gradient(135deg, #0072ba, #005a94);
  --btn-shadow: 0 4px 15px rgba(56, 182, 255, 0.35);
  --btn-shadow-hover: 0 8px 25px rgba(56, 182, 255, 0.5);

  /* Radius-Skala: Zielwerte für neue Sektionen.
     Altbestand wird beim nächsten Anfassen der jeweiligen Sektion migriert. */
  --radius-sm: 8px;
  --radius-md: var(--konvex-radius);
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 9999px;

  /* Elevation-Skala: drei allgemeine Stufen plus ein eigener Flyout-Schatten. */
  --shadow-1: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-3: 0 20px 60px rgba(0, 0, 0, 0.12);
  --shadow-flyout: 0 16px 40px rgba(0, 0, 0, 0.08);

  /* Breakpoint-Konvention für neue Sektionen: 600px / 900px / 1024px / 1200px.
     Keine neuen Zwischenwerte einführen. */

  /* Landing-Page-Basis: gemeinsame Werte, auf die --fx-* zeigen.
     Page-Scopes definieren nur noch echte Abweichungen selbst. */
  --lp-bg-primary: #0a0a0a;
  --lp-bg-secondary: #111;
  --lp-bg-tertiary: #1a1a1a;
  --lp-surface-1: rgba(255, 255, 255, 0.03);
  --lp-surface-2: rgba(255, 255, 255, 0.05);
  --lp-surface-3: rgba(255, 255, 255, 0.08);
  --lp-border-1: rgba(255, 255, 255, 0.06);
  --lp-border-2: rgba(255, 255, 255, 0.10);
  --lp-border-3: rgba(255, 255, 255, 0.15);
  --lp-border-hover: rgba(255, 255, 255, 0.20);
  --lp-text-primary: var(--gray-100);
  --lp-text-secondary: var(--gray-500);
  --lp-text-tertiary: var(--gray-600);
  --lp-accent: var(--konvex-accent);
  --lp-accent-glow: rgba(56, 182, 255, 0.15);
  --lp-radius-sm: 10px;
  --lp-radius-md: var(--radius-lg);
  --lp-radius-lg: var(--radius-xl);
  --lp-radius-xl: var(--radius-2xl);
  --lp-section-py: clamp(80px, 10vw, 140px);
  --lp-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===========================================
   CUSTOM PAGE LAYOUT OVERRIDES
   =========================================== */
body.error404 #content .container,
body.page-template-template-homepage #content .container,
body.page-template-template-fx-hedging #content .container,
body.page-template-template-fixed-income #content .container,
body.page-template-template-merch #content .container,
body.page-template-template-bennett-heitjan #content .container,
body.page-template-template-indikatoren #content .container,
body.page-template-template-box-spread-rechner #content .container,
body.page-template-template-ibkr-steuerrechner #content .container,
body.page-template-template-datenschutz #content .container,
body.page-template-template-agbs #content .container,
body.page-template-template-haftungsbeschraenkung #content .container,
body.page-template-template-app-dashboard #content .container,
body.page-template-template-eur-hedging-doku #content .container,
body.page-template-template-fixed-income-doku #content .container,
body.page-template-template-konvex-journal #content .container,
body.page-template-template-konvex-analytics #content .container,
body.page-template-template-premium-portfolio #content .container,
body.page-template-template-premium-analytics #content .container,
body.post-type-archive-glossar #content .container,
body.single-glossar #content .container {
  max-width: none;
  padding: 0;
}

body.page-template-template-homepage .bb-grid.site-content-grid,
body.page-template-template-fx-hedging .bb-grid.site-content-grid,
body.page-template-template-fixed-income .bb-grid.site-content-grid,
body.page-template-template-merch .bb-grid.site-content-grid,
body.page-template-template-bennett-heitjan .bb-grid.site-content-grid,
body.page-template-template-indikatoren .bb-grid.site-content-grid,
body.page-template-template-box-spread-rechner .bb-grid.site-content-grid,
body.page-template-template-ibkr-steuerrechner .bb-grid.site-content-grid,
body.page-template-template-datenschutz .bb-grid.site-content-grid,
body.page-template-template-agbs .bb-grid.site-content-grid,
body.page-template-template-haftungsbeschraenkung .bb-grid.site-content-grid,
body.page-template-template-app-dashboard .bb-grid.site-content-grid,
body.page-template-template-eur-hedging-doku .bb-grid.site-content-grid,
body.page-template-template-fixed-income-doku .bb-grid.site-content-grid,
body.page-template-template-konvex-journal .bb-grid.site-content-grid,
body.page-template-template-konvex-analytics .bb-grid.site-content-grid,
body.page-template-template-premium-portfolio .bb-grid.site-content-grid,
body.page-template-template-premium-analytics .bb-grid.site-content-grid,
body.post-type-archive-glossar .bb-grid.site-content-grid,
body.single-glossar .bb-grid.site-content-grid,
body.error404 .bb-grid.site-content-grid {
  display: block;
  grid-template-columns: none;
}

body.page-template-template-homepage #content,
body.page-template-template-fx-hedging #content,
body.page-template-template-fixed-income #content,
body.page-template-template-merch #content,
body.page-template-template-bennett-heitjan #content,
body.page-template-template-indikatoren #content,
body.page-template-template-box-spread-rechner #content,
body.page-template-template-ibkr-steuerrechner #content,
body.page-template-template-datenschutz #content,
body.page-template-template-agbs #content,
body.page-template-template-haftungsbeschraenkung #content,
body.page-template-template-app-dashboard #content,
body.page-template-template-eur-hedging-doku #content,
body.page-template-template-fixed-income-doku #content,
body.page-template-template-konvex-journal #content,
body.page-template-template-konvex-analytics #content,
body.page-template-template-premium-portfolio #content,
body.page-template-template-premium-analytics #content,
body.post-type-archive-glossar #content,
body.single-glossar #content {
  padding: 0;
}

/* ===========================================
   DISPLAY-SCHRIFT: Landing-Page-Headings
   =========================================== */
body.page-template-template-homepage h1,
body.page-template-template-homepage h2,
body.page-template-template-fx-hedging h1,
body.page-template-template-fx-hedging h2,
body.page-template-template-fixed-income h1,
body.page-template-template-fixed-income h2,
body.page-template-template-konvex-journal h1,
body.page-template-template-konvex-journal h2,
body.page-template-template-box-spread-rechner h1,
body.page-template-template-box-spread-rechner h2,
body.page-template-template-ibkr-steuerrechner h1,
body.page-template-template-ibkr-steuerrechner h2,
body.page-template-template-merch h1,
body.page-template-template-bennett-heitjan h1,
body.page-template-template-indikatoren h1,
body.page-template-template-merch h2,
body.page-template-template-bennett-heitjan h2,
body.page-template-template-indikatoren h2,
body.page-template-template-konvex-analytics h1,
body.page-template-template-konvex-analytics h2 {
  font-family: var(--konvex-font-display);
}

/* Light-Dark Hybrid — light base, dark sections set own BG */
body {
  background-color: #ffffff;
}

/* Hide BB header/footer for non-logged-in users and, since 2026-11-06, wherever
   the website frame is shown to logged-in accounts (body.konvex-oeffentlich). */
body:not(.logged-in) #masthead,
body.konvex-oeffentlich #masthead {
  display: none;
}

/* Hide primary nav menu for logged-in users (BuddyPanel has these items) */
body.logged-in #site-navigation,
body.logged-in .site-header-container > nav.main-navigation {
  display: none !important;
}

/* Push header-aside (search, notifications, cart, avatar) to the right */
body.logged-in .site-header-container #header-aside {
  margin-left: auto;
}

/* ===========================================
   UTILITY: Full-width breakout
   =========================================== */
.konvex-full-width {
  width: 100%;
  position: relative;
  left: 0;
  margin-left: 0;
}

/* App-Fenster in allen öffentlichen Bildstrecken ohne helle Aufnahme-Ecken. */
.konvex-app-screenshot {
  clip-path: inset(0.15% round 2% / 3.2%);
}

/* Kategorie- und Schlagwort-Links unter Blogbeiträgen (Issue #11). */
.post-meta-wrapper .cat-links a,
.post-meta-wrapper .tag-links a {
  color: var(--konvex-accent-text);
}

/* Autor und Datum im Beitragskopf: lesbares Grau und 24 px Tippfläche.
   Innenabstand an Inline-Links verschiebt die Zeile nicht. */
.entry-meta .post-author,
.entry-meta .post-date a {
  padding-block: 4px;
}
.entry-meta .post-date a {
  color: var(--gray-600);
}

/* Basisregeln aus Theme-Stylesheets, die auf den öffentlichen Seiten entfallen
   (magnific-popup.min.css, template-v2.min.css; Issue #7). Wo die Dateien
   laden, bringen sie dieselben Deklarationen mit. .mfp-hide hält die
   versteckten BuddyBoss-Dialoge (Melden, Blockieren) geschlossen. */
.mfp-hide {
  display: none !important;
}

.bb-template-v2 code,
.bb-template-v2 pre {
  border: 0;
  border-radius: 6px;
}

/* ===========================================
   HEADER (Public / Logged-out) — Light
   =========================================== */
body.logged-in:not(.konvex-oeffentlich) #konvex-header { display: none !important; }

#konvex-header {
  font-family: var(--konvex-font);
  height: 80px;
  display: block;
  z-index: 100;
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
}

#konvex-header *,
#konvex-header *::before,
#konvex-header *::after {
  box-sizing: border-box;
}

#konvex-header .main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.45);
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Glas als eigene Ebene hinter der Leiste: Safari ab iOS 26 übernimmt die Farbe der Leiste nur
   ohne eigenen backdrop-filter in die Statusleiste, sonst bleibt beim Scrollen ein Spalt. Als
   Pseudo-Element in der Leiste zeigt WebKit nach dem Scrollen einen veralteten Hintergrund (2026-10-26) */
#konvex-header::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 999;
  pointer-events: none;
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
}

body.admin-bar #konvex-header .main-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar #konvex-header .main-header { top: 46px; }
}

#konvex-header .header-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  height: 100%;
}

@media (max-width: 768px) {
  #konvex-header .header-container {
    padding: 0 16px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* Logo */
#konvex-header .logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  border: none;
  outline: none;
  flex: 0 0 auto;
  margin-right: auto;
  z-index: 102;
}

#konvex-header .logo-img {
  height: 56px;
  width: auto;
  object-fit: contain;
  display: block;
  transition: all 0.2s ease;
}

@media (max-width: 768px) {
  #konvex-header .logo-img { height: 44px; max-width: 220px; }
}
@media (max-width: 400px) {
  #konvex-header .logo-img { height: 36px; max-width: 180px; }
}

/* Desktop Navigation */
#konvex-header .desktop-nav {
  display: none;
}

@media (min-width: 1024px) {
  #konvex-header .desktop-nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
    margin-left: auto;
  }
}

@media (min-width: 1200px) {
  #konvex-header .desktop-nav { gap: 32px; }
}

#konvex-header .nav-link {
  text-decoration: none;
  color: var(--gray-750);
  font-weight: 500;
  font-size: 0.95rem;
  position: relative;
  padding: 4px 0;
  transition: color 0.2s;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

#konvex-header .nav-link:hover { color: var(--konvex-accent-text); }

#konvex-header .nav-link::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: var(--konvex-accent);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

#konvex-header .nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Dropdown */
#konvex-header .nav-item-dropdown {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

#konvex-header .dropdown-arrow {
  width: 10px;
  height: 10px;
  fill: currentColor;
  transition: transform 0.2s ease;
  opacity: 0.6;
}

#konvex-header .nav-item-dropdown:hover .dropdown-arrow,
#konvex-header .nav-item-dropdown.is-open .dropdown-arrow {
  transform: rotate(180deg);
}

#konvex-header .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #ffffff;
  min-width: 260px;
  border: 1px solid #d2d2d7;
  border-radius: var(--konvex-radius);
  box-shadow: var(--shadow-flyout);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 101;
}

#konvex-header .dropdown-menu::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 20px;
  background: transparent;
}

#konvex-header .nav-item-dropdown:hover .dropdown-menu,
#konvex-header .nav-item-dropdown.is-open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

#konvex-header .dropdown-link {
  display: block;
  padding: 10px 16px;
  color: var(--gray-750);
  text-decoration: none;
  font-size: 0.95rem;
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}

#konvex-header .dropdown-link:visited,
#konvex-header .dropdown-link:active,
#konvex-header .dropdown-link:focus {
  color: var(--gray-750);
}

#konvex-header .dropdown-link:hover {
  background-color: rgba(56, 182, 255, 0.06);
  color: var(--konvex-accent-text);
}

/* Produktmenü Konvex Analytics */
#konvex-header .nav-link-produkt { padding: 7px 14px 7px 16px; border: 1px solid rgba(56, 182, 255, 0.3); border-radius: var(--radius-pill); background: rgba(56, 182, 255, 0.1); color: var(--konvex-accent-text); font-weight: 600; }
#konvex-header .nav-link-produkt::after { display: none; }
#konvex-header .nav-item-produkt { position: static; }

#konvex-header .dropdown-mega { left: auto; right: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; width: 760px; padding: 16px; transform: translateY(10px); }
#konvex-header .nav-item-produkt:hover .dropdown-mega,
#konvex-header .nav-item-produkt.is-open .dropdown-mega { transform: translateY(0); }
#konvex-header .mega-label { padding: 6px 16px; color: var(--gray-600); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
#konvex-header .mega-link strong,
#konvex-header .mobile-produkt-link strong { display: block; font-weight: 600; }
#konvex-header .mega-link small,
#konvex-header .mobile-produkt-link small { display: block; margin-top: 2px; color: var(--gray-600); font-size: 0.82rem; }
#konvex-header .mega-badge { padding: 1px 8px; border-radius: var(--radius-pill); background: rgba(56, 182, 255, 0.12); color: var(--konvex-accent-text); font-size: 0.68rem; }
#konvex-header .mega-fuss { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid var(--gray-200); }
#konvex-header .mega-fuss .dropdown-link,
#konvex-header .dropdown-link-alle { color: var(--konvex-accent-text); font-weight: 600; }

/* Anmelden als Rahmen */
#konvex-header .cta-button { padding: 8px 20px; border: 1px solid var(--gray-200); border-radius: var(--btn-radius); color: var(--gray-750); font-weight: 500; font-size: 0.95rem; text-decoration: none; white-space: nowrap; }
#konvex-header .cta-button:hover { border-color: rgba(56, 182, 255, 0.5); color: var(--konvex-accent-text); }

/* Über dunklem Inhalt (konvex.js setzt is-dunkel): dunkles Glas, helle Schrift, weißes Logo */
#konvex-header .logo-dunkel,
#konvex-header.is-dunkel .logo-hell { display: none; }
#konvex-header.is-dunkel .logo-dunkel { display: inline; }
#konvex-header.is-dunkel .main-header { background-color: #080b10; border-bottom-color: rgba(255, 255, 255, 0.08); }
#konvex-header.is-dunkel::before { display: none; }
#konvex-header.is-dunkel .nav-link,
#konvex-header.is-dunkel .cta-button,
#konvex-header.is-dunkel .mobile-toggle { color: #d4d4d8; }
#konvex-header.is-dunkel .cta-button { border-color: rgba(255, 255, 255, 0.22); }
#konvex-header.is-dunkel .nav-link-produkt { border-color: rgba(56, 182, 255, 0.35); background: rgba(56, 182, 255, 0.12); color: var(--konvex-accent); }
#konvex-header.is-dunkel .nav-link:hover,
#konvex-header.is-dunkel .cta-button:hover { border-color: var(--konvex-accent); color: var(--konvex-accent); }

/* Am Rechner mit Maus ist auch die dunkle Leiste Glas: 55 % Dunkel über der Unschärfe von
   #konvex-header::before, wie im Mitgliederbereich seit 0.20.1 (Betreiber 2026-11-05). Nur wenn
   hinter der ganzen Leiste Dunkles liegt (konvex.js setzt dann is-glas), sonst bliebe über heller
   Fläche ein grauer Schleier. Telefon und Tablet behalten die deckende Leiste, weil Safari ab iOS 26
   halbtransparentes Dunkel mit der Seitenfarbe zu Grau in der Statusleiste mischt (2026-10-26). */
@media (min-width: 901px) and (min-height: 501px) and (hover: hover) and (pointer: fine) {
  #konvex-header.is-dunkel.is-glas .main-header { background-color: rgba(8, 11, 16, 0.55); }
  #konvex-header.is-dunkel.is-glas::before { display: block; }
}

/* „Transparenz reduzieren“ oder „Kontrast erhöhen“: Leiste deckend, ohne Glas, hell wie dunkel.
   Die übrigen dunklen Zustände behalten über ihre höhere Spezifität ihre Farbe (2026-10-28) */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  #konvex-header .main-header { background-color: #fff; border-bottom-color: var(--gray-200); }
  #konvex-header::before { display: none; }
  #konvex-header.is-dunkel.is-glas .main-header { background-color: #080b10; }
  #konvex-header.is-dunkel.is-glas::before { display: none; }
}

/* Mobile Toggle */
#konvex-header .mobile-toggle {
  display: block;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--gray-750);
  margin-left: auto;
  flex: 0 0 auto;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 1024px) {
  #konvex-header .mobile-toggle { display: none; }
}

#konvex-header .hamburger-icon {
  width: 24px;
  height: 24px;
  position: relative;
}

#konvex-header .hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  position: absolute;
  left: 0;
  transition: all 0.3s ease;
  border-radius: 2px;
}

#konvex-header .hamburger-line:nth-child(1) { top: 2px; }
#konvex-header .hamburger-line:nth-child(2) { top: 11px; }
#konvex-header .hamburger-line:nth-child(3) { top: 20px; }

/* Mobile Menu */
#konvex-header .mobile-menu {
  position: fixed;
  top: 80px;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 8px 0 max(20px, env(safe-area-inset-bottom));
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  flex-direction: column;
  gap: 0;
  box-shadow: var(--shadow-flyout);
  display: none;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 999;
}

body.admin-bar #konvex-header .mobile-menu { top: 112px; }
@media screen and (max-width: 782px) {
  body.admin-bar #konvex-header .mobile-menu { top: 126px; }
}

#konvex-header .mobile-menu.is-open {
  display: flex;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  overscroll-behavior: contain;
}

/* Gruppen wie am Desktop: zugeklappt drei Zeilen, Inhalt klappt über grid-template-rows auf.
   visibility nimmt zugeklappte Links aus Tab-Reihenfolge und Screenreader (2026-10-29). */
#konvex-header .mobile-gruppe { border-bottom: 1px solid rgba(0, 0, 0, 0.06); }

#konvex-header .mobile-gruppe-knopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: auto;
  min-height: 56px;
  margin: 0;
  padding: 14px 24px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--gray-900);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

#konvex-header .mobile-gruppe-knopf:focus-visible { outline-offset: -2px; }
#konvex-header .mobile-gruppe-produkt .mobile-gruppe-knopf { color: var(--konvex-accent-text); }

#konvex-header .mobile-gruppe-pfeil {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  fill: currentColor;
  opacity: 0.6;
  transition: transform 0.2s ease;
}

#konvex-header .mobile-gruppe.is-open .mobile-gruppe-pfeil { transform: rotate(180deg); }

#konvex-header .mobile-gruppe-inhalt {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.25s ease, visibility 0s linear 0.25s;
}

#konvex-header .mobile-gruppe.is-open .mobile-gruppe-inhalt {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.25s ease;
}

#konvex-header .mobile-gruppe-liste { min-height: 0; overflow: hidden; }
#konvex-header .mobile-gruppe-liste > :last-child { margin-bottom: 8px; }

@media (prefers-reduced-motion: reduce) {
  #konvex-header .mobile-gruppe-inhalt,
  #konvex-header .mobile-gruppe-pfeil { transition: none; }
}

#konvex-header .mobile-sub-link {
  display: block;
  padding: 11px 24px 11px 48px;
  color: var(--gray-750);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.35;
  text-decoration: none;
}

#konvex-header .mobile-sub-link:hover,
#konvex-header .mobile-produkt-link:hover {
  background-color: rgba(56, 182, 255, 0.08);
  color: var(--konvex-accent-text);
}

#konvex-header .mobile-produkt-link { display: block; padding: 9px 24px 9px 48px; color: var(--gray-900); line-height: 1.35; text-decoration: none; }

#konvex-header .mobile-cta-container { padding: 24px; }

#konvex-header .mobile-cta {
  display: block;
  text-align: center;
  width: 100%;
  background: var(--btn-gradient);
  color: #fff;
  padding: 12px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
}

/* ===========================================
   FOOTER (Public / Logged-out) — Dark CI
   =========================================== */
/* Mitglieder-Footer: gemeinsamer Abschluss der angemeldeten Website.
   BuddyBoss reserviert sonst 85vh für den Inhalt und lässt bei unserem
   kleineren Footer eine Restfläche darunter. Flex verteilt diesen Platz
   auf den Inhalt; der Footer bleibt unten und behält seine tatsächliche Höhe. */
#page:has(> #konvex-member-footer) > #content {
  flex: 1 0 auto;
  min-height: 0;
}

#konvex-member-footer {
  background: var(--konvex-white);
  border-top: 1px solid var(--konvex-border);
  color: var(--gray-700);
  font-family: var(--konvex-font);
  font-size: 13px;
  line-height: 1.5;
  padding: 4px 30px;
}
#konvex-member-footer .member-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
}
#konvex-member-footer .member-footer-brand {
  margin: 0;
  white-space: nowrap;
}
#konvex-member-footer nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 20px;
}
#konvex-member-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  color: var(--gray-700);
  text-decoration: none;
}
#konvex-member-footer a:hover {
  color: var(--konvex-accent-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}
#konvex-member-footer a:focus-visible {
  outline: 2px solid var(--konvex-accent-deep);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
@media (max-width: 600px) {
  #konvex-member-footer { padding: 8px 10px; }
  #konvex-member-footer .member-footer-inner { gap: 4px; }
  #konvex-member-footer nav { gap: 0 14px; }
  #konvex-member-footer a { min-height: 44px; }
}

body.logged-in:not(.konvex-oeffentlich) #konvex-footer { display: none !important; }

#konvex-footer {
  position: relative;
  font-family: var(--konvex-font);
  background-color: #0a0a0a;
  color: var(--gray-100);
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  line-height: 1.5;
  text-align: left;
  display: block;
}

#konvex-footer *,
#konvex-footer *::before,
#konvex-footer *::after {
  box-sizing: border-box;
}

/* Chart Header */
#konvex-footer .chart-header {
  width: 100%;
  height: 4rem;
  background-color: #111;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#konvex-footer .chart-labels {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  font-size: 0.625rem;
  color: rgba(255, 255, 255, 0.15);
  font-family: monospace;
  user-select: none;
  width: 100%;
  z-index: 5;
}

#konvex-footer .chart-svg {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}

#konvex-footer .chart-line-anim {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: konvexFooterChart 2.5s ease-out forwards;
}

@keyframes konvexFooterChart {
  to { stroke-dashoffset: 0; }
}

/* Background effects */
#konvex-footer .bg-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

#konvex-footer .bg-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: rgba(56, 182, 255, 0.08);
  border-radius: var(--radius-pill);
  filter: blur(120px);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

#konvex-footer .inner-container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 4rem max(2rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(2rem, env(safe-area-inset-left));
  position: relative;
  z-index: 10;
}

#konvex-footer .footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  #konvex-footer .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  #konvex-footer .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* h2 statt h3 (Überschriftenfolge nach der H1, Lighthouse heading-order). Die Schriftliste ist die
   bisherige der Überschriften aus basis.css; ohne sie setzten Seiten mit eigener h2-Regel
   (Startseite, Analytics, Merch) Inter Tight. */
#konvex-footer h2 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  margin-top: 0;
  color: var(--gray-100);
  line-height: 1.2;
  padding: 0;
  border: none;
}

#konvex-footer p {
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--gray-500);
  margin: 0;
  padding: 0;
}

#konvex-footer ul { list-style: none; padding: 0; margin: 0; }
#konvex-footer li { margin-bottom: 0.75rem; padding: 0; line-height: 1.5; }
#konvex-footer a { text-decoration: none; color: inherit; transition: color 0.2s; box-shadow: none; }

#konvex-footer .footer-link {
  color: var(--gray-500);
  display: inline-block;
  position: relative;
  font-size: 0.875rem;
}
#konvex-footer .footer-link:hover { color: var(--konvex-accent); }
/* Unsichtbar größere Tippfläche: füllt den Zeilenabstand der Liste (21 auf 33 px), ohne Layoutänderung
   und ohne Überlappung der Nachbarn; Apple HIG nennt 28 pt als Minimum (2026-10-28) */
#konvex-footer .footer-link::before { content: ''; position: absolute; inset: -6px -4px; }

#konvex-footer .footer-withdrawal {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid rgba(226, 232, 240, 0.35);
  border-radius: var(--radius-sm);
  color: #e2e8f0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
}

#konvex-footer .hover-underline::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: var(--konvex-accent);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
#konvex-footer .hover-underline:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

#konvex-footer .logo-img {
  height: 2.5rem;
  width: auto;
  object-fit: contain;
  display: block;
  border: none;
  margin: 0;
}

/* Social buttons */
#konvex-footer .social-buttons { display: flex; gap: 1rem; margin-bottom: 1.5rem; }

#konvex-footer .social-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  transition: all 0.2s;
  text-decoration: none;
  line-height: 1;
}

#konvex-footer .social-btn svg { width: 1.25rem; height: 1.25rem; fill: currentColor; display: block; }

#konvex-footer .social-btn.x-btn:hover { background-color: var(--gray-100); color: #0a0a0a; border-color: var(--gray-100); }
#konvex-footer .social-btn.insta-btn:hover { background-color: #db2777; color: white; border-color: #db2777; }
#konvex-footer .social-btn.yt-btn:hover { background-color: #dc2626; color: white; border-color: #dc2626; }

/* Bottom bar */
#konvex-footer .bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  font-size: 0.75rem;
  /* --gray-600 erreichte auf dem Fußzeilen-Schwarz nur 3,8 : 1, --gray-500 hält 5,3 : 1. */
  color: var(--gray-500);
}

@media (min-width: 768px) {
  #konvex-footer .bottom-bar { flex-direction: row; }
}

#konvex-footer .secure-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1;
}

#konvex-footer .secure-badge svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--gray-500);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
  flex-shrink: 0;
}
/* ===========================================
   WOOCOMMERCE WARENKORB UND KASSE
   =========================================== */
.wp-block-woocommerce-checkout-order-note-block { display: none !important; }

/* Die Mengen-Spalte entfällt nur, wenn alle Mengenfelder fest vorgegeben sind.
   Der Zustand passt sich auch nach einer AJAX-Aktualisierung des Warenkorbs an. */
body.woocommerce-cart .woocommerce-cart-form__contents:has(.cart_item):not(:has(.product-quantity input:not([type="hidden"]):not([readonly]))) .product-quantity {
  display: none;
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 28px;
  border: 0;
  border-radius: var(--btn-radius);
  color: #fff;
  background: var(--btn-gradient);
  box-shadow: var(--btn-shadow);
  font-family: var(--konvex-font);
  font-weight: 700;
  text-decoration: none;
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  color: #fff;
  box-shadow: var(--btn-shadow-hover);
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:focus-visible {
  outline: 3px solid var(--konvex-accent);
  outline-offset: 4px;
}

/* Vollständige Motive innerhalb des nativen Vorschaurahmens zeigen. */
body.woocommerce-checkout .wc-block-components-order-summary-item__image img {
  object-fit: contain;
}

/* ===========================================
   FAQ SECTION
   =========================================== */
#konvex-faq {
  background: var(--gray-100);
  padding: 100px 24px;
  font-family: var(--konvex-font);
}

.faq-container {
  max-width: 880px;
  margin: 0 auto;
}

.faq-header {
  text-align: center;
  margin-bottom: 48px;
}

.faq-header h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

.faq-subtitle {
  font-size: 1.1rem;
  color: var(--gray-550);
  margin: 0;
  line-height: 1.6;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background: #fff;
  border: 1px solid #e5e5ea;
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.faq-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  border-color: var(--konvex-accent);
}

.faq-item.active {
  border-color: var(--konvex-accent);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 24px 28px;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  color: #0f172a;
  text-align: left;
  line-height: 1.5;
  gap: 16px;
  outline: none;
}

.faq-question:hover,
.faq-question:focus {
  background: transparent !important;
  color: var(--konvex-accent-text);
  box-shadow: none !important;
}

.faq-item.active .faq-question {
  background: transparent !important;
  color: #0f172a;
}

.faq-chevron {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--gray-450);
  transition: transform 0.4s ease, color 0.3s ease;
}

.faq-item.active .faq-chevron {
  transform: rotate(180deg);
  color: var(--konvex-accent);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.faq-answer-inner {
  padding: 0 28px 24px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
}

.faq-item.active .faq-answer-inner {
  opacity: 1;
  transform: translateY(0);
}

.faq-answer-inner p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #475569;
  margin: 0;
}

/* FAQ scroll-in animation */
#konvex-faq.anim-ready .anim-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

#konvex-faq .anim-item.js-active {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 640px) {
  #konvex-faq {
    padding: 60px 16px;
  }

  .faq-question {
    padding: 20px 20px;
    font-size: 1rem;
  }

  .faq-answer-inner {
    padding: 0 20px 20px;
  }

  .faq-header {
    margin-bottom: 32px;
  }
}

/* ===========================================
   BUDDYBOSS PLATFORM — Light with Konvex CI
   Minimal overrides for accent colour only.
   Dark body classes removed; BB defaults to
   its native light theme.
   =========================================== */




/* ─── SEO: Breadcrumbs (Kurs- & Indikatoren-Seiten) ──────────────── */
.konvex-breadcrumb {
  background: var(--konvex-bg);
  padding: 16px 24px;
  border-bottom: 1px solid var(--konvex-border);
}
.konvex-breadcrumb-inner {
  max-width: var(--konvex-container);
  margin: 0 auto;
  font-size: 14px;
  color: var(--konvex-gray);
}
.konvex-breadcrumb a {
  color: var(--konvex-gray);
  text-decoration: none;
  transition: color 0.15s;
}
.konvex-breadcrumb a:hover {
  color: var(--konvex-accent-text);
}
.bc-sep {
  margin: 0 8px;
  color: var(--gray-300);
}
.bc-current {
  color: var(--konvex-dark);
  font-weight: 500;
}


/* ─── 404 Page ────────────────────────────────────────────────────── */
.konvex-404-wrapper {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  background: var(--konvex-bg);
}
.konvex-404-inner {
  max-width: 560px;
  text-align: center;
}
.konvex-404-icon {
  color: var(--konvex-gray-light);
  margin-bottom: 24px;
}
.konvex-404-wrapper h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--konvex-dark);
  margin: 0 0 12px;
}
.konvex-404-text {
  font-size: 1.05rem;
  color: var(--konvex-gray);
  margin: 0 0 32px;
  line-height: 1.6;
}
.konvex-404-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.konvex-404-btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.konvex-404-btn.primary {
  background: var(--btn-gradient);
  color: #fff;
}
.konvex-404-btn.primary:hover {
  background: var(--btn-gradient);
  box-shadow: var(--btn-shadow-hover);
}
.konvex-404-btn.secondary {
  background: #fff;
  color: var(--konvex-dark);
  border: 1px solid var(--konvex-border);
}
.konvex-404-btn.secondary:hover {
  border-color: var(--konvex-accent);
  color: var(--konvex-accent-text);
}


/* ===========================================
   TRUST STRIPE (Social Presence)
   =========================================== */
#konvex-trust-stripe {
  background: #0a0a0a;
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-family: var(--konvex-font);
}

#konvex-trust-stripe .trust-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gray-600);
}

#konvex-trust-stripe .trust-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
}

#konvex-trust-stripe .trust-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  transition: color 0.25s ease, transform 0.25s ease;
}

#konvex-trust-stripe .trust-logo svg {
  height: 21px;
  width: auto;
  fill: currentColor;
  display: block;
}

#konvex-trust-stripe .trust-logo:hover {
  color: #f5f5f7;
  transform: translateY(-2px);
}

@media (max-width: 480px) {
  #konvex-trust-stripe .trust-logos { gap: 28px; }
  #konvex-trust-stripe .trust-logo svg { height: 19px; }
}

/* ===========================================
   SCROLL-PROGRESS-BAR
   =========================================== */
#konvex-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 1001;
  background: linear-gradient(90deg, var(--konvex-accent), var(--konvex-gold));
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
  pointer-events: none;
}


/* --- Konvex Analytics App: Farbverlauf und Hero-Badge --- */
.konvex-gradient-text {
  background: linear-gradient(90deg, var(--konvex-accent) 0%, var(--konvex-violet) 55%, var(--konvex-green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--konvex-accent);
  -webkit-text-fill-color: transparent;
}
.konvex-app-badge {
  display: inline-block;
  text-align: center;
  line-height: 1.7;
  padding: 8px 18px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.konvex-app-badge:hover {
  transform: translateY(-2px);
  text-decoration: none;
}
.konvex-app-badge .kab-dot {
  display: inline-block;
  vertical-align: middle;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--konvex-accent), #8b5cf6);
  box-shadow: 0 0 8px rgba(56, 182, 255, 0.6);
}
.konvex-app-badge .kab-arrow {
  vertical-align: middle;
  margin-left: 7px;
}
.konvex-app-badge .kab-nowrap {
  display: inline-block;
  white-space: nowrap;
}
.konvex-app-badge--dark {
  color: #e8e8ea;
  background: linear-gradient(#0d0d10, #0d0d10) padding-box,
              linear-gradient(90deg, var(--konvex-accent), #8b5cf6, #34d399) border-box;
}
.konvex-app-badge--dark:hover {
  color: #fff;
  box-shadow: 0 6px 24px rgba(56, 182, 255, 0.25);
}
.konvex-app-badge--light {
  color: #1a1a1a;
  background: linear-gradient(#ffffff, #ffffff) padding-box,
              linear-gradient(90deg, var(--konvex-accent), #8b5cf6, #34d399) border-box;
}
.konvex-app-badge--light:hover {
  color: #000;
  box-shadow: 0 6px 20px rgba(56, 182, 255, 0.2);
}
#konvex-combined-module .konvex-app-badge {
  margin-bottom: 22px;
}
#fx-hero .hero-badges {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
#fx-hero .hero-badges .badge {
  margin-bottom: 0;
}
#konvex-app-module,
#fx-dashboard {
  scroll-margin-top: 96px;
}
/* Schmale Viewports: engere Laufweite, damit lange Modulnamen
   moeglichst einzeilig bleiben */
@media (max-width: 768px) {
  .konvex-app-badge {
    letter-spacing: 0.8px;
  }
}

/* --- Konvex Analytics App: Modul-Status-Leiste --- */
.konvex-module-status {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.konvex-module-status .kms-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  line-height: 1.4;
  text-align: left;
}
.konvex-module-status .kms-item strong {
  color: #ddd;
  font-weight: 600;
  font-size: 0.9rem;
}
.konvex-module-status .kms-state {
  font-size: 0.78rem;
  color: #999;
}
.konvex-module-status .kms-state a {
  color: var(--konvex-accent);
  text-decoration: none;
}
.konvex-module-status .kms-state a:hover {
  text-decoration: underline;
}
/* Die ganze Karte ist Tippfläche ihres Links statt nur der 15 px hohen Zeile (2026-10-28) */
.konvex-module-status .kms-state a::before {
  content: '';
  position: absolute;
  inset: 0;
}
.konvex-module-status .kms-item.kms-active {
  border: 1px solid transparent;
  background: linear-gradient(#101014, #101014) padding-box,
              linear-gradient(90deg, var(--konvex-accent), #8b5cf6, #34d399) border-box;
}
.konvex-module-status .kms-item.kms-active strong {
  color: #fff;
}
.konvex-module-status .kms-item.kms-active .kms-state {
  color: #34d399;
}
#fx-dashboard .konvex-module-status {
  justify-content: center;
}

/* Dunklere Verlaufsvariante fuer kleinen Text auf hellem Grund (Kontrast) */
.konvex-app-badge--light .konvex-gradient-text {
  background-image: linear-gradient(90deg, #0e6ba8 0%, #6d28d9 55%, #047857 100%);
  color: #0e6ba8;
}


@media (max-width: 600px) {
  .konvex-module-status {
    display: grid;
    grid-template-columns: 1fr;
  }
  .konvex-module-status .kms-item {
    width: 100%;
    min-width: 0;
  }
}