@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Manrope:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Sora:wght@500;600;700;800&display=swap");

:root {
  --color-bg: #02050d;
  --color-bg-soft: #030914;
  --color-text: #f7fbff;
  --color-muted: #b2bdd0;
  --color-blue: #0b73ff;
  --color-blue-2: #0065ff;
  --color-cyan: #22e4ff;
  --color-line: rgba(34, 143, 255, 0.28);
  --panel-bg: rgba(5, 18, 40, 0.74);
  --max-width: 1320px;
  --header-height: 92px;
  --transition: 220ms ease;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

body.intro-active,
body.mobile-nav-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
}

button,
input,
textarea {
  font: inherit;
}

/* Intro */

.intro-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: #02050d;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 680ms ease,
    visibility 680ms ease;
}

.intro-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 44%, rgba(0, 116, 255, 0.15), transparent 32rem),
    radial-gradient(circle at 17% 50%, rgba(0, 92, 255, 0.12), transparent 28rem),
    linear-gradient(135deg, #02050d 0%, #030a16 45%, #01040b 100%);
}

.intro-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-tech-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 72%;
  height: 100%;
  background-image: url("../assets/images/hero-tech-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;
  opacity: 0.92;
  filter: saturate(1.08) contrast(1.04);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.22) 12%, rgba(0, 0, 0, 0.9) 38%, black 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.22) 12%, rgba(0, 0, 0, 0.9) 38%, black 100%);
}

.intro-dark-layer {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 5, 13, 0.99) 0%, rgba(2, 5, 13, 0.88) 35%, rgba(2, 5, 13, 0.14) 68%, rgba(2, 5, 13, 0.34) 100%),
    linear-gradient(180deg, rgba(2, 5, 13, 0.42) 0%, rgba(2, 5, 13, 0.08) 48%, rgba(2, 5, 13, 0.92) 100%);
}

.intro-name {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  transform: translate(-50%, -50%) scale(0.18);
  display: block;
  width: fit-content;
  max-width: calc(100vw - 32px);
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(3.2rem, 9vw, 9.2rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.095em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
}

body.intro-ready .intro-name {
  animation: introNameSmooth 2.55s cubic-bezier(0.12, 0.82, 0.18, 1) forwards;
}

.intro-name-white {
  color: #ffffff;
}

.intro-name-blue {
  color: #0c74ff;
  text-shadow:
    0 0 26px rgba(0, 116, 255, 0.24),
    0 0 54px rgba(0, 116, 255, 0.14);
}

@keyframes introNameSmooth {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.18);
  }

  10% {
    opacity: 1;
  }

  82% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

body.intro-active .page-shell {
  opacity: 0;
  transform: scale(1.006);
}

.page-shell {
  min-height: 100vh;
  overflow: hidden;
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 620ms ease,
    transform 620ms ease;
}

/* Header */

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 50%;
  width: min(100%, var(--max-width));
  height: var(--header-height);
  transform: translateX(-50%);
  padding: 0 30px;
  display: grid;
  grid-template-columns: 280px 1fr 170px;
  align-items: center;
  gap: 24px;
  background: linear-gradient(180deg, rgba(2, 5, 13, 0.94), rgba(2, 5, 13, 0.42));
  backdrop-filter: blur(10px);
}

.site-header.is-scrolled {
  background: rgba(2, 5, 13, 0.95);
  border-bottom: 1px solid rgba(34, 143, 255, 0.18);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
}

.brand-logo {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 50%;
  clip-path: circle(48% at center);
}

.brand-name {
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.36rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3.6vw, 50px);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.95rem;
  font-weight: 700;
}

.main-nav a {
  position: relative;
  padding: 10px 0 14px;
  transition: color var(--transition);
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: var(--color-blue);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition);
}

.main-nav a:hover,
.main-nav a.is-active {
  color: #1590ff;
}

.main-nav a:hover::after,
.main-nav a.is-active::after {
  transform: scaleX(1);
}

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}

.login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 124px;
  min-height: 48px;
  padding: 11px 18px;
  border: 1px solid rgba(34, 143, 255, 0.58);
  border-radius: 8px;
  background: rgba(3, 12, 27, 0.42);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.95rem;
  font-weight: 700;
  transition:
    background var(--transition),
    border-color var(--transition),
    transform var(--transition);
}

.login-button:hover {
  transform: translateY(-1px);
  border-color: rgba(34, 228, 255, 0.72);
  background: rgba(10, 115, 255, 0.12);
}

.login-icon,
.login-icon svg {
  width: 21px;
  height: 21px;
}

/* Mobile Navigation */

.mobile-menu-button,
.mobile-nav-toggle {
  width: 46px;
  height: 46px;
  display: none;
  place-items: center;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(34, 143, 255, 0.48);
  border-radius: 10px;
  background: rgba(3, 12, 27, 0.58);
  color: #ffffff;
  cursor: pointer;
}

.mobile-menu-button span,
.mobile-nav-toggle span {
  width: 22px;
  height: 2px;
  display: block;
  border-radius: 999px;
  background: currentColor;
  transition:
    transform var(--transition),
    opacity var(--transition);
}

.mobile-menu-button.is-open span:nth-child(1),
.mobile-nav-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-button.is-open span:nth-child(2),
.mobile-nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-button.is-open span:nth-child(3),
.mobile-nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--transition),
    visibility var(--transition);
}

.mobile-nav-panel {
  position: fixed;
  z-index: 99;
  top: 0;
  right: 0;
  width: min(390px, calc(100% - 34px));
  height: 100svh;
  padding: 96px 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 1px solid rgba(34, 143, 255, 0.28);
  background:
    radial-gradient(circle at 80% 12%, rgba(11, 115, 255, 0.2), transparent 16rem),
    rgba(2, 7, 19, 0.98);
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(16px);
  transform: translateX(110%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 260ms ease,
    opacity 260ms ease,
    visibility 260ms ease;
}

body.mobile-nav-open .mobile-nav-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.mobile-nav-open .mobile-nav-panel {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-nav-header {
  margin-bottom: 12px;
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgba(34, 143, 255, 0.18);
}

.mobile-nav-header span {
  color: var(--color-cyan);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mobile-nav-header strong {
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.28rem;
}

.mobile-nav-panel a {
  padding: 13px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 800;
  transition:
    background var(--transition),
    border-color var(--transition),
    color var(--transition);
}

.mobile-nav-panel a:hover {
  border-color: rgba(34, 143, 255, 0.28);
  background: rgba(11, 115, 255, 0.1);
  color: #ffffff;
}

.mobile-nav-note {
  margin-top: auto;
  padding: 16px;
  border: 1px solid rgba(34, 143, 255, 0.22);
  border-radius: 16px;
  background: rgba(3, 12, 27, 0.68);
}

.mobile-nav-note strong {
  display: block;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}

.mobile-nav-note span {
  display: block;
  margin-top: 4px;
  color: var(--color-muted);
  font-size: 0.9rem;
}

/* Buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-height: 54px;
  padding: 14px 26px;
  border-radius: 8px;
  font-size: 0.96rem;
  font-weight: 800;
  transition:
    transform var(--transition),
    border-color var(--transition),
    background var(--transition),
    box-shadow var(--transition);
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  min-width: 238px;
  border: 1px solid rgba(34, 143, 255, 0.78);
  background: linear-gradient(135deg, #0b73ff, #0063ff);
  color: #ffffff;
  box-shadow:
    0 0 34px rgba(11, 115, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.button-primary span {
  font-size: 1.42rem;
  line-height: 1;
}

.button-secondary {
  min-width: 200px;
  border: 1px solid rgba(34, 143, 255, 0.42);
  background: rgba(2, 7, 19, 0.4);
  color: rgba(255, 255, 255, 0.86);
}

.button-secondary:hover {
  border-color: rgba(34, 228, 255, 0.6);
  background: rgba(11, 115, 255, 0.1);
}

.button-circle {
  width: 25px;
  height: 25px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(34, 143, 255, 0.78);
  border-radius: 999px;
  color: var(--color-blue);
  font-size: 1.3rem;
  line-height: 1;
}

.small-button {
  min-height: 48px;
  min-width: 0;
  padding: 12px 20px;
  font-size: 0.9rem;
}

/* Startseite Hero */

.hero-section {
  position: relative;
  min-height: 100svh;
  padding: 126px 30px 26px;
  overflow: hidden;
  background: #02050d;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 44%, rgba(0, 116, 255, 0.15), transparent 32rem),
    radial-gradient(circle at 17% 50%, rgba(0, 92, 255, 0.12), transparent 28rem),
    linear-gradient(135deg, #02050d 0%, #030a16 45%, #01040b 100%);
}

.hero-tech {
  position: absolute;
  top: 0;
  right: 0;
  width: 72%;
  height: 100%;
  background-image: url("../assets/images/hero-tech-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;
  opacity: 0.92;
  filter: saturate(1.08) contrast(1.04);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.22) 12%, rgba(0, 0, 0, 0.9) 38%, black 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.22) 12%, rgba(0, 0, 0, 0.9) 38%, black 100%);
}

.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 5, 13, 0.99) 0%, rgba(2, 5, 13, 0.88) 35%, rgba(2, 5, 13, 0.14) 68%, rgba(2, 5, 13, 0.34) 100%),
    linear-gradient(180deg, rgba(2, 5, 13, 0.42) 0%, rgba(2, 5, 13, 0.08) 48%, rgba(2, 5, 13, 0.92) 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: min(100%, var(--max-width));
  min-height: calc(100svh - 300px);
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.hero-content {
  max-width: 680px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  margin-bottom: 22px;
  padding: 9px 16px;
  border: 1px solid rgba(34, 143, 255, 0.46);
  border-radius: 999px;
  background: rgba(0, 67, 160, 0.1);
  color: #55b8ff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.eyebrow span {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--color-blue);
  box-shadow: 0 0 18px rgba(11, 115, 255, 0.88);
}

.hero-title {
  display: block;
  width: fit-content;
  max-width: 100%;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(4rem, 6.7vw, 6.3rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.095em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-title-white {
  color: #ffffff;
  text-shadow:
    0 0 26px rgba(255, 255, 255, 0.05),
    0 0 42px rgba(0, 116, 255, 0.08);
}

.hero-title-blue {
  color: #0c74ff;
  text-shadow:
    0 0 26px rgba(0, 116, 255, 0.18),
    0 0 42px rgba(0, 116, 255, 0.08);
}

.hero-slogan {
  margin-top: 16px;
  color: #69b6ff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.95rem, 3.2vw, 3.05rem);
  font-weight: 400;
  letter-spacing: -0.07em;
  line-height: 1.08;
  text-shadow: 0 0 32px rgba(34, 143, 255, 0.28);
}

.title-line {
  width: 72px;
  height: 3px;
  margin-top: 24px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-blue), var(--color-cyan));
  box-shadow: 0 0 18px rgba(34, 143, 255, 0.82);
}

.hero-description {
  max-width: 580px;
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 30px;
}

/* Benefits */

.benefit-strip {
  position: relative;
  z-index: 3;
  width: min(100%, var(--max-width));
  margin: 14px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.benefit-item {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 15px;
  align-items: start;
  padding: 8px 18px 8px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.benefit-item:last-child {
  border-right: 0;
  padding-right: 0;
}

.benefit-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 92, 255, 0.6);
  border-radius: 999px;
  background: rgba(0, 39, 100, 0.12);
  color: var(--color-blue);
  box-shadow:
    0 0 25px rgba(0, 92, 255, 0.16),
    inset 0 0 22px rgba(0, 92, 255, 0.1);
}

.benefit-icon svg {
  width: 28px;
  height: 28px;
}

.benefit-item h2 {
  margin-bottom: 5px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
}

.benefit-item p {
  max-width: 250px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
  line-height: 1.45;
}

.scroll-down {
  position: relative;
  z-index: 3;
  width: fit-content;
  margin: 14px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
}

.scroll-down strong {
  color: var(--color-blue);
  font-size: 1.55rem;
  line-height: 1;
  text-shadow: 0 0 18px rgba(11, 115, 255, 0.72);
}

/* Allgemeine Sektionen */

.content-section {
  padding: 84px 30px;
  border-top: 1px solid rgba(34, 143, 255, 0.14);
  background: #02050d;
}

.section-muted {
  background:
    radial-gradient(circle at 20% 20%, rgba(11, 115, 255, 0.08), transparent 30rem),
    #030914;
}

.section-inner {
  width: min(100%, var(--max-width));
  margin: 0 auto;
}

.section-label {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 16px;
  color: var(--color-cyan);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.section-inner h2 {
  max-width: 820px;
  margin-bottom: 16px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.9rem, 3.3vw, 2.85rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.055em;
}

.section-inner p:not(.section-label) {
  max-width: 760px;
  color: var(--color-muted);
  font-size: 1rem;
}

.section-heading {
  max-width: 850px;
  margin-bottom: 32px;
}

.centered-heading {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.centered-heading h2,
.centered-heading p {
  margin-left: auto;
  margin-right: auto;
}

.section-copy p + p {
  margin-top: 14px;
}

.section-actions {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Startseite weitere Bereiche */

.journal-grid,
.why-grid,
.preview-section .preview-grid,
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.7fr);
  gap: clamp(34px, 5vw, 68px);
  align-items: center;
}

.journal-panel,
.preview-placeholder,
.pricing-card,
.contact-form {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(34, 143, 255, 0.2);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(10, 25, 54, 0.72), rgba(3, 10, 24, 0.82));
  box-shadow: 0 22px 62px rgba(0, 0, 0, 0.2);
}

.journal-panel {
  padding: 26px;
}

.panel-glow {
  position: absolute;
  inset: auto -20% -40% 20%;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: rgba(11, 115, 255, 0.16);
  filter: blur(58px);
  pointer-events: none;
}

.journal-panel-header {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.panel-kicker,
.pricing-badge {
  display: block;
  color: var(--color-cyan);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.journal-panel-header strong {
  display: block;
  margin-top: 4px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.25rem;
}

.status-pill {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid rgba(34, 228, 255, 0.34);
  border-radius: 999px;
  color: var(--color-cyan);
  background: rgba(34, 228, 255, 0.08);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.journal-lines {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}

.journal-line {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.journal-line:last-child {
  border-bottom: 0;
}

.journal-line span {
  color: var(--color-muted);
}

.journal-line strong {
  color: #ffffff;
}

.panel-note {
  position: relative;
  z-index: 1;
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.94rem;
}

.feature-grid,
.feature-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.feature-card,
.info-card,
.process-step,
.audience-card,
.demo-board,
.disclaimer-box,
.journal-preview-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(34, 143, 255, 0.2);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(10, 25, 54, 0.72), rgba(3, 10, 24, 0.82));
  box-shadow: 0 22px 62px rgba(0, 0, 0, 0.2);
}

.feature-card {
  padding: 24px;
}

.feature-number,
.feature-icon,
.card-number,
.process-step span {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  border: 1px solid rgba(34, 228, 255, 0.32);
  border-radius: 999px;
  background: rgba(34, 228, 255, 0.08);
  color: var(--color-cyan);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
}

.feature-card h3,
.info-card h3,
.process-step h3,
.demo-analysis h3,
.audience-card h3,
.pricing-card h3 {
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.feature-card p,
.info-card p,
.process-step p,
.demo-analysis p,
.audience-card li,
.pricing-card p,
.pricing-card li {
  margin-top: 9px;
  color: rgba(178, 189, 208, 0.9);
  font-size: 0.95rem;
  line-height: 1.58;
}

.why-list {
  display: grid;
  gap: 18px;
}

.why-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 16px;
}

.why-item > span {
  color: var(--color-cyan);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
}

.why-item h3 {
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.05rem;
}

.why-item p {
  margin-top: 6px;
  color: var(--color-muted);
  font-size: 0.95rem;
}

.preview-placeholder {
  padding: 24px;
}

.preview-frame {
  padding: 14px;
  border: 1px solid rgba(34, 143, 255, 0.18);
  border-radius: 18px;
  background: rgba(2, 7, 19, 0.45);
}

.preview-topline {
  height: 54px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid rgba(34, 143, 255, 0.15);
  border-radius: 14px;
  background: rgba(2, 7, 19, 0.5);
}

.preview-topline span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(34, 228, 255, 0.4);
}

.preview-empty {
  margin-top: 14px;
  padding: 22px;
  border: 1px solid rgba(34, 143, 255, 0.16);
  border-radius: 14px;
  background: rgba(3, 12, 27, 0.62);
}

.preview-empty strong {
  color: #ffffff;
}

.preview-empty p {
  margin-top: 4px;
  color: var(--color-muted);
  font-size: 0.94rem;
}

.pricing-card {
  max-width: 620px;
  margin: 34px auto 0;
  padding: 30px;
}

.pricing-card ul {
  margin: 20px 0 24px;
  padding-left: 20px;
}

.contact-form {
  padding: 26px;
  display: grid;
  gap: 12px;
}

.contact-note {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid rgba(34, 143, 255, 0.18);
  border-radius: 16px;
  background: rgba(3, 12, 27, 0.58);
}

.contact-note strong {
  display: block;
  color: #ffffff;
}

.contact-note span {
  display: block;
  margin-top: 4px;
  color: var(--color-muted);
}

/* Formulare */

input,
textarea {
  width: 100%;
  border: 1px solid rgba(34, 143, 255, 0.28);
  border-radius: 12px;
  background: rgba(3, 12, 27, 0.74);
  color: #ffffff;
  outline: none;
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    background var(--transition);
}

input {
  min-height: 48px;
  padding: 12px 14px;
}

textarea {
  min-height: 130px;
  padding: 14px;
  resize: vertical;
}

input:focus,
textarea:focus {
  border-color: rgba(34, 228, 255, 0.64);
  background: rgba(4, 16, 36, 0.86);
  box-shadow: 0 0 0 4px rgba(34, 228, 255, 0.08);
}

label {
  color: #ffffff;
  font-weight: 700;
}

/* Produktseite */

.product-page .page-shell {
  background:
    radial-gradient(circle at 80% 8%, rgba(11, 115, 255, 0.12), transparent 32rem),
    radial-gradient(circle at 12% 30%, rgba(34, 228, 255, 0.06), transparent 28rem),
    var(--color-bg);
}

.product-hero {
  position: relative;
  min-height: 88svh;
  padding: 120px 30px 58px;
  overflow: hidden;
  background: #02050d;
}

.product-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 34%, rgba(0, 116, 255, 0.18), transparent 34rem),
    radial-gradient(circle at 14% 64%, rgba(34, 228, 255, 0.08), transparent 30rem),
    linear-gradient(135deg, #02050d 0%, #030914 48%, #01040b 100%);
}

.product-hero-tech {
  position: absolute;
  top: 0;
  right: 0;
  width: 68%;
  height: 100%;
  background-image: url("../assets/images/hero-tech-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;
  opacity: 0.36;
  filter: saturate(1.08) contrast(1.04);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.24) 18%, rgba(0, 0, 0, 0.86) 52%, black 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.24) 18%, rgba(0, 0, 0, 0.86) 52%, black 100%);
}

.product-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 5, 13, 0.98) 0%, rgba(2, 5, 13, 0.84) 44%, rgba(2, 5, 13, 0.44) 100%),
    linear-gradient(180deg, rgba(2, 5, 13, 0.2) 0%, rgba(2, 5, 13, 0.94) 100%);
}

.product-hero-inner {
  position: relative;
  z-index: 2;
  width: min(100%, var(--max-width));
  min-height: calc(88svh - 178px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.76fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}

.product-hero-content {
  max-width: 660px;
}

.product-title {
  max-width: 680px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.45rem, 4.6vw, 4.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.075em;
}

.product-lead {
  max-width: 620px;
  margin-top: 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(0.98rem, 1.14vw, 1.08rem);
  line-height: 1.68;
}

.product-trust-row {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.product-trust-row span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid rgba(34, 143, 255, 0.24);
  border-radius: 999px;
  background: rgba(3, 12, 27, 0.52);
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.82rem;
  font-weight: 800;
}

.journal-preview-card {
  border-radius: 24px;
  padding: 22px;
}

.journal-preview-card::before,
.demo-board::before,
.disclaimer-box::before,
.audience-card::before,
.feature-card::before,
.info-card::before,
.process-step::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(34, 228, 255, 0.075), transparent 34%),
    radial-gradient(circle at 85% 12%, rgba(11, 115, 255, 0.14), transparent 18rem);
}

.journal-preview-card > *,
.demo-board > *,
.disclaimer-box > *,
.audience-card > *,
.feature-card > *,
.info-card > *,
.process-step > * {
  position: relative;
  z-index: 1;
}

.preview-card-header,
.demo-board-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.preview-kicker,
.demo-board-top span,
.journal-preview-card .preview-grid span,
.demo-table span {
  color: rgba(178, 189, 208, 0.82);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.preview-card-header h2 {
  margin-top: 4px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.24rem;
  letter-spacing: -0.04em;
}

.preview-status,
.demo-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(34, 228, 255, 0.34);
  border-radius: 999px;
  background: rgba(34, 228, 255, 0.08);
  color: var(--color-cyan);
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
}

.preview-chart {
  position: relative;
  height: 136px;
  margin: 20px 0;
  border: 1px solid rgba(34, 143, 255, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    rgba(1, 6, 16, 0.55);
  background-size: 100% 36px, 36px 100%, auto;
  overflow: hidden;
}

.chart-line {
  position: absolute;
  left: 22px;
  right: 22px;
  height: 2px;
  border-radius: 999px;
  background: rgba(34, 228, 255, 0.72);
  box-shadow: 0 0 22px rgba(34, 228, 255, 0.35);
  transform-origin: left center;
}

.chart-line-one {
  bottom: 42px;
  transform: rotate(-8deg);
}

.chart-line-two {
  bottom: 68px;
  transform: rotate(7deg);
  background: rgba(11, 115, 255, 0.72);
}

.chart-line-three {
  bottom: 92px;
  transform: rotate(-4deg);
  opacity: 0.58;
}

.chart-point {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: var(--color-blue);
  box-shadow: 0 0 24px rgba(11, 115, 255, 0.72);
}

.chart-point-one {
  left: 30%;
  bottom: 56px;
}

.chart-point-two {
  right: 24%;
  bottom: 91px;
  background: var(--color-cyan);
}

.journal-preview-card .preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.journal-preview-card .preview-grid div {
  min-height: 64px;
  padding: 12px;
  border: 1px solid rgba(34, 143, 255, 0.16);
  border-radius: 14px;
  background: rgba(2, 7, 19, 0.48);
}

.journal-preview-card .preview-grid strong {
  display: block;
  margin-top: 5px;
  color: #ffffff;
  font-size: 0.95rem;
}

.preview-note {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.84rem;
  line-height: 1.5;
}

.product-section {
  padding-top: 72px;
  padding-bottom: 72px;
}

.product-section .section-inner h2 {
  max-width: 760px;
  font-size: clamp(1.9rem, 3.1vw, 2.65rem);
}

.product-section .section-inner > p:not(.section-label),
.product-section .split-layout > div > p:not(.section-label),
.product-section .demo-layout > div > p:not(.section-label),
.product-section .faq-layout > div > p:not(.section-label) {
  color: var(--color-muted);
}

.split-layout,
.demo-layout,
.audience-layout,
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 5vw, 66px);
  align-items: start;
}

.problem-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.info-card,
.process-step {
  padding: 22px;
}

.warning-card {
  background:
    linear-gradient(180deg, rgba(28, 16, 22, 0.66), rgba(3, 10, 24, 0.82));
  border-color: rgba(255, 94, 94, 0.18);
}

.process-row {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.demo-board {
  border-radius: 24px;
  padding: 24px;
}

.demo-board-top strong {
  display: block;
  margin-top: 6px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.08rem;
  letter-spacing: -0.04em;
}

.demo-table {
  margin-top: 22px;
  border: 1px solid rgba(34, 143, 255, 0.16);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(2, 7, 19, 0.4);
}

.demo-table div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.demo-table div:last-child {
  border-bottom: 0;
}

.demo-table strong {
  color: #ffffff;
}

.demo-analysis {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(34, 228, 255, 0.16);
  border-radius: 18px;
  background: rgba(34, 228, 255, 0.05);
}

.check-list {
  margin-top: 24px;
  display: grid;
  gap: 12px;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 30px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
  font-weight: 700;
}

.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(34, 228, 255, 0.1);
  color: var(--color-cyan);
  font-size: 0.78rem;
}

.audience-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.audience-card {
  border-radius: 22px;
  padding: 24px;
}

.audience-card ul {
  margin-top: 16px;
  padding-left: 18px;
}

.audience-card li + li {
  margin-top: 10px;
}

.audience-card.is-positive {
  border-color: rgba(34, 228, 255, 0.24);
}

.audience-card.is-negative {
  border-color: rgba(255, 94, 94, 0.2);
  background:
    linear-gradient(180deg, rgba(28, 16, 22, 0.58), rgba(3, 10, 24, 0.82));
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-list details {
  border: 1px solid rgba(34, 143, 255, 0.18);
  border-radius: 16px;
  background: rgba(3, 12, 27, 0.62);
  overflow: hidden;
}

.faq-list summary {
  cursor: pointer;
  padding: 18px 20px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.faq-list details[open] summary {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.faq-list details p {
  padding: 0 20px 20px;
  color: var(--color-muted);
  font-size: 0.94rem;
}

.disclaimer-box {
  max-width: 1040px;
  margin: 0 auto;
  border-radius: 24px;
  padding: clamp(26px, 4vw, 42px);
  border-color: rgba(34, 228, 255, 0.26);
}

.disclaimer-box h2 {
  max-width: 760px;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
}

.disclaimer-box p:not(.section-label) {
  max-width: 900px;
}

.product-cta-section {
  padding-top: 72px;
  padding-bottom: 72px;
  text-align: center;
}

.product-final-cta {
  display: grid;
  place-items: center;
}

.product-final-cta h2,
.product-final-cta p {
  margin-left: auto;
  margin-right: auto;
}

.product-final-cta h2 {
  max-width: 820px;
}

.product-final-cta .button {
  margin-top: 26px;
}

/* Footer */

.site-footer {
  width: min(calc(100% - 60px), var(--max-width));
  margin: 0 auto;
  padding: 34px 0 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  color: var(--color-muted);
  border-top: 1px solid rgba(34, 143, 255, 0.16);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-icon {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 50%;
  clip-path: circle(48% at center);
}

.footer-brand div {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.footer-brand strong {
  color: var(--color-text);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}

.footer-brand span {
  font-size: 0.82rem;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 18px;
}

.footer-links a {
  transition: color var(--transition);
}

.footer-links a:hover {
  color: var(--color-cyan);
}

.copyright {
  font-size: 0.86rem;
}

/* Tablet */

@media (max-width: 1180px) {
  .product-hero-inner,
  .split-layout,
  .demo-layout,
  .audience-layout,
  .faq-layout,
  .journal-grid,
  .why-grid,
  .preview-section .preview-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .product-hero-inner {
    min-height: auto;
  }

  .journal-preview-card {
    max-width: 720px;
  }

  .process-row,
  .feature-grid,
  .feature-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1100px) {
  .site-header {
    width: 100%;
    grid-template-columns: 1fr auto;
    justify-content: space-between;
  }

  .header-actions {
    justify-self: end;
  }

  .mobile-menu-button,
  .mobile-nav-toggle {
    display: grid;
  }

  .main-nav {
    display: none;
  }

  .main-nav.is-open {
    position: absolute;
    top: calc(var(--header-height) - 6px);
    left: 18px;
    right: 18px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 14px;
    border: 1px solid rgba(34, 143, 255, 0.22);
    border-radius: 18px;
    background: rgba(2, 7, 19, 0.96);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(14px);
  }

  .main-nav.is-open a {
    padding: 13px 14px;
    border-radius: 12px;
  }

  .main-nav.is-open a::after {
    display: none;
  }

  .main-nav.is-open a:hover,
  .main-nav.is-open a.is-active {
    background: rgba(11, 115, 255, 0.1);
  }

  .hero-tech,
  .intro-tech-bg {
    width: 100%;
    opacity: 0.45;
    mask-image: linear-gradient(90deg, transparent 0%, black 45%, black 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 45%, black 100%);
  }

  .hero-title {
    white-space: normal;
  }

  .benefit-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .benefit-item:nth-child(2) {
    border-right: 0;
  }
}

/* Mobile */

@media (max-width: 820px) {
  :root {
    --header-height: 82px;
  }

  .site-header {
    padding: 0 18px;
    gap: 10px;
  }

  .site-header .login-button {
    display: none;
  }

  .brand-logo {
    width: 42px;
    height: 42px;
  }

  .brand-name {
    font-size: 1.14rem;
  }

  .mobile-menu-button,
  .mobile-nav-toggle {
    width: 44px;
    height: 44px;
  }

  .hero-section {
    min-height: auto;
    padding: 118px 18px 34px;
  }

  .hero-tech,
  .intro-tech-bg {
    width: 135%;
    right: -45%;
    opacity: 0.36;
  }

  .eyebrow {
    margin-bottom: 20px;
    font-size: 0.7rem;
  }

  .hero-title {
    font-size: clamp(3.05rem, 15vw, 4.7rem);
    white-space: normal;
  }

  .hero-slogan {
    margin-top: 18px;
    font-size: clamp(1.85rem, 9vw, 2.75rem);
  }

  .hero-description {
    font-size: 1rem;
  }

  .hero-actions,
  .section-actions {
    flex-direction: column;
    gap: 14px;
  }

  .button,
  .button-primary,
  .button-secondary {
    width: 100%;
    min-width: 0;
  }

  .benefit-strip {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 42px;
  }

  .benefit-item {
    grid-template-columns: 58px 1fr;
    padding: 16px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .benefit-item:last-child {
    border-bottom: 0;
  }

  .benefit-icon {
    width: 58px;
    height: 58px;
  }

  .scroll-down {
    display: none;
  }

  .content-section,
  .product-section {
    padding: 62px 18px;
  }

  .section-inner h2,
  .product-section .section-inner h2 {
    font-size: clamp(1.85rem, 8vw, 2.55rem);
  }

  .product-hero {
    min-height: auto;
    padding: 116px 18px 56px;
  }

  .product-title {
    font-size: clamp(2.25rem, 10.5vw, 3.35rem);
    letter-spacing: -0.065em;
  }

  .product-lead {
    font-size: 1rem;
  }

  .product-trust-row span {
    width: 100%;
    justify-content: center;
  }

  .problem-grid,
  .feature-grid,
  .feature-card-grid,
  .process-row,
  .audience-panels,
  .journal-preview-card .preview-grid {
    grid-template-columns: 1fr;
  }

  .journal-preview-card,
  .demo-board,
  .info-card,
  .feature-card,
  .process-step,
  .audience-card,
  .journal-panel,
  .preview-placeholder,
  .pricing-card,
  .contact-form {
    padding: 20px;
    border-radius: 18px;
  }

  .preview-card-header,
  .demo-board-top,
  .journal-panel-header {
    flex-direction: column;
  }

  .preview-chart {
    height: 138px;
  }

  .demo-table div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .disclaimer-box {
    padding: 24px 20px;
  }

  .disclaimer-box h2 {
    font-size: clamp(1.8rem, 9vw, 2.5rem);
  }

  .product-cta-section {
    padding-top: 62px;
    padding-bottom: 62px;
  }

  .site-footer {
    width: min(calc(100% - 36px), var(--max-width));
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-links {
    flex-wrap: wrap;
  }

  .intro-name {
    font-size: clamp(3rem, 16vw, 4.8rem);
    letter-spacing: -0.085em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-screen {
    display: none;
  }

  body.intro-active {
    overflow: auto;
  }

  body.intro-active .page-shell {
    opacity: 1;
    transform: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   SupraFlux Compact Size Fix
   Reduziert Desktop-Grössen, Abstände und Kartenhöhe
   ========================================================= */

@media (min-width: 821px) {
  :root {
    --max-width: 1240px;
    --header-height: 84px;
  }

  .site-header {
    height: var(--header-height);
    padding: 0 28px;
    grid-template-columns: 260px 1fr 150px;
  }

  .brand-logo {
    width: 40px;
    height: 40px;
  }

  .brand-name {
    font-size: 1.22rem;
  }

  .main-nav {
    gap: clamp(20px, 3vw, 42px);
    font-size: 0.9rem;
  }

  .login-button {
    min-height: 44px;
    min-width: 112px;
    padding: 10px 16px;
    font-size: 0.9rem;
  }

  /* Startseite kompakter */

  .hero-section {
    min-height: 92svh;
    padding-top: 112px;
    padding-bottom: 22px;
  }

  .hero-inner {
    min-height: calc(92svh - 270px);
  }

  .hero-content {
    max-width: 620px;
  }

  .hero-title {
    font-size: clamp(3.35rem, 5.55vw, 5.25rem);
  }

  .hero-slogan {
    font-size: clamp(1.7rem, 2.7vw, 2.55rem);
  }

  .hero-description {
    max-width: 540px;
    font-size: 0.98rem;
  }

  .hero-actions {
    margin-top: 26px;
  }

  .button {
    min-height: 48px;
    padding: 12px 22px;
    font-size: 0.9rem;
  }

  .button-primary {
    min-width: 220px;
  }

  .button-secondary {
    min-width: 180px;
  }

  .benefit-strip {
    margin-top: 10px;
  }

  .benefit-item {
    grid-template-columns: 50px 1fr;
    gap: 13px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .benefit-icon {
    width: 50px;
    height: 50px;
  }

  .benefit-icon svg {
    width: 24px;
    height: 24px;
  }

  .benefit-item h2 {
    font-size: 0.82rem;
  }

  .benefit-item p {
    font-size: 0.76rem;
  }

  .scroll-down {
    margin-top: 10px;
  }

  /* Allgemeine Sektionen kompakter */

  .content-section,
  .product-section {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .section-label {
    margin-bottom: 12px;
    font-size: 0.68rem;
  }

  .section-inner h2,
  .product-section .section-inner h2 {
    font-size: clamp(1.75rem, 2.65vw, 2.35rem);
    max-width: 740px;
    margin-bottom: 14px;
  }

  .section-inner p:not(.section-label) {
    font-size: 0.94rem;
  }

  /* Produktseite Hero kompakter */

  .product-hero {
    min-height: 82svh;
    padding-top: 106px;
    padding-bottom: 46px;
  }

  .product-hero-inner {
    min-height: calc(82svh - 150px);
    grid-template-columns: minmax(0, 0.9fr) minmax(340px, 0.7fr);
    gap: clamp(32px, 4vw, 62px);
  }

  .product-hero-content {
    max-width: 610px;
  }

  .product-title {
    max-width: 620px;
    font-size: clamp(2.15rem, 3.75vw, 3.55rem);
    line-height: 1.02;
  }

  .product-lead {
    max-width: 560px;
    margin-top: 18px;
    font-size: 0.96rem;
    line-height: 1.62;
  }

  .product-trust-row {
    margin-top: 18px;
  }

  .product-trust-row span {
    min-height: 30px;
    padding: 6px 11px;
    font-size: 0.76rem;
  }

  .journal-preview-card {
    max-width: 520px;
    justify-self: end;
    padding: 20px;
    border-radius: 22px;
  }

  .preview-card-header h2 {
    font-size: 1.12rem;
  }

  .preview-chart {
    height: 116px;
    margin: 16px 0;
  }

  .journal-preview-card .preview-grid div {
    min-height: 58px;
    padding: 10px;
  }

  .journal-preview-card .preview-grid strong {
    font-size: 0.88rem;
  }

  .preview-note {
    font-size: 0.78rem;
  }

  /* Produktkarten kompakter */

  .problem-grid,
  .feature-grid,
  .feature-card-grid,
  .process-row {
    gap: 14px;
  }

  .info-card,
  .feature-card,
  .process-step,
  .audience-card,
  .demo-board,
  .journal-panel,
  .preview-placeholder,
  .pricing-card,
  .contact-form {
    padding: 20px;
    border-radius: 18px;
  }

  .feature-card,
  .info-card,
  .process-step {
    min-height: auto;
  }

  .feature-number,
  .feature-icon,
  .card-number,
  .process-step span {
    width: 32px;
    height: 32px;
    margin-bottom: 13px;
    font-size: 0.66rem;
  }

  .feature-card h3,
  .info-card h3,
  .process-step h3,
  .demo-analysis h3,
  .audience-card h3,
  .pricing-card h3 {
    font-size: 0.98rem;
  }

  .feature-card p,
  .info-card p,
  .process-step p,
  .demo-analysis p,
  .audience-card li,
  .pricing-card p,
  .pricing-card li {
    font-size: 0.88rem;
    line-height: 1.5;
  }

  /* Demo kompakter */

  .demo-layout {
    align-items: center;
  }

  .demo-board {
    max-width: 620px;
    justify-self: end;
  }

  .demo-table div {
    padding: 11px 14px;
  }

  .check-list {
    gap: 10px;
  }

  .check-list li {
    font-size: 0.88rem;
  }

  /* FAQ / Disclaimer kompakter */

  .faq-list summary {
    padding: 15px 18px;
    font-size: 0.9rem;
  }

  .faq-list details p {
    padding: 0 18px 18px;
    font-size: 0.88rem;
  }

  .disclaimer-box {
    max-width: 920px;
    padding: 32px;
  }

  .disclaimer-box h2 {
    font-size: clamp(1.75rem, 2.8vw, 2.35rem);
  }

  .product-cta-section {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .product-final-cta h2 {
    max-width: 720px;
    font-size: clamp(1.8rem, 2.8vw, 2.45rem);
  }

  .site-footer {
    padding-top: 28px;
    padding-bottom: 34px;
  }
}

/* Noch kompakter für kleinere Laptop-Höhen */
@media (min-width: 821px) and (max-height: 820px) {
  .hero-section {
    min-height: 88svh;
    padding-top: 104px;
  }

  .hero-inner {
    min-height: calc(88svh - 250px);
  }

  .product-hero {
    min-height: 78svh;
    padding-top: 100px;
    padding-bottom: 38px;
  }

  .product-hero-inner {
    min-height: calc(78svh - 135px);
  }

  .hero-title {
    font-size: clamp(3rem, 5vw, 4.85rem);
  }

  .product-title {
    font-size: clamp(2rem, 3.45vw, 3.25rem);
  }

  .content-section,
  .product-section {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}
/* =========================================================
   Phase 3B - Supra Journal V1 Demo-Bereich
   Hochwertige statische Demo ohne kostenlose Voll-App
   ========================================================= */

.demo-showcase-section {
  position: relative;
  overflow: hidden;
}

.demo-showcase-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 20%, rgba(34, 228, 255, 0.07), transparent 25rem),
    radial-gradient(circle at 86% 48%, rgba(11, 115, 255, 0.11), transparent 32rem);
}

.demo-showcase-section .section-inner {
  position: relative;
  z-index: 1;
}

.demo-showcase-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.42fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: end;
  margin-bottom: 32px;
}

.demo-disclaimer-note {
  padding: 18px;
  border: 1px solid rgba(34, 228, 255, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(34, 228, 255, 0.07), rgba(3, 12, 27, 0.72));
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.18);
}

.demo-disclaimer-note strong {
  display: block;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.96rem;
}

.demo-disclaimer-note span {
  display: block;
  margin-top: 6px;
  color: rgba(178, 189, 208, 0.9);
  font-size: 0.9rem;
  line-height: 1.55;
}

.demo-showcase-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.75fr);
  gap: 18px;
  align-items: stretch;
}

.demo-example-card,
.demo-result-card,
.comparison-card,
.demo-cta-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(34, 143, 255, 0.2);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(10, 25, 54, 0.74), rgba(3, 10, 24, 0.84));
  box-shadow: 0 22px 62px rgba(0, 0, 0, 0.2);
}

.demo-example-card::before,
.demo-result-card::before,
.comparison-card::before,
.demo-cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(34, 228, 255, 0.075), transparent 32%),
    radial-gradient(circle at 88% 10%, rgba(11, 115, 255, 0.14), transparent 18rem);
}

.demo-example-card > *,
.demo-result-card > *,
.comparison-card > *,
.demo-cta-card > * {
  position: relative;
  z-index: 1;
}

.demo-example-card,
.demo-result-card {
  padding: 24px;
}

.demo-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.demo-card-header h3,
.comparison-card h3,
.demo-cta-card h3 {
  margin-top: 5px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.2;
}

.demo-chip-row {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.demo-chip-row span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 7px 11px;
  border: 1px solid rgba(34, 143, 255, 0.22);
  border-radius: 999px;
  background: rgba(2, 7, 19, 0.46);
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.78rem;
  font-weight: 800;
}

.demo-trade-grid,
.demo-metrics-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.demo-trade-grid div,
.demo-metric-card {
  min-height: 82px;
  padding: 14px;
  border: 1px solid rgba(34, 143, 255, 0.16);
  border-radius: 16px;
  background: rgba(2, 7, 19, 0.48);
}

.demo-trade-grid span,
.demo-metric-card span,
.demo-note-box span,
.demo-insight-box span,
.comparison-label {
  display: block;
  color: rgba(178, 189, 208, 0.82);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-trade-grid strong,
.demo-metric-card strong {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-size: 0.98rem;
  line-height: 1.25;
}

.demo-note-box,
.demo-insight-box {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(34, 228, 255, 0.16);
  border-radius: 18px;
  background: rgba(34, 228, 255, 0.05);
}

.demo-note-box p,
.demo-insight-box p {
  margin-top: 8px;
  color: rgba(178, 189, 208, 0.92);
  font-size: 0.94rem;
  line-height: 1.58;
}

.demo-metrics-grid {
  grid-template-columns: repeat(2, 1fr);
}

.demo-metric-card {
  min-height: 92px;
}

.demo-metric-card strong {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.28rem;
  letter-spacing: -0.04em;
}

.demo-insight-box strong {
  display: block;
  margin-top: 8px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.02rem;
  letter-spacing: -0.035em;
}

.metric-bar {
  height: 8px;
  margin-top: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.metric-bar span,
.metric-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(11, 115, 255, 0.92), rgba(34, 228, 255, 0.92));
  box-shadow: 0 0 22px rgba(34, 228, 255, 0.24);
}

.metric-bar-fill {
  width: 68%;
}

.before-after-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.comparison-card {
  padding: 24px;
}

.comparison-card ul {
  margin-top: 18px;
  display: grid;
  gap: 11px;
  list-style: none;
}

.comparison-card li {
  position: relative;
  padding-left: 28px;
  color: rgba(178, 189, 208, 0.92);
  font-size: 0.94rem;
  line-height: 1.52;
}

.comparison-card li::before {
  position: absolute;
  left: 0;
  top: 1px;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 900;
}

.comparison-card.is-before {
  border-color: rgba(255, 94, 94, 0.22);
  background:
    linear-gradient(180deg, rgba(28, 16, 22, 0.58), rgba(3, 10, 24, 0.82));
}

.comparison-card.is-before li::before {
  content: "×";
  background: rgba(255, 94, 94, 0.1);
  color: #ff8b8b;
}

.comparison-card.is-after {
  border-color: rgba(34, 228, 255, 0.26);
}

.comparison-card.is-after li::before {
  content: "✓";
  background: rgba(34, 228, 255, 0.1);
  color: var(--color-cyan);
}

.demo-cta-card {
  margin-top: 18px;
  padding: clamp(24px, 4vw, 34px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  border-color: rgba(34, 228, 255, 0.24);
}

.demo-cta-card p:not(.section-label) {
  max-width: 760px;
  margin-top: 10px;
  color: rgba(178, 189, 208, 0.94);
  font-size: 0.96rem;
  line-height: 1.6;
}

@media (min-width: 821px) {
  .demo-showcase-heading {
    margin-bottom: 26px;
  }

  .demo-example-card,
  .demo-result-card,
  .comparison-card {
    padding: 20px;
    border-radius: 18px;
  }

  .demo-card-header h3,
  .comparison-card h3,
  .demo-cta-card h3 {
    font-size: 1.02rem;
  }

  .demo-trade-grid div,
  .demo-metric-card {
    min-height: 72px;
    padding: 12px;
    border-radius: 14px;
  }

  .demo-trade-grid strong,
  .demo-metric-card strong {
    font-size: 0.9rem;
  }

  .demo-metric-card strong {
    font-size: 1.1rem;
  }

  .demo-note-box,
  .demo-insight-box {
    padding: 16px;
  }

  .demo-note-box p,
  .demo-insight-box p,
  .comparison-card li,
  .demo-cta-card p:not(.section-label) {
    font-size: 0.88rem;
  }
}

@media (max-width: 1180px) {
  .demo-showcase-heading,
  .demo-showcase-grid,
  .demo-cta-card {
    grid-template-columns: 1fr;
  }

  .demo-result-card {
    max-width: 760px;
  }

  .demo-cta-card .button {
    width: fit-content;
  }
}

@media (max-width: 820px) {
  .demo-showcase-heading,
  .demo-showcase-grid,
  .before-after-grid,
  .demo-cta-card {
    grid-template-columns: 1fr;
  }

  .demo-showcase-heading {
    margin-bottom: 22px;
  }

  .demo-example-card,
  .demo-result-card,
  .comparison-card,
  .demo-cta-card,
  .demo-disclaimer-note {
    padding: 20px;
    border-radius: 18px;
  }

  .demo-card-header {
    flex-direction: column;
  }

  .demo-chip-row span {
    width: 100%;
    justify-content: center;
  }

  .demo-trade-grid,
  .demo-metrics-grid {
    grid-template-columns: 1fr;
  }

  .demo-trade-grid div,
  .demo-metric-card {
    min-height: auto;
  }

  .demo-cta-card .button {
    width: 100%;
  }
}

/* =========================================================
   Phase 3C + 3D - Risk Center und Risk Radar Erweiterungen
   Light-Tools, Marktampel und allgemeine Risikoorientierung
   ========================================================= */

.centered-actions {
  justify-content: center;
}

/* Risk Center */

.risk-center-page .page-shell,
.risk-radar-page .page-shell {
  background:
    radial-gradient(circle at 78% 8%, rgba(11, 115, 255, 0.13), transparent 32rem),
    radial-gradient(circle at 12% 36%, rgba(34, 228, 255, 0.07), transparent 30rem),
    var(--color-bg);
}

.risk-hero,
.risk-radar-hero {
  position: relative;
  min-height: 82svh;
  padding: 118px 30px 58px;
  overflow: hidden;
  background: #02050d;
}

.risk-hero-inner,
.risk-radar-hero-inner {
  position: relative;
  z-index: 2;
  width: min(100%, var(--max-width));
  min-height: calc(82svh - 176px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.76fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}

.risk-hero-content,
.risk-radar-hero-content {
  max-width: 660px;
}

.risk-summary-card,
.risk-premium-note,
.risk-tool-card,
.risk-upgrade-card,
.radar-status-card,
.radar-legal-card,
.radar-logic-card,
.radar-factor-card,
.market-event-card,
.radar-api-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(34, 143, 255, 0.2);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(10, 25, 54, 0.74), rgba(3, 10, 24, 0.84));
  box-shadow: 0 22px 62px rgba(0, 0, 0, 0.2);
}

.risk-summary-card::before,
.risk-premium-note::before,
.risk-tool-card::before,
.risk-upgrade-card::before,
.radar-status-card::before,
.radar-legal-card::before,
.radar-logic-card::before,
.radar-factor-card::before,
.market-event-card::before,
.radar-api-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(34, 228, 255, 0.075), transparent 32%),
    radial-gradient(circle at 88% 10%, rgba(11, 115, 255, 0.14), transparent 18rem);
}

.risk-summary-card > *,
.risk-premium-note > *,
.risk-tool-card > *,
.risk-upgrade-card > *,
.radar-status-card > *,
.radar-legal-card > *,
.radar-logic-card > *,
.radar-factor-card > *,
.market-event-card > *,
.radar-api-card > * {
  position: relative;
  z-index: 1;
}

.risk-summary-card {
  padding: 22px;
}

.risk-summary-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.risk-summary-grid div {
  min-height: 110px;
  padding: 14px;
  border: 1px solid rgba(34, 143, 255, 0.16);
  border-radius: 16px;
  background: rgba(2, 7, 19, 0.48);
}

.risk-summary-grid span,
.risk-output-grid span,
.single-result-box span,
.risk-tool-header .preview-kicker,
.risk-upgrade-card .preview-kicker {
  display: block;
  color: rgba(178, 189, 208, 0.82);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.risk-summary-grid strong {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.98rem;
  letter-spacing: -0.03em;
}

.risk-summary-grid p {
  margin-top: 6px;
  color: rgba(178, 189, 208, 0.9);
  font-size: 0.82rem;
  line-height: 1.45;
}

.risk-intro-grid,
.risk-upgrade-layout,
.radar-intro-layout,
.radar-api-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.55fr);
  gap: clamp(30px, 5vw, 64px);
  align-items: start;
}

.risk-premium-note,
.risk-upgrade-card,
.radar-legal-card,
.radar-api-card {
  padding: 24px;
}

.risk-premium-note span {
  display: block;
  color: var(--color-cyan);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.risk-premium-note ul,
.risk-upgrade-card ul,
.radar-api-card ul {
  margin-top: 18px;
  padding-left: 20px;
  display: grid;
  gap: 10px;
  color: rgba(178, 189, 208, 0.92);
  font-size: 0.94rem;
}

.risk-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.risk-tool-card {
  padding: 24px;
}

.risk-tool-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.risk-tool-header h3,
.risk-upgrade-card h3,
.radar-legal-card h3,
.radar-api-card h3,
.radar-logic-card h3,
.radar-factor-card h3,
.market-event-card h3 {
  margin-top: 5px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.2;
}

.risk-form {
  display: grid;
  gap: 14px;
}

.form-grid {
  display: grid;
  gap: 14px;
}

.two-columns {
  grid-template-columns: repeat(2, 1fr);
}

.three-columns {
  grid-template-columns: repeat(3, 1fr);
}

.risk-form label {
  display: grid;
  gap: 7px;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 800;
}

select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(34, 143, 255, 0.28);
  border-radius: 12px;
  background: rgba(3, 12, 27, 0.74);
  color: #ffffff;
  outline: none;
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    background var(--transition);
}

select:focus {
  border-color: rgba(34, 228, 255, 0.64);
  background: rgba(4, 16, 36, 0.86);
  box-shadow: 0 0 0 4px rgba(34, 228, 255, 0.08);
}

.risk-output-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.risk-output-grid div,
.single-result-box {
  min-height: 86px;
  padding: 14px;
  border: 1px solid rgba(34, 143, 255, 0.16);
  border-radius: 16px;
  background: rgba(2, 7, 19, 0.48);
}

.risk-output-grid strong,
.single-result-box strong {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.1rem;
  letter-spacing: -0.04em;
}

.tool-message,
.single-result-box p,
.tool-upgrade-note p,
.checklist-result p,
.risk-upgrade-card p,
.radar-legal-card p,
.radar-api-card p {
  margin-top: 12px;
  color: rgba(178, 189, 208, 0.9);
  font-size: 0.92rem;
  line-height: 1.55;
}

.single-result-box {
  margin-top: 20px;
}

.drawdown-scale {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.drawdown-scale span {
  display: block;
  padding: 10px 12px;
  border: 1px solid rgba(34, 143, 255, 0.14);
  border-radius: 12px;
  background: rgba(2, 7, 19, 0.38);
  color: rgba(178, 189, 208, 0.9);
  font-size: 0.82rem;
  font-weight: 700;
}

.tool-upgrade-note,
.checklist-result {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(34, 228, 255, 0.16);
  border-radius: 18px;
  background: rgba(34, 228, 255, 0.05);
}

.tool-upgrade-note strong,
.checklist-result strong {
  display: block;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  letter-spacing: -0.035em;
}

.checklist-form {
  grid-template-columns: repeat(2, 1fr);
}

.checklist-result span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  margin-bottom: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.result-neutral span {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
}

.result-green {
  border-color: rgba(34, 228, 255, 0.28);
  background: rgba(34, 228, 255, 0.06);
}

.result-green span {
  background: rgba(34, 228, 255, 0.1);
  color: var(--color-cyan);
}

.result-yellow {
  border-color: rgba(255, 196, 87, 0.28);
  background: rgba(255, 196, 87, 0.06);
}

.result-yellow span {
  background: rgba(255, 196, 87, 0.12);
  color: #ffd36a;
}

.result-red {
  border-color: rgba(255, 94, 94, 0.28);
  background: rgba(255, 94, 94, 0.06);
}

.result-red span {
  background: rgba(255, 94, 94, 0.12);
  color: #ff9a9a;
}

.risk-upgrade-card .button {
  margin-top: 22px;
}

/* Risk Radar */

.radar-status-card {
  padding: 24px;
  border-color: rgba(255, 196, 87, 0.32);
}

.radar-status-card.radar-status-yellow::before {
  background:
    linear-gradient(135deg, rgba(255, 196, 87, 0.08), transparent 34%),
    radial-gradient(circle at 82% 12%, rgba(255, 196, 87, 0.18), transparent 18rem),
    radial-gradient(circle at 14% 86%, rgba(11, 115, 255, 0.12), transparent 16rem);
}

.radar-card-topline,
.radar-factor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.radar-card-topline h2 {
  margin-top: 4px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.28rem;
  letter-spacing: -0.04em;
}

.radar-pill,
.event-tag {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.radar-pill-yellow {
  border: 1px solid rgba(255, 196, 87, 0.4);
  background: rgba(255, 196, 87, 0.12);
  color: #ffd36a;
}

.traffic-light {
  width: 112px;
  margin: 26px auto;
  padding: 12px;
  display: grid;
  gap: 12px;
  border: 1px solid rgba(34, 143, 255, 0.2);
  border-radius: 999px;
  background: rgba(1, 6, 16, 0.72);
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.4),
    0 20px 44px rgba(0, 0, 0, 0.24);
}

.traffic-light-dot {
  width: 88px;
  height: 88px;
  display: block;
  border-radius: 999px;
  opacity: 0.32;
  filter: saturate(0.75);
  transition: opacity var(--transition), filter var(--transition), box-shadow var(--transition);
}

.traffic-light-dot.is-active {
  opacity: 1;
  filter: saturate(1.2);
}

.traffic-light-red {
  background: radial-gradient(circle at 35% 32%, #ffd1d1, #ff4949 42%, #4a0707 100%);
}

.traffic-light-yellow {
  background: radial-gradient(circle at 35% 32%, #fff0b8, #ffc247 42%, #5b3500 100%);
}

.traffic-light-green {
  background: radial-gradient(circle at 35% 32%, #cffff2, #22e4aa 42%, #063b2d 100%);
}

.traffic-light-yellow.is-active {
  box-shadow:
    0 0 26px rgba(255, 196, 87, 0.42),
    0 0 70px rgba(255, 196, 87, 0.18);
}

.radar-main-result {
  padding: 18px;
  border: 1px solid rgba(255, 196, 87, 0.2);
  border-radius: 18px;
  background: rgba(255, 196, 87, 0.06);
}

.radar-main-result span,
.radar-status-list span,
.radar-factor-header span,
.radar-factor-meta span {
  display: block;
  color: rgba(178, 189, 208, 0.82);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.radar-main-result strong {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.22rem;
  letter-spacing: -0.04em;
}

.radar-main-result p {
  margin-top: 8px;
  color: rgba(178, 189, 208, 0.92);
  font-size: 0.92rem;
  line-height: 1.55;
}

.radar-status-list {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.radar-status-list div {
  padding: 12px;
  border: 1px solid rgba(34, 143, 255, 0.16);
  border-radius: 14px;
  background: rgba(2, 7, 19, 0.48);
}

.radar-status-list strong,
.radar-factor-meta strong {
  display: block;
  margin-top: 5px;
  color: #ffffff;
  font-size: 0.86rem;
}

.radar-legal-card {
  border-color: rgba(255, 196, 87, 0.24);
}

.radar-logic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.radar-logic-card {
  padding: 24px;
}

.radar-dot {
  width: 42px;
  height: 42px;
  display: inline-block;
  margin-bottom: 16px;
  border-radius: 999px;
}

.radar-dot-green {
  background: radial-gradient(circle at 35% 32%, #d8fff5, #22e4aa 44%, #063b2d 100%);
  box-shadow: 0 0 24px rgba(34, 228, 170, 0.24);
}

.radar-dot-yellow {
  background: radial-gradient(circle at 35% 32%, #fff0b8, #ffc247 44%, #5b3500 100%);
  box-shadow: 0 0 24px rgba(255, 196, 87, 0.24);
}

.radar-dot-red {
  background: radial-gradient(circle at 35% 32%, #ffd1d1, #ff4949 44%, #4a0707 100%);
  box-shadow: 0 0 24px rgba(255, 73, 73, 0.24);
}

.radar-logic-card p,
.radar-factor-card p,
.market-event-card p {
  margin-top: 9px;
  color: rgba(178, 189, 208, 0.92);
  font-size: 0.94rem;
  line-height: 1.58;
}

.radar-green-card {
  border-color: rgba(34, 228, 170, 0.22);
}

.radar-yellow-card {
  border-color: rgba(255, 196, 87, 0.28);
}

.radar-red-card {
  border-color: rgba(255, 94, 94, 0.24);
}

.radar-factor-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.radar-factor-card {
  padding: 22px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
}

.radar-factor-header strong {
  color: var(--color-cyan);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.radar-factor-card h3 {
  margin-top: 22px;
}

.radar-factor-meta {
  margin-top: auto;
  padding-top: 18px;
}

.factor-warning {
  border-color: rgba(255, 196, 87, 0.24);
}

.factor-defensive {
  border-color: rgba(255, 94, 94, 0.18);
}

.market-event-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.market-event-card {
  padding: 22px;
}

.event-tag {
  margin-bottom: 16px;
  border: 1px solid rgba(34, 228, 255, 0.24);
  background: rgba(34, 228, 255, 0.08);
  color: var(--color-cyan);
}

.radar-api-card ul {
  margin-bottom: 0;
}

@media (min-width: 821px) {
  .risk-hero,
  .risk-radar-hero {
    min-height: 78svh;
    padding-top: 106px;
    padding-bottom: 46px;
  }

  .risk-hero-inner,
  .risk-radar-hero-inner {
    min-height: calc(78svh - 150px);
    grid-template-columns: minmax(0, 0.9fr) minmax(340px, 0.72fr);
    gap: clamp(32px, 4vw, 62px);
  }

  .risk-summary-card,
  .radar-status-card {
    max-width: 540px;
    justify-self: end;
    padding: 20px;
    border-radius: 22px;
  }

  .risk-summary-grid div {
    min-height: 96px;
    padding: 12px;
  }

  .risk-summary-grid strong,
  .risk-output-grid strong,
  .single-result-box strong {
    font-size: 0.96rem;
  }

  .risk-tool-card,
  .risk-premium-note,
  .risk-upgrade-card,
  .radar-legal-card,
  .radar-api-card,
  .radar-logic-card,
  .radar-factor-card,
  .market-event-card {
    padding: 20px;
    border-radius: 18px;
  }

  .risk-tool-header h3,
  .risk-upgrade-card h3,
  .radar-legal-card h3,
  .radar-api-card h3,
  .radar-logic-card h3,
  .radar-factor-card h3,
  .market-event-card h3 {
    font-size: 1rem;
  }

  .risk-form label,
  .tool-message,
  .single-result-box p,
  .tool-upgrade-note p,
  .checklist-result p,
  .radar-logic-card p,
  .radar-factor-card p,
  .market-event-card p,
  .radar-main-result p {
    font-size: 0.86rem;
  }

  .traffic-light {
    width: 96px;
    margin: 20px auto;
  }

  .traffic-light-dot {
    width: 72px;
    height: 72px;
  }
}

@media (max-width: 1180px) {
  .risk-hero-inner,
  .risk-radar-hero-inner,
  .risk-intro-grid,
  .risk-upgrade-layout,
  .radar-intro-layout,
  .radar-api-layout {
    grid-template-columns: 1fr;
  }

  .risk-summary-card,
  .radar-status-card {
    max-width: 760px;
  }

  .risk-output-grid,
  .radar-factor-grid,
  .market-event-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 820px) {
  .risk-hero,
  .risk-radar-hero {
    min-height: auto;
    padding: 116px 18px 56px;
  }

  .risk-hero-inner,
  .risk-radar-hero-inner,
  .risk-tools-grid,
  .risk-output-grid,
  .two-columns,
  .three-columns,
  .checklist-form,
  .radar-logic-grid,
  .radar-factor-grid,
  .market-event-grid,
  .radar-status-list {
    grid-template-columns: 1fr;
  }

  .risk-summary-card,
  .risk-premium-note,
  .risk-tool-card,
  .risk-upgrade-card,
  .radar-status-card,
  .radar-legal-card,
  .radar-api-card,
  .radar-logic-card,
  .radar-factor-card,
  .market-event-card {
    padding: 20px;
    border-radius: 18px;
  }

  .risk-tool-header,
  .radar-card-topline,
  .radar-factor-header {
    flex-direction: column;
  }

  .risk-summary-grid {
    grid-template-columns: 1fr;
  }

  .risk-output-grid div,
  .single-result-box {
    min-height: auto;
  }

  .traffic-light {
    margin-left: 0;
    margin-right: 0;
  }

  .centered-actions {
    width: 100%;
  }
}

/* =========================================================
   Phase 3E - Trading-Wissen / SEO-Bereich
   Wissensseite, Artikelkarten und Startseiten-Teaser
   ========================================================= */

/* Navigation leicht kompakter, damit der neue Wissen-Link sauber Platz hat */
.main-nav {
  gap: clamp(16px, 2.35vw, 34px);
}

@media (min-width: 821px) {
  .main-nav {
    gap: clamp(15px, 2.15vw, 30px);
    font-size: 0.86rem;
  }
}

.knowledge-page .page-shell {
  background:
    radial-gradient(circle at 78% 8%, rgba(11, 115, 255, 0.13), transparent 32rem),
    radial-gradient(circle at 12% 36%, rgba(34, 228, 255, 0.07), transparent 30rem),
    var(--color-bg);
}

.knowledge-hero {
  position: relative;
  min-height: 82svh;
  padding: 118px 30px 58px;
  overflow: hidden;
  background: #02050d;
}

.knowledge-hero-inner {
  position: relative;
  z-index: 2;
  width: min(100%, var(--max-width));
  min-height: calc(82svh - 176px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.76fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}

.knowledge-hero-content {
  max-width: 680px;
}

.knowledge-summary-card,
.knowledge-principle-card,
.knowledge-card,
.knowledge-article,
.knowledge-side-panel,
.knowledge-mini-card,
.knowledge-home-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(34, 143, 255, 0.2);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(10, 25, 54, 0.74), rgba(3, 10, 24, 0.84));
  box-shadow: 0 22px 62px rgba(0, 0, 0, 0.2);
}

.knowledge-summary-card::before,
.knowledge-principle-card::before,
.knowledge-card::before,
.knowledge-article::before,
.knowledge-side-panel::before,
.knowledge-mini-card::before,
.knowledge-home-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(34, 228, 255, 0.075), transparent 32%),
    radial-gradient(circle at 88% 10%, rgba(11, 115, 255, 0.14), transparent 18rem);
}

.knowledge-summary-card > *,
.knowledge-principle-card > *,
.knowledge-card > *,
.knowledge-article > *,
.knowledge-side-panel > *,
.knowledge-mini-card > *,
.knowledge-home-card > * {
  position: relative;
  z-index: 1;
}

.knowledge-summary-card {
  padding: 22px;
}

.knowledge-summary-list {
  margin-top: 20px;
  display: grid;
  gap: 10px;
}

.knowledge-summary-list div {
  min-height: 94px;
  padding: 14px;
  border: 1px solid rgba(34, 143, 255, 0.16);
  border-radius: 16px;
  background: rgba(2, 7, 19, 0.48);
}

.knowledge-summary-list span,
.knowledge-card-topline span,
.knowledge-example-box span,
.knowledge-mini-card span {
  display: block;
  color: rgba(178, 189, 208, 0.82);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.knowledge-summary-list strong {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.98rem;
  letter-spacing: -0.03em;
}

.knowledge-summary-list p {
  margin-top: 6px;
  color: rgba(178, 189, 208, 0.9);
  font-size: 0.88rem;
  line-height: 1.5;
}

.knowledge-intro-layout,
.knowledge-article-layout,
.knowledge-risk-layout,
.knowledge-home-layout,
.knowledge-cta-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.72fr);
  gap: clamp(30px, 5vw, 62px);
  align-items: start;
}

.knowledge-principle-card,
.knowledge-side-panel,
.knowledge-home-card {
  padding: 24px;
}

.knowledge-principle-card h3,
.knowledge-side-panel h3,
.knowledge-card h3,
.knowledge-mini-card h3,
.knowledge-home-card-header strong {
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.2;
}

.knowledge-principle-card p,
.knowledge-side-panel p,
.knowledge-card p,
.knowledge-mini-card p {
  margin-top: 10px;
  color: rgba(178, 189, 208, 0.92);
  font-size: 0.94rem;
  line-height: 1.58;
}

.knowledge-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.knowledge-card {
  min-height: 268px;
  padding: 22px;
  display: flex;
  flex-direction: column;
}

.featured-knowledge-card {
  grid-column: span 2;
  border-color: rgba(34, 228, 255, 0.3);
  background:
    radial-gradient(circle at 78% 8%, rgba(34, 228, 255, 0.1), transparent 18rem),
    linear-gradient(180deg, rgba(10, 25, 54, 0.8), rgba(3, 10, 24, 0.86));
}

.knowledge-card-topline {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
}

.knowledge-card-topline strong {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(34, 228, 255, 0.3);
  border-radius: 999px;
  background: rgba(34, 228, 255, 0.08);
  color: var(--color-cyan);
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

.knowledge-card h3 {
  font-size: 1.06rem;
}

.knowledge-card-link {
  width: fit-content;
  margin-top: auto;
  padding-top: 18px;
  color: var(--color-cyan);
  font-size: 0.88rem;
  font-weight: 800;
  transition: color var(--transition), transform var(--transition);
}

.knowledge-card-link:hover {
  color: #ffffff;
  transform: translateX(3px);
}

.knowledge-article {
  padding: clamp(26px, 4vw, 42px);
}

.knowledge-article h2 {
  max-width: 850px;
}

.knowledge-article h3 {
  margin-top: 28px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.knowledge-article p,
.knowledge-article li {
  color: rgba(178, 189, 208, 0.94);
  font-size: 1rem;
  line-height: 1.72;
}

.knowledge-article p + p {
  margin-top: 14px;
}

.knowledge-article-lead {
  max-width: 880px !important;
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 1.06rem !important;
}

.knowledge-example-box,
.knowledge-article-disclaimer {
  margin-top: 24px;
  padding: 22px;
  border: 1px solid rgba(34, 228, 255, 0.2);
  border-radius: 18px;
  background: rgba(34, 228, 255, 0.055);
}

.knowledge-example-box ul {
  margin-top: 14px;
  padding-left: 20px;
}

.knowledge-example-box li + li {
  margin-top: 6px;
}

.knowledge-article-disclaimer strong {
  display: block;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
}

.knowledge-article-disclaimer p {
  margin-top: 8px;
  font-size: 0.94rem;
}

.knowledge-side-panel {
  position: sticky;
  top: 112px;
}

.knowledge-side-links {
  margin-top: 20px;
  display: grid;
  gap: 10px;
}

.knowledge-side-links a {
  padding: 13px 14px;
  border: 1px solid rgba(34, 143, 255, 0.18);
  border-radius: 14px;
  background: rgba(2, 7, 19, 0.48);
  color: rgba(255, 255, 255, 0.82);
  font-weight: 800;
  transition:
    background var(--transition),
    border-color var(--transition),
    color var(--transition),
    transform var(--transition);
}

.knowledge-side-links a:hover {
  transform: translateY(-1px);
  border-color: rgba(34, 228, 255, 0.38);
  background: rgba(11, 115, 255, 0.1);
  color: #ffffff;
}

.knowledge-risk-card-grid {
  display: grid;
  gap: 14px;
}

.knowledge-mini-card {
  padding: 20px;
}

.knowledge-mini-card span {
  color: var(--color-cyan);
}

.knowledge-mini-card h3 {
  margin-top: 10px;
}

.knowledge-home-section {
  position: relative;
  overflow: hidden;
}

.knowledge-home-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 20%, rgba(34, 228, 255, 0.06), transparent 24rem),
    radial-gradient(circle at 90% 40%, rgba(11, 115, 255, 0.1), transparent 28rem);
}

.knowledge-home-section .section-inner {
  position: relative;
  z-index: 1;
}

.knowledge-home-card-header {
  display: grid;
  gap: 4px;
}

.knowledge-home-list {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.knowledge-home-list span {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(34, 143, 255, 0.16);
  border-radius: 14px;
  background: rgba(2, 7, 19, 0.48);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  font-weight: 800;
}

.knowledge-cta-layout {
  align-items: center;
}

.knowledge-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@media (min-width: 821px) {
  .knowledge-hero {
    min-height: 78svh;
    padding-top: 106px;
    padding-bottom: 46px;
  }

  .knowledge-hero-inner {
    min-height: calc(78svh - 152px);
    grid-template-columns: minmax(0, 0.9fr) minmax(340px, 0.7fr);
    gap: clamp(32px, 4vw, 62px);
  }

  .knowledge-summary-card,
  .knowledge-principle-card,
  .knowledge-side-panel,
  .knowledge-mini-card,
  .knowledge-home-card,
  .knowledge-card {
    padding: 20px;
    border-radius: 18px;
  }

  .knowledge-card {
    min-height: 238px;
  }

  .knowledge-card h3,
  .knowledge-principle-card h3,
  .knowledge-side-panel h3,
  .knowledge-mini-card h3 {
    font-size: 0.98rem;
  }

  .knowledge-card p,
  .knowledge-principle-card p,
  .knowledge-side-panel p,
  .knowledge-mini-card p {
    font-size: 0.88rem;
    line-height: 1.5;
  }

  .knowledge-article {
    border-radius: 20px;
  }

  .knowledge-article p,
  .knowledge-article li {
    font-size: 0.94rem;
  }

  .knowledge-article-lead {
    font-size: 1rem !important;
  }
}

@media (max-width: 1180px) {
  .knowledge-hero-inner,
  .knowledge-intro-layout,
  .knowledge-article-layout,
  .knowledge-risk-layout,
  .knowledge-home-layout,
  .knowledge-cta-layout {
    grid-template-columns: 1fr;
  }

  .knowledge-summary-card,
  .knowledge-side-panel {
    max-width: 760px;
  }

  .knowledge-side-panel {
    position: relative;
    top: auto;
  }

  .knowledge-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 820px) {
  .knowledge-hero {
    min-height: auto;
    padding: 116px 18px 56px;
  }

  .knowledge-card-grid,
  .knowledge-home-list {
    grid-template-columns: 1fr;
  }

  .featured-knowledge-card {
    grid-column: span 1;
  }

  .knowledge-summary-card,
  .knowledge-principle-card,
  .knowledge-card,
  .knowledge-article,
  .knowledge-side-panel,
  .knowledge-mini-card,
  .knowledge-home-card {
    padding: 20px;
    border-radius: 18px;
  }

  .knowledge-card {
    min-height: auto;
  }

  .knowledge-card-topline {
    flex-direction: column;
    align-items: flex-start;
  }

  .knowledge-article h3 {
    font-size: 1.08rem;
  }

  .knowledge-cta-actions .button {
    width: 100%;
  }
}


/* =========================================================
   Phase 3F - Vertrauensbereich / Über SupraFlux / Roadmap
   ========================================================= */

.about-page .page-shell {
  background:
    radial-gradient(circle at 78% 10%, rgba(11, 115, 255, 0.13), transparent 34rem),
    radial-gradient(circle at 12% 36%, rgba(34, 228, 255, 0.07), transparent 30rem),
    var(--color-bg);
}

.about-hero {
  position: relative;
  min-height: 86svh;
  padding: 120px 30px 58px;
  overflow: hidden;
  background: #02050d;
}

.about-hero-inner {
  position: relative;
  z-index: 2;
  width: min(100%, var(--max-width));
  min-height: calc(86svh - 178px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.72fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}

.about-hero-content {
  max-width: 680px;
}

.about-trust-card,
.about-principle-card,
.about-status-card,
.about-boundary-card,
.value-card,
.roadmap-item,
.about-cta-card,
.trust-home-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(34, 143, 255, 0.2);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(10, 25, 54, 0.74), rgba(3, 10, 24, 0.84));
  box-shadow: 0 22px 62px rgba(0, 0, 0, 0.2);
}

.about-trust-card::before,
.about-principle-card::before,
.about-status-card::before,
.about-boundary-card::before,
.value-card::before,
.roadmap-item::before,
.about-cta-card::before,
.trust-home-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(34, 228, 255, 0.075), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(11, 115, 255, 0.14), transparent 18rem);
}

.about-trust-card > *,
.about-principle-card > *,
.about-status-card > *,
.about-boundary-card > *,
.value-card > *,
.roadmap-item > *,
.about-cta-card > *,
.trust-home-card > * {
  position: relative;
  z-index: 1;
}

.about-trust-card,
.about-principle-card,
.about-status-card,
.about-boundary-card,
.value-card,
.about-cta-card,
.trust-home-card {
  padding: 24px;
}

.about-trust-list {
  margin-top: 20px;
  display: grid;
  gap: 10px;
}

.about-trust-list div {
  min-height: 64px;
  padding: 13px;
  border: 1px solid rgba(34, 143, 255, 0.16);
  border-radius: 14px;
  background: rgba(2, 7, 19, 0.48);
}

.about-trust-list span,
.about-card-topline span,
.about-boundary-card span,
.value-card span,
.roadmap-item > span,
.about-cta-card span,
.trust-home-list span {
  display: block;
  color: rgba(178, 189, 208, 0.82);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.about-trust-list strong {
  display: block;
  margin-top: 6px;
  color: #ffffff;
  font-size: 0.95rem;
}

.about-intro-layout,
.about-boundary-layout,
.roadmap-layout,
.about-cta-layout,
.trust-home-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(360px, 0.78fr);
  gap: clamp(32px, 5vw, 66px);
  align-items: start;
}

.about-principle-card h3,
.about-status-card h3,
.about-boundary-card h3,
.value-card h3,
.roadmap-item h3,
.about-cta-card strong,
.trust-home-card strong {
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.about-principle-card h3 {
  margin-top: 8px;
  font-size: 1.45rem;
}

.about-principle-card p,
.about-status-card p,
.about-boundary-card p,
.value-card p,
.roadmap-item p,
.about-cta-card p {
  margin-top: 10px;
  color: rgba(178, 189, 208, 0.9);
  font-size: 0.95rem;
  line-height: 1.58;
}

.about-status-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.about-status-card.is-main-product {
  border-color: rgba(34, 228, 255, 0.3);
  background:
    linear-gradient(180deg, rgba(12, 44, 86, 0.82), rgba(3, 10, 24, 0.86));
}

.about-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.about-card-topline strong {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid rgba(34, 228, 255, 0.28);
  border-radius: 999px;
  background: rgba(34, 228, 255, 0.08);
  color: var(--color-cyan);
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

.about-boundary-grid,
.value-grid,
.about-cta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.value-grid {
  grid-template-columns: repeat(5, 1fr);
}

.about-boundary-card span,
.value-card span {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 15px;
  border: 1px solid rgba(34, 228, 255, 0.32);
  border-radius: 999px;
  background: rgba(34, 228, 255, 0.08);
  color: var(--color-cyan);
}

.about-boundary-card {
  border-color: rgba(255, 94, 94, 0.18);
  background:
    linear-gradient(180deg, rgba(28, 16, 22, 0.58), rgba(3, 10, 24, 0.82));
}

.roadmap-copy {
  position: sticky;
  top: 118px;
}

.roadmap-timeline {
  display: grid;
  gap: 14px;
}

.roadmap-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  padding: 22px;
}

.roadmap-item.is-current {
  border-color: rgba(34, 228, 255, 0.3);
}

.roadmap-item > span {
  color: var(--color-cyan);
}

.roadmap-item h3 {
  font-size: 1.08rem;
}

.about-cta-grid {
  grid-template-columns: 1fr;
}

.about-cta-card {
  display: block;
  transition:
    transform var(--transition),
    border-color var(--transition),
    background var(--transition);
}

.about-cta-card:hover {
  transform: translateY(-2px);
  border-color: rgba(34, 228, 255, 0.44);
  background:
    linear-gradient(180deg, rgba(12, 44, 86, 0.82), rgba(3, 10, 24, 0.86));
}

.about-cta-card strong {
  display: block;
  margin-top: 5px;
  font-size: 1.08rem;
}

.trust-home-section {
  position: relative;
  overflow: hidden;
}

.trust-home-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 20%, rgba(34, 228, 255, 0.06), transparent 24rem),
    radial-gradient(circle at 84% 58%, rgba(11, 115, 255, 0.09), transparent 30rem);
}

.trust-home-section .section-inner {
  position: relative;
  z-index: 1;
}

.trust-home-card-header {
  margin-bottom: 18px;
}

.trust-home-card-header strong {
  display: block;
  margin-top: 5px;
  font-size: 1.16rem;
}

.trust-home-list {
  display: grid;
  gap: 10px;
}

.trust-home-list span {
  padding: 13px 14px;
  border: 1px solid rgba(34, 143, 255, 0.16);
  border-radius: 14px;
  background: rgba(2, 7, 19, 0.48);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.76rem;
}

@media (min-width: 821px) {
  .site-header {
    grid-template-columns: 245px 1fr 132px;
  }

  .main-nav {
    gap: clamp(12px, 1.7vw, 28px);
    font-size: 0.86rem;
  }

  .login-button {
    min-width: 104px;
    padding-left: 13px;
    padding-right: 13px;
  }

  .about-hero {
    min-height: 80svh;
    padding-top: 104px;
    padding-bottom: 46px;
  }

  .about-hero-inner {
    min-height: calc(80svh - 150px);
    grid-template-columns: minmax(0, 0.9fr) minmax(340px, 0.7fr);
    gap: clamp(32px, 4vw, 62px);
  }

  .about-trust-card,
  .about-principle-card,
  .about-status-card,
  .about-boundary-card,
  .value-card,
  .about-cta-card,
  .trust-home-card {
    padding: 20px;
    border-radius: 18px;
  }

  .about-status-card h3,
  .about-boundary-card h3,
  .value-card h3,
  .roadmap-item h3,
  .about-cta-card strong {
    font-size: 0.98rem;
  }

  .about-status-card p,
  .about-boundary-card p,
  .value-card p,
  .roadmap-item p,
  .about-cta-card p,
  .about-principle-card p {
    font-size: 0.88rem;
    line-height: 1.5;
  }
}

@media (max-width: 1180px) {
  .about-hero-inner,
  .about-intro-layout,
  .about-boundary-layout,
  .roadmap-layout,
  .about-cta-layout,
  .trust-home-layout {
    grid-template-columns: 1fr;
  }

  .about-trust-card,
  .about-principle-card,
  .trust-home-card {
    max-width: 760px;
  }

  .about-status-grid,
  .value-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .roadmap-copy {
    position: relative;
    top: auto;
  }
}

@media (max-width: 820px) {
  .about-hero {
    min-height: auto;
    padding: 116px 18px 56px;
  }

  .about-status-grid,
  .about-boundary-grid,
  .value-grid,
  .about-cta-grid {
    grid-template-columns: 1fr;
  }

  .about-trust-card,
  .about-principle-card,
  .about-status-card,
  .about-boundary-card,
  .value-card,
  .roadmap-item,
  .about-cta-card,
  .trust-home-card {
    padding: 20px;
    border-radius: 18px;
  }

  .roadmap-item {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* Phase 3F footer wrap */
.footer-links { flex-wrap: wrap; }

/* =========================================================
   Phase 4B - Pricing, Zugang & Warteliste
   Statische Vorbereitung ohne Login, Zahlung oder Backend
   ========================================================= */

.pricing-page .page-shell {
  background:
    radial-gradient(circle at 82% 8%, rgba(11, 115, 255, 0.14), transparent 32rem),
    radial-gradient(circle at 10% 34%, rgba(34, 228, 255, 0.06), transparent 30rem),
    var(--color-bg);
}

.pricing-hero {
  position: relative;
  min-height: 86svh;
  padding: 120px 30px 58px;
  overflow: hidden;
  background: #02050d;
}

.pricing-hero-inner {
  position: relative;
  z-index: 2;
  width: min(100%, var(--max-width));
  min-height: calc(86svh - 178px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(360px, 0.72fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}

.pricing-hero-content {
  max-width: 680px;
}

.pricing-access-card,
.pricing-plan-card,
.comparison-column,
.waitlist-form-card,
.waitlist-note-box,
.not-live-card,
.journal-access-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(34, 143, 255, 0.2);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(10, 25, 54, 0.74), rgba(3, 10, 24, 0.84));
  box-shadow: 0 22px 62px rgba(0, 0, 0, 0.2);
}

.pricing-access-card::before,
.pricing-plan-card::before,
.comparison-column::before,
.waitlist-form-card::before,
.waitlist-note-box::before,
.not-live-card::before,
.journal-access-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(34, 228, 255, 0.075), transparent 34%),
    radial-gradient(circle at 86% 12%, rgba(11, 115, 255, 0.15), transparent 18rem);
}

.pricing-access-card > *,
.pricing-plan-card > *,
.comparison-column > *,
.waitlist-form-card > *,
.waitlist-note-box > *,
.not-live-card > *,
.journal-access-card > * {
  position: relative;
  z-index: 1;
}

.pricing-access-card {
  max-width: 540px;
  justify-self: end;
  padding: 24px;
}

.access-status-list {
  margin-top: 22px;
  display: grid;
  gap: 10px;
}

.access-status-list div {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.access-status-list div:last-child {
  border-bottom: 0;
}

.access-status-list span,
.pricing-plan-topline span,
.interest-options > span {
  color: rgba(178, 189, 208, 0.82);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.access-status-list strong,
.pricing-plan-topline strong {
  color: #ffffff;
  font-size: 0.92rem;
}

.pricing-plan-grid,
.pricing-home-grid,
.not-live-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.pricing-plan-card {
  padding: 26px;
}

.pricing-plan-card.is-featured-plan {
  border-color: rgba(34, 228, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(11, 48, 96, 0.76), rgba(3, 10, 24, 0.86));
  box-shadow:
    0 22px 62px rgba(0, 0, 0, 0.22),
    0 0 42px rgba(11, 115, 255, 0.1);
}

.pricing-plan-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.pricing-plan-card h3,
.comparison-column h3,
.waitlist-form-card h3,
.not-live-card h3,
.journal-access-card h3 {
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.2;
}

.pricing-price {
  margin: 14px 0 12px;
  color: var(--color-cyan) !important;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.35rem !important;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.pricing-plan-card p,
.comparison-column li,
.waitlist-note-box span,
.not-live-card p,
.journal-access-card li,
.static-form-note {
  color: rgba(178, 189, 208, 0.92);
  font-size: 0.94rem;
  line-height: 1.58;
}

.pricing-plan-card ul,
.comparison-column ul,
.journal-access-card ul {
  margin: 20px 0 22px;
  padding-left: 20px;
}

.pricing-plan-card li + li,
.comparison-column li + li,
.journal-access-card li + li {
  margin-top: 9px;
}

.pricing-home-section .section-heading {
  margin-left: auto;
  margin-right: auto;
}

.compact-plan-card {
  padding: 22px;
}

.pricing-home-actions {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.comparison-layout,
.waitlist-layout,
.journal-access-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 5vw, 66px);
  align-items: start;
}

.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.comparison-column,
.waitlist-form-card,
.waitlist-note-box,
.journal-access-card {
  padding: 24px;
}

.comparison-column.is-premium-column {
  border-color: rgba(34, 228, 255, 0.28);
}

.waitlist-note-box {
  margin-top: 24px;
  border-color: rgba(34, 228, 255, 0.22);
  background:
    linear-gradient(180deg, rgba(34, 228, 255, 0.07), rgba(3, 12, 27, 0.72));
}

.waitlist-note-box strong {
  display: block;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.98rem;
}

.waitlist-note-box span {
  display: block;
  margin-top: 6px;
}

.waitlist-form-card {
  display: grid;
  gap: 14px;
}

.interest-options {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding: 16px;
  border: 1px solid rgba(34, 143, 255, 0.16);
  border-radius: 16px;
  background: rgba(2, 7, 19, 0.46);
}

.interest-options label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.94rem;
  font-weight: 700;
}

.interest-options input[type="checkbox"] {
  width: 18px;
  min-height: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  border-radius: 4px;
  accent-color: var(--color-blue);
}

.static-form-note {
  margin-top: 2px;
  color: rgba(178, 189, 208, 0.78);
  font-size: 0.84rem;
}

.not-live-card {
  padding: 22px;
}

.not-live-card span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  border: 1px solid rgba(34, 228, 255, 0.32);
  border-radius: 999px;
  background: rgba(34, 228, 255, 0.08);
  color: var(--color-cyan);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
}

.not-live-card p {
  margin-top: 9px;
}

.journal-access-card {
  border-color: rgba(34, 228, 255, 0.24);
}

@media (min-width: 821px) {
  .pricing-hero {
    min-height: 80svh;
    padding-top: 106px;
    padding-bottom: 46px;
  }

  .pricing-hero-inner {
    min-height: calc(80svh - 150px);
    grid-template-columns: minmax(0, 0.92fr) minmax(340px, 0.7fr);
    gap: clamp(32px, 4vw, 62px);
  }

  .pricing-access-card {
    max-width: 520px;
    padding: 20px;
    border-radius: 22px;
  }

  .pricing-plan-card,
  .comparison-column,
  .waitlist-form-card,
  .waitlist-note-box,
  .journal-access-card,
  .not-live-card {
    padding: 20px;
    border-radius: 18px;
  }

  .pricing-plan-card h3,
  .comparison-column h3,
  .not-live-card h3,
  .journal-access-card h3 {
    font-size: 0.98rem;
  }

  .pricing-price {
    font-size: 1.16rem !important;
  }

  .pricing-plan-card p,
  .comparison-column li,
  .waitlist-note-box span,
  .not-live-card p,
  .journal-access-card li,
  .static-form-note {
    font-size: 0.88rem;
    line-height: 1.5;
  }
}

@media (max-width: 1180px) {
  .pricing-hero-inner,
  .comparison-layout,
  .waitlist-layout,
  .journal-access-layout {
    grid-template-columns: 1fr;
  }

  .pricing-access-card {
    justify-self: stretch;
    max-width: 720px;
  }

  .pricing-plan-grid,
  .pricing-home-grid,
  .not-live-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 820px) {
  .pricing-hero {
    min-height: auto;
    padding: 116px 18px 56px;
  }

  .pricing-plan-grid,
  .pricing-home-grid,
  .comparison-grid,
  .not-live-grid {
    grid-template-columns: 1fr;
  }

  .pricing-access-card,
  .pricing-plan-card,
  .comparison-column,
  .waitlist-form-card,
  .waitlist-note-box,
  .journal-access-card,
  .not-live-card {
    padding: 20px;
    border-radius: 18px;
  }

  .access-status-list div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .pricing-home-actions {
    flex-direction: column;
  }
}



/* =========================================================
   Phase 4C - Conversion, Vertrauen & Nutzerführung
   Ehrliche CTA-Struktur, Einwände und Seitenführung
   ========================================================= */

.conversion-journey-section,
.conversion-trust-section,
.objection-section,
.guidance-section,
.knowledge-implementation-section,
.pricing-decision-section {
  position: relative;
  overflow: hidden;
}

.conversion-journey-section::before,
.conversion-trust-section::before,
.objection-section::before,
.guidance-section::before,
.knowledge-implementation-section::before,
.pricing-decision-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 18%, rgba(34, 228, 255, 0.065), transparent 26rem),
    radial-gradient(circle at 88% 36%, rgba(11, 115, 255, 0.1), transparent 34rem);
}

.conversion-journey-section .section-inner,
.conversion-trust-section .section-inner,
.objection-section .section-inner,
.guidance-section .section-inner,
.knowledge-implementation-section .section-inner,
.pricing-decision-section .section-inner {
  position: relative;
  z-index: 1;
}

.conversion-path-grid,
.trust-principle-grid,
.objection-card-grid,
.guidance-card-grid,
.implementation-steps,
.decision-card-grid {
  display: grid;
  gap: 16px;
}

.conversion-path-grid,
.trust-principle-grid,
.guidance-card-grid,
.decision-card-grid {
  grid-template-columns: repeat(4, 1fr);
}

.objection-card-grid,
.implementation-steps {
  grid-template-columns: repeat(2, 1fr);
}

.conversion-path-card,
.trust-principle-card,
.objection-card,
.guidance-card,
.implementation-step-card,
.decision-card,
.decision-note-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(34, 143, 255, 0.2);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(10, 25, 54, 0.7), rgba(3, 10, 24, 0.84));
  box-shadow: 0 22px 62px rgba(0, 0, 0, 0.18);
}

.conversion-path-card,
.trust-principle-card,
.objection-card,
.guidance-card,
.implementation-step-card,
.decision-card {
  padding: 22px;
}

.conversion-path-card::before,
.trust-principle-card::before,
.objection-card::before,
.guidance-card::before,
.implementation-step-card::before,
.decision-card::before,
.decision-note-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(34, 228, 255, 0.07), transparent 34%),
    radial-gradient(circle at 86% 12%, rgba(11, 115, 255, 0.14), transparent 18rem);
}

.conversion-path-card > *,
.trust-principle-card > *,
.objection-card > *,
.guidance-card > *,
.implementation-step-card > *,
.decision-card > *,
.decision-note-card > * {
  position: relative;
  z-index: 1;
}

.is-primary-path,
.is-primary-guidance,
.is-primary-step,
.is-positive-decision {
  border-color: rgba(34, 228, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(9, 44, 80, 0.76), rgba(3, 10, 24, 0.86));
}

.is-negative-decision {
  border-color: rgba(255, 94, 94, 0.24);
  background:
    linear-gradient(180deg, rgba(30, 16, 24, 0.66), rgba(3, 10, 24, 0.84));
}

.conversion-step,
.trust-principle-card span,
.objection-card span,
.guidance-card span,
.implementation-step-card span {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 15px;
  border: 1px solid rgba(34, 228, 255, 0.32);
  border-radius: 999px;
  background: rgba(34, 228, 255, 0.08);
  color: var(--color-cyan);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
}

.conversion-path-card h3,
.trust-principle-card h3,
.objection-card h3,
.guidance-card h3,
.implementation-step-card h3 {
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.conversion-path-card p,
.trust-principle-card p,
.objection-card p,
.guidance-card p,
.implementation-step-card p {
  margin-top: 9px;
  color: rgba(178, 189, 208, 0.92);
  font-size: 0.92rem;
  line-height: 1.56;
}

.conversion-path-card .knowledge-card-link,
.guidance-card .knowledge-card-link {
  display: inline-flex;
  margin-top: 16px;
}

.objection-layout,
.implementation-layout,
.pricing-decision-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(32px, 5vw, 66px);
  align-items: start;
}

.decision-note-card {
  margin-top: 22px;
  padding: 18px;
  border-color: rgba(34, 228, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(34, 228, 255, 0.07), rgba(3, 12, 27, 0.74));
}

.decision-note-card strong,
.decision-note-card span {
  display: block;
}

.decision-note-card strong {
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.98rem;
}

.decision-note-card span {
  margin-top: 7px;
  color: rgba(178, 189, 208, 0.92);
  font-size: 0.92rem;
  line-height: 1.55;
}

.decision-card > span {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--color-cyan);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.decision-card ul {
  padding-left: 18px;
}

.decision-card li {
  color: rgba(178, 189, 208, 0.94);
  font-size: 0.92rem;
  line-height: 1.56;
}

.decision-card li + li {
  margin-top: 9px;
}

@media (max-width: 1180px) {
  .conversion-path-grid,
  .trust-principle-grid,
  .guidance-card-grid,
  .decision-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .objection-layout,
  .implementation-layout,
  .pricing-decision-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .conversion-path-grid,
  .trust-principle-grid,
  .objection-card-grid,
  .guidance-card-grid,
  .implementation-steps,
  .decision-card-grid {
    grid-template-columns: 1fr;
  }

  .conversion-path-card,
  .trust-principle-card,
  .objection-card,
  .guidance-card,
  .implementation-step-card,
  .decision-card,
  .decision-note-card {
    padding: 20px;
    border-radius: 18px;
  }
}


/* =========================================================
   Phase 4D - Recht, Datenschutz, Kontakt & Launch-Sauberkeit
   ========================================================= */

.legal-hero-section {
  padding-top: 170px;
}

.legal-page-title {
  margin-top: 0;
  margin-bottom: 20px;
}

.legal-status-banner,
.static-form-banner,
.legal-note,
.legal-check-card {
  border: 1px solid rgba(34, 228, 255, 0.22);
  background:
    linear-gradient(180deg, rgba(10, 25, 54, 0.72), rgba(3, 10, 24, 0.82));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.16);
}

.legal-status-banner {
  max-width: 920px;
  margin-top: 26px;
  padding: 18px 20px;
  border-radius: 18px;
}

.legal-status-banner strong,
.static-form-banner strong,
.legal-check-card h3 {
  display: block;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.legal-status-banner span,
.static-form-banner span {
  display: block;
  margin-top: 6px;
  color: var(--color-muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

.legal-card-grid .legal-info-card p + p {
  margin-top: 12px;
}

.legal-readiness-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.58fr);
  gap: clamp(28px, 4vw, 54px);
  align-items: start;
}

.legal-check-card {
  padding: 24px;
  border-radius: 22px;
}

.legal-check-card ul {
  margin-top: 16px;
  padding-left: 20px;
  color: rgba(178, 189, 208, 0.92);
}

.legal-check-card li + li {
  margin-top: 10px;
}

.static-form {
  position: relative;
}

.static-form-banner {
  padding: 14px 16px;
  border-radius: 15px;
}

.static-form-note {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(34, 143, 255, 0.2);
  border-radius: 14px;
  background: rgba(3, 12, 27, 0.62);
  color: rgba(178, 189, 208, 0.92);
  font-size: 0.88rem;
  line-height: 1.5;
}

.static-form-note.is-visible {
  border-color: rgba(34, 228, 255, 0.36);
  color: #ffffff;
  background: rgba(34, 228, 255, 0.08);
}

.waitlist-form-card .static-form-banner {
  margin: 16px 0 18px;
}

.contact-form .static-form-banner {
  margin-bottom: 6px;
}

@media (max-width: 1180px) {
  .legal-readiness-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .legal-hero-section {
    padding-top: 126px;
  }

  .legal-status-banner,
  .legal-check-card {
    padding: 18px;
    border-radius: 18px;
  }
}

/* =========================================================
   Phase 29C-0A - Einheitliche öffentliche Navigation
   und Intro nur beim ersten Startseitenbesuch
   ========================================================= */

html.intro-skip .intro-screen {
  display: none !important;
}

html.intro-skip body.intro-active {
  overflow: auto;
}

html.intro-skip body.intro-active .page-shell {
  opacity: 1;
  transform: none;
}

.site-header {
  grid-template-columns: 240px minmax(0, 1fr) 160px;
  gap: 24px;
}

.main-nav {
  gap: clamp(20px, 2.5vw, 38px);
  font-size: 0.91rem;
  white-space: nowrap;
}

.login-button {
  min-width: 136px;
  padding-left: 16px;
  padding-right: 16px;
}

.mobile-nav-panel a.is-active {
  border-color: rgba(34, 228, 255, 0.36);
  background: rgba(11, 115, 255, 0.13);
  color: #ffffff;
}

.mobile-nav-panel .mobile-beta-login {
  margin-top: 8px;
  border-color: rgba(34, 143, 255, 0.62);
  background: linear-gradient(135deg, rgba(11, 115, 255, 0.9), rgba(0, 99, 255, 0.78));
  color: #ffffff;
  text-align: center;
  box-shadow: 0 12px 34px rgba(11, 115, 255, 0.2);
}

.mobile-nav-panel .mobile-beta-login:hover {
  border-color: rgba(34, 228, 255, 0.78);
  background: linear-gradient(135deg, #0b73ff, #0063ff);
}

@media (max-width: 1100px) {
  .site-header {
    width: 100%;
    grid-template-columns: 1fr auto;
    justify-content: space-between;
  }

  .header-actions {
    justify-self: end;
  }

  .main-nav {
    display: none;
  }

  .mobile-menu-button {
    display: grid;
  }
}

@media (max-width: 820px) {
  .site-header {
    padding-left: 18px;
    padding-right: 18px;
  }

  .site-header .login-button {
    display: none;
  }

  .mobile-nav-panel {
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }
}



/* =========================================================
   Phase 29C-0A.1 - Risk-Center-Untermenü und Intro-Korrektur
   ========================================================= */

.nav-menu-group {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-menu-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-menu-chevron {
  display: inline-block;
  margin-top: -2px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.9rem;
  line-height: 1;
  transition: transform var(--transition), color var(--transition);
}

.nav-menu-group:hover .nav-menu-chevron,
.nav-menu-group:focus-within .nav-menu-chevron,
.nav-menu-group.is-active .nav-menu-chevron {
  color: var(--color-blue);
}

.nav-menu-group:hover .nav-menu-chevron,
.nav-menu-group:focus-within .nav-menu-chevron {
  transform: rotate(180deg);
}

.nav-submenu {
  position: absolute;
  top: calc(100% - 2px);
  left: 50%;
  z-index: 120;
  width: 218px;
  padding: 9px;
  border: 1px solid rgba(34, 143, 255, 0.28);
  border-radius: 14px;
  background:
    radial-gradient(circle at 85% 10%, rgba(11, 115, 255, 0.16), transparent 12rem),
    rgba(2, 7, 19, 0.98);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition:
    opacity var(--transition),
    visibility var(--transition),
    transform var(--transition);
}

.nav-menu-group:hover .nav-submenu,
.nav-menu-group:focus-within .nav-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.main-nav .nav-submenu a {
  display: block;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.86rem;
  line-height: 1.35;
  white-space: normal;
}

.main-nav .nav-submenu a::after {
  display: none;
}

.main-nav .nav-submenu a:hover,
.main-nav .nav-submenu a:focus-visible,
.main-nav .nav-submenu a.is-active {
  border-color: rgba(34, 143, 255, 0.28);
  background: rgba(11, 115, 255, 0.12);
  color: #ffffff;
}

.mobile-nav-group {
  display: grid;
  gap: 4px;
}

.mobile-nav-panel .mobile-subnav-link {
  position: relative;
  margin-left: 22px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: rgba(178, 189, 208, 0.88);
  font-size: 0.88rem;
}

.mobile-nav-panel .mobile-subnav-link span {
  margin-right: 7px;
  color: var(--color-blue);
}

.mobile-nav-panel .mobile-subnav-link.is-active {
  border-color: rgba(34, 228, 255, 0.3);
  background: rgba(11, 115, 255, 0.1);
  color: #ffffff;
}

@media (max-width: 1100px) {
  .nav-submenu {
    display: none;
  }
}

/* =========================================================
   Phase 29C-0A.2 - Trading-Journal Hero mit Kerzenchart
   ========================================================= */

.trade-analysis-card {
  width: 100%;
  max-width: 570px;
  justify-self: end;
  padding: 22px;
  border-color: rgba(34, 143, 255, 0.3);
  background:
    radial-gradient(circle at 82% 8%, rgba(11, 115, 255, 0.2), transparent 20rem),
    linear-gradient(180deg, rgba(8, 29, 61, 0.9), rgba(2, 9, 22, 0.94));
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.trade-analysis-card::before {
  background:
    linear-gradient(135deg, rgba(34, 228, 255, 0.08), transparent 32%),
    radial-gradient(circle at 90% 4%, rgba(11, 115, 255, 0.18), transparent 19rem);
}

.trade-analysis-header {
  align-items: center;
  margin-bottom: 16px;
}

.trade-analysis-header h2 {
  font-size: 1.34rem;
}

.trade-chart-shell {
  overflow: hidden;
  border: 1px solid rgba(34, 143, 255, 0.2);
  border-radius: 18px;
  background: rgba(1, 7, 18, 0.76);
  box-shadow: inset 0 0 30px rgba(11, 115, 255, 0.035);
}

.trade-chart-toolbar {
  min-height: 58px;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(34, 143, 255, 0.14);
  background: rgba(4, 15, 34, 0.82);
}

.trade-chart-toolbar > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.trade-chart-toolbar strong {
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.02rem;
  letter-spacing: -0.03em;
}

.trade-chart-toolbar > div span,
.trade-chart-period {
  color: rgba(178, 189, 208, 0.8);
  font-size: 0.74rem;
  font-weight: 800;
}

.trade-chart-period {
  padding: 5px 9px;
  border: 1px solid rgba(34, 143, 255, 0.18);
  border-radius: 999px;
  background: rgba(11, 115, 255, 0.07);
  white-space: nowrap;
}

.trade-chart-plot {
  position: relative;
  height: 242px;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 18%, rgba(11, 115, 255, 0.11), transparent 15rem),
    linear-gradient(180deg, rgba(3, 12, 29, 0.72), rgba(1, 7, 17, 0.96));
}

.trade-candlestick-chart {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.trade-grid-lines line {
  stroke: rgba(255, 255, 255, 0.045);
  stroke-width: 1;
}

.trade-level-lines line {
  stroke-width: 1.4;
  stroke-dasharray: 6 7;
}

.trade-level-target-line {
  stroke: rgba(45, 211, 153, 0.7);
}

.trade-level-entry-line {
  stroke: rgba(34, 228, 255, 0.75);
}

.trade-level-stop-line {
  stroke: rgba(255, 91, 111, 0.72);
}

.trade-moving-average {
  fill: none;
  stroke: rgba(35, 141, 255, 0.72);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(11, 115, 255, 0.34));
}

.trade-candle line {
  stroke-width: 2;
  stroke-linecap: round;
}

.trade-candle rect {
  stroke-width: 1.2;
}

.trade-candle.is-up line,
.trade-candle.is-up rect {
  stroke: #31d69a;
}

.trade-candle.is-up rect {
  fill: rgba(49, 214, 154, 0.84);
}

.trade-candle.is-down line,
.trade-candle.is-down rect {
  stroke: #ff657b;
}

.trade-candle.is-down rect {
  fill: rgba(255, 101, 123, 0.82);
}

.trade-entry-marker circle:first-child {
  fill: #22e4ff;
  stroke: #ffffff;
  stroke-width: 2;
}

.trade-entry-marker circle:last-child {
  fill: none;
  stroke: rgba(34, 228, 255, 0.38);
  stroke-width: 2;
}

.trade-level-label {
  position: absolute;
  right: 10px;
  min-width: 92px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(2, 8, 19, 0.9);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
  transform: translateY(-50%);
}

.trade-level-label span {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.trade-level-label strong {
  color: #ffffff;
  font-size: 0.68rem;
}

.trade-level-label.is-target {
  top: 20.8%;
  border-color: rgba(45, 211, 153, 0.28);
}

.trade-level-label.is-target span {
  color: #31d69a;
}

.trade-level-label.is-entry {
  top: 58%;
  border-color: rgba(34, 228, 255, 0.28);
}

.trade-level-label.is-entry span {
  color: #22e4ff;
}

.trade-level-label.is-stop {
  top: 84.5%;
  border-color: rgba(255, 101, 123, 0.28);
}

.trade-level-label.is-stop span {
  color: #ff657b;
}

.trade-chart-legend {
  min-height: 42px;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 1px solid rgba(34, 143, 255, 0.12);
  color: rgba(178, 189, 208, 0.82);
  font-size: 0.68rem;
  font-weight: 700;
}

.trade-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.trade-chart-legend i {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 999px;
}

.trade-chart-legend i.is-target {
  background: #31d69a;
}

.trade-chart-legend i.is-entry {
  background: #22e4ff;
}

.trade-chart-legend i.is-stop {
  background: #ff657b;
}

.trade-chart-demo-note {
  margin-left: auto;
  color: rgba(178, 189, 208, 0.58);
}

.trade-preview-metrics {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.trade-preview-metrics > div {
  min-height: 70px;
  padding: 11px;
  border: 1px solid rgba(34, 143, 255, 0.16);
  border-radius: 13px;
  background: rgba(1, 8, 20, 0.58);
}

.trade-preview-metrics span {
  display: block;
  color: rgba(178, 189, 208, 0.74);
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
}

.trade-preview-metrics strong {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-size: 0.83rem;
  line-height: 1.25;
}

.trade-preview-metrics .metric-positive {
  color: #31d69a;
}

.trade-preview-note {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(34, 143, 255, 0.12);
}

@media (max-width: 1100px) {
  .trade-analysis-card {
    max-width: 700px;
    justify-self: stretch;
  }
}

@media (max-width: 700px) {
  .trade-analysis-card {
    padding: 18px;
  }

  .trade-analysis-header {
    flex-direction: row;
    align-items: center;
  }

  .trade-chart-toolbar {
    align-items: flex-start;
  }

  .trade-chart-toolbar > div {
    flex-direction: column;
    gap: 1px;
  }

  .trade-chart-plot {
    height: 220px;
  }

  .trade-level-label {
    right: 7px;
    min-width: 78px;
    padding: 4px 6px;
  }

  .trade-level-label span {
    display: none;
  }

  .trade-level-label strong {
    font-size: 0.66rem;
  }

  .trade-chart-legend {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .trade-chart-demo-note {
    width: 100%;
    margin-left: 0;
  }

  .trade-preview-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .trade-analysis-card {
    padding: 15px;
  }

  .trade-analysis-header {
    align-items: flex-start;
  }

  .trade-analysis-header .preview-status {
    font-size: 0.62rem;
  }

  .trade-chart-plot {
    height: 202px;
  }

  .trade-preview-metrics > div {
    min-height: 64px;
  }
}


/* =========================================================
   Phase 29C-0A.3 - Öffentliche Journal-Analytics-Vorschau
   Anonymisierte Beispieldaten, keine Live- oder Kundendaten
   ========================================================= */

.analytics-hero-card {
  padding: 20px;
  border-color: rgba(34, 143, 255, 0.34);
  background:
    radial-gradient(circle at 86% 12%, rgba(11, 115, 255, 0.18), transparent 18rem),
    linear-gradient(180deg, rgba(8, 25, 55, 0.92), rgba(2, 8, 22, 0.96));
}

.analytics-hero-card::before {
  background:
    linear-gradient(135deg, rgba(34, 228, 255, 0.07), transparent 34%),
    radial-gradient(circle at 80% 18%, rgba(11, 115, 255, 0.18), transparent 18rem);
}

.analytics-card-header {
  margin-bottom: 16px;
}

.analytics-hero-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.analytics-hero-metric {
  min-width: 0;
  padding: 11px 10px;
  border: 1px solid rgba(34, 143, 255, 0.18);
  border-radius: 13px;
  background: rgba(1, 7, 20, 0.72);
}

.analytics-hero-metric span,
.analytics-panel-title span,
.analytics-result-list span {
  display: block;
  color: rgba(178, 189, 208, 0.78);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.35;
  text-transform: uppercase;
}

.analytics-hero-metric strong {
  display: block;
  margin-top: 5px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(0.78rem, 1.05vw, 0.96rem);
  line-height: 1.15;
  white-space: nowrap;
}

.analytics-hero-metric.is-positive-metric strong,
.is-positive-text {
  color: #6ff0ae !important;
}

.is-negative-text {
  color: #ff8c98 !important;
}

.analytics-hero-main {
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 126px;
  gap: 10px;
}

.analytics-curve-card,
.analytics-hero-summary {
  border: 1px solid rgba(34, 143, 255, 0.18);
  border-radius: 16px;
  background: rgba(1, 7, 20, 0.68);
}

.analytics-curve-card {
  padding: 13px;
}

.analytics-panel-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.analytics-panel-title strong {
  display: block;
  margin-top: 3px;
  color: #ffffff;
  font-size: 0.78rem;
}

.analytics-panel-title b {
  color: #6ff0ae;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem;
  white-space: nowrap;
}

.analytics-curve-plot {
  position: relative;
  margin-top: 8px;
  height: 142px;
  overflow: hidden;
  border-radius: 12px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    rgba(2, 8, 22, 0.74);
  background-size: 100% 35px, 62px 100%, auto;
}

.analytics-curve-plot svg {
  width: 100%;
  height: calc(100% - 22px);
}

.analytics-grid-lines line {
  stroke: rgba(135, 166, 205, 0.12);
  stroke-width: 1;
}

.analytics-area {
  fill: url(#heroAnalyticsArea);
}

.analytics-line {
  fill: none;
  stroke: #22e4ff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(34, 228, 255, 0.32));
}

.analytics-points circle {
  fill: #0b73ff;
  stroke: #d9f6ff;
  stroke-width: 2;
}

.analytics-axis-labels {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  display: flex;
  justify-content: space-between;
  color: rgba(178, 189, 208, 0.62);
  font-size: 0.56rem;
  font-weight: 700;
}

.analytics-hero-summary {
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.analytics-mini-donut,
.public-trade-donut {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#42d98b 0 57%, #ff6476 57% 93%, #7e8da7 93% 100%);
}

.analytics-mini-donut {
  width: 76px;
  height: 76px;
  margin: 0 auto 10px;
}

.analytics-mini-donut::before,
.public-trade-donut::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #071126;
}

.analytics-mini-donut::before {
  inset: 10px;
}

.analytics-mini-donut span,
.public-trade-donut span {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.57rem;
  line-height: 1.1;
}

.analytics-mini-donut strong,
.public-trade-donut strong {
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
}

.analytics-result-list {
  display: grid;
  gap: 0;
}

.analytics-result-list div {
  padding: 7px 0;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.analytics-result-list strong {
  color: #ffffff;
  font-size: 0.72rem;
}

.analytics-preview-note {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.public-analytics-section {
  position: relative;
  overflow: hidden;
}

.public-analytics-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 14%, rgba(11, 115, 255, 0.12), transparent 34rem),
    radial-gradient(circle at 12% 62%, rgba(34, 228, 255, 0.06), transparent 30rem);
}

.public-analytics-section .section-inner {
  position: relative;
  z-index: 1;
}

.public-analytics-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.45fr);
  gap: clamp(28px, 5vw, 62px);
  align-items: end;
  margin-bottom: 34px;
}

.public-analytics-dashboard {
  overflow: hidden;
  padding: 16px;
  border: 1px solid rgba(34, 143, 255, 0.3);
  border-radius: 26px;
  background:
    radial-gradient(circle at 76% 5%, rgba(11, 115, 255, 0.18), transparent 28rem),
    linear-gradient(180deg, rgba(7, 20, 46, 0.96), rgba(1, 6, 17, 0.98));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.38);
}

.public-analytics-topbar {
  min-height: 62px;
  padding: 10px 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid rgba(34, 143, 255, 0.17);
}

.public-analytics-topbar > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.public-app-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(34, 228, 255, 0.42);
  border-radius: 50%;
  background: rgba(11, 115, 255, 0.13);
  color: var(--color-cyan);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  box-shadow: 0 0 24px rgba(11, 115, 255, 0.22);
}

.public-analytics-topbar strong,
.public-analytics-topbar small {
  display: block;
}

.public-analytics-topbar strong {
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.96rem;
}

.public-analytics-topbar small {
  margin-top: 2px;
  color: rgba(178, 189, 208, 0.72);
  font-size: 0.72rem;
}

.public-demo-badge {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 6px 11px;
  border: 1px solid rgba(34, 228, 255, 0.32);
  border-radius: 999px;
  background: rgba(34, 228, 255, 0.07);
  color: var(--color-cyan);
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
}

.public-analytics-metrics {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.public-metric-card {
  min-width: 0;
  min-height: 112px;
  padding: 16px;
  border: 1px solid rgba(34, 143, 255, 0.18);
  border-radius: 16px;
  background: rgba(2, 8, 22, 0.76);
}

.public-metric-card > span,
.public-insight-label {
  display: block;
  color: rgba(178, 189, 208, 0.74);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.public-metric-card > strong {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.25rem, 2.3vw, 2rem);
  line-height: 1;
  letter-spacing: -0.05em;
}

.public-metric-card > small {
  display: block;
  margin-top: 9px;
  color: rgba(178, 189, 208, 0.66);
  font-size: 0.7rem;
  line-height: 1.4;
}

.public-metric-card.is-highlighted-metric > strong {
  color: #6ff0ae;
}

.public-analytics-main-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 10px;
}

.public-curve-panel,
.public-insight-card,
.public-daily-panel {
  border: 1px solid rgba(34, 143, 255, 0.18);
  border-radius: 18px;
  background: rgba(2, 8, 22, 0.72);
}

.public-curve-panel {
  padding: 16px;
}

.public-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.public-panel-header > div > span {
  display: block;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
}

.public-panel-header p {
  margin-top: 4px;
  color: rgba(178, 189, 208, 0.66) !important;
  font-size: 0.7rem !important;
  line-height: 1.45;
}

.public-end-value {
  min-width: 112px;
  padding: 9px 11px;
  border: 1px solid rgba(34, 143, 255, 0.18);
  border-radius: 12px;
  background: rgba(7, 21, 43, 0.84);
  text-align: right;
}

.public-end-value small,
.public-end-value strong {
  display: block;
}

.public-end-value small {
  color: rgba(178, 189, 208, 0.65);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.public-end-value strong {
  margin-top: 3px;
  color: #6ff0ae;
  font-size: 0.95rem;
}

.public-curve-chart {
  position: relative;
  height: 330px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid rgba(34, 143, 255, 0.14);
  border-radius: 15px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    rgba(1, 7, 19, 0.72);
  background-size: 100% 67px, 95px 100%, auto;
}

.public-curve-chart svg {
  width: 100%;
  height: calc(100% - 28px);
}

.public-chart-grid line {
  stroke: rgba(135, 166, 205, 0.13);
  stroke-width: 1;
}

.public-chart-y-labels text {
  fill: rgba(178, 189, 208, 0.62);
  font-size: 15px;
  font-weight: 700;
}

.public-chart-area {
  fill: url(#publicAnalyticsArea);
}

.public-chart-line {
  fill: none;
  stroke: #22e4ff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(34, 228, 255, 0.32));
}

.public-chart-points circle {
  fill: #0b73ff;
  stroke: #dcf9ff;
  stroke-width: 3;
}

.public-chart-dates {
  position: absolute;
  left: 70px;
  right: 18px;
  bottom: 7px;
  display: flex;
  justify-content: space-between;
  color: rgba(178, 189, 208, 0.58);
  font-size: 0.63rem;
  font-weight: 700;
}

.public-distribution-row {
  margin-top: 12px;
  padding: 12px;
  display: grid;
  grid-template-columns: auto minmax(160px, 0.75fr) minmax(260px, 1.3fr);
  gap: 18px;
  align-items: center;
  border: 1px solid rgba(34, 143, 255, 0.14);
  border-radius: 15px;
  background: rgba(1, 7, 19, 0.58);
}

.public-trade-donut {
  width: 82px;
  height: 82px;
}

.public-trade-donut::before {
  inset: 11px;
}

.public-distribution-legend {
  display: grid;
  gap: 7px;
}

.public-distribution-legend span {
  display: grid;
  grid-template-columns: 9px 1fr auto;
  gap: 7px;
  align-items: center;
  color: rgba(178, 189, 208, 0.78);
  font-size: 0.7rem;
}

.public-distribution-legend i {
  width: 7px;
  height: 7px;
  display: block;
  border-radius: 50%;
}

.is-win-dot { background: #42d98b; }
.is-loss-dot { background: #ff6476; }
.is-neutral-dot { background: #7e8da7; }

.public-distribution-legend strong {
  color: #ffffff;
  font-size: 0.7rem;
}

.public-distribution-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.public-distribution-metrics div {
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(34, 143, 255, 0.13);
  border-radius: 11px;
  background: rgba(7, 20, 43, 0.7);
}

.public-distribution-metrics span,
.public-distribution-metrics strong {
  display: block;
}

.public-distribution-metrics span {
  color: rgba(178, 189, 208, 0.67);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.public-distribution-metrics strong {
  margin-top: 4px;
  color: #ffffff;
  font-size: 0.72rem;
}

.public-insight-column {
  display: grid;
  gap: 10px;
}

.public-insight-card {
  padding: 16px;
}

.public-insight-card > strong {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
}

.public-insight-card > p {
  margin-top: 8px;
  color: rgba(178, 189, 208, 0.72) !important;
  font-size: 0.76rem !important;
  line-height: 1.55;
}

.public-insight-card.is-status-card {
  border-color: rgba(66, 217, 139, 0.22);
  background:
    linear-gradient(180deg, rgba(8, 31, 35, 0.52), rgba(2, 8, 22, 0.72));
}

.public-insight-list {
  margin-top: 13px;
  display: grid;
}

.public-insight-list div {
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.public-insight-list span {
  color: rgba(178, 189, 208, 0.68);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.public-insight-list strong {
  color: #ffffff;
  font-size: 0.7rem;
  text-align: right;
}

.public-daily-panel {
  margin-top: 10px;
  padding: 16px;
}

.public-daily-panel .public-panel-header > small {
  color: rgba(178, 189, 208, 0.62);
  font-size: 0.65rem;
  font-weight: 800;
}

.public-daily-chart {
  position: relative;
  height: 178px;
  margin-top: 14px;
  padding: 0 8px 22px;
  display: grid;
  grid-template-columns: repeat(12, minmax(22px, 1fr));
  gap: 9px;
  align-items: stretch;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.public-zero-line {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 1px;
  background: rgba(178, 189, 208, 0.22);
}

.public-day-column {
  position: relative;
  height: 100%;
}

.public-day-column i {
  position: absolute;
  left: 50%;
  width: min(22px, 72%);
  height: var(--bar-size);
  border-radius: 6px 6px 2px 2px;
  transform: translateX(-50%);
}

.public-day-column i.is-positive-day {
  bottom: calc(50% - 1px);
  background: linear-gradient(180deg, #66efad, #19b96a);
  box-shadow: 0 0 16px rgba(66, 217, 139, 0.18);
}

.public-day-column i.is-negative-day {
  top: 50%;
  border-radius: 2px 2px 6px 6px;
  background: linear-gradient(180deg, #ff7181, #ca364d);
  box-shadow: 0 0 16px rgba(255, 100, 118, 0.14);
}

.public-day-column small {
  position: absolute;
  left: 50%;
  bottom: -17px;
  transform: translateX(-50%);
  color: rgba(178, 189, 208, 0.54);
  font-size: 0.56rem;
  font-weight: 700;
}

.public-analytics-footnote {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(34, 143, 255, 0.14);
  border-radius: 13px;
  background: rgba(2, 8, 22, 0.58);
  color: rgba(178, 189, 208, 0.7) !important;
  font-size: 0.72rem !important;
  line-height: 1.55;
}

.public-analytics-section .before-after-grid {
  margin-top: 28px;
}

.public-analytics-section .demo-cta-card {
  margin-top: 20px;
}

@media (max-width: 1180px) {
  .analytics-hero-main {
    grid-template-columns: 1fr;
  }

  .analytics-hero-summary {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 14px;
  }

  .analytics-mini-donut {
    margin: 0;
  }

  .public-analytics-main-grid {
    grid-template-columns: 1fr;
  }

  .public-insight-column {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .public-analytics-heading {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .public-analytics-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .public-distribution-row {
    grid-template-columns: auto 1fr;
  }

  .public-distribution-metrics {
    grid-column: 1 / -1;
  }

  .public-daily-chart {
    overflow-x: auto;
    grid-template-columns: repeat(12, minmax(34px, 1fr));
  }
}

@media (max-width: 640px) {
  .analytics-hero-card {
    padding: 16px;
  }

  .analytics-hero-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .analytics-hero-summary {
    grid-template-columns: 1fr;
  }

  .analytics-mini-donut {
    margin: 0 auto;
  }

  .public-analytics-dashboard {
    padding: 10px;
    border-radius: 20px;
  }

  .public-analytics-topbar {
    align-items: flex-start;
  }

  .public-analytics-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .public-metric-card {
    min-height: 104px;
    padding: 13px;
  }

  .public-metric-card > strong {
    font-size: 1.25rem;
  }

  .public-panel-header {
    flex-direction: column;
  }

  .public-end-value {
    width: 100%;
    text-align: left;
  }

  .public-curve-chart {
    height: 260px;
  }

  .public-chart-dates {
    left: 52px;
    font-size: 0.54rem;
  }

  .public-distribution-row {
    grid-template-columns: 1fr;
  }

  .public-trade-donut {
    margin: 0 auto;
  }

  .public-distribution-metrics {
    grid-template-columns: 1fr;
    grid-column: auto;
  }

  .public-insight-column {
    grid-template-columns: 1fr;
  }

  .public-daily-chart {
    grid-template-columns: repeat(12, 34px);
  }
}

/* =========================================================
   Phase 29C-0B.1 – Journal-Seite als echte Produktpräsentation
   Alle Regeln sind auf .journal-showcase-page begrenzt.
   ========================================================= */

.journal-showcase-page {
  --journal-surface: rgba(5, 14, 32, 0.92);
  --journal-surface-soft: rgba(8, 23, 50, 0.78);
  --journal-line: rgba(74, 156, 255, 0.2);
  --journal-line-strong: rgba(57, 185, 255, 0.42);
  --journal-cyan: #35e2ff;
  --journal-blue: #1678ff;
  --journal-green: #56e49a;
  --journal-red: #ff7a91;
  background: #01040b;
}

.journal-showcase-page .site-header {
  border-bottom-color: rgba(53, 226, 255, 0.09);
}

.journal-showcase-hero {
  position: relative;
  min-height: 100svh;
  padding: 142px 30px 72px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 75% 42%, rgba(16, 112, 255, 0.2), transparent 34rem),
    radial-gradient(circle at 18% 26%, rgba(53, 226, 255, 0.08), transparent 27rem),
    linear-gradient(135deg, #01040b 0%, #020916 45%, #01030a 100%);
}

.journal-showcase-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -4;
  background-image: url("../assets/images/hero-tech-bg.png");
  background-repeat: no-repeat;
  background-size: 74% auto;
  background-position: 110% 46%;
  opacity: 0.22;
  filter: saturate(1.1) contrast(1.05);
  mask-image: linear-gradient(90deg, transparent 15%, rgba(0, 0, 0, 0.55) 50%, black 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 15%, rgba(0, 0, 0, 0.55) 50%, black 100%);
}

.journal-showcase-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(1, 4, 11, 0.98) 0%, rgba(1, 4, 11, 0.9) 33%, rgba(1, 4, 11, 0.35) 72%, rgba(1, 4, 11, 0.8) 100%),
    linear-gradient(180deg, transparent 55%, #01040b 100%);
}

.journal-hero-grid-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.42;
  background-image:
    linear-gradient(rgba(53, 226, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 226, 255, 0.055) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(circle at 72% 50%, black 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 72% 50%, black 0%, transparent 72%);
}

.journal-hero-orbit {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(53, 226, 255, 0.12);
  border-radius: 50%;
  pointer-events: none;
}

.journal-hero-orbit::before,
.journal-hero-orbit::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--journal-cyan);
  box-shadow: 0 0 22px rgba(53, 226, 255, 0.9);
}

.journal-hero-orbit-one {
  width: 680px;
  height: 680px;
  top: 8%;
  right: -210px;
  transform: rotate(-12deg);
}

.journal-hero-orbit-one::before {
  top: 18%;
  left: 9%;
}

.journal-hero-orbit-one::after {
  right: 12%;
  bottom: 20%;
}

.journal-hero-orbit-two {
  width: 420px;
  height: 420px;
  right: 14%;
  bottom: -210px;
  transform: rotate(22deg);
}

.journal-hero-orbit-two::before {
  top: 28%;
  right: 2%;
}

.journal-hero-orbit-two::after {
  left: 12%;
  bottom: 15%;
}

.journal-showcase-hero-inner {
  width: min(100%, 1480px);
  min-height: calc(100svh - 214px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(410px, 0.72fr) minmax(690px, 1.28fr);
  gap: clamp(54px, 6vw, 104px);
  align-items: center;
}

.journal-showcase-copy {
  position: relative;
  z-index: 3;
  max-width: 610px;
}

.journal-beta-eyebrow {
  margin-bottom: 26px;
  background: rgba(4, 19, 45, 0.72);
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.22);
}

.journal-showcase-title {
  max-width: 650px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(3.25rem, 5.2vw, 5.75rem);
  font-weight: 800;
  line-height: 0.97;
  letter-spacing: -0.085em;
}

.journal-showcase-title em {
  color: transparent;
  font-style: normal;
  background: linear-gradient(100deg, #ffffff 0%, #73c6ff 35%, #22e4ff 72%, #0b73ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: 0 0 42px rgba(34, 228, 255, 0.12);
}

.journal-showcase-lead {
  max-width: 590px;
  margin-top: 26px;
  color: rgba(226, 235, 248, 0.78);
  font-size: clamp(1rem, 1.12vw, 1.12rem);
  line-height: 1.75;
}

.journal-showcase-actions {
  margin-top: 32px;
}

.journal-proof-row {
  margin-top: 32px;
  padding-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  border-top: 1px solid rgba(53, 226, 255, 0.13);
}

.journal-proof-row div {
  min-width: 0;
}

.journal-proof-row strong,
.journal-proof-row span {
  display: block;
}

.journal-proof-row strong {
  color: #ffffff;
  font-size: 0.82rem;
}

.journal-proof-row span {
  margin-top: 4px;
  color: rgba(178, 196, 221, 0.66);
  font-size: 0.74rem;
  line-height: 1.35;
}

.journal-hero-product {
  position: relative;
  z-index: 2;
  width: 100%;
  perspective: 1400px;
}

.journal-app-window {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(74, 156, 255, 0.26);
  border-radius: 26px;
  background:
    radial-gradient(circle at 78% 0%, rgba(11, 115, 255, 0.18), transparent 26rem),
    linear-gradient(180deg, rgba(7, 18, 40, 0.98), rgba(2, 8, 20, 0.99));
  box-shadow:
    0 42px 110px rgba(0, 0, 0, 0.52),
    0 0 80px rgba(11, 115, 255, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.journal-app-window::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.05), transparent 24%);
}

.journal-app-window-hero {
  transform: rotateY(-5deg) rotateX(1.8deg);
  transform-origin: center;
}

.journal-app-topbar {
  position: relative;
  z-index: 1;
  min-height: 72px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid rgba(74, 156, 255, 0.16);
  background: rgba(2, 8, 20, 0.68);
}

.journal-app-brandline {
  display: flex;
  align-items: center;
  gap: 12px;
}

.journal-app-brandline img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.journal-app-brandline strong,
.journal-app-brandline span {
  display: block;
}

.journal-app-brandline strong {
  color: #ffffff;
  font-size: 0.9rem;
}

.journal-app-brandline span {
  margin-top: 2px;
  color: rgba(178, 196, 221, 0.64);
  font-size: 0.68rem;
}

.journal-app-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.journal-app-top-actions span,
.journal-app-top-actions b {
  min-height: 32px;
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(74, 156, 255, 0.18);
  border-radius: 9px;
  color: rgba(223, 234, 249, 0.72);
  background: rgba(3, 12, 29, 0.72);
  font-size: 0.68rem;
}

.journal-app-top-actions b {
  border-color: rgba(53, 226, 255, 0.25);
  color: var(--journal-cyan);
}

.journal-app-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 118px 1fr;
  min-height: 530px;
}

.journal-app-sidebar {
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-right: 1px solid rgba(74, 156, 255, 0.12);
  background: rgba(1, 5, 15, 0.55);
}

.journal-app-sidebar span {
  min-height: 38px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 9px;
  color: rgba(166, 184, 211, 0.66);
  font-size: 0.66rem;
  font-weight: 700;
}

.journal-app-sidebar span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(74, 156, 255, 0.38);
}

.journal-app-sidebar span.is-current {
  color: #ffffff;
  background: linear-gradient(90deg, rgba(11, 115, 255, 0.22), rgba(11, 115, 255, 0.04));
  box-shadow: inset 2px 0 0 var(--journal-cyan);
}

.journal-app-sidebar span.is-current i {
  background: var(--journal-cyan);
  box-shadow: 0 0 10px rgba(53, 226, 255, 0.8);
}

.journal-app-content {
  min-width: 0;
  padding: 18px;
}

.journal-app-section-head,
.journal-app-card-title,
.journal-ui-head,
.journal-showcase-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.journal-app-section-head span,
.journal-app-section-head strong,
.journal-app-card-title span,
.journal-app-card-title strong {
  display: block;
}

.journal-app-section-head span {
  color: var(--journal-cyan);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.journal-app-section-head strong {
  margin-top: 3px;
  color: #ffffff;
  font-size: 1.02rem;
}

.journal-app-section-head > b {
  padding: 5px 8px;
  border: 1px solid rgba(53, 226, 255, 0.2);
  border-radius: 999px;
  color: rgba(172, 231, 255, 0.86);
  background: rgba(53, 226, 255, 0.06);
  font-size: 0.56rem;
}

.journal-app-metrics {
  margin-top: 15px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.journal-app-metrics article {
  min-height: 88px;
  padding: 12px;
  border: 1px solid rgba(74, 156, 255, 0.14);
  border-radius: 13px;
  background: rgba(3, 10, 25, 0.7);
}

.journal-app-metrics span,
.journal-app-metrics strong,
.journal-app-metrics small {
  display: block;
}

.journal-app-metrics span {
  color: rgba(172, 190, 218, 0.65);
  font-size: 0.56rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.journal-app-metrics strong {
  margin-top: 7px;
  color: #ffffff;
  font-size: 1.05rem;
}

.journal-app-metrics small {
  margin-top: 4px;
  color: rgba(172, 190, 218, 0.52);
  font-size: 0.53rem;
}

.journal-app-metrics article.is-up strong {
  color: var(--journal-green);
}

.journal-app-main-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 152px;
  gap: 10px;
}

.journal-app-chart-card,
.journal-app-insight-card,
.journal-app-donut-card,
.journal-app-review-card {
  border: 1px solid rgba(74, 156, 255, 0.14);
  border-radius: 14px;
  background: rgba(3, 10, 25, 0.69);
}

.journal-app-chart-card {
  padding: 13px;
}

.journal-app-card-title strong {
  color: #ffffff;
  font-size: 0.72rem;
}

.journal-app-card-title span {
  margin-top: 3px;
  color: rgba(172, 190, 218, 0.58);
  font-size: 0.54rem;
}

.journal-app-card-title > b {
  color: var(--journal-green);
  font-size: 0.7rem;
}

.journal-app-chart {
  height: 205px;
  margin-top: 9px;
  padding: 8px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background:
    radial-gradient(circle at 70% 25%, rgba(53, 226, 255, 0.06), transparent 12rem),
    rgba(1, 6, 17, 0.7);
}

.journal-app-chart svg,
.journal-large-chart svg {
  width: 100%;
  height: calc(100% - 20px);
  overflow: visible;
}

.journal-chart-grid line {
  stroke: rgba(140, 181, 227, 0.12);
  stroke-width: 1;
}

.journal-chart-area {
  fill: url(#journalHeroArea);
}

.journal-large-chart .journal-chart-area {
  fill: url(#journalLargeArea);
}

.journal-chart-line {
  fill: none;
  stroke: var(--journal-cyan);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(53, 226, 255, 0.44));
}

.journal-chart-points circle {
  fill: var(--journal-blue);
  stroke: #ffffff;
  stroke-width: 2;
}

.journal-chart-axis,
.journal-large-chart-labels {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: rgba(165, 184, 211, 0.46);
  font-size: 0.48rem;
}

.journal-app-insight-card {
  padding: 13px;
}

.journal-app-insight-label {
  color: var(--journal-cyan);
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.journal-app-insight-card > strong {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-size: 0.86rem;
}

.journal-app-insight-card > p {
  margin-top: 8px;
  color: rgba(176, 194, 220, 0.65);
  font-size: 0.58rem;
  line-height: 1.55;
}

.journal-app-insight-card > div {
  padding: 9px 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(181, 199, 224, 0.7);
  font-size: 0.58rem;
}

.journal-app-insight-card > div:last-child {
  border-bottom: 0;
}

.is-positive-text {
  color: var(--journal-green) !important;
}

.is-negative-text {
  color: var(--journal-red) !important;
}

.journal-app-bottom-row {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 0.88fr;
  gap: 10px;
}

.journal-app-donut-card,
.journal-app-review-card {
  min-height: 82px;
  padding: 11px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.journal-app-donut {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--journal-green) 0 57%, var(--journal-red) 57% 93%, rgba(148, 170, 204, 0.35) 93% 100%);
  position: relative;
}

.journal-app-donut::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: inherit;
  background: #071022;
}

.journal-app-donut span {
  position: relative;
  z-index: 1;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
}

.journal-app-donut small {
  display: block;
  color: rgba(184, 201, 226, 0.58);
  font-size: 0.38rem;
}

.journal-app-donut-card > div:last-child strong,
.journal-app-donut-card > div:last-child span,
.journal-app-review-card span,
.journal-app-review-card strong,
.journal-app-review-card small {
  display: block;
}

.journal-app-donut-card > div:last-child strong,
.journal-app-review-card strong {
  color: #ffffff;
  font-size: 0.68rem;
}

.journal-app-donut-card > div:last-child span,
.journal-app-review-card span,
.journal-app-review-card small {
  margin-top: 4px;
  color: rgba(178, 196, 221, 0.56);
  font-size: 0.5rem;
}

.journal-app-review-card {
  display: block;
}

.journal-app-review-card span {
  margin-top: 0;
  color: var(--journal-cyan);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.journal-app-review-card strong {
  margin-top: 8px;
}

.journal-floating-stat {
  position: absolute;
  z-index: 4;
  min-width: 160px;
  padding: 15px 17px;
  border: 1px solid rgba(53, 226, 255, 0.24);
  border-radius: 16px;
  background: rgba(3, 11, 27, 0.9);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.42), 0 0 32px rgba(11, 115, 255, 0.12);
  backdrop-filter: blur(12px);
}

.journal-floating-stat span,
.journal-floating-stat strong,
.journal-floating-stat small {
  display: block;
}

.journal-floating-stat span {
  color: rgba(176, 196, 224, 0.66);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.journal-floating-stat strong {
  margin-top: 5px;
  color: #ffffff;
  font-size: 1.18rem;
}

.journal-floating-stat small {
  margin-top: 3px;
  color: var(--journal-cyan);
  font-size: 0.58rem;
}

.journal-floating-stat-left {
  left: -48px;
  bottom: 78px;
}

.journal-floating-stat-right {
  right: -36px;
  top: 104px;
}

.journal-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 23px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: rgba(191, 208, 230, 0.5);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}

.journal-scroll-cue b {
  color: var(--journal-cyan);
  font-size: 1rem;
}

.journal-product-stage,
.journal-workflow-section,
.journal-capabilities-section,
.journal-beta-trust-section,
.journal-faq-section,
.journal-final-cta-section {
  position: relative;
  padding: 104px 30px;
  border-top: 1px solid rgba(74, 156, 255, 0.12);
  overflow: hidden;
}

.journal-product-stage,
.journal-capabilities-section,
.journal-faq-section {
  background:
    radial-gradient(circle at 82% 12%, rgba(11, 115, 255, 0.08), transparent 28rem),
    #01040b;
}

.journal-workflow-section,
.journal-beta-trust-section {
  background:
    radial-gradient(circle at 14% 24%, rgba(53, 226, 255, 0.06), transparent 28rem),
    #020815;
}

.journal-stage-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.72fr);
  gap: clamp(34px, 6vw, 90px);
  align-items: end;
  margin-bottom: 50px;
}

.journal-stage-heading h2,
.journal-centered-heading h2,
.journal-beta-trust-copy h2,
.journal-faq-grid h2,
.journal-final-cta-inner h2 {
  max-width: 800px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.25rem, 4vw, 3.9rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.065em;
}

.journal-stage-heading > p,
.journal-centered-heading > p,
.journal-beta-trust-copy > p,
.journal-faq-grid > div > p,
.journal-final-cta-inner > p {
  color: rgba(184, 201, 225, 0.74);
  line-height: 1.7;
}

.journal-showcase-frame {
  overflow: hidden;
  border: 1px solid rgba(74, 156, 255, 0.26);
  border-radius: 28px;
  background: #030a18;
  box-shadow:
    0 46px 110px rgba(0, 0, 0, 0.43),
    0 0 80px rgba(11, 115, 255, 0.08);
}

.journal-showcase-toolbar {
  min-height: 64px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 130px 1fr 130px;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid rgba(74, 156, 255, 0.14);
  background: rgba(2, 8, 20, 0.92);
}

.journal-window-dots {
  display: flex;
  gap: 7px;
}

.journal-window-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(126, 151, 188, 0.38);
}

.journal-window-dots i:nth-child(2) {
  background: rgba(11, 115, 255, 0.62);
}

.journal-window-dots i:nth-child(3) {
  background: rgba(53, 226, 255, 0.64);
}

.journal-showcase-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.journal-showcase-tabs span,
.journal-showcase-filter {
  min-height: 34px;
  padding: 8px 13px;
  display: inline-flex;
  align-items: center;
  border-radius: 9px;
  color: rgba(182, 200, 225, 0.6);
  font-size: 0.7rem;
  font-weight: 700;
}

.journal-showcase-tabs span.is-active {
  color: #ffffff;
  background: rgba(11, 115, 255, 0.15);
  box-shadow: inset 0 -2px 0 var(--journal-cyan);
}

.journal-showcase-filter {
  justify-self: end;
  border: 1px solid rgba(74, 156, 255, 0.18);
  background: rgba(3, 12, 29, 0.7);
}

.journal-showcase-screen {
  padding: clamp(20px, 3vw, 36px);
  background:
    linear-gradient(rgba(74, 156, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 156, 255, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 78% 0%, rgba(11, 115, 255, 0.09), transparent 25rem),
    #020816;
  background-size: 54px 54px, 54px 54px, auto, auto;
}

.journal-showcase-metric-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.journal-showcase-metric-row article,
.journal-showcase-primary-chart,
.journal-result-card,
.journal-highlight-card,
.journal-trade-table-card {
  border: 1px solid rgba(74, 156, 255, 0.15);
  border-radius: 18px;
  background: rgba(3, 11, 27, 0.8);
}

.journal-showcase-metric-row article {
  min-height: 126px;
  padding: 19px;
}

.journal-showcase-metric-row span,
.journal-showcase-metric-row strong,
.journal-showcase-metric-row small {
  display: block;
}

.journal-showcase-metric-row span {
  color: rgba(178, 196, 221, 0.62);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.journal-showcase-metric-row strong {
  margin-top: 11px;
  color: #ffffff;
  font-size: clamp(1.35rem, 2vw, 2rem);
}

.journal-showcase-metric-row small {
  margin-top: 6px;
  color: rgba(178, 196, 221, 0.48);
  font-size: 0.68rem;
}

.journal-showcase-content-grid {
  margin-top: 15px;
  display: grid;
  grid-template-columns: minmax(0, 1.58fr) minmax(270px, 0.62fr);
  gap: 15px;
}

.journal-showcase-primary-chart {
  padding: 22px;
}

.journal-showcase-card-head span,
.journal-showcase-card-head strong {
  display: block;
}

.journal-showcase-card-head span {
  color: var(--journal-cyan);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.11em;
}

.journal-showcase-card-head strong {
  margin-top: 5px;
  color: #ffffff;
  font-size: 1.03rem;
}

.journal-showcase-card-head > b {
  color: rgba(183, 203, 231, 0.55);
  font-size: 0.7rem;
}

.journal-showcase-periods {
  display: flex;
  gap: 4px;
}

.journal-showcase-periods span {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(74, 156, 255, 0.14);
  border-radius: 7px;
  color: rgba(180, 199, 225, 0.58);
  background: rgba(2, 8, 20, 0.6);
}

.journal-showcase-periods span.is-active {
  border-color: rgba(53, 226, 255, 0.3);
  color: var(--journal-cyan);
  background: rgba(53, 226, 255, 0.08);
}

.journal-large-chart {
  height: 360px;
  margin-top: 20px;
  padding: 8px 10px 4px;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(1, 6, 17, 0.55);
}

.journal-large-chart svg {
  height: calc(100% - 24px);
}

.journal-large-chart .journal-chart-line {
  stroke-width: 4.5;
}

.journal-showcase-side-stack {
  display: grid;
  gap: 15px;
}

.journal-result-card,
.journal-highlight-card {
  padding: 20px;
}

.journal-result-card-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.journal-result-card-head span,
.journal-result-card-head strong {
  color: rgba(189, 207, 232, 0.66);
  font-size: 0.7rem;
}

.journal-result-card-head strong {
  color: #ffffff;
}

.journal-result-donut {
  width: 150px;
  height: 150px;
  margin: 20px auto;
  display: grid;
  place-items: center;
  position: relative;
  border-radius: 50%;
  background: conic-gradient(var(--journal-green) 0 57%, var(--journal-red) 57% 93%, rgba(148, 170, 204, 0.35) 93% 100%);
}

.journal-result-donut::before {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: inherit;
  background: #071022;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.34);
}

.journal-result-donut span {
  position: relative;
  z-index: 1;
  color: #ffffff;
  font-size: 2.1rem;
  font-weight: 800;
  text-align: center;
}

.journal-result-donut small {
  display: block;
  margin-top: -2px;
  color: rgba(183, 201, 226, 0.56);
  font-size: 0.58rem;
  font-weight: 600;
}

.journal-result-legend {
  display: grid;
  gap: 9px;
}

.journal-result-legend span {
  display: grid;
  grid-template-columns: 9px 1fr auto;
  align-items: center;
  gap: 8px;
  color: rgba(183, 201, 226, 0.64);
  font-size: 0.69rem;
}

.journal-result-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.journal-result-legend i.is-win {
  background: var(--journal-green);
}

.journal-result-legend i.is-loss {
  background: var(--journal-red);
}

.journal-result-legend i.is-flat {
  background: rgba(148, 170, 204, 0.62);
}

.journal-result-legend b {
  color: #ffffff;
}

.journal-highlight-card > span {
  color: var(--journal-cyan);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.journal-highlight-card > strong {
  display: block;
  margin-top: 9px;
  color: #ffffff;
  font-size: 1.08rem;
}

.journal-highlight-card > p {
  margin-top: 10px;
  color: rgba(183, 201, 226, 0.62);
  font-size: 0.76rem;
  line-height: 1.6;
}

.journal-highlight-card > div {
  padding: 11px 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(183, 201, 226, 0.62);
  font-size: 0.72rem;
}

.journal-highlight-card > div:last-child {
  border-bottom: 0;
}

.journal-highlight-card b {
  color: #ffffff;
}

.journal-trade-table-card {
  margin-top: 15px;
  padding: 20px;
}

.journal-trade-table {
  margin-top: 17px;
  overflow: hidden;
  border: 1px solid rgba(74, 156, 255, 0.12);
  border-radius: 13px;
}

.journal-trade-table-row {
  min-height: 51px;
  padding: 0 15px;
  display: grid;
  grid-template-columns: 1fr 1.15fr 0.75fr 0.65fr 0.75fr 1fr;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  color: rgba(189, 206, 231, 0.68);
  font-size: 0.72rem;
}

.journal-trade-table-row:last-child {
  border-bottom: 0;
}

.journal-trade-table-row.is-head {
  min-height: 42px;
  color: rgba(172, 191, 219, 0.5);
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.journal-trade-table-row strong {
  color: #ffffff;
}

.journal-trade-table-row i {
  width: fit-content;
  padding: 5px 8px;
  border-radius: 999px;
  font-style: normal;
  font-size: 0.59rem;
  font-weight: 800;
}

.journal-trade-table-row i.is-complete {
  color: var(--journal-green);
  background: rgba(86, 228, 154, 0.08);
}

.journal-trade-table-row i.is-open {
  color: #ffd166;
  background: rgba(255, 209, 102, 0.08);
}

.journal-example-note {
  max-width: 860px;
  margin: 22px auto 0;
  color: rgba(174, 193, 220, 0.55);
  font-size: 0.78rem;
  line-height: 1.55;
  text-align: center;
}

.journal-centered-heading {
  max-width: 850px;
  margin: 0 auto 52px;
  text-align: center;
}

.journal-centered-heading h2,
.journal-centered-heading > p {
  margin-left: auto;
  margin-right: auto;
}

.journal-centered-heading > p {
  margin-top: 16px;
}

.journal-workflow-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.journal-workflow-line::before {
  content: "";
  position: absolute;
  top: 58px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(53, 226, 255, 0.45), transparent);
}

.journal-workflow-step {
  position: relative;
  z-index: 1;
  padding: 0 10px;
  text-align: center;
}

.journal-workflow-step > span {
  position: absolute;
  top: 11px;
  right: calc(50% - 44px);
  color: rgba(53, 226, 255, 0.48);
  font-size: 0.58rem;
  font-weight: 800;
}

.journal-workflow-icon {
  width: 76px;
  height: 76px;
  margin: 20px auto 20px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(53, 226, 255, 0.24);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 20%, rgba(53, 226, 255, 0.13), transparent 70%),
    rgba(3, 12, 29, 0.9);
  color: var(--journal-cyan);
  box-shadow: 0 17px 44px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.journal-workflow-icon svg {
  width: 30px;
  height: 30px;
}

.journal-workflow-step h3 {
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
}

.journal-workflow-step p {
  margin-top: 9px;
  color: rgba(180, 199, 225, 0.62);
  font-size: 0.82rem;
  line-height: 1.55;
}

.journal-capabilities-heading {
  margin-bottom: 56px;
}

.journal-capability-stack {
  display: grid;
  gap: 32px;
}

.journal-capability-panel {
  min-height: 500px;
  padding: clamp(28px, 5vw, 66px);
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(420px, 1.1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(74, 156, 255, 0.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 80% 25%, rgba(11, 115, 255, 0.13), transparent 25rem),
    linear-gradient(135deg, rgba(7, 19, 42, 0.86), rgba(2, 8, 20, 0.92));
  box-shadow: 0 30px 74px rgba(0, 0, 0, 0.26);
}

.journal-capability-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(74, 156, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 156, 255, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, transparent, black);
  -webkit-mask-image: linear-gradient(90deg, transparent, black);
}

.journal-capability-panel.is-reversed {
  grid-template-columns: minmax(420px, 1.1fr) minmax(0, 0.78fr);
}

.journal-capability-panel.is-reversed .journal-capability-copy {
  order: 2;
}

.journal-capability-panel.is-reversed .journal-capability-ui {
  order: 1;
}

.journal-capability-copy,
.journal-capability-ui {
  position: relative;
  z-index: 1;
}

.journal-capability-number {
  color: rgba(53, 226, 255, 0.28);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1;
}

.journal-capability-copy .section-label {
  margin-top: 16px;
}

.journal-capability-copy h3 {
  max-width: 570px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.055em;
}

.journal-capability-copy > p:not(.section-label) {
  margin-top: 18px;
  color: rgba(183, 201, 226, 0.7);
  line-height: 1.7;
}

.journal-capability-copy ul {
  margin-top: 24px;
  display: grid;
  gap: 11px;
  list-style: none;
}

.journal-capability-copy li {
  position: relative;
  padding-left: 27px;
  color: rgba(222, 233, 248, 0.8);
  font-size: 0.92rem;
}

.journal-capability-copy li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--journal-cyan);
}

.journal-capability-ui {
  min-height: 350px;
  padding: 24px;
  border: 1px solid rgba(74, 156, 255, 0.2);
  border-radius: 22px;
  background: rgba(2, 8, 20, 0.92);
  box-shadow: 0 28px 74px rgba(0, 0, 0, 0.32);
}

.journal-ui-head {
  padding-bottom: 17px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.journal-ui-head > span {
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
}

.journal-ui-head > b {
  padding: 5px 9px;
  border: 1px solid rgba(53, 226, 255, 0.22);
  border-radius: 999px;
  color: var(--journal-cyan);
  background: rgba(53, 226, 255, 0.06);
  font-size: 0.65rem;
}

.journal-form-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.journal-form-grid label {
  min-height: 74px;
  padding: 13px 15px;
  border: 1px solid rgba(74, 156, 255, 0.14);
  border-radius: 12px;
  background: rgba(7, 17, 36, 0.72);
}

.journal-form-grid span,
.journal-form-grid strong {
  display: block;
}

.journal-form-grid span {
  color: rgba(178, 196, 221, 0.56);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.journal-form-grid strong {
  margin-top: 7px;
  color: #ffffff;
  font-size: 0.94rem;
}

.journal-ui-action-row {
  margin-top: 15px;
  padding: 13px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-radius: 12px;
  background: rgba(11, 115, 255, 0.08);
  color: rgba(185, 204, 230, 0.7);
  font-size: 0.78rem;
}

.journal-ui-action-row b {
  padding: 8px 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0b73ff, #0063ff);
  color: #ffffff;
  font-size: 0.72rem;
}

.journal-review-score-row {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.journal-review-score-row div,
.journal-mini-stat-grid div {
  padding: 14px;
  border: 1px solid rgba(74, 156, 255, 0.14);
  border-radius: 12px;
  background: rgba(7, 17, 36, 0.7);
}

.journal-review-score-row span,
.journal-review-score-row strong,
.journal-mini-stat-grid span,
.journal-mini-stat-grid strong {
  display: block;
}

.journal-review-score-row span,
.journal-mini-stat-grid span {
  color: rgba(178, 196, 221, 0.55);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.journal-review-score-row strong,
.journal-mini-stat-grid strong {
  margin-top: 7px;
  color: #ffffff;
  font-size: 0.94rem;
}

.journal-review-note {
  margin-top: 15px;
  padding: 16px;
  border: 1px solid rgba(53, 226, 255, 0.14);
  border-radius: 13px;
  background: rgba(53, 226, 255, 0.035);
}

.journal-review-note span {
  color: var(--journal-cyan);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.journal-review-note p {
  margin-top: 8px;
  color: rgba(211, 225, 243, 0.76);
  font-size: 0.82rem;
  line-height: 1.6;
}

.journal-review-tags {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.journal-review-tags span {
  padding: 6px 9px;
  border: 1px solid rgba(74, 156, 255, 0.16);
  border-radius: 999px;
  color: rgba(183, 202, 228, 0.68);
  background: rgba(7, 17, 36, 0.65);
  font-size: 0.66rem;
}

.journal-mini-bars {
  height: 180px;
  margin-top: 22px;
  padding: 20px 14px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 14px;
  background:
    linear-gradient(rgba(74, 156, 255, 0.06) 1px, transparent 1px),
    rgba(1, 6, 17, 0.58);
  background-size: 100% 38px, auto;
}

.journal-mini-bars i {
  width: 100%;
  height: var(--bar);
  align-self: flex-end;
  border-radius: 6px 6px 2px 2px;
  background: var(--journal-green);
  box-shadow: 0 0 15px rgba(86, 228, 154, 0.14);
}

.journal-mini-bars i[style*="--tone: -1"] {
  align-self: flex-start;
  background: var(--journal-red);
  box-shadow: 0 0 15px rgba(255, 122, 145, 0.12);
}

.journal-mini-stat-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.journal-beta-trust-grid,
.journal-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 0.82fr);
  gap: clamp(40px, 7vw, 100px);
  align-items: center;
}

.journal-beta-trust-copy > p:not(.section-label),
.journal-faq-grid > div > p:not(.section-label) {
  margin-top: 20px;
}

.journal-beta-actions,
.journal-final-actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.journal-beta-status-card {
  padding: 26px;
  border: 1px solid rgba(53, 226, 255, 0.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at 80% 0%, rgba(11, 115, 255, 0.14), transparent 20rem),
    rgba(3, 11, 27, 0.85);
  box-shadow: 0 28px 78px rgba(0, 0, 0, 0.28);
}

.journal-beta-status-head {
  padding-bottom: 19px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.journal-beta-status-head span,
.journal-beta-status-head strong {
  display: block;
}

.journal-beta-status-head span {
  color: var(--journal-cyan);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.journal-beta-status-head strong {
  margin-top: 5px;
  color: #ffffff;
  font-size: 1.25rem;
}

.journal-beta-status-head > b {
  height: fit-content;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--journal-green);
  background: rgba(86, 228, 154, 0.08);
  font-size: 0.67rem;
}

.journal-beta-status-list {
  margin-top: 14px;
}

.journal-beta-status-list div {
  padding: 13px 0;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(181, 200, 226, 0.66);
  font-size: 0.78rem;
}

.journal-beta-status-list strong {
  color: #ffffff;
  text-align: right;
}

.journal-beta-status-card > p {
  margin-top: 18px;
  color: rgba(181, 200, 226, 0.58);
  font-size: 0.76rem;
  line-height: 1.6;
}

.journal-compact-faq {
  gap: 10px;
}

.journal-compact-faq details {
  border-color: rgba(74, 156, 255, 0.16);
  background: rgba(3, 11, 27, 0.7);
}

.journal-final-cta-section {
  min-height: 560px;
  display: flex;
  align-items: center;
  text-align: center;
  background: #01040b;
}

.journal-final-cta-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 40%, rgba(11, 115, 255, 0.22), transparent 30rem),
    linear-gradient(rgba(53, 226, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 226, 255, 0.04) 1px, transparent 1px);
  background-size: auto, 64px 64px, 64px 64px;
  mask-image: radial-gradient(circle at center, black, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at center, black, transparent 72%);
}

.journal-final-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}

.journal-final-cta-inner h2,
.journal-final-cta-inner > p {
  margin-left: auto;
  margin-right: auto;
}

.journal-final-cta-inner > p {
  max-width: 690px;
  margin-top: 20px;
}

.journal-final-actions {
  justify-content: center;
}

@media (max-width: 1320px) {
  .journal-showcase-hero-inner {
    grid-template-columns: minmax(370px, 0.72fr) minmax(600px, 1.22fr);
    gap: 46px;
  }

  .journal-showcase-title {
    font-size: clamp(3.15rem, 5vw, 5rem);
  }

  .journal-floating-stat-left {
    left: -20px;
  }

  .journal-floating-stat-right {
    right: -10px;
  }
}

@media (max-width: 1160px) {
  .journal-showcase-hero {
    min-height: auto;
    padding-top: 132px;
  }

  .journal-showcase-hero-inner {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .journal-showcase-copy {
    max-width: 780px;
  }

  .journal-showcase-title {
    max-width: 820px;
  }

  .journal-showcase-lead {
    max-width: 720px;
  }

  .journal-hero-product {
    max-width: 940px;
    margin: 0 auto;
  }

  .journal-app-window-hero {
    transform: none;
  }

  .journal-floating-stat-left {
    left: 18px;
    bottom: -25px;
  }

  .journal-floating-stat-right {
    right: 18px;
    top: -25px;
  }

  .journal-scroll-cue {
    display: none;
  }

  .journal-workflow-line {
    grid-template-columns: repeat(3, 1fr);
  }

  .journal-workflow-line::before {
    display: none;
  }

  .journal-capability-panel,
  .journal-capability-panel.is-reversed {
    grid-template-columns: 1fr;
  }

  .journal-capability-panel.is-reversed .journal-capability-copy,
  .journal-capability-panel.is-reversed .journal-capability-ui {
    order: initial;
  }
}

@media (max-width: 900px) {
  .journal-showcase-hero,
  .journal-product-stage,
  .journal-workflow-section,
  .journal-capabilities-section,
  .journal-beta-trust-section,
  .journal-faq-section,
  .journal-final-cta-section {
    padding-left: 20px;
    padding-right: 20px;
  }

  .journal-showcase-hero {
    padding-top: 116px;
  }

  .journal-showcase-title {
    font-size: clamp(2.8rem, 9vw, 4.3rem);
  }

  .journal-proof-row {
    grid-template-columns: 1fr;
  }

  .journal-app-body {
    grid-template-columns: 1fr;
  }

  .journal-app-sidebar {
    display: none;
  }

  .journal-app-metrics,
  .journal-showcase-metric-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .journal-app-main-grid,
  .journal-showcase-content-grid,
  .journal-stage-heading,
  .journal-beta-trust-grid,
  .journal-faq-grid {
    grid-template-columns: 1fr;
  }

  .journal-showcase-side-stack {
    grid-template-columns: repeat(2, 1fr);
  }

  .journal-showcase-toolbar {
    grid-template-columns: auto 1fr auto;
  }

  .journal-showcase-tabs span:nth-child(1),
  .journal-showcase-tabs span:nth-child(2) {
    display: none;
  }

  .journal-workflow-line {
    grid-template-columns: repeat(2, 1fr);
  }

  .journal-capability-panel {
    padding: 30px;
  }

  .journal-trade-table {
    overflow-x: auto;
  }

  .journal-trade-table-row {
    min-width: 760px;
  }
}

@media (max-width: 640px) {
  .journal-showcase-hero {
    padding-top: 108px;
    padding-bottom: 54px;
  }

  .journal-showcase-title {
    font-size: clamp(2.45rem, 12vw, 3.65rem);
  }

  .journal-showcase-actions,
  .journal-beta-actions,
  .journal-final-actions {
    flex-direction: column;
  }

  .journal-showcase-actions .button,
  .journal-beta-actions .button,
  .journal-final-actions .button {
    width: 100%;
  }

  .journal-app-top-actions,
  .journal-floating-stat {
    display: none;
  }

  .journal-app-topbar {
    min-height: 62px;
    padding: 12px;
  }

  .journal-app-content {
    padding: 12px;
  }

  .journal-app-metrics {
    gap: 7px;
  }

  .journal-app-metrics article {
    min-height: 80px;
    padding: 10px;
  }

  .journal-app-main-grid,
  .journal-app-bottom-row {
    grid-template-columns: 1fr;
  }

  .journal-app-insight-card {
    display: none;
  }

  .journal-app-chart {
    height: 190px;
  }

  .journal-product-stage,
  .journal-workflow-section,
  .journal-capabilities-section,
  .journal-beta-trust-section,
  .journal-faq-section,
  .journal-final-cta-section {
    padding-top: 74px;
    padding-bottom: 74px;
  }

  .journal-showcase-toolbar {
    grid-template-columns: auto 1fr;
  }

  .journal-showcase-filter {
    display: none;
  }

  .journal-showcase-screen {
    padding: 14px;
  }

  .journal-showcase-metric-row,
  .journal-showcase-side-stack,
  .journal-workflow-line,
  .journal-review-score-row,
  .journal-form-grid,
  .journal-mini-stat-grid {
    grid-template-columns: 1fr;
  }

  .journal-showcase-metric-row article {
    min-height: 102px;
  }

  .journal-large-chart {
    height: 250px;
  }

  .journal-result-donut {
    width: 130px;
    height: 130px;
  }

  .journal-capability-panel {
    min-height: 0;
    padding: 24px;
  }

  .journal-capability-number {
    font-size: 3.4rem;
  }

  .journal-capability-ui {
    min-height: 0;
    padding: 16px;
  }

  .journal-mini-bars {
    height: 150px;
    gap: 5px;
  }

  .journal-beta-status-list div {
    flex-direction: column;
    gap: 4px;
  }

  .journal-beta-status-list strong {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journal-app-window-hero {
    transform: none;
  }
}

/* =========================================================
   Phase 29C-0C1 - Startseite als starke Plattform-Präsentation
   ========================================================= */

.home-showcase-page .page-shell {
  background:
    radial-gradient(circle at 84% 10%, rgba(11, 115, 255, 0.12), transparent 34rem),
    radial-gradient(circle at 14% 42%, rgba(34, 228, 255, 0.045), transparent 30rem),
    #02050d;
}

.home-showcase-hero {
  position: relative;
  min-height: 100svh;
  padding: 132px 30px 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 34%, rgba(11, 115, 255, 0.18), transparent 34rem),
    radial-gradient(circle at 12% 70%, rgba(34, 228, 255, 0.07), transparent 28rem),
    linear-gradient(135deg, #02050d 0%, #030914 52%, #01040b 100%);
}

.home-hero-grid-bg {
  position: absolute;
  inset: 0;
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(34, 143, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 143, 255, 0.055) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.86), transparent 92%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.86), transparent 92%);
}

.home-hero-grid-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/images/hero-tech-bg.png");
  background-repeat: no-repeat;
  background-size: 68% auto;
  background-position: 112% 18%;
  opacity: 0.14;
  filter: saturate(1.12) contrast(1.08);
}

.home-hero-orbit {
  position: absolute;
  border: 1px solid rgba(34, 143, 255, 0.13);
  border-radius: 50%;
  pointer-events: none;
}

.home-hero-orbit-one {
  width: 720px;
  height: 720px;
  right: -260px;
  top: -180px;
}

.home-hero-orbit-two {
  width: 480px;
  height: 480px;
  left: -300px;
  bottom: -220px;
}

.home-hero-glow {
  position: absolute;
  right: 10%;
  top: 18%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(11, 115, 255, 0.12);
  filter: blur(100px);
  pointer-events: none;
}

.home-showcase-hero-inner {
  position: relative;
  z-index: 2;
  width: min(100%, 1480px);
  min-height: calc(100svh - 280px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(620px, 1.24fr);
  gap: clamp(42px, 5vw, 84px);
  align-items: center;
}

.home-showcase-copy {
  max-width: 660px;
}

.home-eyebrow {
  margin-bottom: 24px;
}

.home-showcase-title {
  max-width: 720px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(3.25rem, 5.8vw, 6.1rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.083em;
}

.home-showcase-title em {
  color: #1687ff;
  font-style: normal;
  text-shadow: 0 0 46px rgba(11, 115, 255, 0.22);
}

.home-showcase-lead {
  max-width: 640px;
  margin-top: 26px;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.72;
}

.home-showcase-actions {
  margin-top: 32px;
}

.home-proof-row {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.home-proof-row div {
  min-height: 82px;
  padding: 15px 16px;
  border: 1px solid rgba(34, 143, 255, 0.16);
  border-radius: 16px;
  background: rgba(3, 12, 27, 0.48);
  backdrop-filter: blur(10px);
}

.home-proof-row strong,
.home-proof-row span {
  display: block;
}

.home-proof-row strong {
  color: #ffffff;
  font-size: 0.88rem;
}

.home-proof-row span {
  margin-top: 4px;
  color: rgba(178, 189, 208, 0.82);
  font-size: 0.75rem;
  line-height: 1.45;
}

.home-hero-product {
  position: relative;
  width: 100%;
  max-width: 900px;
  justify-self: end;
}

.home-app-window {
  transform: perspective(1600px) rotateY(-2.5deg) rotateX(1.2deg);
  box-shadow:
    0 56px 120px rgba(0, 0, 0, 0.48),
    0 0 80px rgba(11, 115, 255, 0.12);
}

.home-chart-area {
  fill: url(#homeHeroArea);
}

.home-floating-stat {
  position: absolute;
  z-index: 3;
  min-width: 150px;
  padding: 13px 15px;
  border: 1px solid rgba(34, 228, 255, 0.28);
  border-radius: 15px;
  background: rgba(3, 12, 27, 0.92);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(14px);
}

.home-floating-stat span,
.home-floating-stat strong,
.home-floating-stat small {
  display: block;
}

.home-floating-stat span {
  color: rgba(178, 189, 208, 0.8);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-floating-stat strong {
  margin-top: 3px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.28rem;
}

.home-floating-stat small {
  margin-top: 2px;
  color: #55b8ff;
  font-size: 0.7rem;
}

.home-floating-stat-left {
  left: -26px;
  bottom: 56px;
}

.home-floating-stat-right {
  right: -22px;
  top: 82px;
}

.home-signal-strip {
  position: relative;
  z-index: 3;
  width: min(100%, 1480px);
  margin: 42px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(34, 143, 255, 0.17);
  border-radius: 20px;
  background: rgba(2, 8, 19, 0.74);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(14px);
  overflow: hidden;
}

.home-signal-strip div {
  position: relative;
  padding: 20px 22px 20px 62px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.home-signal-strip div:last-child {
  border-right: 0;
}

.home-signal-strip span {
  position: absolute;
  left: 22px;
  top: 21px;
  color: #22e4ff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
}

.home-signal-strip strong,
.home-signal-strip small {
  display: block;
}

.home-signal-strip strong {
  color: #ffffff;
  font-size: 0.9rem;
}

.home-signal-strip small {
  margin-top: 2px;
  color: rgba(178, 189, 208, 0.78);
  font-size: 0.76rem;
}

.home-platform-section,
.home-workflow-section,
.home-risk-spotlight-section,
.home-trust-section,
.home-final-cta-section {
  position: relative;
  padding: 108px 30px;
  border-top: 1px solid rgba(34, 143, 255, 0.12);
}

.home-platform-section {
  background:
    radial-gradient(circle at 78% 18%, rgba(11, 115, 255, 0.08), transparent 30rem),
    #02050d;
}

.home-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.65fr);
  gap: 54px;
  align-items: end;
  margin-bottom: 42px;
}

.home-section-heading h2,
.home-centered-heading h2,
.home-risk-spotlight-copy h2,
.home-trust-grid h2,
.home-final-cta-inner h2 {
  max-width: 880px;
  margin: 0;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.15rem, 3.8vw, 3.55rem);
  font-weight: 760;
  line-height: 1.03;
  letter-spacing: -0.065em;
}

.home-section-heading > p,
.home-centered-heading > p,
.home-risk-spotlight-copy > p,
.home-trust-grid > div > p,
.home-final-cta-inner > div > p {
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.72;
}

.home-ecosystem-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.26fr) minmax(350px, 0.74fr);
  gap: 22px;
}

.home-ecosystem-journal,
.home-ecosystem-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(34, 143, 255, 0.18);
  border-radius: 28px;
  background:
    linear-gradient(155deg, rgba(10, 27, 58, 0.86), rgba(3, 10, 24, 0.92));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.24);
}

.home-ecosystem-journal {
  min-height: 660px;
  padding: 42px;
  display: grid;
  grid-template-columns: minmax(280px, 0.68fr) minmax(420px, 1.05fr);
  gap: 36px;
  align-items: center;
}

.home-card-glow {
  position: absolute;
  right: -20%;
  top: -10%;
  width: 60%;
  height: 70%;
  border-radius: 50%;
  background: rgba(11, 115, 255, 0.15);
  filter: blur(90px);
  pointer-events: none;
}

.home-ecosystem-copy,
.home-journal-mini-ui,
.home-ecosystem-card > * {
  position: relative;
  z-index: 1;
}

.home-card-kicker {
  color: #22e4ff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-ecosystem-copy h3,
.home-ecosystem-card h3 {
  margin-top: 14px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.05em;
}

.home-ecosystem-copy h3 {
  font-size: clamp(2.1rem, 3vw, 3.1rem);
}

.home-ecosystem-copy p,
.home-ecosystem-card p {
  margin-top: 16px;
  color: rgba(178, 189, 208, 0.9);
  line-height: 1.68;
}

.home-feature-list {
  margin: 24px 0 28px;
  display: grid;
  gap: 12px;
  list-style: none;
}

.home-feature-list li {
  position: relative;
  padding-left: 27px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.92rem;
  font-weight: 700;
}

.home-feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.46em;
  width: 12px;
  height: 7px;
  border-left: 2px solid #22e4ff;
  border-bottom: 2px solid #22e4ff;
  transform: rotate(-45deg);
}

.home-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-weight: 800;
}

.home-inline-link span {
  color: #22e4ff;
  font-size: 1.2rem;
  transition: transform var(--transition);
}

.home-inline-link:hover span {
  transform: translateX(4px);
}

.home-journal-mini-ui {
  border: 1px solid rgba(34, 143, 255, 0.2);
  border-radius: 22px;
  background: rgba(1, 6, 16, 0.78);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.36),
    0 0 50px rgba(11, 115, 255, 0.07);
  overflow: hidden;
}

.home-mini-toolbar {
  min-height: 54px;
  padding: 12px 15px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(5, 18, 40, 0.72);
}

.home-mini-toolbar > span {
  display: flex;
  gap: 5px;
}

.home-mini-toolbar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(34, 228, 255, 0.45);
}

.home-mini-toolbar b {
  color: #ffffff;
  font-size: 0.8rem;
}

.home-mini-toolbar small {
  color: #55b8ff;
  font-weight: 800;
}

.home-mini-metrics {
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.home-mini-metrics div {
  min-height: 74px;
  padding: 11px;
  border: 1px solid rgba(34, 143, 255, 0.13);
  border-radius: 13px;
  background: rgba(3, 12, 27, 0.68);
}

.home-mini-metrics span,
.home-mini-metrics strong {
  display: block;
}

.home-mini-metrics span {
  color: rgba(178, 189, 208, 0.72);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.home-mini-metrics strong {
  margin-top: 6px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.12rem;
}

.home-mini-chart {
  margin: 0 14px 14px;
  padding: 8px;
  border: 1px solid rgba(34, 143, 255, 0.14);
  border-radius: 15px;
  background: rgba(2, 7, 19, 0.58);
}

.home-mini-chart svg {
  width: 100%;
  height: 190px;
}

.home-mini-chart line {
  stroke: rgba(255, 255, 255, 0.055);
  stroke-width: 1;
}

.home-mini-chart path {
  fill: rgba(11, 115, 255, 0.13);
}

.home-mini-chart polyline {
  fill: none;
  stroke: #22e4ff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(34, 228, 255, 0.35));
}

.home-mini-trades {
  padding: 0 14px 14px;
  display: grid;
  gap: 7px;
}

.home-mini-trades div {
  padding: 10px 11px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 11px;
  background: rgba(3, 12, 27, 0.55);
}

.home-mini-trades span {
  min-width: 48px;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.home-mini-trades .is-long {
  color: #58e4b2;
}

.home-mini-trades .is-short {
  color: #ff8b8b;
}

.home-mini-trades b,
.home-mini-trades strong {
  font-size: 0.76rem;
}

.home-mini-trades b {
  color: rgba(255, 255, 255, 0.8);
}

.home-ecosystem-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 22px;
}

.home-ecosystem-card {
  padding: 30px;
}

.home-card-topline {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.home-card-topline b {
  color: #ffffff;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.home-ecosystem-card h3 {
  max-width: 420px;
  font-size: 1.55rem;
  line-height: 1.15;
}

.home-risk-visual {
  margin: 24px 0;
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 22px;
  align-items: center;
}

.home-risk-ring {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#22e4ff 0 68%, rgba(34, 143, 255, 0.13) 68% 100%);
  box-shadow: 0 0 32px rgba(34, 228, 255, 0.12);
}

.home-risk-ring::before {
  content: "";
  grid-area: 1 / 1;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #050d1c;
}

.home-risk-ring span {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  text-align: center;
}

.home-risk-ring small {
  display: block;
  color: rgba(178, 189, 208, 0.72);
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
}

.home-risk-bars {
  display: grid;
  gap: 11px;
}

.home-risk-bars div {
  display: grid;
  grid-template-columns: 1fr 76px;
  gap: 12px;
  align-items: center;
}

.home-risk-bars span {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.74rem;
  font-weight: 700;
}

.home-risk-bars i {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(34, 143, 255, 0.13);
  overflow: hidden;
}

.home-risk-bars i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--bar);
  border-radius: inherit;
  background: linear-gradient(90deg, #0b73ff, #22e4ff);
}

.home-knowledge-topics {
  margin: 26px 0 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.home-knowledge-topics span {
  padding: 8px 11px;
  border: 1px solid rgba(34, 143, 255, 0.17);
  border-radius: 999px;
  background: rgba(3, 12, 27, 0.58);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.72rem;
  font-weight: 800;
}

.home-workflow-section {
  background:
    radial-gradient(circle at 20% 20%, rgba(11, 115, 255, 0.065), transparent 28rem),
    #030914;
}

.home-centered-heading {
  max-width: 850px;
  margin: 0 auto 54px;
  text-align: center;
}

.home-centered-heading h2,
.home-centered-heading p {
  margin-left: auto;
  margin-right: auto;
}

.home-centered-heading > p:last-child {
  max-width: 760px;
  margin-top: 18px;
}

.home-workflow-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.home-workflow-line::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 76px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 228, 255, 0.3), transparent);
}

.home-workflow-line article {
  position: relative;
  z-index: 1;
  min-height: 300px;
  padding: 24px;
  border: 1px solid rgba(34, 143, 255, 0.15);
  border-radius: 22px;
  background: rgba(3, 12, 27, 0.7);
  transition:
    transform var(--transition),
    border-color var(--transition),
    background var(--transition);
}

.home-workflow-line article:hover {
  transform: translateY(-5px);
  border-color: rgba(34, 228, 255, 0.3);
  background: rgba(5, 18, 40, 0.82);
}

.home-workflow-line article > span {
  color: rgba(34, 228, 255, 0.7);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.home-workflow-icon {
  width: 62px;
  height: 62px;
  margin: 20px 0 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(34, 228, 255, 0.28);
  border-radius: 18px;
  background: rgba(34, 228, 255, 0.055);
  color: #22e4ff;
  box-shadow: 0 0 28px rgba(34, 228, 255, 0.08);
}

.home-workflow-icon svg {
  width: 28px;
  height: 28px;
}

.home-workflow-line h3 {
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.02rem;
  letter-spacing: -0.035em;
}

.home-workflow-line p {
  margin-top: 10px;
  color: rgba(178, 189, 208, 0.82);
  font-size: 0.88rem;
  line-height: 1.6;
}

.home-risk-spotlight-section {
  background:
    radial-gradient(circle at 78% 50%, rgba(255, 196, 46, 0.055), transparent 28rem),
    radial-gradient(circle at 65% 30%, rgba(11, 115, 255, 0.08), transparent 34rem),
    #02050d;
}

.home-risk-spotlight-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(520px, 1.05fr);
  gap: clamp(44px, 6vw, 90px);
  align-items: center;
}

.home-risk-spotlight-copy > p {
  max-width: 620px;
  margin-top: 18px;
}

.home-risk-tool-list {
  margin-top: 34px;
  display: grid;
  gap: 9px;
}

.home-risk-tool-list a {
  padding: 15px 17px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 13px;
  align-items: center;
  border: 1px solid rgba(34, 143, 255, 0.14);
  border-radius: 15px;
  background: rgba(3, 12, 27, 0.54);
  transition:
    transform var(--transition),
    border-color var(--transition),
    background var(--transition);
}

.home-risk-tool-list a:hover {
  transform: translateX(5px);
  border-color: rgba(34, 228, 255, 0.28);
  background: rgba(5, 18, 40, 0.76);
}

.home-risk-tool-list span {
  color: #22e4ff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 800;
}

.home-risk-tool-list strong {
  color: #ffffff;
  font-size: 0.88rem;
}

.home-risk-tool-list small {
  color: rgba(178, 189, 208, 0.72);
  font-size: 0.76rem;
}

.home-radar-console {
  overflow: hidden;
  border: 1px solid rgba(34, 143, 255, 0.2);
  border-radius: 28px;
  background:
    radial-gradient(circle at 52% 40%, rgba(255, 196, 46, 0.07), transparent 18rem),
    linear-gradient(150deg, rgba(8, 23, 50, 0.88), rgba(2, 8, 20, 0.96));
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.32);
}

.home-radar-console-head,
.home-radar-console-foot {
  padding: 20px 22px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.home-radar-console-head {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.home-radar-console-head span,
.home-radar-console-head strong,
.home-radar-console-foot span,
.home-radar-console-foot strong {
  display: block;
}

.home-radar-console-head span {
  color: rgba(178, 189, 208, 0.72);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.home-radar-console-head strong {
  margin-top: 4px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.12rem;
}

.home-radar-console-head > b {
  padding: 8px 12px;
  border: 1px solid rgba(255, 205, 72, 0.34);
  border-radius: 999px;
  background: rgba(255, 205, 72, 0.08);
  color: #ffd660;
  font-size: 0.72rem;
}

.home-radar-console-body {
  padding: 30px;
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 34px;
  align-items: center;
}

.home-radar-gauge {
  position: relative;
  height: 210px;
  display: grid;
  place-items: end center;
  overflow: hidden;
}

.home-radar-gauge-track {
  position: absolute;
  left: 50%;
  bottom: -132px;
  width: 290px;
  height: 290px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: conic-gradient(from 225deg, #35d399 0 25%, #ffd660 25% 49%, #ff6f75 49% 75%, rgba(34, 143, 255, 0.08) 75% 100%);
  filter: drop-shadow(0 0 25px rgba(255, 214, 96, 0.08));
}

.home-radar-gauge-track::after {
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  background: #050d1c;
}

.home-radar-gauge-center {
  position: relative;
  z-index: 2;
  margin-bottom: 12px;
  text-align: center;
}

.home-radar-gauge-center span,
.home-radar-gauge-center strong,
.home-radar-gauge-center small {
  display: block;
}

.home-radar-gauge-center span {
  color: rgba(178, 189, 208, 0.68);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.home-radar-gauge-center strong {
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 3.7rem;
  line-height: 1;
}

.home-radar-gauge-center small {
  color: #ffd660;
  font-size: 0.72rem;
  font-weight: 800;
}

.home-radar-needle {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 24px;
  width: 88px;
  height: 3px;
  transform: translateX(-8px) rotate(-22deg);
  transform-origin: 8px center;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.34);
}

.home-radar-needle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: #0b73ff;
}

.home-radar-factors {
  display: grid;
  gap: 14px;
}

.home-radar-factors div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
}

.home-radar-factors span,
.home-radar-factors strong {
  font-size: 0.78rem;
}

.home-radar-factors span {
  color: rgba(178, 189, 208, 0.78);
}

.home-radar-factors strong {
  color: #ffffff;
}

.home-radar-factors i {
  grid-column: 1 / -1;
  position: relative;
  height: 7px;
  border-radius: 999px;
  background: rgba(34, 143, 255, 0.11);
  overflow: hidden;
}

.home-radar-factors i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--factor);
  border-radius: inherit;
  background: linear-gradient(90deg, #0b73ff, #ffd660);
}

.home-radar-console-foot {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(178, 189, 208, 0.72);
  font-size: 0.72rem;
}

.home-radar-console-foot strong {
  color: rgba(255, 255, 255, 0.72);
}

.home-trust-section {
  background:
    radial-gradient(circle at 15% 40%, rgba(34, 228, 255, 0.055), transparent 26rem),
    #030914;
}

.home-trust-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(420px, 0.75fr);
  gap: 70px;
  align-items: center;
}

.home-trust-grid > div > p {
  max-width: 660px;
  margin-top: 18px;
}

.home-trust-status {
  padding: 22px;
  display: grid;
  gap: 9px;
  border: 1px solid rgba(34, 143, 255, 0.17);
  border-radius: 24px;
  background: rgba(3, 12, 27, 0.7);
}

.home-trust-status div {
  padding: 14px 15px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 13px;
  background: rgba(2, 7, 19, 0.46);
}

.home-trust-status span {
  color: rgba(178, 189, 208, 0.72);
  font-size: 0.8rem;
}

.home-trust-status strong {
  color: #ffffff;
  font-size: 0.82rem;
  text-align: right;
}

.home-final-cta-section {
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(5, 18, 40, 0.92), rgba(2, 7, 19, 0.98)),
    #02050d;
}

.home-final-cta-glow {
  position: absolute;
  right: 8%;
  top: -60%;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: rgba(11, 115, 255, 0.18);
  filter: blur(100px);
  pointer-events: none;
}

.home-final-cta-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 64px;
  align-items: center;
}

.home-final-cta-inner h2 {
  max-width: 900px;
  margin-top: 14px;
}

.home-final-cta-inner > div > p {
  max-width: 780px;
  margin-top: 18px;
}

.home-final-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home-final-actions .button {
  min-width: 238px;
}

@media (max-width: 1280px) {
  .home-showcase-hero-inner {
    grid-template-columns: 1fr;
    max-width: 1060px;
  }

  .home-showcase-copy {
    max-width: 780px;
  }

  .home-showcase-title {
    max-width: 820px;
  }

  .home-hero-product {
    max-width: 980px;
    margin: 0 auto;
    justify-self: center;
  }

  .home-app-window {
    transform: none;
  }

  .home-floating-stat-left {
    left: 18px;
    bottom: -24px;
  }

  .home-floating-stat-right {
    right: 18px;
    top: -25px;
  }

  .home-signal-strip {
    max-width: 1060px;
  }

  .home-ecosystem-grid {
    grid-template-columns: 1fr;
  }

  .home-ecosystem-side {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .home-risk-spotlight-grid {
    grid-template-columns: 1fr;
  }

  .home-risk-spotlight-copy {
    max-width: 760px;
  }
}

@media (max-width: 1040px) {
  .home-showcase-hero,
  .home-platform-section,
  .home-workflow-section,
  .home-risk-spotlight-section,
  .home-trust-section,
  .home-final-cta-section {
    padding-left: 22px;
    padding-right: 22px;
  }

  .home-signal-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-signal-strip div:nth-child(2) {
    border-right: 0;
  }

  .home-signal-strip div:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .home-section-heading,
  .home-trust-grid,
  .home-final-cta-inner {
    grid-template-columns: 1fr;
  }

  .home-ecosystem-journal {
    grid-template-columns: 1fr;
  }

  .home-workflow-line {
    grid-template-columns: repeat(3, 1fr);
  }

  .home-workflow-line::before {
    display: none;
  }

  .home-radar-console-body {
    grid-template-columns: 250px 1fr;
  }

  .home-final-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 760px) {
  .home-showcase-hero {
    padding-top: 112px;
    padding-bottom: 24px;
  }

  .home-showcase-title {
    font-size: clamp(2.65rem, 11vw, 4.4rem);
  }

  .home-showcase-actions {
    flex-direction: column;
  }

  .home-showcase-actions .button {
    width: 100%;
  }

  .home-proof-row {
    grid-template-columns: 1fr;
  }

  .home-floating-stat {
    display: none;
  }

  .home-signal-strip {
    grid-template-columns: 1fr;
  }

  .home-signal-strip div {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .home-signal-strip div:last-child {
    border-bottom: 0;
  }

  .home-platform-section,
  .home-workflow-section,
  .home-risk-spotlight-section,
  .home-trust-section,
  .home-final-cta-section {
    padding-top: 78px;
    padding-bottom: 78px;
  }

  .home-section-heading {
    gap: 20px;
  }

  .home-ecosystem-journal,
  .home-ecosystem-card {
    border-radius: 22px;
  }

  .home-ecosystem-journal {
    min-height: 0;
    padding: 26px;
  }

  .home-ecosystem-side {
    grid-template-columns: 1fr;
  }

  .home-mini-metrics {
    grid-template-columns: 1fr;
  }

  .home-mini-chart svg {
    height: 150px;
  }

  .home-risk-visual {
    grid-template-columns: 1fr;
  }

  .home-workflow-line {
    grid-template-columns: 1fr;
  }

  .home-workflow-line article {
    min-height: 0;
  }

  .home-radar-console-body {
    grid-template-columns: 1fr;
  }

  .home-radar-gauge {
    max-width: 310px;
    width: 100%;
    margin: 0 auto;
  }

  .home-radar-console-head,
  .home-radar-console-foot {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-risk-tool-list a {
    grid-template-columns: 30px 1fr;
  }

  .home-risk-tool-list small {
    grid-column: 2;
  }

  .home-trust-grid {
    gap: 38px;
  }

  .home-trust-status div {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .home-trust-status strong {
    text-align: left;
  }

  .home-final-actions {
    flex-direction: column;
  }

  .home-final-actions .button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .home-showcase-title {
    font-size: clamp(2.35rem, 12vw, 3.5rem);
  }

  .home-showcase-title br {
    display: none;
  }

  .home-signal-strip div {
    padding-left: 54px;
  }

  .home-signal-strip span {
    left: 18px;
  }

  .home-ecosystem-journal,
  .home-ecosystem-card,
  .home-radar-console-body {
    padding: 20px;
  }

  .home-mini-trades div {
    grid-template-columns: auto 1fr;
  }

  .home-mini-trades strong {
    grid-column: 2;
  }

  .home-risk-bars div {
    grid-template-columns: 1fr;
  }

  .home-risk-bars i {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-app-window {
    transform: none;
  }

  .home-workflow-line article,
  .home-risk-tool-list a,
  .home-inline-link span {
    transition: none;
  }
}

/* =========================================================
   Phase 29C-0C1.1 - Hero-Grössen und Bull/Bear-Marktvisual
   ========================================================= */

.home-showcase-hero {
  min-height: auto;
  padding-top: 116px;
  padding-bottom: 24px;
}

.home-showcase-hero-inner {
  width: min(100%, 1360px);
  min-height: 566px;
  grid-template-columns: minmax(400px, 0.86fr) minmax(520px, 1.14fr);
  gap: clamp(30px, 3.6vw, 58px);
}

.home-showcase-copy {
  max-width: 590px;
}

.home-eyebrow {
  margin-bottom: 18px;
}

.home-showcase-title {
  max-width: 650px;
  font-size: clamp(3rem, 4.75vw, 5.15rem);
  line-height: 0.99;
}

.home-showcase-lead {
  max-width: 570px;
  margin-top: 20px;
  font-size: clamp(0.98rem, 1.08vw, 1.07rem);
  line-height: 1.65;
}

.home-showcase-actions {
  margin-top: 25px;
}

.home-proof-row {
  margin-top: 26px;
  gap: 10px;
}

.home-proof-row div {
  min-height: 72px;
  padding: 12px 13px;
  border-radius: 14px;
}

.home-proof-row strong {
  font-size: 0.82rem;
}

.home-proof-row span {
  font-size: 0.7rem;
}

.home-hero-product {
  max-width: 760px;
}

.home-app-window {
  transform: perspective(1600px) rotateY(-2deg) rotateX(0.8deg);
}

.home-app-window .journal-app-topbar {
  min-height: 60px;
  padding: 11px 15px;
}

.home-app-window .journal-app-brandline img {
  width: 30px;
  height: 30px;
}

.home-app-window .journal-app-body {
  grid-template-columns: 102px 1fr;
  min-height: 444px;
}

.home-app-window .journal-app-sidebar {
  padding: 15px 10px;
  gap: 5px;
}

.home-app-window .journal-app-sidebar span {
  min-height: 32px;
  padding: 8px;
  font-size: 0.6rem;
}

.home-app-window .journal-app-content {
  padding: 14px;
}

.home-app-window .journal-app-section-head strong {
  font-size: 0.92rem;
}

.home-app-window .journal-app-metrics {
  margin-top: 11px;
  gap: 7px;
}

.home-app-window .journal-app-metrics article {
  min-height: 70px;
  padding: 9px 10px;
  border-radius: 11px;
}

.home-app-window .journal-app-metrics strong {
  margin-top: 5px;
  font-size: 0.94rem;
}

.home-app-window .journal-app-main-grid {
  margin-top: 8px;
  grid-template-columns: minmax(0, 1fr) 136px;
  gap: 8px;
}

.home-app-window .journal-app-chart-card,
.home-app-window .journal-app-insight-card {
  border-radius: 12px;
}

.home-app-window .journal-app-chart-card,
.home-app-window .journal-app-insight-card {
  padding: 10px;
}

.home-app-window .journal-app-chart {
  height: 150px;
  margin-top: 7px;
}

.home-app-window .journal-app-bottom-row {
  margin-top: 8px;
  gap: 8px;
}

.home-app-window .journal-app-donut-card,
.home-app-window .journal-app-review-card {
  min-height: 68px;
  padding: 9px;
}

.home-app-window .journal-app-donut {
  width: 46px;
  height: 46px;
}

.home-floating-stat {
  min-width: 138px;
  padding: 11px 13px;
}

.home-floating-stat-left {
  left: -16px;
  bottom: 38px;
}

.home-floating-stat-right {
  right: -14px;
  top: 62px;
}

.home-signal-strip {
  width: min(100%, 1360px);
  margin-top: 26px;
  border-radius: 18px;
}

.home-signal-strip div {
  padding-top: 16px;
  padding-bottom: 16px;
}

.home-market-tension {
  position: absolute;
  z-index: 1;
  top: 72px;
  right: 3.5%;
  width: min(52vw, 760px);
  pointer-events: none;
  opacity: 0.68;
  filter: saturate(1.05);
}

.home-market-tension::before {
  content: "";
  position: absolute;
  inset: 18% 12% 2%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(11, 115, 255, 0.12), transparent 68%);
  filter: blur(30px);
}

.home-market-tension svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  overflow: visible;
}

.market-animal-fill {
  fill: transparent;
}

.market-bear .market-animal-fill {
  fill: url(#marketBearFill);
}

.market-bull .market-animal-fill {
  fill: url(#marketBullFill);
}

.market-animal-outline,
.market-animal-detail,
.market-animal-nose {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.market-animal-outline {
  stroke-width: 2.2;
}

.market-animal-detail {
  stroke-width: 1.5;
}

.market-animal-nose {
  stroke-width: 1.4;
}

.market-bear .market-animal-outline,
.market-bear .market-animal-detail,
.market-bear .market-animal-nose {
  stroke: rgba(255, 113, 129, 0.24);
}

.market-bull .market-animal-outline,
.market-bull .market-animal-detail,
.market-bull .market-animal-nose {
  stroke: rgba(34, 228, 255, 0.3);
}

.market-animal-eye {
  fill: rgba(238, 247, 255, 0.48);
}

.market-chart-field line {
  stroke: rgba(105, 167, 234, 0.1);
  stroke-width: 1;
  stroke-dasharray: 5 8;
}

.market-candle line {
  stroke-width: 1.5;
}

.market-candle rect {
  stroke-width: 1.3;
}

.market-candle-up line,
.market-candle-up rect {
  stroke: rgba(34, 228, 255, 0.46);
}

.market-candle-up rect {
  fill: rgba(34, 228, 255, 0.1);
}

.market-candle-down line,
.market-candle-down rect {
  stroke: rgba(255, 113, 129, 0.38);
}

.market-candle-down rect {
  fill: rgba(255, 113, 129, 0.08);
}

.market-flux-path {
  fill: none;
  stroke: url(#marketFluxStroke);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 7 10;
  filter: url(#marketSoftGlow);
  animation: homeMarketFlux 13s linear infinite;
}

.market-flux-node {
  fill: #22e4ff;
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 7px rgba(34, 228, 255, 0.6));
}

.home-market-caption {
  position: relative;
  z-index: 2;
  width: min(74%, 500px);
  margin: -12px auto 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  color: rgba(169, 193, 225, 0.44);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-market-caption strong {
  color: rgba(208, 225, 247, 0.52);
  font-size: 0.58rem;
  font-weight: 700;
  text-align: center;
}

.home-market-caption span:last-child {
  color: rgba(34, 228, 255, 0.52);
}

.home-market-caption span:first-child {
  color: rgba(255, 113, 129, 0.4);
}

@keyframes homeMarketFlux {
  to {
    stroke-dashoffset: -136;
  }
}

@media (max-width: 1180px) {
  .home-showcase-hero-inner {
    grid-template-columns: 1fr;
    max-width: 980px;
    min-height: 0;
    gap: 42px;
  }

  .home-showcase-copy {
    max-width: 760px;
  }

  .home-showcase-title {
    max-width: 780px;
  }

  .home-hero-product {
    max-width: 840px;
    margin: 0 auto;
    justify-self: center;
  }

  .home-app-window {
    transform: none;
  }

  .home-market-tension {
    display: none;
  }

  .home-floating-stat-left {
    left: 18px;
    bottom: -22px;
  }

  .home-floating-stat-right {
    right: 18px;
    top: -22px;
  }

  .home-signal-strip {
    max-width: 980px;
    margin-top: 44px;
  }
}

@media (max-width: 760px) {
  .home-showcase-hero {
    padding-top: 108px;
  }

  .home-app-window .journal-app-body {
    min-height: 0;
  }

  .home-app-window .journal-app-chart {
    height: 132px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .market-flux-path {
    animation: none;
  }
}

/* =========================================================
   Phase 29C-0C1.2 - Viewport-Hero und wechselnde Produktansicht
   ========================================================= */

.home-showcase-hero {
  height: 100svh;
  min-height: 700px;
  max-height: 900px;
  padding: 104px 30px 20px;
  display: flex;
  align-items: center;
}

.home-showcase-hero-inner {
  width: min(100%, 1360px);
  height: 100%;
  min-height: 0;
  max-height: 720px;
  grid-template-columns: minmax(430px, 0.88fr) minmax(590px, 1.12fr);
  gap: clamp(28px, 3.4vw, 54px);
  align-items: center;
}

.home-showcase-copy {
  max-width: 610px;
}

.home-eyebrow {
  margin-bottom: 15px;
}

.home-showcase-title {
  max-width: 620px;
  font-size: clamp(3.15rem, 4.35vw, 4.55rem);
  line-height: 0.98;
  letter-spacing: -0.078em;
}

.home-showcase-lead {
  max-width: 590px;
  margin-top: 17px;
  font-size: clamp(0.96rem, 1.02vw, 1.05rem);
  line-height: 1.58;
}

.home-showcase-actions {
  margin-top: 21px;
  gap: 13px;
}

.home-showcase-actions .button {
  min-height: 49px;
  padding: 12px 20px;
}

.home-showcase-actions .button-primary {
  min-width: 222px;
}

.home-showcase-actions .button-secondary {
  min-width: 190px;
}

.home-proof-row {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-proof-row div {
  min-height: 0;
  padding: 8px 11px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  background: rgba(3, 12, 27, 0.58);
}

.home-proof-row strong,
.home-proof-row span {
  display: inline;
  margin: 0;
}

.home-proof-row strong {
  font-size: 0.72rem;
}

.home-proof-row span {
  font-size: 0.66rem;
  line-height: 1.2;
}

.home-hero-product {
  position: relative;
  width: 100%;
  max-width: 760px;
  height: min(620px, calc(100svh - 150px));
  min-height: 510px;
  max-height: 620px;
  padding-top: 38px;
  justify-self: end;
}

.home-market-tension {
  display: none;
}

.home-market-ribbon {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 50%;
  width: min(92%, 680px);
  min-height: 44px;
  transform: translateX(-50%);
  padding: 4px 13px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(34, 143, 255, 0.28);
  border-radius: 999px;
  background: rgba(2, 10, 24, 0.92);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28), 0 0 32px rgba(11, 115, 255, 0.1);
  backdrop-filter: blur(14px);
}

.home-market-ribbon svg {
  width: 100%;
  height: 34px;
  overflow: visible;
}

.home-market-ribbon-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.home-market-ribbon-label.is-bear {
  color: rgba(255, 113, 129, 0.82);
}

.home-market-ribbon-label.is-bull {
  color: rgba(34, 228, 255, 0.9);
}

.home-ribbon-grid line {
  stroke: rgba(104, 166, 231, 0.13);
  stroke-width: 1;
  stroke-dasharray: 4 6;
}

.home-ribbon-candles line,
.home-ribbon-candles rect {
  stroke-width: 1.2;
}

.home-ribbon-candles .is-up line,
.home-ribbon-candles .is-up rect {
  stroke: rgba(34, 228, 255, 0.7);
}

.home-ribbon-candles .is-up rect {
  fill: rgba(34, 228, 255, 0.12);
}

.home-ribbon-candles .is-down line,
.home-ribbon-candles .is-down rect {
  stroke: rgba(255, 113, 129, 0.62);
}

.home-ribbon-candles .is-down rect {
  fill: rgba(255, 113, 129, 0.1);
}

.home-ribbon-flux {
  fill: none;
  stroke: #22e4ff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 7 8;
  opacity: 0.72;
  filter: drop-shadow(0 0 6px rgba(34, 228, 255, 0.48));
  animation: homeRibbonFlux 10s linear infinite;
}

@keyframes homeRibbonFlux {
  to { stroke-dashoffset: -120; }
}

.home-product-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 42px;
  gap: 9px;
}

.home-product-stage {
  position: relative;
  min-height: 0;
}

.home-product-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(18px) scale(0.986);
  pointer-events: none;
  transition:
    opacity 520ms ease,
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 520ms ease;
}

.home-product-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.home-product-slide .home-app-window {
  width: 100%;
  height: 100%;
  max-width: none;
  transform: none;
  overflow: hidden;
  box-shadow:
    0 36px 90px rgba(0, 0, 0, 0.44),
    0 0 70px rgba(11, 115, 255, 0.12);
}

.home-product-slide .journal-app-topbar {
  min-height: 56px;
  padding: 10px 14px;
}

.home-product-slide .journal-app-brandline img {
  width: 29px;
  height: 29px;
}

.home-product-slide .journal-app-brandline strong {
  font-size: 0.78rem;
}

.home-product-slide .journal-app-brandline span,
.home-product-slide .journal-app-top-actions span,
.home-product-slide .journal-app-top-actions b {
  font-size: 0.61rem;
}

.home-product-slide .journal-app-body {
  height: calc(100% - 56px);
  min-height: 0;
  grid-template-columns: 94px 1fr;
}

.home-product-slide .journal-app-sidebar {
  padding: 12px 8px;
  gap: 4px;
}

.home-product-slide .journal-app-sidebar span {
  min-height: 30px;
  padding: 7px;
  font-size: 0.56rem;
}

.home-product-slide .journal-app-content {
  min-width: 0;
  padding: 12px;
  overflow: hidden;
}

.home-product-slide .journal-app-section-head strong {
  font-size: 0.88rem;
}

.home-product-slide .journal-app-section-head span,
.home-product-slide .journal-app-section-head > b {
  font-size: 0.58rem;
}

.home-product-slide .journal-app-metrics {
  margin-top: 9px;
  gap: 6px;
}

.home-product-slide .journal-app-metrics article {
  min-height: 63px;
  padding: 8px 9px;
  border-radius: 10px;
}

.home-product-slide .journal-app-metrics span,
.home-product-slide .journal-app-metrics small {
  font-size: 0.52rem;
}

.home-product-slide .journal-app-metrics strong {
  margin-top: 4px;
  font-size: 0.87rem;
}

.home-product-slide .journal-app-main-grid {
  margin-top: 7px;
  grid-template-columns: minmax(0, 1fr) 126px;
  gap: 7px;
}

.home-product-slide .journal-app-chart-card,
.home-product-slide .journal-app-insight-card {
  padding: 9px;
  border-radius: 11px;
}

.home-product-slide .journal-app-chart {
  height: 140px;
  margin-top: 5px;
}

.home-product-slide .journal-app-insight-card > strong {
  font-size: 0.76rem;
}

.home-product-slide .journal-app-insight-card p,
.home-product-slide .journal-app-insight-card div,
.home-product-slide .journal-app-card-title span,
.home-product-slide .journal-app-card-title b,
.home-product-slide .journal-app-card-title strong {
  font-size: 0.56rem;
}

.home-chart-area-dashboard {
  fill: url(#homeHeroAreaDashboard);
}

.home-product-carousel-controls {
  min-height: 42px;
  padding: 4px 6px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(34, 143, 255, 0.18);
  border-radius: 14px;
  background: rgba(2, 9, 21, 0.82);
  backdrop-filter: blur(12px);
}

.home-product-arrow {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(34, 143, 255, 0.32);
  border-radius: 10px;
  background: rgba(11, 115, 255, 0.08);
  color: #ffffff;
  font-size: 1.18rem;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.home-product-arrow:hover {
  transform: translateY(-1px);
  border-color: rgba(34, 228, 255, 0.65);
  background: rgba(11, 115, 255, 0.16);
}

.home-product-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.home-product-tabs button {
  min-height: 31px;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: rgba(178, 189, 208, 0.76);
  font-size: 0.65rem;
  font-weight: 800;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.home-product-tabs button:hover,
.home-product-tabs button.is-active {
  color: #ffffff;
  border-color: rgba(34, 143, 255, 0.34);
  background: rgba(11, 115, 255, 0.14);
}

.home-trade-content,
.home-analytics-content {
  display: flex;
  flex-direction: column;
}

.home-trade-layout,
.home-analytics-layout {
  min-height: 0;
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 158px;
  gap: 8px;
  flex: 1;
}

.home-trade-chart-card,
.home-trade-data-card,
.home-analytics-chart-card,
.home-review-summary-card {
  border: 1px solid rgba(34, 143, 255, 0.16);
  border-radius: 12px;
  background: rgba(1, 7, 18, 0.58);
  overflow: hidden;
}

.home-trade-chart-card,
.home-analytics-chart-card {
  padding: 10px;
}

.home-trade-chart-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.home-trade-chart-head strong,
.home-trade-chart-head span,
.home-trade-chart-head b {
  display: block;
}

.home-trade-chart-head strong {
  color: #ffffff;
  font-size: 0.72rem;
}

.home-trade-chart-head span {
  margin-top: 2px;
  color: rgba(178, 189, 208, 0.75);
  font-size: 0.54rem;
}

.home-trade-chart-head b {
  color: #22e4ff;
  font-size: 0.62rem;
}

.home-candle-chart {
  position: relative;
  height: calc(100% - 37px);
  min-height: 230px;
  margin-top: 8px;
  border-radius: 10px;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    rgba(2, 9, 22, 0.8);
  background-size: 100% 44px, 44px 100%, auto;
}

.home-trade-level {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  height: 1px;
  border-top: 1px dashed currentColor;
}

.home-trade-level span {
  position: absolute;
  right: 8px;
  top: -10px;
  padding: 2px 5px;
  border-radius: 5px;
  background: rgba(2, 9, 22, 0.9);
  font-size: 0.49rem;
  font-weight: 800;
}

.home-trade-level.is-target { top: 19%; color: #40dd9c; }
.home-trade-level.is-entry { top: 53%; color: #22e4ff; }
.home-trade-level.is-stop { top: 79%; color: #ff7181; }

.home-candles {
  position: absolute;
  inset: 8px 58px 8px 8px;
}

.home-candles i {
  position: absolute;
  left: var(--x);
  top: var(--top);
  width: 9px;
  height: var(--body);
  border: 1px solid currentColor;
  border-radius: 2px;
  transform: translateX(-50%);
}

.home-candles i::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc((var(--wick) - var(--body)) / -2);
  width: 1px;
  height: var(--wick);
  background: currentColor;
  transform: translateX(-50%);
  z-index: -1;
}

.home-candles i.is-up {
  color: rgba(34, 228, 255, 0.88);
  background: rgba(34, 228, 255, 0.16);
}

.home-candles i.is-down {
  color: rgba(255, 113, 129, 0.82);
  background: rgba(255, 113, 129, 0.14);
}

.home-trade-data-card,
.home-review-summary-card {
  padding: 11px;
}

.home-trade-data-card > span,
.home-review-summary-card > span {
  color: #22e4ff;
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.home-trade-data-card div,
.home-review-summary-card div {
  margin-top: 8px;
  padding-bottom: 7px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.home-trade-data-card small,
.home-review-summary-card small {
  color: rgba(178, 189, 208, 0.72);
  font-size: 0.5rem;
}

.home-trade-data-card strong,
.home-review-summary-card b {
  color: #ffffff;
  font-size: 0.58rem;
}

.home-trade-data-card p,
.home-review-summary-card p {
  margin-top: 10px;
  color: rgba(178, 189, 208, 0.72);
  font-size: 0.51rem;
  line-height: 1.45;
}

.home-review-summary-card > strong {
  display: block;
  margin-top: 9px;
  color: #ffffff;
  font-size: 0.75rem;
  line-height: 1.35;
}

.home-analytics-metrics {
  margin-top: 9px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.home-analytics-metrics article {
  min-height: 58px;
  padding: 8px;
  border: 1px solid rgba(34, 143, 255, 0.15);
  border-radius: 10px;
  background: rgba(2, 9, 22, 0.62);
}

.home-analytics-metrics span,
.home-analytics-metrics strong,
.home-analytics-metrics small {
  display: block;
}

.home-analytics-metrics span,
.home-analytics-metrics small {
  color: rgba(178, 189, 208, 0.72);
  font-size: 0.5rem;
}

.home-analytics-metrics strong {
  margin-top: 3px;
  color: #ffffff;
  font-size: 0.82rem;
}

.home-analytics-bars {
  position: relative;
  height: calc(100% - 36px);
  min-height: 215px;
  margin-top: 8px;
  padding: 10px 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: 10px;
  background:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    rgba(2, 9, 22, 0.8);
  background-size: 100% 42px, auto;
}

.home-analytics-bars::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 1px;
  background: rgba(255,255,255,0.16);
}

.home-analytics-bars i {
  position: relative;
  z-index: 1;
  flex: 1;
  height: var(--h);
  min-width: 5px;
  border-radius: 4px 4px 1px 1px;
  transform-origin: bottom;
  transform: translateY(-50%);
}

.home-analytics-bars i.is-positive { background: linear-gradient(180deg, #40dd9c, rgba(64,221,156,0.2)); }
.home-analytics-bars i.is-negative { background: linear-gradient(180deg, rgba(255,113,129,0.25), #ff7181); transform: translateY(50%); transform-origin: top; }
.home-analytics-bars i.is-neutral { height: 4px; background: rgba(178,189,208,0.4); transform: none; }

.home-signal-strip {
  width: min(calc(100% - 60px), 1360px);
  margin: 0 auto;
  transform: translateY(-14px);
}

.home-platform-section {
  padding-top: 82px;
}

@media (max-height: 780px) and (min-width: 1181px) {
  .home-showcase-hero {
    min-height: 650px;
    padding-top: 96px;
    padding-bottom: 14px;
  }

  .home-showcase-title {
    font-size: clamp(2.9rem, 4vw, 4rem);
  }

  .home-showcase-lead {
    margin-top: 13px;
    line-height: 1.5;
  }

  .home-showcase-actions {
    margin-top: 17px;
  }

  .home-proof-row {
    margin-top: 14px;
  }

  .home-hero-product {
    height: calc(100svh - 128px);
    min-height: 475px;
  }

  .home-candle-chart,
  .home-analytics-bars {
    min-height: 195px;
  }
}

@media (max-width: 1180px) {
  .home-showcase-hero {
    height: auto;
    min-height: 0;
    max-height: none;
    padding-top: 116px;
    padding-bottom: 54px;
    display: block;
  }

  .home-showcase-hero-inner {
    height: auto;
    max-height: none;
    grid-template-columns: 1fr;
    max-width: 980px;
    gap: 42px;
  }

  .home-showcase-copy {
    max-width: 760px;
  }

  .home-showcase-title {
    max-width: 760px;
  }

  .home-hero-product {
    height: 590px;
    min-height: 590px;
    max-height: none;
    max-width: 840px;
    margin: 0 auto;
    justify-self: center;
  }

  .home-signal-strip {
    max-width: 980px;
    transform: none;
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .home-showcase-hero {
    padding: 104px 18px 42px;
  }

  .home-showcase-title {
    font-size: clamp(2.5rem, 10.5vw, 3.7rem);
  }

  .home-showcase-actions {
    flex-direction: column;
  }

  .home-showcase-actions .button {
    width: 100%;
  }

  .home-proof-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .home-proof-row div {
    justify-content: space-between;
  }

  .home-hero-product {
    height: 500px;
    min-height: 500px;
    padding-top: 34px;
  }

  .home-market-ribbon {
    width: 98%;
  }

  .home-product-slide .journal-app-body {
    grid-template-columns: 1fr;
  }

  .home-product-slide .journal-app-sidebar {
    display: none;
  }

  .home-product-slide .journal-app-main-grid,
  .home-trade-layout,
  .home-analytics-layout {
    grid-template-columns: 1fr;
  }

  .home-product-slide .journal-app-insight-card,
  .home-trade-data-card,
  .home-review-summary-card {
    display: none;
  }

  .home-product-slide .journal-app-chart,
  .home-candle-chart,
  .home-analytics-bars {
    height: 255px;
    min-height: 255px;
  }

  .home-product-tabs button {
    padding-left: 4px;
    padding-right: 4px;
    font-size: 0.58rem;
  }

  .home-signal-strip {
    width: calc(100% - 36px);
  }
}

@media (max-width: 520px) {
  .home-hero-product {
    height: 465px;
    min-height: 465px;
  }

  .home-market-ribbon-label {
    display: none;
  }

  .home-market-ribbon {
    grid-template-columns: 1fr;
  }

  .home-product-carousel-controls {
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    gap: 4px;
  }

  .home-product-arrow {
    width: 29px;
    height: 29px;
  }

  .home-product-tabs {
    gap: 3px;
  }

  .home-product-tabs button {
    min-height: 29px;
    font-size: 0.52rem;
  }

  .home-analytics-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-product-slide,
  .home-product-arrow,
  .home-product-tabs button {
    transition: none;
  }

  .home-ribbon-flux {
    animation: none;
  }
}

/* =========================================================
   Phase 29C-0C1.3 - Premium Hero ohne Karussell
   Statische Produktszene, saubere Viewport-Hoehe
   ========================================================= */

.home-premium-hero {
  min-height: 680px;
  height: 100svh;
  max-height: 840px;
  padding: 104px 30px 26px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.home-premium-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(1, 5, 14, 0.98) 0%, rgba(1, 5, 14, 0.86) 37%, rgba(1, 5, 14, 0.22) 68%, rgba(1, 5, 14, 0.64) 100%),
    linear-gradient(180deg, rgba(1, 5, 14, 0.08) 0%, rgba(1, 5, 14, 0.7) 100%);
  z-index: 0;
}

.home-premium-hero .home-hero-grid-bg {
  opacity: 0.5;
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 35%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 35%, #000 100%);
}

.home-premium-aurora {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(72px);
  pointer-events: none;
}

.home-premium-aurora-one {
  width: 420px;
  height: 420px;
  right: 3%;
  top: 14%;
  background: rgba(11, 115, 255, 0.18);
}

.home-premium-aurora-two {
  width: 260px;
  height: 260px;
  right: 35%;
  bottom: 0;
  background: rgba(34, 228, 255, 0.08);
}

.home-premium-hero-inner {
  position: relative;
  z-index: 2;
  width: min(100%, 1360px);
  height: min(610px, calc(100svh - 132px));
  max-height: 610px;
  min-height: 500px;
  grid-template-columns: minmax(420px, 0.83fr) minmax(620px, 1.17fr);
  gap: clamp(34px, 4.2vw, 68px);
  align-items: center;
}

.home-premium-copy {
  max-width: 590px;
}

.home-premium-title {
  max-width: 600px;
  font-size: clamp(3rem, 4vw, 4.35rem);
  line-height: 0.99;
}

.home-premium-lead {
  max-width: 570px;
  margin-top: 16px;
  font-size: clamp(0.96rem, 1vw, 1.04rem);
  line-height: 1.56;
}

.home-premium-actions {
  margin-top: 20px;
}

.home-premium-proof {
  margin-top: 16px;
}

.home-premium-proof div {
  padding: 7px 10px;
}

.home-product-scene {
  position: relative;
  width: 100%;
  max-width: 760px;
  height: min(510px, calc(100svh - 190px));
  min-height: 450px;
  max-height: 510px;
  padding: 0;
  justify-self: end;
  isolation: isolate;
}

.home-product-scene::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 7% 5% 2% 4%;
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(8, 29, 67, 0.58), rgba(1, 8, 20, 0.1));
  border: 1px solid rgba(34, 143, 255, 0.1);
  transform: rotate(-1.2deg);
}

.home-product-scene-glow {
  position: absolute;
  z-index: -1;
  width: 76%;
  height: 70%;
  right: 3%;
  top: 14%;
  border-radius: 50%;
  background: rgba(11, 115, 255, 0.2);
  filter: blur(70px);
}

.home-product-market-layer {
  position: absolute;
  z-index: -1;
  inset: -4% -3% 0 5%;
  width: 98%;
  height: 96%;
  opacity: 0.24;
  overflow: visible;
}

.home-product-market-grid line {
  stroke: rgba(75, 148, 228, 0.18);
  stroke-width: 1;
  stroke-dasharray: 5 9;
}

.home-product-market-candles line,
.home-product-market-candles rect {
  stroke-width: 1.4;
}

.home-product-market-candles .is-up line,
.home-product-market-candles .is-up rect {
  stroke: rgba(34, 228, 255, 0.72);
}

.home-product-market-candles .is-up rect {
  fill: rgba(34, 228, 255, 0.09);
}

.home-product-market-candles .is-down line,
.home-product-market-candles .is-down rect {
  stroke: rgba(255, 113, 129, 0.56);
}

.home-product-market-candles .is-down rect {
  fill: rgba(255, 113, 129, 0.08);
}

.home-product-market-line {
  fill: none;
  stroke: rgba(34, 228, 255, 0.72);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 8 10;
  filter: drop-shadow(0 0 9px rgba(34, 228, 255, 0.45));
}

.home-product-status-badge {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 9%;
  min-width: 190px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(34, 143, 255, 0.28);
  border-radius: 999px;
  background: rgba(2, 10, 24, 0.88);
  box-shadow: 0 16px 40px rgba(0,0,0,.34);
  backdrop-filter: blur(14px);
}

.home-product-status-badge span,
.home-product-status-badge strong {
  font-size: 0.62rem;
  font-weight: 800;
}

.home-product-status-badge span {
  color: rgba(255,255,255,.8);
}

.home-product-status-badge strong {
  color: #22e4ff;
}

.home-product-main-window {
  position: absolute;
  z-index: 3;
  top: 34px;
  right: 0;
  width: 94%;
  height: calc(100% - 58px);
  overflow: hidden;
  border: 1px solid rgba(34, 143, 255, 0.34);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(8, 27, 61, 0.98), rgba(2, 9, 22, 0.98));
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.5),
    0 0 70px rgba(11, 115, 255, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.home-product-window-topbar {
  min-height: 55px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(34, 143, 255, 0.16);
  background: rgba(1, 7, 18, 0.74);
}

.home-product-window-brand,
.home-product-window-actions {
  display: flex;
  align-items: center;
}

.home-product-window-brand {
  gap: 10px;
}

.home-product-window-brand img {
  width: 29px;
  height: 29px;
  border-radius: 50%;
}

.home-product-window-brand strong,
.home-product-window-brand span {
  display: block;
}

.home-product-window-brand strong {
  color: #fff;
  font-size: 0.77rem;
}

.home-product-window-brand span {
  margin-top: 1px;
  color: rgba(178, 189, 208, 0.72);
  font-size: 0.58rem;
}

.home-product-window-actions {
  gap: 7px;
}

.home-product-window-actions span,
.home-product-window-actions b {
  min-height: 30px;
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(34, 143, 255, 0.18);
  border-radius: 9px;
  color: rgba(255,255,255,.78);
  font-size: 0.58rem;
}

.home-product-window-actions b {
  border-color: rgba(34, 228, 255, 0.34);
  color: #fff;
}

.home-product-window-body {
  height: calc(100% - 55px);
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
}

.home-product-window-sidebar {
  padding: 11px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid rgba(34, 143, 255, 0.14);
  background: rgba(1, 7, 18, 0.58);
}

.home-product-window-sidebar span {
  min-height: 30px;
  padding: 7px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  color: rgba(178, 189, 208, 0.58);
  font-size: 0.56rem;
  font-weight: 800;
}

.home-product-window-sidebar span.is-current {
  color: #fff;
  background: linear-gradient(90deg, rgba(11,115,255,.24), rgba(11,115,255,.05));
}

.home-product-window-sidebar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(11, 115, 255, 0.54);
}

.home-product-window-sidebar .is-current i {
  background: #22e4ff;
  box-shadow: 0 0 12px rgba(34,228,255,.7);
}

.home-product-window-content {
  min-width: 0;
  padding: 12px;
}

.home-product-window-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.home-product-window-heading span,
.home-product-window-heading strong,
.home-product-window-heading > b {
  display: block;
}

.home-product-window-heading span,
.home-product-window-heading > b {
  color: #22e4ff;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-product-window-heading strong {
  margin-top: 3px;
  color: #fff;
  font-size: 0.86rem;
}

.home-product-window-heading > b {
  padding: 6px 9px;
  border: 1px solid rgba(34, 228, 255, 0.24);
  border-radius: 999px;
  background: rgba(34,228,255,.06);
  white-space: nowrap;
}

.home-product-window-metrics {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.home-product-window-metrics article {
  min-height: 64px;
  padding: 9px;
  border: 1px solid rgba(34, 143, 255, 0.15);
  border-radius: 10px;
  background: rgba(1, 7, 18, 0.52);
}

.home-product-window-metrics span,
.home-product-window-metrics strong,
.home-product-window-metrics small {
  display: block;
}

.home-product-window-metrics span,
.home-product-window-metrics small {
  color: rgba(178, 189, 208, 0.72);
  font-size: 0.49rem;
}

.home-product-window-metrics strong {
  margin-top: 4px;
  color: #fff;
  font-size: 0.83rem;
}

.home-product-window-metrics .is-positive strong {
  color: #7ff0bd;
}

.home-product-window-main {
  margin-top: 8px;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 8px;
}

.home-product-equity-card,
.home-product-review-panel {
  min-height: 0;
  padding: 9px;
  border: 1px solid rgba(34, 143, 255, 0.15);
  border-radius: 11px;
  background: rgba(1, 7, 18, 0.52);
}

.home-product-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.home-product-card-head strong,
.home-product-card-head span,
.home-product-card-head b {
  display: block;
}

.home-product-card-head strong,
.home-product-card-head b {
  color: #fff;
  font-size: 0.58rem;
}

.home-product-card-head span {
  margin-top: 2px;
  color: rgba(178,189,208,.68);
  font-size: 0.49rem;
}

.home-product-equity-chart {
  height: 142px;
  margin-top: 4px;
}

.home-product-equity-chart svg {
  width: 100%;
  height: 100%;
}

.home-product-equity-grid line {
  stroke: rgba(104,166,231,.12);
}

.home-product-equity-area {
  fill: url(#homePremiumArea);
}

.home-product-equity-line {
  fill: none;
  stroke: #22e4ff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(34,228,255,.32));
}

.home-product-equity-points circle {
  fill: #07172d;
  stroke: #dffaff;
  stroke-width: 2;
}

.home-product-review-panel > span,
.home-product-review-panel > strong,
.home-product-review-panel p {
  display: block;
}

.home-product-review-panel > span {
  color: #22e4ff;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.home-product-review-panel > strong {
  margin-top: 8px;
  color: #fff;
  font-size: 0.72rem;
  line-height: 1.35;
}

.home-product-review-panel p {
  margin-top: 7px;
  color: rgba(178,189,208,.7);
  font-size: 0.51rem;
  line-height: 1.45;
}

.home-product-review-panel div {
  margin-top: 8px;
  padding-top: 7px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid rgba(255,255,255,.07);
  color: rgba(178,189,208,.68);
  font-size: 0.5rem;
}

.home-product-review-panel b {
  color: #fff;
}

.home-product-floating-card {
  position: absolute;
  z-index: 5;
  border: 1px solid rgba(34, 143, 255, 0.34);
  border-radius: 15px;
  background: rgba(3, 13, 31, 0.96);
  box-shadow:
    0 22px 55px rgba(0,0,0,.46),
    0 0 28px rgba(11,115,255,.12);
  backdrop-filter: blur(18px);
}

.home-product-trade-card {
  left: 0;
  bottom: 0;
  width: 250px;
  padding: 12px;
}

.home-product-floating-label,
.home-product-trade-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.home-product-floating-label span,
.home-product-floating-label b,
.home-product-insight-kicker {
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-product-floating-label span,
.home-product-insight-kicker {
  color: #22e4ff;
}

.home-product-floating-label b {
  padding: 3px 6px;
  border-radius: 999px;
  color: #7ff0bd;
  background: rgba(64,221,156,.08);
}

.home-product-trade-card > strong {
  display: block;
  margin-top: 7px;
  color: #fff;
  font-size: 0.76rem;
}

.home-product-trade-levels {
  margin-top: 9px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.home-product-trade-levels span {
  padding: 7px;
  border: 1px solid rgba(34,143,255,.14);
  border-radius: 8px;
  background: rgba(1,7,18,.5);
}

.home-product-trade-levels small,
.home-product-trade-levels b {
  display: block;
}

.home-product-trade-levels small {
  color: rgba(178,189,208,.62);
  font-size: 0.46rem;
}

.home-product-trade-levels b {
  margin-top: 3px;
  color: #fff;
  font-size: 0.58rem;
}

.home-product-trade-footer {
  margin-top: 9px;
  color: rgba(178,189,208,.72);
  font-size: 0.5rem;
}

.home-product-trade-footer strong {
  color: #22e4ff;
}

.home-product-insight-card {
  top: 84px;
  right: -8px;
  width: 190px;
  padding: 11px;
}

.home-product-insight-card > strong {
  display: block;
  margin-top: 7px;
  color: #fff;
  font-size: 0.69rem;
  line-height: 1.35;
}

.home-product-insight-card div {
  margin-top: 9px;
  padding-top: 8px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid rgba(255,255,255,.07);
  color: rgba(178,189,208,.72);
  font-size: 0.5rem;
}

.home-product-insight-card b {
  color: #fff;
}

.home-signal-strip {
  width: min(calc(100% - 60px), 1360px);
  margin: 0 auto;
  transform: none;
}

@media (max-height: 760px) and (min-width: 1181px) {
  .home-premium-hero {
    min-height: 620px;
    padding-top: 94px;
    padding-bottom: 18px;
  }

  .home-premium-hero-inner {
    height: calc(100svh - 112px);
    min-height: 460px;
  }

  .home-premium-title {
    font-size: clamp(2.72rem, 3.7vw, 3.85rem);
  }

  .home-premium-lead {
    margin-top: 13px;
    line-height: 1.48;
  }

  .home-premium-actions {
    margin-top: 16px;
  }

  .home-premium-proof {
    margin-top: 12px;
  }

  .home-product-scene {
    height: calc(100svh - 160px);
    min-height: 430px;
  }

  .home-product-equity-chart {
    height: 118px;
  }

  .home-product-trade-card {
    transform: scale(.92);
    transform-origin: bottom left;
  }

  .home-product-insight-card {
    transform: scale(.92);
    transform-origin: top right;
  }
}

@media (max-width: 1180px) {
  .home-premium-hero {
    height: auto;
    min-height: 0;
    max-height: none;
    padding-top: 116px;
    padding-bottom: 56px;
  }

  .home-premium-hero-inner {
    height: auto;
    max-height: none;
    min-height: 0;
    grid-template-columns: 1fr;
    max-width: 980px;
    gap: 44px;
  }

  .home-premium-copy {
    max-width: 760px;
  }

  .home-product-scene {
    width: min(100%, 820px);
    height: 540px;
    min-height: 540px;
    max-height: none;
    margin: 0 auto;
    justify-self: center;
  }
}

@media (max-width: 760px) {
  .home-premium-hero {
    padding: 104px 18px 44px;
  }

  .home-premium-title {
    font-size: clamp(2.45rem, 10.4vw, 3.55rem);
  }

  .home-premium-actions {
    flex-direction: column;
  }

  .home-premium-actions .button {
    width: 100%;
  }

  .home-premium-proof {
    display: grid;
    grid-template-columns: 1fr;
  }

  .home-premium-proof div {
    justify-content: space-between;
  }

  .home-product-scene {
    height: 455px;
    min-height: 455px;
  }

  .home-product-main-window {
    top: 28px;
    width: 100%;
    height: calc(100% - 55px);
  }

  .home-product-window-body {
    grid-template-columns: 1fr;
  }

  .home-product-window-sidebar {
    display: none;
  }

  .home-product-window-main {
    grid-template-columns: 1fr;
  }

  .home-product-review-panel {
    display: none;
  }

  .home-product-equity-chart {
    height: 165px;
  }

  .home-product-trade-card {
    left: 9px;
    bottom: -6px;
    width: 220px;
  }

  .home-product-insight-card {
    display: none;
  }

  .home-product-status-badge {
    left: 12px;
  }
}

@media (max-width: 520px) {
  .home-product-scene {
    height: 415px;
    min-height: 415px;
  }

  .home-product-main-window {
    border-radius: 17px;
  }

  .home-product-window-topbar {
    min-height: 50px;
    padding: 8px 10px;
  }

  .home-product-window-actions span {
    display: none;
  }

  .home-product-window-content {
    padding: 10px;
  }

  .home-product-window-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-product-window-metrics article:nth-child(3),
  .home-product-window-metrics article:nth-child(4) {
    display: none;
  }

  .home-product-equity-chart {
    height: 150px;
  }

  .home-product-trade-card {
    width: 200px;
    padding: 10px;
  }

  .home-product-trade-levels {
    gap: 4px;
  }
}

/* =========================================================
   Phase 29C-0C1.4 - Hochwertiger Hero-Text und Produktgalerie
   Manuelle Produktansichten, keine automatische Rotation
   ========================================================= */

.home-premium-copy {
  max-width: 610px;
}

.home-premium-title {
  max-width: 620px;
  font-size: clamp(3.2rem, 4.25vw, 4.7rem);
  line-height: 0.95;
  letter-spacing: -0.075em;
}

.home-premium-title em {
  display: inline-block;
  color: #1686ff;
  font-style: normal;
  text-shadow: 0 0 38px rgba(11, 115, 255, 0.18);
}

.home-premium-lead {
  max-width: 590px;
  margin-top: 18px;
  color: rgba(235, 244, 255, 0.82);
  font-size: clamp(0.98rem, 1.05vw, 1.08rem);
  line-height: 1.62;
}

.home-hero-capabilities {
  margin-top: 19px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  list-style: none;
}

.home-hero-capabilities li {
  position: relative;
  padding-left: 15px;
  color: rgba(209, 225, 245, 0.74);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-hero-capabilities li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22e4ff;
  box-shadow: 0 0 12px rgba(34, 228, 255, 0.7);
  transform: translateY(-50%);
}

.home-premium-actions {
  margin-top: 22px;
}

.home-hero-beta-note {
  margin-top: 15px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(178, 189, 208, 0.7);
  font-size: 0.78rem;
  font-weight: 700;
}

.home-hero-beta-note > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1686ff;
  box-shadow: 0 0 14px rgba(22, 134, 255, 0.72);
}

.home-product-gallery-section {
  position: relative;
  padding: 88px 30px 92px;
  overflow: hidden;
  border-top: 1px solid rgba(34, 143, 255, 0.12);
  background:
    radial-gradient(circle at 72% 0%, rgba(11, 115, 255, 0.1), transparent 32rem),
    linear-gradient(180deg, #02050d 0%, #030813 100%);
}

.home-product-gallery-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(35, 104, 185, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 104, 185, 0.07) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75), transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75), transparent 72%);
}

.home-product-gallery-section .section-inner {
  position: relative;
  z-index: 1;
  width: min(100%, 1400px);
}

.home-product-gallery-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: end;
}

.home-product-gallery-heading > div:first-child {
  max-width: 860px;
}

.home-product-gallery-heading h2 {
  max-width: 830px;
  margin-bottom: 15px;
  font-size: clamp(2rem, 3.35vw, 3.2rem);
  line-height: 1.03;
}

.home-product-gallery-heading p:not(.section-label) {
  max-width: 760px;
  color: rgba(178, 189, 208, 0.82);
  font-size: 0.98rem;
}

.home-gallery-controls {
  display: flex;
  gap: 8px;
  padding-bottom: 5px;
}

.home-gallery-controls button {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(78, 114, 255, 0.38);
  border-radius: 13px;
  background: rgba(13, 16, 54, 0.72);
  color: #7d7bff;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, opacity 180ms ease;
}

.home-gallery-controls button:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(34, 228, 255, 0.54);
  background: rgba(30, 35, 94, 0.82);
}

.home-gallery-controls button:disabled {
  opacity: 0.34;
  cursor: default;
}

.home-gallery-controls span {
  font-size: 1.35rem;
  line-height: 1;
}

.home-product-gallery-viewport {
  margin-top: 38px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  outline: none;
}

.home-product-gallery-viewport::-webkit-scrollbar {
  display: none;
}

.home-product-gallery-viewport:focus-visible {
  border-radius: 18px;
  box-shadow: 0 0 0 3px rgba(34, 228, 255, 0.14);
}

.home-product-gallery-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 44px) / 3);
  gap: 22px;
}

.home-product-gallery-card {
  min-width: 0;
  scroll-snap-align: start;
}

.home-gallery-visual {
  position: relative;
  height: 292px;
  overflow: hidden;
  border: 1px solid rgba(72, 78, 168, 0.24);
  border-radius: 18px;
  background: #050711;
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.34);
}

.home-gallery-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 24%),
    radial-gradient(circle at 16% 8%, var(--gallery-glow, rgba(105, 77, 255, 0.22)), transparent 18rem);
}

.home-gallery-visual::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.16));
}

.home-gallery-visual-trade {
  --gallery-glow: rgba(115, 76, 255, 0.28);
  background: linear-gradient(145deg, #09091a, #03050d 68%);
}

.home-gallery-visual-risk {
  --gallery-glow: rgba(0, 226, 192, 0.24);
  background: linear-gradient(145deg, #041613, #02070b 68%);
}

.home-gallery-visual-analytics {
  --gallery-glow: rgba(170, 74, 255, 0.24);
  background: linear-gradient(145deg, #120719, #04040b 68%);
}

.home-gallery-visual-depot {
  --gallery-glow: rgba(20, 120, 255, 0.26);
  background: linear-gradient(145deg, #071328, #02050c 68%);
}

.home-gallery-appbar {
  position: relative;
  z-index: 2;
  min-height: 46px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(1, 4, 12, 0.56);
}

.home-gallery-appbar > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-gallery-appbar strong,
.home-gallery-appbar b {
  color: #fff;
  font-size: 0.7rem;
}

.home-gallery-appbar b {
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 7px;
  color: rgba(214, 226, 245, 0.72);
  background: rgba(255, 255, 255, 0.035);
}

.home-gallery-app-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #6f5cff;
  box-shadow: 0 0 13px rgba(111, 92, 255, 0.78);
}

.home-gallery-visual-risk .home-gallery-app-dot {
  background: #18dab1;
  box-shadow: 0 0 13px rgba(24, 218, 177, 0.72);
}

.home-gallery-visual-analytics .home-gallery-app-dot {
  background: #bc5dff;
  box-shadow: 0 0 13px rgba(188, 93, 255, 0.72);
}

.home-gallery-visual-depot .home-gallery-app-dot {
  background: #1686ff;
  box-shadow: 0 0 13px rgba(22, 134, 255, 0.72);
}

.home-gallery-trade-form {
  position: relative;
  z-index: 2;
  padding: 16px;
}

.home-gallery-form-row {
  display: grid;
  gap: 8px;
}

.home-gallery-form-row + .home-gallery-form-row {
  margin-top: 8px;
}

.home-gallery-form-row-three {
  grid-template-columns: repeat(3, 1fr);
}

.home-gallery-form-row > span,
.home-gallery-trade-summary > span,
.home-gallery-risk-panel > span,
.home-gallery-analytics-metrics > span {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(121, 102, 255, 0.17);
  border-radius: 9px;
  background: rgba(4, 6, 17, 0.68);
}

.home-gallery-form-row small,
.home-gallery-form-row strong,
.home-gallery-trade-summary small,
.home-gallery-trade-summary strong,
.home-gallery-risk-panel small,
.home-gallery-risk-panel strong,
.home-gallery-analytics-metrics small,
.home-gallery-analytics-metrics strong {
  display: block;
}

.home-gallery-form-row small,
.home-gallery-trade-summary small,
.home-gallery-risk-panel small,
.home-gallery-analytics-metrics small {
  color: rgba(173, 187, 211, 0.64);
  font-size: 0.52rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-gallery-form-row strong,
.home-gallery-trade-summary strong,
.home-gallery-risk-panel strong,
.home-gallery-analytics-metrics strong {
  margin-top: 4px;
  color: #fff;
  font-size: 0.74rem;
}

.home-gallery-trade-summary {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 0.9fr 1fr auto;
  gap: 8px;
  align-items: stretch;
}

.home-gallery-trade-summary > b {
  display: grid;
  place-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(72, 222, 168, 0.2);
  border-radius: 9px;
  background: rgba(42, 183, 130, 0.08);
  color: #71e7b6;
  font-size: 0.62rem;
  text-align: center;
}

.home-gallery-risk-stage {
  position: relative;
  z-index: 2;
  height: calc(100% - 46px);
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(118px, 0.65fr);
  gap: 10px;
}

.home-gallery-risk-chart {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(17, 204, 172, 0.16);
  border-radius: 11px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    rgba(1, 7, 12, 0.68);
  background-size: 100% 44px, 44px 100%, auto;
}

.home-gallery-level {
  position: absolute;
  left: 12px;
  right: 12px;
  z-index: 2;
  height: 1px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-top: 1px dashed currentColor;
  font-size: 0.5rem;
}

.home-gallery-level i,
.home-gallery-level b {
  padding: 2px 5px;
  background: rgba(2, 7, 12, 0.88);
  font-style: normal;
}

.home-gallery-level.is-target {
  top: 23%;
  color: #4de3b5;
}

.home-gallery-level.is-entry {
  top: 51%;
  color: #39b9ff;
}

.home-gallery-level.is-stop {
  top: 77%;
  color: #ff7181;
}

.home-gallery-candles {
  position: absolute;
  inset: 25px 15px 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 7px;
}

.home-gallery-candles i {
  position: relative;
  width: 12px;
  height: 31%;
  border: 1px solid #22e4ff;
  background: rgba(34, 228, 255, 0.14);
}

.home-gallery-candles i:nth-child(2) { height: 45%; }
.home-gallery-candles i:nth-child(3) { height: 38%; }
.home-gallery-candles i:nth-child(4) { height: 58%; }
.home-gallery-candles i:nth-child(5) { height: 50%; }
.home-gallery-candles i:nth-child(6) { height: 67%; }
.home-gallery-candles i:nth-child(7) { height: 75%; }
.home-gallery-candles i:nth-child(8) { height: 83%; }

.home-gallery-candles i::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -11px;
  bottom: -11px;
  width: 1px;
  background: currentColor;
  transform: translateX(-50%);
  z-index: -1;
}

.home-gallery-candles i.is-down {
  border-color: #ff7181;
  background: rgba(255, 113, 129, 0.12);
  color: #ff7181;
}

.home-gallery-risk-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.home-gallery-risk-panel > span {
  border-color: rgba(17, 204, 172, 0.14);
}

.home-gallery-risk-panel > div {
  padding: 11px;
  border: 1px solid rgba(17, 204, 172, 0.22);
  border-radius: 10px;
  background: rgba(24, 218, 177, 0.08);
}

.home-gallery-risk-panel > div small,
.home-gallery-risk-panel > div strong {
  display: block;
}

.home-gallery-risk-panel > div small {
  color: rgba(188, 226, 217, 0.68);
  font-size: 0.52rem;
}

.home-gallery-risk-panel > div strong {
  margin-top: 3px;
  color: #58ebc8;
  font-size: 1.05rem;
}

.home-gallery-analytics-metrics {
  position: relative;
  z-index: 2;
  padding: 13px 13px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.home-gallery-analytics-metrics > span {
  border-color: rgba(188, 93, 255, 0.14);
}

.home-gallery-analytics-body {
  position: relative;
  z-index: 2;
  padding: 9px 13px 13px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(124px, 0.65fr);
  gap: 9px;
}

.home-gallery-bars {
  min-height: 137px;
  padding: 12px 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border: 1px solid rgba(188, 93, 255, 0.15);
  border-radius: 10px;
  background:
    linear-gradient(180deg, transparent 49.6%, rgba(255,255,255,.1) 50%, transparent 50.4%),
    rgba(4, 3, 12, 0.62);
}

.home-gallery-bars i {
  align-self: center;
  width: 13px;
  height: var(--bar);
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #48e6b1, rgba(31, 174, 126, 0.24));
  box-shadow: 0 0 14px rgba(72, 230, 177, 0.13);
}

.home-gallery-bars i.is-negative {
  transform: translateY(56%);
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, rgba(255, 113, 129, 0.25), #ff7181);
  box-shadow: 0 0 14px rgba(255, 113, 129, 0.12);
}

.home-gallery-review-note {
  padding: 11px;
  border: 1px solid rgba(188, 93, 255, 0.15);
  border-radius: 10px;
  background: rgba(4, 3, 12, 0.62);
}

.home-gallery-review-note > span {
  color: #d36cff;
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-gallery-review-note > strong {
  display: block;
  margin-top: 7px;
  color: #fff;
  font-size: 0.68rem;
  line-height: 1.35;
}

.home-gallery-review-note p {
  margin-top: 7px;
  color: rgba(178, 189, 208, 0.68);
  font-size: 0.52rem;
  line-height: 1.45;
}

.home-gallery-review-note div {
  margin-top: 10px;
  padding-top: 8px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.07);
  color: rgba(178, 189, 208, 0.68);
  font-size: 0.52rem;
}

.home-gallery-review-note b {
  color: #fff;
}

.home-gallery-depot-body {
  position: relative;
  z-index: 2;
  height: calc(100% - 46px);
  padding: 15px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(130px, 0.92fr);
  gap: 12px;
  align-items: center;
}

.home-gallery-donut-wrap {
  min-height: 185px;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 13px;
  border: 1px solid rgba(22, 134, 255, 0.16);
  border-radius: 12px;
  background: rgba(1, 7, 18, 0.6);
}

.home-gallery-donut-wrap > div:last-child small,
.home-gallery-donut-wrap > div:last-child strong,
.home-gallery-donut-wrap > div:last-child span {
  display: block;
}

.home-gallery-donut-wrap > div:last-child small {
  color: rgba(178, 189, 208, 0.66);
  font-size: 0.56rem;
}

.home-gallery-donut-wrap > div:last-child strong {
  margin-top: 6px;
  color: #fff;
  font-size: 1.08rem;
}

.home-gallery-donut-wrap > div:last-child span {
  margin-top: 4px;
  color: rgba(178, 189, 208, 0.54);
  font-size: 0.5rem;
}

.home-gallery-donut {
  position: relative;
  width: 124px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#1686ff 0 62%, #22e4ff 62% 90%, #815cff 90% 100%);
  box-shadow: 0 0 32px rgba(22, 134, 255, 0.16);
}

.home-gallery-donut::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: #050b16;
}

.home-gallery-donut span {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}

.home-gallery-allocation-list {
  display: grid;
  gap: 9px;
}

.home-gallery-allocation-list > div {
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(22, 134, 255, 0.14);
  border-radius: 10px;
  background: rgba(1, 7, 18, 0.58);
  color: rgba(205, 219, 239, 0.78);
  font-size: 0.62rem;
}

.home-gallery-allocation-list span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.home-gallery-allocation-list i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.home-gallery-allocation-list i.is-blue { background: #1686ff; }
.home-gallery-allocation-list i.is-cyan { background: #22e4ff; }
.home-gallery-allocation-list i.is-violet { background: #815cff; }

.home-gallery-allocation-list strong {
  color: #fff;
}

.home-gallery-card-copy {
  padding: 17px 2px 0;
}

.home-gallery-card-copy > span {
  color: rgba(126, 125, 255, 0.78);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.home-gallery-card-copy h3 {
  margin-top: 7px;
  color: #fff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.12rem;
  line-height: 1.3;
  letter-spacing: -0.035em;
}

.home-gallery-card-copy p {
  margin-top: 7px;
  color: rgba(178, 189, 208, 0.76);
  font-size: 0.88rem;
  line-height: 1.55;
}

.home-gallery-pagination {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 16px;
}

.home-gallery-pagination button {
  width: 92px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}

.home-gallery-pagination button:hover,
.home-gallery-pagination button.is-active {
  background: linear-gradient(90deg, #815cff, #22e4ff);
}

.home-gallery-pagination button.is-active {
  transform: scaleY(1.5);
}

@media (max-height: 760px) and (min-width: 1181px) {
  .home-premium-title {
    font-size: clamp(2.85rem, 3.8vw, 4rem);
  }

  .home-hero-capabilities {
    margin-top: 14px;
  }

  .home-premium-actions {
    margin-top: 17px;
  }

  .home-hero-beta-note {
    margin-top: 11px;
  }
}

@media (max-width: 1180px) {
  .home-product-gallery-track {
    grid-auto-columns: calc((100% - 22px) / 2);
  }
}

@media (max-width: 760px) {
  .home-premium-title {
    font-size: clamp(2.5rem, 11vw, 3.8rem);
  }

  .home-hero-capabilities {
    gap: 8px 14px;
  }

  .home-product-gallery-section {
    padding: 68px 18px 72px;
  }

  .home-product-gallery-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .home-gallery-controls {
    justify-self: end;
  }

  .home-product-gallery-track {
    grid-auto-columns: 86%;
    gap: 16px;
  }

  .home-gallery-visual {
    height: 276px;
  }

  .home-gallery-pagination button {
    width: 46px;
  }
}

@media (max-width: 520px) {
  .home-premium-title {
    font-size: clamp(2.35rem, 12vw, 3.25rem);
  }

  .home-premium-lead {
    font-size: 0.96rem;
  }

  .home-hero-capabilities {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .home-gallery-visual {
    height: 260px;
  }

  .home-gallery-form-row-three {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-gallery-form-row-three span:nth-child(3) {
    display: none;
  }

  .home-gallery-trade-summary {
    grid-template-columns: 1fr 1fr;
  }

  .home-gallery-trade-summary > b {
    display: none;
  }

  .home-gallery-risk-stage,
  .home-gallery-analytics-body,
  .home-gallery-depot-body {
    grid-template-columns: 1fr;
  }

  .home-gallery-risk-panel,
  .home-gallery-review-note,
  .home-gallery-allocation-list {
    display: none;
  }

  .home-gallery-donut-wrap {
    grid-template-columns: 112px 1fr;
    min-height: 175px;
  }

  .home-gallery-donut {
    width: 108px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-product-gallery-viewport {
    scroll-behavior: auto;
  }
}


/* Textkontrast der Produktgalerie explizit absichern */
.home-product-gallery-section .section-label {
  position: relative;
  z-index: 3;
  color: #22e4ff !important;
  -webkit-text-fill-color: #22e4ff;
}

.home-product-gallery-heading p:not(.section-label) {
  position: relative;
  z-index: 3;
  color: rgba(178, 189, 208, 0.82) !important;
  -webkit-text-fill-color: rgba(178, 189, 208, 0.82);
}

.home-gallery-card-copy {
  position: relative;
  z-index: 3;
}

.home-gallery-card-copy > span {
  color: #817dff !important;
  -webkit-text-fill-color: #817dff;
}

.home-gallery-card-copy h3 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

.home-gallery-card-copy p {
  color: #aebbd0 !important;
  -webkit-text-fill-color: #aebbd0;
}


/* =========================================================
   Phase 29C-0C2 – Risk Center & Risk Radar Premium
   ========================================================= */

.risk-center-premium-hero,
.risk-radar-premium-hero {
  position: relative;
  min-height: min(800px, 88svh);
  padding: 132px 30px 66px;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 28%, rgba(18, 121, 255, 0.15), transparent 30rem),
    radial-gradient(circle at 18% 76%, rgba(34, 228, 255, 0.06), transparent 28rem),
    linear-gradient(145deg, #02050d 0%, #030914 48%, #01040b 100%);
}

.risk-premium-grid,
.radar-premium-grid {
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(90deg, transparent, #000 34%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%, #000 100%);
}

.risk-premium-glow,
.radar-premium-glow {
  position: absolute;
  width: 560px;
  height: 560px;
  right: 7%;
  top: 8%;
  border-radius: 50%;
  background: rgba(11, 115, 255, 0.12);
  filter: blur(95px);
  pointer-events: none;
}

.risk-center-premium-inner,
.risk-radar-premium-inner {
  position: relative;
  z-index: 2;
  width: min(100%, var(--max-width));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(520px, 1.18fr);
  gap: clamp(48px, 6vw, 88px);
  align-items: center;
}

.risk-center-premium-copy,
.risk-radar-premium-copy {
  max-width: 600px;
}

.risk-center-premium-title,
.risk-radar-premium-title {
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(3rem, 5.1vw, 5rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.075em;
}

.risk-center-premium-title span,
.risk-radar-premium-title span {
  color: #1686ff;
  text-shadow: 0 0 34px rgba(22, 134, 255, 0.2);
}

.risk-radar-premium-title span {
  color: #f2c94c;
  text-shadow: 0 0 32px rgba(242, 201, 76, 0.14);
}

.risk-center-premium-lead,
.risk-radar-premium-lead {
  max-width: 580px;
  margin-top: 24px;
  color: rgba(216, 226, 242, 0.78);
  font-size: 1.04rem;
  line-height: 1.7;
}

.risk-center-premium-actions,
.risk-radar-premium-actions {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.risk-center-premium-points,
.risk-radar-premium-points {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.risk-center-premium-points span,
.risk-radar-premium-points span {
  position: relative;
  padding-left: 16px;
  color: rgba(184, 199, 220, 0.72);
  font-size: 0.78rem;
  font-weight: 700;
}

.risk-center-premium-points span::before,
.risk-radar-premium-points span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22e4ff;
  box-shadow: 0 0 12px rgba(34, 228, 255, 0.65);
  transform: translateY(-50%);
}

.risk-radar-premium-points span::before {
  background: #f2c94c;
  box-shadow: 0 0 12px rgba(242, 201, 76, 0.4);
}

.risk-cockpit,
.market-risk-console {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(31, 139, 255, 0.28);
  border-radius: 24px;
  background:
    radial-gradient(circle at 86% 4%, rgba(22, 134, 255, 0.16), transparent 18rem),
    linear-gradient(180deg, rgba(7, 22, 47, 0.94), rgba(2, 8, 20, 0.96));
  box-shadow:
    0 35px 90px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.risk-cockpit::before,
.market-risk-console::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(180deg, #000, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%);
}

.risk-cockpit-topbar,
.market-risk-console-head {
  position: relative;
  z-index: 2;
  min-height: 76px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(2, 8, 20, 0.55);
}

.risk-cockpit-topbar > div span,
.market-risk-console-head > div span {
  display: block;
  color: #22e4ff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.risk-cockpit-topbar > div strong,
.market-risk-console-head > div strong {
  display: block;
  margin-top: 5px;
  color: #fff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.04rem;
}

.risk-cockpit-state,
.market-risk-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 11px;
  border: 1px solid rgba(72, 230, 177, 0.3);
  border-radius: 999px;
  background: rgba(72, 230, 177, 0.08);
  color: #48e6b1;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.risk-cockpit-body {
  position: relative;
  z-index: 2;
  padding: 22px;
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 16px;
}

.risk-gauge-panel {
  grid-row: span 2;
  padding: 16px;
  border: 1px solid rgba(22, 134, 255, 0.14);
  border-radius: 17px;
  background: rgba(1, 7, 18, 0.62);
}

.risk-gauge {
  position: relative;
  width: 154px;
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(from 220deg, #22e4ff 0 43%, #1686ff 43% 61%, rgba(255,255,255,.07) 61% 100%);
  box-shadow: 0 0 38px rgba(22, 134, 255, 0.14);
}

.risk-gauge::before {
  content: "";
  position: absolute;
  inset: 15px;
  border-radius: 50%;
  background: #06101f;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.risk-gauge-center {
  position: relative;
  z-index: 1;
  text-align: center;
}

.risk-gauge-center small,
.risk-gauge-center span {
  display: block;
  color: rgba(178,189,208,.62);
  font-size: 0.58rem;
}

.risk-gauge-center strong {
  display: block;
  margin: 3px 0;
  color: #fff;
  font-size: 1.48rem;
}

.risk-gauge-caption {
  margin-top: 14px;
  padding-top: 13px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,.07);
}

.risk-gauge-caption span {
  color: rgba(178,189,208,.62);
  font-size: 0.62rem;
}

.risk-gauge-caption strong {
  color: #fff;
  font-size: 0.72rem;
}

.risk-cockpit-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.risk-cockpit-values div {
  min-height: 70px;
  padding: 12px;
  border: 1px solid rgba(22, 134, 255, 0.13);
  border-radius: 13px;
  background: rgba(1, 7, 18, 0.58);
}

.risk-cockpit-values span,
.risk-cockpit-values strong {
  display: block;
}

.risk-cockpit-values span {
  color: rgba(178,189,208,.6);
  font-size: 0.58rem;
}

.risk-cockpit-values strong {
  margin-top: 6px;
  color: #fff;
  font-size: 0.8rem;
}

.risk-cockpit-plan {
  padding: 14px;
  border: 1px solid rgba(34, 228, 255, 0.14);
  border-radius: 15px;
  background: rgba(3, 14, 30, 0.68);
}

.risk-cockpit-plan-head,
.risk-plan-labels {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.risk-cockpit-plan-head span {
  color: rgba(178,189,208,.68);
  font-size: 0.64rem;
}

.risk-cockpit-plan-head strong {
  color: #48e6b1;
  font-size: 0.72rem;
}

.risk-plan-track {
  position: relative;
  height: 7px;
  margin: 18px 0 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff7181 0 25%, #1686ff 25% 52%, #48e6b1 52% 100%);
}

.risk-plan-track span {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.risk-plan-stop { left: 18%; background: #ff7181; }
.risk-plan-entry { left: 46%; background: #1686ff; }
.risk-plan-target { left: 86%; background: #48e6b1; }

.risk-plan-labels span {
  color: rgba(178,189,208,.58);
  font-size: 0.5rem;
}

.risk-cockpit-radar {
  grid-column: 1 / -1;
  min-height: 68px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(242, 201, 76, 0.18);
  border-radius: 15px;
  background: rgba(242, 201, 76, 0.045);
  transition: transform 180ms ease, border-color 180ms ease;
}

.risk-cockpit-radar:hover {
  transform: translateY(-2px);
  border-color: rgba(242, 201, 76, 0.38);
}

.risk-radar-mini-light {
  display: flex;
  gap: 5px;
}

.risk-radar-mini-light i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
}

.risk-radar-mini-light i:first-child { background: rgba(255, 113, 129, 0.2); }
.risk-radar-mini-light i.is-active { background: #f2c94c; box-shadow: 0 0 14px rgba(242,201,76,.55); }
.risk-radar-mini-light i:last-child { background: rgba(72, 230, 177, 0.18); }

.risk-cockpit-radar small,
.risk-cockpit-radar strong {
  display: block;
}

.risk-cockpit-radar small {
  color: rgba(178,189,208,.58);
  font-size: 0.56rem;
}

.risk-cockpit-radar strong {
  margin-top: 4px;
  color: #fff;
  font-size: 0.72rem;
}

.risk-cockpit-radar b {
  color: #f2c94c;
  font-size: 1rem;
}

.risk-cockpit-note,
.market-risk-note {
  position: relative;
  z-index: 2;
  padding: 0 22px 18px;
  color: rgba(178,189,208,.5);
  font-size: 0.58rem;
}

.risk-tool-navigation,
.radar-state-navigation {
  padding: 22px 30px;
  border-top: 1px solid rgba(22, 134, 255, 0.12);
  border-bottom: 1px solid rgba(22, 134, 255, 0.12);
  background: #030914;
}

.risk-tool-navigation-inner,
.radar-state-navigation-inner {
  width: min(100%, var(--max-width));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.risk-nav-card {
  min-height: 84px;
  padding: 15px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(22, 134, 255, 0.13);
  border-radius: 15px;
  background: rgba(3, 14, 30, 0.6);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.risk-nav-card:hover {
  transform: translateY(-3px);
  border-color: rgba(34, 228, 255, 0.32);
  background: rgba(7, 25, 52, 0.76);
}

.risk-nav-card > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(34, 228, 255, 0.26);
  border-radius: 50%;
  color: #22e4ff;
  font-size: 0.62rem;
  font-weight: 800;
}

.risk-nav-card strong,
.risk-nav-card small {
  display: block;
}

.risk-nav-card strong { color: #fff; font-size: 0.76rem; }
.risk-nav-card small { margin-top: 3px; color: rgba(178,189,208,.58); font-size: 0.56rem; }
.risk-nav-card b { color: #1686ff; }

.market-risk-console {
  border-color: rgba(242, 201, 76, 0.22);
  background:
    radial-gradient(circle at 86% 4%, rgba(242, 201, 76, 0.11), transparent 19rem),
    linear-gradient(180deg, rgba(13, 18, 36, 0.95), rgba(3, 7, 17, 0.97));
}

.market-risk-console-head > div span { color: #f2c94c; }

.market-risk-status {
  border-color: rgba(242, 201, 76, 0.34);
  background: rgba(242, 201, 76, 0.08);
  color: #f2c94c;
}

.market-risk-console-main {
  position: relative;
  z-index: 2;
  padding: 24px 24px 16px;
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 24px;
  align-items: center;
}

.market-risk-dial {
  position: relative;
  width: 200px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(from 225deg, #48e6b1 0 28%, #f2c94c 28% 58%, #ff7181 58% 75%, rgba(255,255,255,.07) 75% 100%);
  box-shadow: 0 0 46px rgba(242, 201, 76, 0.12);
}

.market-risk-dial::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: #090d1a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.market-risk-dial-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.market-risk-dial-inner small,
.market-risk-dial-inner span {
  display: block;
  color: rgba(178,189,208,.62);
  font-size: 0.62rem;
}

.market-risk-dial-inner strong {
  display: block;
  color: #fff;
  font-size: 3rem;
  line-height: 1;
}

.market-risk-summary > span {
  color: #f2c94c;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.market-risk-summary > strong {
  display: block;
  margin-top: 8px;
  color: #fff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.56rem;
}

.market-risk-summary p {
  margin-top: 10px;
  color: rgba(190, 203, 222, 0.68);
  font-size: 0.82rem;
  line-height: 1.55;
}

.market-risk-factor-list {
  position: relative;
  z-index: 2;
  padding: 0 24px 18px;
  display: grid;
  gap: 9px;
}

.market-risk-factor-list > div {
  min-height: 38px;
  display: grid;
  grid-template-columns: 112px 1fr 78px;
  gap: 12px;
  align-items: center;
}

.market-risk-factor-list span,
.market-risk-factor-list strong {
  font-size: 0.62rem;
}

.market-risk-factor-list span { color: rgba(178,189,208,.62); }
.market-risk-factor-list strong { color: #fff; text-align: right; }

.market-risk-factor-list i {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
}

.market-risk-factor-list b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f2c94c, #ff9f43);
  box-shadow: 0 0 14px rgba(242,201,76,.22);
}

.market-risk-console-footer {
  position: relative;
  z-index: 2;
  margin: 0 24px 16px;
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  border: 1px solid rgba(242, 201, 76, 0.13);
  border-radius: 14px;
  background: rgba(242, 201, 76, 0.035);
}

.market-risk-console-footer small,
.market-risk-console-footer strong {
  display: block;
}

.market-risk-console-footer small { color: rgba(178,189,208,.58); font-size: 0.56rem; }
.market-risk-console-footer strong { margin-top: 4px; color: #fff; font-size: 0.72rem; }

.radar-state-navigation-inner {
  grid-template-columns: repeat(3, 1fr);
}

.radar-state-card {
  min-height: 100px;
  padding: 17px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(3, 12, 27, 0.62);
}

.radar-state-card.is-current {
  border-color: rgba(242, 201, 76, 0.35);
  background: rgba(242, 201, 76, 0.055);
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
}

.radar-state-dot {
  width: 14px;
  height: 14px;
  margin-top: 3px;
  border-radius: 50%;
}

.radar-state-card.is-green .radar-state-dot { background: #48e6b1; box-shadow: 0 0 18px rgba(72,230,177,.42); }
.radar-state-card.is-yellow .radar-state-dot { background: #f2c94c; box-shadow: 0 0 18px rgba(242,201,76,.42); }
.radar-state-card.is-red .radar-state-dot { background: #ff7181; box-shadow: 0 0 18px rgba(255,113,129,.42); }

.radar-state-card small,
.radar-state-card strong,
.radar-state-card p { display: block; }
.radar-state-card small { color: rgba(178,189,208,.58); font-size: 0.56rem; font-weight: 800; letter-spacing: .08em; }
.radar-state-card strong { margin-top: 5px; color: #fff; font-size: .82rem; }
.radar-state-card p { margin-top: 5px; color: rgba(178,189,208,.62); font-size: .66rem; line-height: 1.45; }

.radar-purpose-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.75fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.radar-purpose-principle {
  padding: 24px;
  border: 1px solid rgba(242, 201, 76, 0.16);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(242, 201, 76, 0.065), transparent 45%),
    rgba(3, 12, 27, 0.68);
}

.radar-purpose-principle > span {
  color: #f2c94c;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.radar-purpose-principle > strong {
  display: block;
  margin-top: 9px;
  color: #fff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.2rem;
  line-height: 1.4;
}

.radar-purpose-principle p {
  margin-top: 10px;
  color: rgba(178,189,208,.66);
  font-size: .84rem;
}

@media (max-width: 1180px) {
  .risk-center-premium-inner,
  .risk-radar-premium-inner {
    grid-template-columns: 1fr;
  }

  .risk-center-premium-copy,
  .risk-radar-premium-copy {
    max-width: 760px;
  }

  .risk-cockpit,
  .market-risk-console {
    max-width: 760px;
  }
}

@media (max-width: 900px) {
  .risk-tool-navigation-inner {
    grid-template-columns: 1fr 1fr;
  }

  .radar-state-navigation-inner {
    grid-template-columns: 1fr;
  }

  .radar-purpose-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .risk-center-premium-hero,
  .risk-radar-premium-hero {
    min-height: auto;
    padding: 118px 18px 54px;
  }

  .risk-center-premium-title,
  .risk-radar-premium-title {
    font-size: clamp(2.55rem, 12vw, 3.6rem);
  }

  .risk-cockpit-body,
  .market-risk-console-main {
    grid-template-columns: 1fr;
  }

  .risk-gauge-panel {
    grid-row: auto;
  }

  .risk-gauge,
  .market-risk-dial {
    width: 150px;
  }

  .risk-tool-navigation,
  .radar-state-navigation {
    padding: 18px;
  }

  .risk-tool-navigation-inner {
    grid-template-columns: 1fr;
  }

  .market-risk-factor-list > div {
    grid-template-columns: 92px 1fr;
  }

  .market-risk-factor-list strong {
    display: none;
  }

  .market-risk-console-footer {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Phase 29C-0C3 - Wissen, Ueber und Preise Premium
   Scoped page systems - no changes to the private beta app
   ========================================================= */

.knowledge-premium-page,
.about-premium-page,
.pricing-premium-page {
  --premium-surface: rgba(5, 14, 31, 0.82);
  --premium-surface-strong: rgba(7, 19, 42, 0.94);
  --premium-border: rgba(65, 154, 255, 0.2);
  --premium-border-strong: rgba(45, 145, 255, 0.42);
  --premium-muted: rgba(197, 209, 226, 0.72);
  --premium-soft: rgba(255, 255, 255, 0.055);
}

.knowledge-premium-page main,
.about-premium-page main,
.pricing-premium-page main {
  overflow: hidden;
}

.knowledge-premium-hero,
.about-premium-hero,
.pricing-premium-hero {
  position: relative;
  min-height: 100svh;
  padding: 118px 30px 48px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(41, 137, 255, 0.16);
  background:
    radial-gradient(circle at 74% 44%, rgba(15, 108, 255, 0.17), transparent 34rem),
    radial-gradient(circle at 12% 78%, rgba(0, 221, 255, 0.07), transparent 26rem),
    linear-gradient(145deg, #02050d 0%, #040b19 54%, #02050c 100%);
}

.knowledge-premium-grid,
.about-premium-grid,
.pricing-premium-grid {
  position: absolute;
  inset: 0;
  opacity: 0.23;
  background-image:
    linear-gradient(rgba(67, 147, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 147, 255, 0.07) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, transparent 0%, black 48%, black 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 48%, black 100%);
}

.knowledge-premium-glow,
.about-premium-glow,
.pricing-premium-glow {
  position: absolute;
  width: 650px;
  height: 650px;
  right: -160px;
  top: 4%;
  border-radius: 50%;
  background: rgba(0, 103, 255, 0.13);
  filter: blur(120px);
  pointer-events: none;
}

.knowledge-premium-inner,
.about-premium-inner,
.pricing-premium-inner {
  position: relative;
  z-index: 2;
  width: min(100%, 1320px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(480px, 0.88fr);
  gap: clamp(48px, 6vw, 94px);
  align-items: center;
}

.knowledge-premium-copy,
.about-premium-copy,
.pricing-premium-copy {
  max-width: 670px;
}

.knowledge-premium-title,
.about-premium-title,
.pricing-premium-title {
  max-width: 690px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.9rem, 4.7vw, 4.85rem);
  font-weight: 800;
  line-height: 0.99;
  letter-spacing: -0.075em;
}

.knowledge-premium-title span,
.about-premium-title span,
.pricing-premium-title span {
  display: block;
  margin-top: 8px;
  color: #1686ff;
  text-shadow: 0 0 36px rgba(13, 116, 255, 0.16);
}

.knowledge-premium-lead,
.about-premium-lead,
.pricing-premium-lead {
  max-width: 640px;
  margin-top: 24px;
  color: rgba(235, 243, 255, 0.78);
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.72;
}

.knowledge-premium-actions,
.about-premium-actions,
.pricing-premium-actions {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.knowledge-premium-points,
.about-premium-points,
.pricing-premium-points {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.knowledge-premium-points span,
.about-premium-points span,
.pricing-premium-points span {
  min-height: 30px;
  padding: 6px 11px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(71, 151, 255, 0.2);
  border-radius: 999px;
  background: rgba(4, 14, 32, 0.58);
  color: rgba(225, 236, 250, 0.68);
  font-size: 0.74rem;
  font-weight: 800;
}

/* Wissen hero visual */

.knowledge-feature-visual {
  position: relative;
  min-height: 500px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(68, 157, 255, 0.28);
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(10, 31, 67, 0.92), rgba(3, 11, 27, 0.96)),
    #061022;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.025) inset;
}

.knowledge-feature-visual::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -120px;
  top: -140px;
  border-radius: 50%;
  background: rgba(0, 122, 255, 0.22);
  filter: blur(72px);
}

.knowledge-feature-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(70, 151, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 151, 255, 0.05) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(180deg, black, transparent 82%);
  -webkit-mask-image: linear-gradient(180deg, black, transparent 82%);
  pointer-events: none;
}

.knowledge-feature-topline,
.pricing-access-topline,
.about-compass-topline {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 17px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(186, 205, 229, 0.62);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.knowledge-feature-body {
  position: relative;
  z-index: 2;
  min-height: 362px;
  display: grid;
  grid-template-columns: minmax(180px, 0.78fr) minmax(0, 1.22fr);
  gap: 24px;
  align-items: center;
}

.knowledge-ratio-figure {
  position: relative;
  min-height: 260px;
  padding: 30px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(70, 151, 255, 0.18);
  border-radius: 23px;
  background: rgba(1, 7, 19, 0.55);
}

.knowledge-ratio-figure span,
.knowledge-ratio-figure small {
  color: rgba(190, 207, 229, 0.66);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.knowledge-ratio-figure strong {
  margin: 7px 0 18px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 3.45rem;
  line-height: 1;
  letter-spacing: -0.08em;
}

.knowledge-ratio-track {
  position: relative;
  height: 12px;
  margin-bottom: 15px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.knowledge-ratio-track i,
.knowledge-ratio-track b {
  position: absolute;
  top: 0;
  bottom: 0;
}

.knowledge-ratio-track i {
  left: 0;
  width: 34%;
  background: linear-gradient(90deg, #f45162, #ff8792);
}

.knowledge-ratio-track b {
  left: 34%;
  right: 0;
  background: linear-gradient(90deg, #0872ff, #29d9ff);
}

.knowledge-feature-copy > span,
.knowledge-card-content > span,
.about-status-card > span,
.pricing-card-topline > span {
  color: #38c9ff;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.knowledge-feature-copy h2 {
  margin-top: 12px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.65rem, 2.3vw, 2.45rem);
  line-height: 1.08;
  letter-spacing: -0.055em;
}

.knowledge-feature-copy p {
  margin-top: 16px;
  color: var(--premium-muted);
  font-size: 0.94rem;
  line-height: 1.64;
}

.knowledge-feature-link {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 52px;
  padding: 0 17px;
  border: 1px solid rgba(54, 154, 255, 0.22);
  border-radius: 15px;
  background: rgba(8, 73, 160, 0.12);
  color: #e9f5ff;
  font-size: 0.85rem;
  font-weight: 800;
  transition: border-color 180ms ease, background 180ms ease;
}

.knowledge-feature-link:hover {
  border-color: rgba(38, 195, 255, 0.5);
  background: rgba(8, 93, 201, 0.18);
}

/* Shared category / trust strips */

.knowledge-category-strip,
.about-trust-strip {
  position: relative;
  z-index: 5;
  border-bottom: 1px solid rgba(41, 137, 255, 0.14);
  background: #030812;
}

.knowledge-category-inner,
.about-trust-strip-inner {
  width: min(100%, 1320px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.knowledge-category-card,
.about-trust-strip-inner > div {
  min-height: 112px;
  padding: 24px 26px;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 14px;
  align-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  transition: background 180ms ease;
}

.knowledge-category-card:last-child,
.about-trust-strip-inner > div:last-child {
  border-right: 0;
}

.knowledge-category-card:hover {
  background: rgba(13, 92, 202, 0.08);
}

.knowledge-category-card > span,
.about-trust-strip-inner > div > span {
  color: #218dff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
}

.knowledge-category-card strong,
.about-trust-strip-inner strong {
  display: block;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.93rem;
  line-height: 1.25;
}

.knowledge-category-card small,
.about-trust-strip-inner small {
  display: block;
  margin-top: 4px;
  color: rgba(188, 203, 224, 0.58);
  font-size: 0.74rem;
}

.knowledge-category-card b {
  color: #238dff;
  font-size: 1rem;
}

/* Wissen editorial sections */

.knowledge-editorial-section,
.knowledge-practice-section,
.about-story-section,
.about-values-section,
.about-roadmap-section,
.pricing-why-section,
.pricing-faq-section {
  padding-top: 96px;
  padding-bottom: 96px;
}

.knowledge-editorial-grid {
  display: grid;
  grid-template-columns: minmax(380px, 0.92fr) minmax(0, 0.88fr);
  gap: clamp(52px, 7vw, 94px);
  align-items: center;
}

.knowledge-editorial-visual {
  position: relative;
  min-height: 470px;
  padding: 25px;
  border: 1px solid var(--premium-border);
  border-radius: 28px;
  background: linear-gradient(150deg, rgba(9, 27, 59, 0.92), rgba(2, 9, 22, 0.96));
  box-shadow: 0 32px 78px rgba(0, 0, 0, 0.28);
}

.knowledge-editorial-chart {
  position: relative;
  height: 325px;
  overflow: hidden;
  border: 1px solid rgba(76, 151, 245, 0.14);
  border-radius: 20px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    rgba(1, 7, 18, 0.58);
  background-size: 100% 54px, 54px 100%, auto;
}

.knowledge-chart-line {
  position: absolute;
  left: 8%;
  height: 2px;
  transform-origin: left center;
  border-radius: 999px;
}

.knowledge-chart-line.line-one {
  width: 30%;
  bottom: 35%;
  transform: rotate(-11deg);
  background: #147aff;
  box-shadow: 0 0 18px rgba(20, 122, 255, 0.52);
}

.knowledge-chart-line.line-two {
  width: 32%;
  left: 36%;
  bottom: 42%;
  transform: rotate(9deg);
  background: #27d6ff;
  box-shadow: 0 0 18px rgba(39, 214, 255, 0.45);
}

.knowledge-chart-line.line-three {
  width: 26%;
  left: 64%;
  bottom: 54%;
  transform: rotate(-18deg);
  background: #1d8dff;
}

.knowledge-entry-point,
.knowledge-stop-point,
.knowledge-target-point {
  position: absolute;
  right: 8%;
  left: 8%;
  height: 1px;
}

.knowledge-entry-point { bottom: 46%; background: rgba(36, 151, 255, 0.65); }
.knowledge-stop-point { bottom: 24%; background: rgba(255, 83, 103, 0.52); }
.knowledge-target-point { bottom: 72%; background: rgba(58, 224, 168, 0.58); }

.knowledge-entry-point::after,
.knowledge-stop-point::after,
.knowledge-target-point::after {
  position: absolute;
  right: 0;
  top: -14px;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.knowledge-entry-point::after { content: "ENTRY"; color: #59adff; background: rgba(23, 105, 196, 0.18); }
.knowledge-stop-point::after { content: "STOP"; color: #ff7e8b; background: rgba(177, 40, 59, 0.16); }
.knowledge-target-point::after { content: "TARGET"; color: #64e2b0; background: rgba(34, 145, 99, 0.16); }

.knowledge-editorial-metrics {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
}

.knowledge-editorial-metrics div {
  min-height: 76px;
  padding: 13px;
  border: 1px solid rgba(68, 151, 255, 0.14);
  border-radius: 15px;
  background: rgba(3, 12, 29, 0.66);
}

.knowledge-editorial-metrics span {
  color: rgba(184, 201, 223, 0.62);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.knowledge-editorial-metrics strong {
  display: block;
  margin-top: 4px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.15rem;
}

.knowledge-editorial-copy h2,
.knowledge-section-head h2,
.about-story-copy h2,
.about-section-head h2,
.about-boundaries-grid h2,
.pricing-section-head h2,
.pricing-why-grid h2,
.pricing-faq-layout h2 {
  max-width: 760px;
  margin: 0;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2rem, 3.35vw, 3.15rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.06em;
}

.knowledge-editorial-copy > p:not(.section-label),
.about-story-copy > p:not(.section-label),
.pricing-why-grid > div > p:not(.section-label) {
  margin-top: 20px;
  color: var(--premium-muted);
  font-size: 1rem;
  line-height: 1.72;
}

.knowledge-key-points {
  margin-top: 28px;
  display: grid;
  gap: 12px;
}

.knowledge-key-points div {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.knowledge-key-points span {
  color: #1d8cff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
}

.knowledge-key-points p {
  color: rgba(224, 233, 245, 0.76);
  font-size: 0.9rem;
  line-height: 1.55;
}

.knowledge-inline-link {
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #57b5ff;
  font-size: 0.86rem;
  font-weight: 800;
}

.knowledge-library-section,
.about-status-section,
.about-boundaries-section,
.pricing-compare-section,
.pricing-fit-section,
.knowledge-cta-section,
.about-cta-section,
.pricing-cta-section {
  padding-top: 92px;
  padding-bottom: 92px;
}

.knowledge-section-head,
.about-section-head,
.pricing-section-head {
  margin-bottom: 38px;
  display: flex;
  justify-content: space-between;
  gap: 48px;
  align-items: end;
}

.knowledge-section-head > p,
.about-section-head > p,
.pricing-section-head > p {
  max-width: 430px;
  color: var(--premium-muted);
  font-size: 0.92rem;
  line-height: 1.65;
}

.knowledge-article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.knowledge-article-card {
  min-height: 300px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid var(--premium-border);
  border-radius: 23px;
  background: linear-gradient(155deg, rgba(9, 25, 54, 0.8), rgba(3, 10, 24, 0.92));
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.knowledge-article-card:hover {
  transform: translateY(-4px);
  border-color: rgba(42, 151, 255, 0.42);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.26);
}

.knowledge-article-card-large {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 24px;
  align-items: center;
}

.knowledge-card-graphic {
  position: relative;
  min-height: 230px;
  overflow: hidden;
  border: 1px solid rgba(57, 148, 255, 0.16);
  border-radius: 18px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    rgba(1, 7, 18, 0.55);
  background-size: 46px 46px, 46px 46px, auto;
}

.journal-graphic span {
  position: absolute;
  left: 10%;
  right: 10%;
  height: 44px;
  border: 1px solid rgba(55, 151, 255, 0.2);
  border-radius: 10px;
  background: rgba(7, 29, 63, 0.62);
}

.journal-graphic span:nth-child(1) { top: 19%; }
.journal-graphic span:nth-child(2) { top: 42%; width: 62%; right: auto; }
.journal-graphic span:nth-child(3) { top: 65%; width: 74%; right: auto; }
.journal-graphic i {
  position: absolute;
  right: 11%;
  bottom: 14%;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(39, 202, 255, 0.42);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 136, 255, 0.36), rgba(8, 39, 86, 0.2));
  box-shadow: 0 0 32px rgba(14, 116, 255, 0.26);
}

.knowledge-card-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(42, 151, 255, 0.32);
  border-radius: 17px;
  background: rgba(12, 83, 174, 0.14);
  color: #2aa5ff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
}

.knowledge-card-content h3 {
  margin-top: 12px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: -0.04em;
}

.knowledge-article-card-large .knowledge-card-content h3 {
  font-size: clamp(1.45rem, 2vw, 2rem);
}

.knowledge-card-content p {
  margin-top: 11px;
  color: var(--premium-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.knowledge-article-card-accent {
  border-color: rgba(36, 207, 255, 0.28);
  background: linear-gradient(155deg, rgba(7, 41, 78, 0.86), rgba(3, 12, 29, 0.94));
}

.knowledge-practice-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 20px;
  align-items: center;
}

.knowledge-practice-flow article {
  min-height: 240px;
  padding: 26px;
  border: 1px solid var(--premium-border);
  border-radius: 22px;
  background: linear-gradient(155deg, rgba(9, 25, 54, 0.72), rgba(3, 10, 24, 0.88));
}

.knowledge-practice-flow article > span {
  color: #248fff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
}

.knowledge-practice-flow h3 {
  margin-top: 42px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.2rem;
  letter-spacing: -0.04em;
}

.knowledge-practice-flow p {
  margin-top: 10px;
  color: var(--premium-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.knowledge-practice-flow > i {
  color: #1884ff;
  font-style: normal;
  font-size: 1.4rem;
}

.knowledge-cta-panel,
.about-cta-panel,
.pricing-cta-panel {
  padding: 42px;
  display: flex;
  justify-content: space-between;
  gap: 44px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(50, 152, 255, 0.28);
  border-radius: 28px;
  background:
    radial-gradient(circle at 88% 50%, rgba(12, 115, 255, 0.2), transparent 24rem),
    linear-gradient(145deg, rgba(9, 29, 63, 0.92), rgba(3, 11, 26, 0.96));
}

.knowledge-cta-panel h2,
.about-cta-panel h2,
.pricing-cta-panel h2 {
  max-width: 770px;
  margin: 0;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -0.055em;
}

.knowledge-cta-panel p:not(.section-label),
.about-cta-panel p:not(.section-label),
.pricing-cta-panel p:not(.section-label) {
  max-width: 720px;
  margin-top: 14px;
  color: var(--premium-muted);
}

.knowledge-cta-actions,
.about-cta-actions,
.pricing-cta-actions {
  min-width: 280px;
  display: grid;
  gap: 12px;
}

.knowledge-disclaimer {
  padding: 28px 30px;
  border-top: 1px solid rgba(49, 143, 255, 0.12);
  background: #02060d;
}

.knowledge-disclaimer-inner {
  width: min(100%, 1320px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: center;
}

.knowledge-disclaimer strong { color: #ffffff; font-size: 0.86rem; }
.knowledge-disclaimer p { color: rgba(188, 203, 222, 0.58); font-size: 0.78rem; line-height: 1.55; }

/* About visual and sections */

.about-compass {
  position: relative;
  min-height: 520px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(62, 153, 255, 0.27);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 46%, rgba(15, 105, 255, 0.13), transparent 17rem),
    linear-gradient(145deg, rgba(9, 28, 61, 0.94), rgba(2, 9, 22, 0.96));
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
}

.about-compass-orbit {
  position: relative;
  z-index: 2;
  height: 350px;
  margin-top: 14px;
}

.about-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(55, 149, 255, 0.18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.about-orbit.orbit-one { width: 168px; height: 168px; }
.about-orbit.orbit-two { width: 254px; height: 254px; border-style: dashed; }
.about-orbit.orbit-three { width: 332px; height: 332px; opacity: 0.65; }

.about-compass-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 136px;
  height: 136px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(48, 166, 255, 0.46);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 112, 226, 0.28), rgba(3, 15, 36, 0.94));
  box-shadow: 0 0 56px rgba(10, 112, 255, 0.26);
  transform: translate(-50%, -50%);
}

.about-compass-core img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.about-compass-core strong {
  margin-top: 8px;
  color: #ffffff;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.about-compass-core small { color: rgba(188, 210, 235, 0.62); font-size: 0.64rem; }

.about-compass-node {
  position: absolute;
  min-width: 82px;
  min-height: 34px;
  padding: 8px 11px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(55, 151, 255, 0.28);
  border-radius: 999px;
  background: rgba(4, 18, 42, 0.92);
  color: rgba(236, 245, 255, 0.82);
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.about-compass-node.node-one { left: 4%; top: 21%; }
.about-compass-node.node-two { right: 2%; top: 26%; }
.about-compass-node.node-three { left: 9%; bottom: 18%; }
.about-compass-node.node-four { right: 7%; bottom: 15%; }

.about-compass-statement {
  position: relative;
  z-index: 2;
  padding: 17px;
  border: 1px solid rgba(57, 153, 255, 0.16);
  border-radius: 16px;
  background: rgba(2, 9, 22, 0.56);
}

.about-compass-statement span {
  color: #3ec9ff;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.about-compass-statement p {
  margin-top: 6px;
  color: rgba(224, 234, 247, 0.76);
  font-size: 0.82rem;
  line-height: 1.55;
}

.about-trust-strip-inner > div {
  grid-template-columns: 34px 1fr;
}

.about-trust-strip-inner small { grid-column: 2; }

.about-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(380px, 0.64fr);
  gap: clamp(52px, 7vw, 100px);
  align-items: center;
}

.about-founder-note {
  position: relative;
  padding: 38px;
  overflow: hidden;
  border: 1px solid rgba(53, 153, 255, 0.24);
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(10, 31, 67, 0.9), rgba(3, 11, 27, 0.96));
}

.about-founder-note::before {
  content: "\201C";
  position: absolute;
  right: 22px;
  top: -28px;
  color: rgba(35, 141, 255, 0.13);
  font-family: Georgia, serif;
  font-size: 12rem;
  line-height: 1;
}

.about-founder-note > span {
  color: #35c9ff;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.about-founder-note blockquote {
  position: relative;
  z-index: 1;
  margin-top: 22px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.38;
  letter-spacing: -0.04em;
}

.about-founder-note > div {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.about-founder-note strong { display: block; color: #ffffff; }
.about-founder-note small { color: rgba(184, 202, 224, 0.58); }

.about-status-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.72fr);
  gap: 24px;
}

.about-status-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.about-status-card {
  min-height: 245px;
  padding: 25px;
  border: 1px solid var(--premium-border);
  border-radius: 22px;
  background: linear-gradient(155deg, rgba(9, 25, 54, 0.74), rgba(3, 10, 24, 0.91));
}

.about-status-card.is-primary {
  grid-column: span 2;
  min-height: 270px;
  background:
    radial-gradient(circle at 85% 12%, rgba(9, 116, 255, 0.2), transparent 20rem),
    linear-gradient(155deg, rgba(10, 36, 78, 0.88), rgba(3, 11, 28, 0.94));
}

.about-status-card h3 {
  margin-top: 18px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.42rem;
  letter-spacing: -0.045em;
}

.about-status-card.is-primary h3 { font-size: 2rem; }

.about-status-card p {
  margin-top: 11px;
  color: var(--premium-muted);
  font-size: 0.9rem;
  line-height: 1.62;
}

.about-status-card a {
  margin-top: 23px;
  display: inline-flex;
  gap: 12px;
  color: #51b6ff;
  font-size: 0.82rem;
  font-weight: 800;
}

.about-status-board {
  padding: 25px;
  border: 1px solid rgba(57, 153, 255, 0.25);
  border-radius: 23px;
  background: rgba(3, 11, 27, 0.86);
}

.about-status-board-head {
  margin-bottom: 18px;
  padding-bottom: 17px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.about-status-board-head span { color: #37c8ff; font-size: 0.64rem; font-weight: 900; letter-spacing: 0.13em; }
.about-status-board-head strong { display: block; margin-top: 5px; color: #ffffff; font-size: 1.15rem; }

.about-status-row {
  min-height: 55px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}

.about-status-row span { color: rgba(196, 210, 228, 0.68); font-size: 0.82rem; }
.about-status-row strong { font-size: 0.72rem; }
.about-status-row strong.is-live { color: #63e5b1; }
.about-status-row strong.is-beta { color: #58b8ff; }
.about-status-row strong.is-off { color: rgba(199, 211, 226, 0.48); }
.about-status-board > p { margin-top: 18px; color: rgba(184, 201, 222, 0.52); font-size: 0.74rem; line-height: 1.55; }

.about-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.about-values-grid article {
  min-height: 290px;
  padding: 25px;
  border: 1px solid var(--premium-border);
  border-radius: 22px;
  background: linear-gradient(155deg, rgba(9, 25, 54, 0.72), rgba(3, 10, 24, 0.9));
}

.about-values-grid article > span {
  color: #218cff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
}

.about-values-grid h3 {
  margin-top: 65px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.18rem;
  line-height: 1.28;
  letter-spacing: -0.04em;
}

.about-values-grid p {
  margin-top: 11px;
  color: var(--premium-muted);
  font-size: 0.87rem;
  line-height: 1.6;
}

.about-boundaries-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.05fr);
  gap: clamp(48px, 7vw, 96px);
  align-items: start;
}

.about-boundaries-grid > div:first-child > p:not(.section-label) {
  margin-top: 16px;
  color: var(--premium-muted);
}

.about-boundaries-list {
  display: grid;
  gap: 11px;
}

.about-boundaries-list > div {
  min-height: 92px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(255, 95, 111, 0.14);
  border-radius: 17px;
  background: rgba(37, 9, 17, 0.22);
}

.about-boundaries-list > div > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 77, 96, 0.1);
  color: #ff7484;
  font-size: 1rem;
}

.about-boundaries-list p { color: rgba(219, 228, 241, 0.72); font-size: 0.87rem; line-height: 1.55; }
.about-boundaries-list strong { color: #ffffff; }

.about-roadmap-track {
  display: grid;
  grid-template-columns: 1fr 70px 1fr 70px 1fr;
  align-items: center;
}

.about-roadmap-track article {
  min-height: 250px;
  padding: 26px;
  border: 1px solid var(--premium-border);
  border-radius: 22px;
  background: linear-gradient(155deg, rgba(8, 23, 49, 0.7), rgba(3, 10, 24, 0.9));
}

.about-roadmap-track article.is-current {
  border-color: rgba(33, 151, 255, 0.44);
  background: linear-gradient(155deg, rgba(8, 45, 91, 0.82), rgba(3, 12, 29, 0.94));
  box-shadow: 0 20px 46px rgba(0, 91, 214, 0.12);
}

.about-roadmap-track article > span { color: #35c9ff; font-size: 0.66rem; font-weight: 900; letter-spacing: 0.12em; }
.about-roadmap-track strong { display: block; margin-top: 52px; color: #ffffff; font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; font-size: 1.22rem; }
.about-roadmap-track p { margin-top: 10px; color: var(--premium-muted); font-size: 0.88rem; line-height: 1.6; }
.about-roadmap-track > i { height: 1px; background: linear-gradient(90deg, rgba(38, 143, 255, 0.22), rgba(38, 143, 255, 0.58), rgba(38, 143, 255, 0.22)); }

/* Pricing */

.pricing-access-visual {
  position: relative;
  min-height: 465px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(62, 153, 255, 0.27);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 33%, rgba(14, 111, 255, 0.17), transparent 19rem),
    linear-gradient(145deg, rgba(9, 28, 61, 0.94), rgba(2, 9, 22, 0.96));
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
}

.pricing-access-flow {
  min-height: 280px;
  display: grid;
  grid-template-columns: 1fr 46px 1fr 46px 1fr;
  gap: 8px;
  align-items: center;
}

.pricing-access-node {
  min-height: 166px;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(61, 151, 255, 0.15);
  border-radius: 18px;
  background: rgba(2, 9, 23, 0.62);
  text-align: center;
}

.pricing-access-node.is-current {
  border-color: rgba(36, 159, 255, 0.52);
  background: rgba(9, 65, 139, 0.28);
  box-shadow: 0 0 34px rgba(8, 108, 255, 0.17);
  transform: translateY(-8px);
}

.pricing-access-node.is-done { border-color: rgba(76, 224, 170, 0.25); }

.pricing-access-node span {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(47, 151, 255, 0.3);
  border-radius: 50%;
  color: #51b4ff;
  font-size: 0.66rem;
  font-weight: 900;
}

.pricing-access-node strong { margin-top: 15px; color: #ffffff; font-size: 0.82rem; }
.pricing-access-node small { margin-top: 5px; color: rgba(184, 201, 223, 0.58); font-size: 0.65rem; }
.pricing-access-flow > i { height: 1px; background: linear-gradient(90deg, rgba(42, 148, 255, 0.18), rgba(42, 148, 255, 0.64)); }

.pricing-access-summary {
  padding: 17px;
  border: 1px solid rgba(57, 153, 255, 0.16);
  border-radius: 16px;
  background: rgba(2, 9, 22, 0.58);
}

.pricing-access-summary span { color: #39c9ff; font-size: 0.64rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.pricing-access-summary strong { display: block; margin-top: 5px; color: #ffffff; font-size: 0.96rem; }
.pricing-access-summary p { margin-top: 6px; color: rgba(191, 207, 228, 0.62); font-size: 0.76rem; line-height: 1.52; }

.pricing-models-section {
  padding: 96px 30px;
  background: #02060e;
}

.pricing-models-inner {
  width: min(100%, 1320px);
  margin: 0 auto;
}

.pricing-premium-grid-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}

.pricing-premium-card {
  position: relative;
  min-height: 590px;
  padding: 27px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--premium-border);
  border-radius: 25px;
  background: linear-gradient(155deg, rgba(9, 25, 54, 0.76), rgba(3, 10, 24, 0.93));
}

.pricing-premium-card.is-featured {
  border-color: rgba(38, 153, 255, 0.5);
  background:
    radial-gradient(circle at 80% 4%, rgba(12, 119, 255, 0.2), transparent 18rem),
    linear-gradient(155deg, rgba(10, 39, 83, 0.9), rgba(3, 12, 29, 0.96));
  box-shadow: 0 30px 70px rgba(0, 87, 204, 0.16);
  transform: translateY(-12px);
}

.pricing-premium-card.is-featured::before {
  content: "AKTUELLER ZUGANG";
  position: absolute;
  left: 50%;
  top: -14px;
  transform: translateX(-50%);
  padding: 6px 11px;
  border: 1px solid rgba(51, 173, 255, 0.46);
  border-radius: 999px;
  background: #071a36;
  color: #55c5ff;
  font-size: 0.61rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.pricing-premium-card.is-future { opacity: 0.84; }

.pricing-card-topline {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.pricing-card-topline > strong {
  color: rgba(209, 222, 238, 0.62);
  font-size: 0.68rem;
}

.pricing-premium-card h3 {
  margin-top: 30px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.55rem;
  letter-spacing: -0.05em;
}

.pricing-card-price {
  min-height: 86px;
  margin-top: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pricing-card-price strong {
  display: block;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 2.15rem;
  line-height: 1.1;
  letter-spacing: -0.06em;
}

.pricing-card-price span { display: block; margin-top: 6px; color: rgba(184, 201, 222, 0.55); font-size: 0.75rem; }

.pricing-premium-card > p {
  margin-top: 20px;
  color: var(--premium-muted);
  font-size: 0.89rem;
  line-height: 1.62;
}

.pricing-premium-card ul {
  margin: 24px 0;
  display: grid;
  gap: 12px;
  list-style: none;
}

.pricing-premium-card li {
  position: relative;
  padding-left: 27px;
  color: rgba(226, 235, 247, 0.76);
  font-size: 0.84rem;
  line-height: 1.45;
}

.pricing-premium-card li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: -1px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(37, 150, 255, 0.11);
  color: #48b7ff;
  font-size: 0.67rem;
  font-weight: 900;
}

.pricing-card-link,
.pricing-card-button {
  margin-top: auto;
  min-height: 50px;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(52, 153, 255, 0.22);
  border-radius: 14px;
  color: #eaf6ff;
  font-size: 0.82rem;
  font-weight: 800;
}

.pricing-card-button {
  border-color: rgba(42, 163, 255, 0.55);
  background: linear-gradient(135deg, #0b73ff, #0062ef);
  box-shadow: 0 16px 30px rgba(0, 94, 221, 0.18);
}

.pricing-premium-card > small {
  margin-top: 11px;
  color: rgba(184, 201, 222, 0.5);
  font-size: 0.68rem;
  text-align: center;
}

.pricing-compare-table {
  overflow: hidden;
  border: 1px solid var(--premium-border);
  border-radius: 24px;
  background: rgba(3, 11, 27, 0.82);
}

.pricing-compare-row {
  min-height: 68px;
  display: grid;
  grid-template-columns: 1.35fr 0.72fr 0.82fr 0.9fr;
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}

.pricing-compare-row:last-child { border-bottom: 0; }

.pricing-compare-row > div {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(217, 228, 241, 0.7);
  font-size: 0.82rem;
}

.pricing-compare-row > div:last-child { border-right: 0; }
.pricing-compare-head { background: rgba(11, 48, 98, 0.38); }
.pricing-compare-head > div { color: #ffffff; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.pricing-compare-row > div:not(:first-child) { justify-content: center; text-align: center; }
.pricing-compare-row > div:first-child { color: #ffffff; font-weight: 700; }
.pricing-compare-row .has-feature { color: #64dfb2; font-size: 1rem; }
.pricing-compare-row .no-feature { color: rgba(190, 203, 220, 0.42); }
.pricing-compare-row .planned-feature { color: #55b8ff; font-weight: 800; }

.pricing-why-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(380px, 0.72fr);
  gap: clamp(52px, 7vw, 96px);
  align-items: center;
}

.pricing-readiness-board {
  padding: 25px;
  border: 1px solid rgba(55, 153, 255, 0.24);
  border-radius: 23px;
  background: linear-gradient(155deg, rgba(9, 25, 54, 0.76), rgba(3, 10, 24, 0.93));
}

.pricing-readiness-row {
  min-height: 59px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.pricing-readiness-row span { color: rgba(204, 217, 233, 0.66); font-size: 0.82rem; }
.pricing-readiness-row strong { font-size: 0.72rem; }
.pricing-readiness-row strong.is-progress { color: #55b8ff; }
.pricing-readiness-row strong.is-open { color: rgba(202, 214, 231, 0.48); }
.pricing-readiness-result { margin-top: 18px; padding: 18px; border: 1px solid rgba(40, 156, 255, 0.24); border-radius: 16px; background: rgba(7, 67, 143, 0.13); }
.pricing-readiness-result span { color: #41c8ff; font-size: 0.66rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.pricing-readiness-result strong { display: block; margin-top: 5px; color: #ffffff; font-size: 1rem; }

.pricing-fit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.pricing-fit-grid article {
  min-height: 280px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--premium-border);
  border-radius: 21px;
  background: linear-gradient(155deg, rgba(9, 25, 54, 0.72), rgba(3, 10, 24, 0.9));
}

.pricing-fit-grid article > span { color: #238eff; font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; font-size: 0.72rem; font-weight: 800; }
.pricing-fit-grid h3 { margin-top: 42px; color: #ffffff; font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; font-size: 1.12rem; letter-spacing: -0.04em; }
.pricing-fit-grid p { margin-top: 10px; color: var(--premium-muted); font-size: 0.85rem; line-height: 1.58; }
.pricing-fit-grid a { margin-top: auto; padding-top: 20px; color: #50b6ff; font-size: 0.78rem; font-weight: 800; }

.pricing-faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: clamp(48px, 7vw, 90px);
  align-items: start;
}

.pricing-faq-layout > div:first-child > p:not(.section-label) { margin-top: 16px; color: var(--premium-muted); }

.pricing-faq-list {
  display: grid;
  gap: 11px;
}

.pricing-faq-list details {
  overflow: hidden;
  border: 1px solid var(--premium-border);
  border-radius: 17px;
  background: rgba(4, 14, 32, 0.72);
}

.pricing-faq-list summary {
  position: relative;
  padding: 19px 52px 19px 20px;
  color: #ffffff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.pricing-faq-list summary::-webkit-details-marker { display: none; }
.pricing-faq-list summary::after { content: "+"; position: absolute; right: 20px; top: 50%; color: #3faeff; font-size: 1.2rem; transform: translateY(-50%); }
.pricing-faq-list details[open] summary::after { content: "-"; }
.pricing-faq-list details[open] summary { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.pricing-faq-list details p { padding: 17px 20px 20px; color: var(--premium-muted); font-size: 0.84rem; line-height: 1.62; }

/* Responsive - phase 29C-0C3 */

@media (max-width: 1180px) {
  .knowledge-premium-inner,
  .about-premium-inner,
  .pricing-premium-inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(410px, 0.8fr);
    gap: 42px;
  }

  .knowledge-premium-title,
  .about-premium-title,
  .pricing-premium-title {
    font-size: clamp(2.65rem, 4.4vw, 4rem);
  }

  .knowledge-feature-visual,
  .about-compass,
  .pricing-access-visual {
    min-height: 460px;
  }

  .knowledge-feature-body { grid-template-columns: 160px 1fr; }
  .knowledge-article-grid { grid-template-columns: repeat(2, 1fr); }
  .knowledge-article-card-large { grid-column: span 2; }
  .about-values-grid,
  .pricing-fit-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-premium-grid-cards { grid-template-columns: 1fr 1fr; }
  .pricing-premium-card.is-future { grid-column: span 2; min-height: 480px; }
}

@media (max-width: 980px) {
  .knowledge-premium-hero,
  .about-premium-hero,
  .pricing-premium-hero {
    min-height: 0;
    padding-top: 132px;
    padding-bottom: 72px;
  }

  .knowledge-premium-inner,
  .about-premium-inner,
  .pricing-premium-inner,
  .knowledge-editorial-grid,
  .about-story-grid,
  .about-status-layout,
  .about-boundaries-grid,
  .pricing-why-grid,
  .pricing-faq-layout {
    grid-template-columns: 1fr;
  }

  .knowledge-premium-copy,
  .about-premium-copy,
  .pricing-premium-copy {
    max-width: 760px;
  }

  .knowledge-feature-visual,
  .about-compass,
  .pricing-access-visual {
    width: min(100%, 700px);
    justify-self: center;
  }

  .knowledge-category-inner,
  .about-trust-strip-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .knowledge-category-card:nth-child(2),
  .about-trust-strip-inner > div:nth-child(2) {
    border-right: 0;
  }

  .knowledge-category-card:nth-child(-n+2),
  .about-trust-strip-inner > div:nth-child(-n+2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .knowledge-practice-flow,
  .about-roadmap-track {
    grid-template-columns: 1fr;
  }

  .knowledge-practice-flow > i,
  .about-roadmap-track > i {
    width: 1px;
    height: 30px;
    justify-self: center;
  }

  .about-status-main { grid-template-columns: 1fr; }
  .about-status-card.is-primary { grid-column: auto; }
  .about-roadmap-track article { min-height: 220px; }

  .knowledge-cta-panel,
  .about-cta-panel,
  .pricing-cta-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .knowledge-cta-actions,
  .about-cta-actions,
  .pricing-cta-actions {
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr 1fr;
  }

  .pricing-compare-table { overflow-x: auto; }
  .pricing-compare-row { min-width: 760px; }
}

@media (max-width: 720px) {
  .knowledge-premium-hero,
  .about-premium-hero,
  .pricing-premium-hero,
  .pricing-models-section,
  .knowledge-editorial-section,
  .knowledge-library-section,
  .knowledge-practice-section,
  .knowledge-cta-section,
  .about-story-section,
  .about-status-section,
  .about-values-section,
  .about-boundaries-section,
  .about-roadmap-section,
  .about-cta-section,
  .pricing-compare-section,
  .pricing-why-section,
  .pricing-fit-section,
  .pricing-faq-section,
  .pricing-cta-section {
    padding-left: 20px;
    padding-right: 20px;
  }

  .knowledge-premium-title,
  .about-premium-title,
  .pricing-premium-title {
    font-size: clamp(2.35rem, 11vw, 3.4rem);
  }

  .knowledge-premium-actions,
  .about-premium-actions,
  .pricing-premium-actions {
    display: grid;
  }

  .knowledge-premium-actions .button,
  .about-premium-actions .button,
  .pricing-premium-actions .button {
    width: 100%;
    min-width: 0;
  }

  .knowledge-feature-visual,
  .about-compass,
  .pricing-access-visual {
    min-height: 0;
    padding: 18px;
    border-radius: 24px;
  }

  .knowledge-feature-body {
    min-height: 0;
    padding: 22px 0;
    grid-template-columns: 1fr;
  }

  .knowledge-ratio-figure { min-height: 210px; }
  .about-compass-orbit { height: 330px; transform: scale(0.88); }
  .pricing-access-flow { min-height: 0; padding: 22px 0; grid-template-columns: 1fr; }
  .pricing-access-flow > i { width: 1px; height: 22px; justify-self: center; }
  .pricing-access-node { width: 100%; min-height: 120px; }
  .pricing-access-node.is-current { transform: none; }

  .knowledge-category-inner,
  .about-trust-strip-inner,
  .knowledge-article-grid,
  .about-values-grid,
  .pricing-premium-grid-cards,
  .pricing-fit-grid {
    grid-template-columns: 1fr;
  }

  .knowledge-category-card,
  .about-trust-strip-inner > div {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .knowledge-category-card:last-child,
  .about-trust-strip-inner > div:last-child { border-bottom: 0; }

  .knowledge-section-head,
  .about-section-head,
  .pricing-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  .knowledge-article-card-large {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .knowledge-editorial-visual { min-height: 0; padding: 17px; }
  .knowledge-editorial-chart { height: 270px; }
  .knowledge-editorial-metrics { grid-template-columns: 1fr 1fr 1fr; }
  .knowledge-editorial-metrics div { min-height: 68px; padding: 10px; }

  .about-status-main { grid-template-columns: 1fr; }
  .about-status-card.is-primary { min-height: 240px; }

  .pricing-premium-card,
  .pricing-premium-card.is-future {
    grid-column: auto;
    min-height: 0;
  }

  .pricing-premium-card.is-featured { transform: none; }
  .pricing-premium-card.is-featured::before { position: static; width: fit-content; margin: -40px auto 18px; transform: none; }

  .knowledge-cta-panel,
  .about-cta-panel,
  .pricing-cta-panel { padding: 28px 22px; }

  .knowledge-cta-actions,
  .about-cta-actions,
  .pricing-cta-actions { grid-template-columns: 1fr; }

  .knowledge-disclaimer-inner { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 460px) {
  .knowledge-premium-hero,
  .about-premium-hero,
  .pricing-premium-hero {
    padding-top: 116px;
  }

  .knowledge-premium-points,
  .about-premium-points,
  .pricing-premium-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .knowledge-premium-points span,
  .about-premium-points span,
  .pricing-premium-points span {
    justify-content: center;
  }

  .knowledge-editorial-metrics { grid-template-columns: 1fr; }
  .about-compass-orbit { margin-left: -28px; margin-right: -28px; transform: scale(0.78); }
  .about-founder-note { padding: 28px 23px; }
  .about-status-board,
  .pricing-readiness-board { padding: 20px; }
}
/* =========================================================
   Phase 29C-0C3.1 – Premium Rebuild: Wissen, Über, Preise
   Vollständig gekapselt über sf-* Klassen.
   ========================================================= */

.sf-ultra-page {
  --sf-ink: #f7fbff;
  --sf-muted: #93a3ba;
  --sf-muted-2: #65758d;
  --sf-line: rgba(116, 157, 214, 0.16);
  --sf-line-strong: rgba(49, 151, 255, 0.34);
  --sf-panel: rgba(5, 13, 27, 0.86);
  --sf-panel-2: rgba(8, 20, 40, 0.72);
  --sf-blue: #0b73ff;
  --sf-cyan: #24dfff;
  --sf-violet: #6f64ff;
  --sf-red: #ff6078;
  background: #02050d;
}

.sf-ultra-page .page-shell {
  background:
    radial-gradient(circle at 78% 5%, rgba(11, 115, 255, 0.09), transparent 34rem),
    #02050d;
}

.sf-ultra-page main { overflow: clip; }

.sfx-grid-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(105, 148, 209, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105, 148, 209, 0.055) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 90%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 90%);
}

.sfx-grid-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #02050d 0%, transparent 22%, transparent 78%, #02050d 100%),
    linear-gradient(180deg, rgba(2,5,13,.28), #02050d 100%);
}

.sfx-orb {
  position: absolute;
  width: 38rem;
  height: 38rem;
  border-radius: 50%;
  filter: blur(4px);
  pointer-events: none;
  opacity: .8;
}
.sfx-orb-one { right: -15rem; top: -14rem; background: radial-gradient(circle, rgba(28,129,255,.18), transparent 68%); }
.sfx-orb-two { left: -16rem; bottom: -17rem; background: radial-gradient(circle, rgba(36,223,255,.12), transparent 68%); }

.sfx-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  color: #83bfff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sfx-kicker span {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 6px 11px;
  border: 1px solid rgba(36,223,255,.28);
  border-radius: 999px;
  background: rgba(36,223,255,.06);
  color: var(--sf-cyan);
}

.sfx-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.sfx-proof-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px;
  margin-top: 25px;
  color: rgba(233,243,255,.7);
  font-size: .79rem;
  font-weight: 700;
}
.sfx-proof-line i { width: 18px; height: 1px; background: rgba(36,223,255,.42); }

.sfx-section-intro {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 44px;
  margin-bottom: 38px;
}
.sfx-section-intro h2 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(2rem, 3.7vw, 3.55rem);
  line-height: 1.02;
}
.sfx-section-intro > p {
  max-width: 500px !important;
  margin: 0;
  color: var(--sf-muted) !important;
  line-height: 1.7;
}

.sfx-text-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  color: #fff;
  font-weight: 800;
}
.sfx-text-link span { color: var(--sf-cyan); transition: transform 180ms ease; }
.sfx-text-link:hover span { transform: translateX(4px); }

.sfx-final-cta {
  padding: 96px 30px;
  border-top: 1px solid var(--sf-line);
  background:
    radial-gradient(circle at 75% 40%, rgba(11,115,255,.16), transparent 28rem),
    linear-gradient(135deg, #030816, #02050d 62%);
}
.sfx-final-cta-inner {
  min-height: 330px;
  padding: 58px 62px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 54px;
  align-items: center;
  border: 1px solid rgba(64,145,255,.24);
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(17,42,84,.64), rgba(3,10,24,.9) 58%),
    url("../assets/images/hero-tech-bg.png") center/cover;
  box-shadow: 0 34px 100px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.04);
  overflow: hidden;
}
.sfx-final-cta-inner h2 { max-width: 780px; margin-bottom: 18px; font-size: clamp(2.25rem, 4vw, 4rem); }
.sfx-final-cta-inner p:not(.section-label) { max-width: 760px; }
.sfx-final-actions { display: grid; gap: 12px; min-width: 250px; }

.sfx-disclaimer {
  padding: 26px 30px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: #01040a;
}
.sfx-disclaimer .section-inner { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.sfx-disclaimer strong { color: #fff; font-size: .84rem; }
.sfx-disclaimer p { max-width: none !important; color: #6f7f96 !important; font-size: .78rem !important; }

/* Wissen – Hero */
.sfk-hero {
  position: relative;
  min-height: 760px;
  padding: 132px 30px 72px;
  background:
    radial-gradient(circle at 76% 34%, rgba(11,115,255,.18), transparent 34rem),
    linear-gradient(135deg, #02050d 0%, #041022 48%, #02050d 100%);
}
.sfk-hero-inner {
  position: relative;
  z-index: 2;
  width: min(100%, 1400px);
  min-height: 550px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(580px, 1.18fr);
  gap: clamp(46px, 6vw, 100px);
  align-items: center;
}
.sfk-hero-copy h1 {
  max-width: 670px;
  color: #fff;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(3.4rem, 5.6vw, 5.8rem);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.085em;
}
.sfk-hero-copy h1 em { display: block; color: var(--sf-blue); font-style: normal; text-shadow: 0 0 42px rgba(11,115,255,.28); }
.sfk-hero-lead {
  max-width: 610px;
  margin-top: 25px;
  color: rgba(235,244,255,.76);
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  line-height: 1.72;
}

.sfk-hero-console {
  position: relative;
  min-height: 530px;
  padding: 24px;
  border: 1px solid rgba(68,150,255,.28);
  border-radius: 28px;
  background:
    linear-gradient(165deg, rgba(13,32,63,.9), rgba(3,10,23,.96) 58%),
    radial-gradient(circle at 78% 18%, rgba(36,223,255,.12), transparent 20rem);
  box-shadow: 0 38px 120px rgba(0,0,0,.48), 0 0 70px rgba(11,115,255,.09), inset 0 1px rgba(255,255,255,.06);
  overflow: hidden;
}
.sfk-hero-console::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
}
.sfk-console-head { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 20px; align-items: start; }
.sfk-console-head span { display: block; color: #7e94b3; font-size: .63rem; font-weight: 800; letter-spacing: .13em; }
.sfk-console-head strong { display: block; margin-top: 4px; color: #fff; font-family: "Plus Jakarta Sans"; font-size: 1.18rem; }
.sfk-console-head b { padding: 7px 10px; border: 1px solid rgba(36,223,255,.28); border-radius: 999px; color: var(--sf-cyan); font-size: .62rem; letter-spacing: .1em; }
.sfk-console-stage { position: relative; z-index: 2; height: 300px; margin-top: 24px; border: 1px solid rgba(82,144,225,.16); border-radius: 20px; background: rgba(1,6,15,.58); overflow: hidden; }
.sfk-stage-axis { position: absolute; z-index: 2; left: 12px; top: 18px; bottom: 18px; display: flex; flex-direction: column; justify-content: space-between; color: #607087; font-size: .62rem; }
.sfk-stage-chart { position: absolute; inset: 10px 14px 0 36px; width: calc(100% - 50px); height: calc(100% - 10px); }
.sfk-stage-tag { position: absolute; z-index: 3; min-width: 82px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(4,11,23,.88); box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.sfk-stage-tag small { display: block; color: #71839e; font-size: .56rem; font-weight: 800; letter-spacing: .1em; }
.sfk-stage-tag strong { display: block; margin-top: 2px; color: #fff; font-size: .88rem; }
.sfk-stage-tag.is-entry { left: 49%; top: 45%; }
.sfk-stage-tag.is-risk { left: 8%; bottom: 9%; border-color: rgba(255,96,120,.28); }
.sfk-stage-tag.is-risk strong { color: #ff8093; }
.sfk-stage-tag.is-target { right: 4%; top: 5%; border-color: rgba(36,223,255,.28); }
.sfk-stage-tag.is-target strong { color: var(--sf-cyan); }
.sfk-console-story { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; margin-top: 18px; padding: 17px 2px 0; border-top: 1px solid rgba(255,255,255,.07); }
.sfk-story-index { color: var(--sf-cyan); font-family: "Plus Jakarta Sans"; font-size: 1.6rem; font-weight: 700; }
.sfk-console-story small { color: #71839e; font-size: .57rem; font-weight: 800; letter-spacing: .12em; }
.sfk-console-story h2 { margin: 4px 0 0; max-width: 450px; font-size: 1.03rem; line-height: 1.3; letter-spacing: -.035em; }
.sfk-console-story a { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(36,223,255,.3); border-radius: 50%; color: var(--sf-cyan); }

.sfk-index { position: relative; border-top: 1px solid var(--sf-line); border-bottom: 1px solid var(--sf-line); background: #030812; }
.sfk-index-inner { width: min(100%, 1400px); margin: 0 auto; padding: 0 30px; display: grid; grid-template-columns: repeat(4, 1fr); }
.sfk-index a { min-height: 126px; padding: 26px 24px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; align-content: center; border-right: 1px solid var(--sf-line); transition: background 180ms ease; }
.sfk-index a:first-child { border-left: 1px solid var(--sf-line); }
.sfk-index a:hover { background: rgba(11,115,255,.08); }
.sfk-index a > span { grid-row: 1 / 3; color: var(--sf-cyan); font-family: "Plus Jakarta Sans"; font-size: .76rem; font-weight: 800; }
.sfk-index strong { color: #fff; font-family: "Plus Jakarta Sans"; font-size: 1rem; }
.sfk-index small { color: #7788a1; font-size: .75rem; }

.sfk-editorial { position: relative; padding: 108px 30px; border-bottom: 1px solid var(--sf-line); background: #02050d; }
.sfk-editorial-primary { background: radial-gradient(circle at 82% 50%, rgba(11,115,255,.1), transparent 32rem), #02050d; }
.sfk-editorial-inner { position: relative; width: min(100%, 1400px); margin: 0 auto; display: grid; grid-template-columns: 120px minmax(0,.9fr) minmax(440px,1.1fr); gap: clamp(36px,5vw,78px); align-items: center; }
.sfk-editorial-number { align-self: start; color: rgba(255,255,255,.08); font-family: "Plus Jakarta Sans"; font-size: clamp(5rem,9vw,9rem); font-weight: 800; line-height: .82; letter-spacing: -.09em; }
.sfk-editorial-copy h2 { max-width: 690px; margin-bottom: 22px; font-size: clamp(2.35rem,4vw,4rem); line-height: 1.02; }
.sfk-editorial-copy > p:not(.section-label) { max-width: 680px; color: var(--sf-muted); line-height: 1.75; }
.sfk-editorial-steps { margin-top: 30px; display: grid; gap: 0; border-top: 1px solid var(--sf-line); }
.sfk-editorial-steps > div { padding: 18px 0; display: grid; grid-template-columns: 46px 1fr; gap: 12px; border-bottom: 1px solid var(--sf-line); }
.sfk-editorial-steps span { color: var(--sf-cyan); font-family: "Plus Jakarta Sans"; font-size: .72rem; font-weight: 800; }
.sfk-editorial-steps p { color: #d3deed !important; font-size: .92rem !important; }
.sfk-ratio-machine { min-height: 470px; padding: 24px; border: 1px solid var(--sf-line-strong); border-radius: 28px; background: linear-gradient(160deg, rgba(12,31,60,.86), rgba(2,7,18,.98)); box-shadow: 0 34px 90px rgba(0,0,0,.38); }
.sfk-ratio-head { display: flex; justify-content: space-between; align-items: center; color: #7a8da8; font-size: .63rem; font-weight: 800; letter-spacing: .12em; }
.sfk-ratio-head b { color: var(--sf-cyan); }
.sfk-ratio-scale { height: 338px; margin-top: 24px; display: grid; grid-template-rows: 1fr 68px 2fr; border-radius: 20px; overflow: hidden; background: #020711; }
.sfk-ratio-loss, .sfk-ratio-win { position: relative; padding: 22px; display: flex; justify-content: space-between; align-items: end; }
.sfk-ratio-loss { background: linear-gradient(180deg, rgba(255,96,120,.08), rgba(255,96,120,.18)); border-bottom: 1px solid rgba(255,96,120,.26); }
.sfk-ratio-win { background: linear-gradient(180deg, rgba(11,115,255,.13), rgba(36,223,255,.08)); border-top: 1px solid rgba(36,223,255,.24); }
.sfk-ratio-loss span, .sfk-ratio-win span { color: #8697ae; font-size: .65rem; font-weight: 800; letter-spacing: .12em; }
.sfk-ratio-loss strong { color: #ff7f92; font-size: 1.55rem; }
.sfk-ratio-win strong { color: var(--sf-cyan); font-size: 2.2rem; }
.sfk-ratio-core { position: relative; display: grid; place-items: center; background: rgba(255,255,255,.025); }
.sfk-ratio-core i { position: absolute; left: 22px; right: 22px; height: 2px; background: #fff; box-shadow: 0 0 18px rgba(255,255,255,.35); }
.sfk-ratio-core span { position: relative; padding: 5px 9px; background: #050d1b; color: #fff; font-size: .6rem; font-weight: 800; letter-spacing: .12em; }
.sfk-ratio-footer { display: flex; justify-content: space-between; margin-top: 16px; color: #687990; font-size: .7rem; }

.sfk-atlas-section { padding: 110px 30px; border-bottom: 1px solid var(--sf-line); background: linear-gradient(180deg, #030914, #02050d); }
.sfk-atlas-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.sfk-atlas-card { position: relative; min-height: 530px; padding: 26px; display: flex; flex-direction: column; border: 1px solid var(--sf-line); border-radius: 28px; background: linear-gradient(155deg, rgba(12,29,55,.78), rgba(3,9,21,.96)); box-shadow: 0 22px 70px rgba(0,0,0,.25); overflow: hidden; }
.sfk-atlas-card::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 84% 12%, rgba(11,115,255,.14), transparent 22rem); pointer-events:none; }
.sfk-atlas-card > * { position: relative; z-index: 1; }
.sfk-atlas-card.is-journal { grid-column: span 7; }
.sfk-atlas-card.is-psychology { grid-column: span 5; }
.sfk-atlas-card.is-analytics { grid-column: span 5; }
.sfk-atlas-card.is-drawdown { grid-column: span 7; }
.sfk-card-meta { display: flex; justify-content: space-between; color: #74869f; font-size: .62rem; font-weight: 800; letter-spacing: .11em; }
.sfk-card-meta b { color: #9aabc0; }
.sfk-atlas-card h3 { max-width: 620px; margin-top: auto; color: #fff; font-family: "Plus Jakarta Sans"; font-size: clamp(1.45rem,2.2vw,2.25rem); line-height: 1.08; letter-spacing: -.05em; }
.sfk-atlas-card p { max-width: 590px; margin-top: 13px; color: var(--sf-muted); font-size: .93rem; line-height: 1.65; }
.sfk-atlas-card > a { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; padding-top: 17px; border-top: 1px solid var(--sf-line); color: #fff; font-size: .82rem; font-weight: 800; }
.sfk-atlas-card > a span { color: var(--sf-cyan); font-size: 1rem; }
.sfk-journal-sheet { width: min(100%,560px); margin: 38px 0 34px; padding: 20px; border: 1px solid rgba(86,151,236,.2); border-radius: 18px; background: rgba(1,6,15,.58); transform: rotate(-1.2deg); }
.sfk-sheet-row { padding: 11px 2px; display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.06); }
.sfk-sheet-row span { color: #71849d; font-size: .72rem; }
.sfk-sheet-row strong { color: #e9f3ff; font-size: .8rem; }
.sfk-sheet-note { margin-top: 14px; padding: 13px; border-left: 2px solid var(--sf-cyan); background: rgba(36,223,255,.05); color: #aebdd0; font-size: .75rem; }
.sfk-behaviour-map { position: relative; height: 245px; margin: 40px 0 30px; }
.sfk-behaviour-map span { position: absolute; padding: 8px 11px; border: 1px solid var(--sf-line); border-radius: 999px; background: rgba(5,13,27,.9); color: #9bacbf; font-size: .59rem; font-weight: 800; letter-spacing: .08em; }
.sfk-behaviour-map span:nth-child(1){left:3%;top:16%}.sfk-behaviour-map span:nth-child(2){right:2%;top:2%}.sfk-behaviour-map span:nth-child(3){left:13%;bottom:4%}.sfk-behaviour-map span:nth-child(4){right:7%;bottom:18%;border-color:rgba(36,223,255,.35);color:var(--sf-cyan)}
.sfk-behaviour-map i,.sfk-behaviour-map b{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%)}
.sfk-behaviour-map i{width:170px;height:170px;border:1px solid rgba(255,96,120,.24);box-shadow:inset 0 0 45px rgba(255,96,120,.06)}
.sfk-behaviour-map b{width:55px;height:55px;background:radial-gradient(circle,#24dfff 0 8%,rgba(11,115,255,.36) 10%,rgba(11,115,255,.04) 64%);box-shadow:0 0 38px rgba(36,223,255,.22)}
.sfk-analytics-board { margin: 38px 0 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sfk-analytics-board > div:not(.sfk-mini-bars) { min-height: 95px; padding: 16px; border: 1px solid var(--sf-line); border-radius: 14px; background: rgba(1,6,15,.48); }
.sfk-analytics-board span { color: #74859c; font-size: .65rem; }
.sfk-analytics-board strong { display: block; margin-top: 8px; color: #fff; font-size: 1.35rem; }
.sfk-mini-bars { grid-column: 1/-1; height: 122px; padding: 18px 16px 0; display: flex; align-items: end; gap: 10px; border: 1px solid var(--sf-line); border-radius: 14px; background: rgba(1,6,15,.48); }
.sfk-mini-bars i { flex:1; height:var(--h); border-radius:5px 5px 0 0; background:linear-gradient(180deg,var(--sf-cyan),var(--sf-blue)); box-shadow:0 0 18px rgba(11,115,255,.16); }
.sfk-drawdown-visual { position: relative; min-height: 245px; margin: 36px 0 30px; border: 1px solid var(--sf-line); border-radius: 20px; background: linear-gradient(180deg, rgba(36,223,255,.05), rgba(255,96,120,.05)), rgba(1,6,15,.5); overflow:hidden; }
.sfk-drawdown-visual::before { content:""; position:absolute; left:7%; right:7%; top:30%; height:2px; background:linear-gradient(90deg,var(--sf-cyan),#fff 35%,var(--sf-red)); transform:skewY(9deg); box-shadow:0 0 20px rgba(36,223,255,.25); }
.sfk-drawdown-visual span { position:absolute; left:7%; top:14%; color:var(--sf-cyan); font-size:.63rem; font-weight:800; }
.sfk-drawdown-visual i { position:absolute; right:18%; top:26%; bottom:22%; width:1px; border-left:1px dashed rgba(255,96,120,.58); }
.sfk-drawdown-visual b { position:absolute; right:7%; top:44%; color:#ff7a8f; font-size:2.2rem; }
.sfk-drawdown-visual small { position:absolute; right:7%; top:62%; color:#7f91aa; }

.sfk-flow-section { padding: 108px 30px; border-bottom: 1px solid var(--sf-line); background: #030812; }
.sfk-flow-inner { display: grid; grid-template-columns: minmax(0,.68fr) minmax(620px,1.32fr); gap: 72px; align-items:center; }
.sfk-flow-copy h2 { margin-bottom:18px; font-size:clamp(2.2rem,3.8vw,3.6rem); }
.sfk-flow-copy p:not(.section-label) { color:var(--sf-muted); }
.sfk-flow-track { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; }
.sfk-flow-track > i { color:#3f8ce8; font-style:normal; }
.sfk-flow-track a { min-height:160px; padding:22px 17px; display:flex; flex-direction:column; justify-content:center; border:1px solid var(--sf-line); border-radius:18px; background:rgba(7,17,34,.72); }
.sfk-flow-track a:hover { border-color:var(--sf-line-strong); background:rgba(11,115,255,.08); }
.sfk-flow-track span { color:var(--sf-cyan); font-size:.65rem; font-weight:800; }
.sfk-flow-track strong { margin-top:18px; color:#fff; font-family:"Plus Jakarta Sans"; font-size:.93rem; }
.sfk-flow-track small { margin-top:4px; color:#71839d; }

/* Über */
.sfa-hero { position:relative; min-height:760px; padding:132px 30px 72px; background:linear-gradient(135deg,#02050d,#061120 52%,#02050d); overflow:hidden; }
.sfa-wordmark { position:absolute; left:50%; bottom:-.13em; transform:translateX(-50%); color:rgba(255,255,255,.025); font-family:"Plus Jakarta Sans"; font-size:clamp(8rem,18vw,18rem); font-weight:900; letter-spacing:-.1em; white-space:nowrap; pointer-events:none; }
.sfa-hero-inner { position:relative; z-index:2; width:min(100%,1400px); min-height:550px; margin:0 auto; display:grid; grid-template-columns:minmax(0,.86fr) minmax(560px,1.14fr); gap:clamp(50px,6vw,100px); align-items:center; }
.sfa-hero-copy h1 { max-width:720px; color:#fff; font-family:"Plus Jakarta Sans"; font-size:clamp(3.4rem,5.6vw,5.9rem); line-height:.94; letter-spacing:-.085em; }
.sfa-hero-copy h1 em { color:var(--sf-blue); font-style:normal; }
.sfa-hero-copy > p:not(.sfx-kicker) { max-width:620px; margin-top:25px; color:rgba(235,244,255,.76); font-size:1.08rem; line-height:1.75; }
.sfa-flux-core { position:relative; height:550px; }
.sfa-flux-core svg { width:100%; height:100%; }
.sfa-core-label { position:absolute; min-width:118px; padding:10px 13px; border:1px solid var(--sf-line); border-radius:12px; background:rgba(4,11,24,.88); box-shadow:0 15px 40px rgba(0,0,0,.28); }
.sfa-core-label small { display:block; color:var(--sf-cyan); font-size:.56rem; font-weight:800; letter-spacing:.1em; }
.sfa-core-label strong { display:block; margin-top:2px; color:#fff; font-size:.79rem; }
.sfa-core-label.is-core { left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; border-color:rgba(36,223,255,.38); }
.sfa-core-label.is-journal{left:10%;top:12%}.sfa-core-label.is-risk{right:5%;top:17%}.sfa-core-label.is-knowledge{right:2%;bottom:18%}.sfa-core-label.is-growth{left:8%;bottom:13%}

.sfa-manifesto { padding:120px 30px; border-top:1px solid var(--sf-line); border-bottom:1px solid var(--sf-line); background:#02050d; }
.sfa-manifesto-inner { display:grid; grid-template-columns:130px minmax(0,1fr) minmax(340px,.72fr); gap:clamp(40px,5vw,80px); align-items:start; }
.sfa-manifesto-index { color:rgba(255,255,255,.075); font-family:"Plus Jakarta Sans"; font-size:8rem; font-weight:800; line-height:.8; letter-spacing:-.1em; }
.sfa-manifesto-copy h2 { max-width:800px; margin-bottom:22px; font-size:clamp(2.5rem,4.4vw,4.4rem); line-height:1.02; }
.sfa-manifesto-copy p:not(.section-label) { max-width:760px; color:var(--sf-muted); line-height:1.8; }
.sfa-manifesto blockquote { margin:0; padding:28px 0 28px 26px; border-left:2px solid var(--sf-cyan); color:#dce8f7; font-family:"Plus Jakarta Sans"; font-size:clamp(1.25rem,2vw,1.8rem); line-height:1.45; letter-spacing:-.04em; }

.sfa-storyline { padding:110px 30px; border-bottom:1px solid var(--sf-line); background:linear-gradient(180deg,#030914,#02050d); }
.sfa-story-track { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--sf-line); border-bottom:1px solid var(--sf-line); }
.sfa-story-track article { position:relative; min-height:350px; padding:34px 28px; border-right:1px solid var(--sf-line); }
.sfa-story-track article:last-child{border-right:0}.sfa-story-track article::before{content:"";position:absolute;left:0;top:-3px;width:34%;height:3px;background:linear-gradient(90deg,var(--sf-blue),var(--sf-cyan));opacity:.35}.sfa-story-track article:nth-child(3)::before{width:100%;opacity:1}
.sfa-story-track span { color:rgba(255,255,255,.08); font-family:"Plus Jakarta Sans"; font-size:4.5rem; font-weight:800; line-height:1; }
.sfa-story-track small { display:block; margin-top:28px; color:var(--sf-cyan); font-size:.62rem; font-weight:800; letter-spacing:.12em; }
.sfa-story-track h3 { margin-top:14px; color:#fff; font-family:"Plus Jakarta Sans"; font-size:1.35rem; line-height:1.2; letter-spacing:-.04em; }
.sfa-story-track p { margin-top:14px; color:var(--sf-muted); font-size:.88rem; line-height:1.65; }

.sfa-status { padding:112px 30px; border-bottom:1px solid var(--sf-line); background:radial-gradient(circle at 80% 50%,rgba(11,115,255,.11),transparent 34rem),#02050d; }
.sfa-status-inner { display:grid; grid-template-columns:minmax(0,.78fr) minmax(560px,1.22fr); gap:72px; align-items:center; }
.sfa-status-copy h2 { margin-bottom:22px; font-size:clamp(2.45rem,4.2vw,4.1rem); line-height:1.02; }
.sfa-status-copy p:not(.section-label) { color:var(--sf-muted); line-height:1.75; }
.sfa-status-stage { padding:26px; border:1px solid var(--sf-line-strong); border-radius:28px; background:linear-gradient(155deg,rgba(12,30,58,.85),rgba(3,9,21,.97)); box-shadow:0 30px 90px rgba(0,0,0,.34); }
.sfa-stage-top { display:flex; justify-content:space-between; color:#71849f; font-size:.62rem; font-weight:800; letter-spacing:.11em; }
.sfa-stage-top b{color:#56e09b}.sfa-stage-lanes{margin-top:28px}.sfa-stage-lane{min-height:115px;padding:22px;display:grid;grid-template-columns:1fr auto;align-content:center;border:1px solid var(--sf-line);border-radius:18px;background:rgba(1,6,15,.5)}.sfa-stage-lane small{grid-column:1/-1;color:#71849c;font-size:.58rem;font-weight:800;letter-spacing:.11em}.sfa-stage-lane strong{margin-top:8px;color:#fff;font-family:"Plus Jakarta Sans"}.sfa-stage-lane span{align-self:end;color:#8192a8;font-size:.73rem}.sfa-stage-lane.is-private{border-color:rgba(36,223,255,.3);background:linear-gradient(135deg,rgba(11,115,255,.16),rgba(1,6,15,.55))}.sfa-stage-bridge{height:58px;display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;color:#5d718f;font-size:.64rem}.sfa-stage-bridge i{height:1px;background:linear-gradient(90deg,transparent,var(--sf-blue),transparent)}
.sfa-stage-facts{margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.sfa-stage-facts div{padding:13px;border:1px solid var(--sf-line);border-radius:12px;background:rgba(1,6,15,.42)}.sfa-stage-facts span{display:block;color:#6e8099;font-size:.6rem}.sfa-stage-facts strong{display:block;margin-top:5px;color:#fff;font-size:.78rem}

.sfa-principles { padding:115px 30px; border-bottom:1px solid var(--sf-line); background:#030812; }
.sfa-principles-head { max-width:950px; margin-bottom:48px; }.sfa-principles-head h2{font-size:clamp(2.5rem,4.4vw,4.35rem);line-height:1.02}
.sfa-principle-lines { border-top:1px solid var(--sf-line); }
.sfa-principle-lines article { min-height:150px; padding:28px 8px; display:grid; grid-template-columns:110px minmax(300px,.75fr) minmax(0,1.25fr); gap:30px; align-items:center; border-bottom:1px solid var(--sf-line); transition:padding 180ms ease,background 180ms ease; }
.sfa-principle-lines article:hover{padding-left:20px;padding-right:20px;background:rgba(11,115,255,.045)}.sfa-principle-lines span{color:var(--sf-cyan);font-family:"Plus Jakarta Sans";font-size:.8rem;font-weight:800}.sfa-principle-lines h3{color:#fff;font-family:"Plus Jakarta Sans";font-size:1.55rem;letter-spacing:-.045em}.sfa-principle-lines p{color:var(--sf-muted);line-height:1.65}

.sfa-boundaries { padding:112px 30px; border-bottom:1px solid var(--sf-line); background:linear-gradient(145deg,#02050d,#07101e); }
.sfa-boundaries-inner { display:grid; grid-template-columns:minmax(0,.78fr) minmax(620px,1.22fr); gap:72px; align-items:center; }
.sfa-boundaries-title span{color:var(--sf-cyan);font-size:.68rem;font-weight:800;letter-spacing:.13em}.sfa-boundaries-title h2{margin-top:16px;font-size:clamp(2.5rem,4.3vw,4.2rem);line-height:1.02}
.sfa-boundary-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.sfa-boundary-grid>div{min-height:360px;padding:28px;border:1px solid var(--sf-line);border-radius:24px;background:rgba(4,12,26,.76)}.sfa-boundary-grid>div>span{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;font-family:"Plus Jakarta Sans";font-size:.74rem;font-weight:800}.sfa-boundary-grid .is-positive>span{background:rgba(36,223,255,.1);color:var(--sf-cyan);border:1px solid rgba(36,223,255,.3)}.sfa-boundary-grid .is-negative{background:linear-gradient(160deg,rgba(45,14,25,.48),rgba(4,12,26,.8));border-color:rgba(255,96,120,.2)}.sfa-boundary-grid .is-negative>span{background:rgba(255,96,120,.08);color:#ff8093;border:1px solid rgba(255,96,120,.28)}.sfa-boundary-grid ul{margin-top:34px;list-style:none}.sfa-boundary-grid li{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.06);color:#cbd8e8;font-size:.9rem}

.sfa-roadmap { padding:112px 30px; border-bottom:1px solid var(--sf-line); background:#02050d; }
.sfa-roadmap-track { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.sfa-roadmap-track::before{content:"";position:absolute;left:6%;right:6%;top:47px;height:1px;background:linear-gradient(90deg,var(--sf-cyan) 0 39%,rgba(80,117,166,.25) 39%)}
.sfa-roadmap-track article{position:relative;padding:0 26px;text-align:center}.sfa-roadmap-track article>span{position:relative;z-index:2;width:94px;height:94px;margin:0 auto 28px;display:grid;place-items:center;border:1px solid var(--sf-line);border-radius:50%;background:#050d1b;color:#6f8199;font-family:"Plus Jakarta Sans";font-size:1.3rem}.sfa-roadmap-track article.is-done>span{border-color:rgba(36,223,255,.38);color:var(--sf-cyan);box-shadow:0 0 30px rgba(36,223,255,.1)}.sfa-roadmap-track article.is-current>span{border-color:var(--sf-blue);background:var(--sf-blue);color:#fff;box-shadow:0 0 35px rgba(11,115,255,.3)}.sfa-roadmap-track small{color:#71839c;font-size:.58rem;font-weight:800;letter-spacing:.12em}.sfa-roadmap-track .is-current small{color:var(--sf-cyan)}.sfa-roadmap-track h3{margin-top:12px;color:#fff;font-family:"Plus Jakarta Sans";font-size:1.08rem}.sfa-roadmap-track p{margin-top:10px;color:var(--sf-muted);font-size:.8rem;line-height:1.55}

/* Preise */
.sfp-hero { position:relative; min-height:780px; padding:132px 30px 72px; background:linear-gradient(135deg,#02050d,#041022 52%,#02050d); }
.sfp-hero-inner { position:relative;z-index:2;width:min(100%,1400px);min-height:570px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.76fr) minmax(660px,1.24fr);gap:clamp(46px,5vw,84px);align-items:center; }
.sfp-hero-copy h1{color:#fff;font-family:"Plus Jakarta Sans";font-size:clamp(3.4rem,5.5vw,5.8rem);line-height:.94;letter-spacing:-.085em}.sfp-hero-copy h1 em{color:var(--sf-blue);font-style:normal}.sfp-hero-copy>p:not(.sfx-kicker){max-width:610px;margin-top:25px;color:rgba(235,244,255,.76);font-size:1.08rem;line-height:1.75}
.sfp-product-stage{position:relative;padding:18px;border:1px solid rgba(62,145,255,.3);border-radius:28px;background:linear-gradient(160deg,rgba(14,35,68,.9),rgba(3,10,23,.97));box-shadow:0 40px 120px rgba(0,0,0,.48),0 0 80px rgba(11,115,255,.09);transform:perspective(1400px) rotateY(-2deg) rotateX(1deg)}
.sfp-browser-bar{height:45px;padding:0 14px;display:grid;grid-template-columns:90px 1fr auto;align-items:center;border-bottom:1px solid var(--sf-line);color:#71839c;font-size:.58rem;font-weight:800;letter-spacing:.09em}.sfp-browser-bar>div{display:flex;gap:6px}.sfp-browser-bar i{width:8px;height:8px;border-radius:50%;background:#31435c}.sfp-browser-bar i:first-child{background:#ff6078}.sfp-browser-bar i:nth-child(2){background:#eebf52}.sfp-browser-bar i:nth-child(3){background:#4bd08d}.sfp-browser-bar b{color:var(--sf-cyan)}
.sfp-app-shell{min-height:470px;display:grid;grid-template-columns:56px 1fr;background:#020711;border-radius:0 0 17px 17px;overflow:hidden}.sfp-app-nav{padding:17px 0;display:flex;flex-direction:column;align-items:center;gap:22px;border-right:1px solid var(--sf-line);background:#040b18}.sfp-app-nav strong{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--sf-blue);color:#fff;font-size:.65rem}.sfp-app-nav span{width:22px;height:22px;border:1px solid #34465f;border-radius:6px}.sfp-app-nav span.is-active{border-color:var(--sf-cyan);background:rgba(36,223,255,.09)}.sfp-app-main{padding:22px}.sfp-app-top{display:flex;justify-content:space-between;align-items:center}.sfp-app-top small{display:block;color:#6e819b;font-size:.56rem;font-weight:800;letter-spacing:.1em}.sfp-app-top strong{display:block;margin-top:3px;color:#fff;font-size:1rem}.sfp-app-top button{padding:9px 12px;border:0;border-radius:8px;background:var(--sf-blue);color:#fff;font-size:.68rem;font-weight:800}.sfp-app-metrics{margin-top:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.sfp-app-metrics>div{padding:13px;border:1px solid var(--sf-line);border-radius:12px;background:#050d1b}.sfp-app-metrics span,.sfp-app-metrics small{display:block;color:#70829b;font-size:.54rem}.sfp-app-metrics strong{display:block;margin:6px 0;color:#fff;font-size:1rem}.sfp-app-content{margin-top:12px;display:grid;grid-template-columns:1.45fr .55fr;gap:10px}.sfp-equity-card,.sfp-review-card{min-height:245px;padding:15px;border:1px solid var(--sf-line);border-radius:14px;background:#050d1b}.sfp-equity-card>div{display:flex;justify-content:space-between;color:#70829b;font-size:.55rem;font-weight:800;letter-spacing:.08em}.sfp-equity-card svg{width:100%;height:190px}.sfp-review-card>span{color:var(--sf-cyan);font-size:.55rem;font-weight:800;letter-spacing:.1em}.sfp-review-card>strong{display:block;margin-top:18px;color:#fff;font-family:"Plus Jakarta Sans";font-size:1.05rem}.sfp-review-card>p{margin-top:12px;color:#8293aa;font-size:.67rem;line-height:1.55}.sfp-review-card>div{margin-top:22px}.sfp-review-card i{display:block;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--sf-cyan) 82%,#1b2a40 82%)}.sfp-review-card b{display:block;margin-top:7px;color:#dbe8f6;font-size:.62rem}.sfp-floating-access{position:absolute;right:-22px;bottom:-24px;min-width:190px;padding:16px 18px;border:1px solid rgba(36,223,255,.34);border-radius:16px;background:rgba(3,11,24,.96);box-shadow:0 25px 55px rgba(0,0,0,.44)}.sfp-floating-access span{display:block;color:var(--sf-cyan);font-size:.55rem;font-weight:800;letter-spacing:.1em}.sfp-floating-access strong{display:block;margin-top:5px;color:#fff;font-size:1rem}.sfp-floating-access small{color:#72849e;font-size:.67rem}

.sfp-model{padding:112px 30px;border-top:1px solid var(--sf-line);border-bottom:1px solid var(--sf-line);background:#02050d}.sfp-access-rows{border-top:1px solid var(--sf-line)}.sfp-access-row{min-height:240px;padding:34px 24px;display:grid;grid-template-columns:90px minmax(250px,1.1fr) minmax(180px,.6fr) minmax(260px,.9fr) 150px;gap:28px;align-items:center;border-bottom:1px solid var(--sf-line);transition:background 180ms ease}.sfp-access-row:hover{background:rgba(11,115,255,.04)}.sfp-access-row.is-beta{background:linear-gradient(90deg,rgba(11,115,255,.09),rgba(36,223,255,.025));border-color:rgba(36,223,255,.24)}.sfp-access-number{color:rgba(255,255,255,.08);font-family:"Plus Jakarta Sans";font-size:4rem;font-weight:800;letter-spacing:-.08em}.sfp-access-title small{color:var(--sf-cyan);font-size:.58rem;font-weight:800;letter-spacing:.12em}.sfp-access-title h3{margin-top:8px;color:#fff;font-family:"Plus Jakarta Sans";font-size:1.75rem;letter-spacing:-.05em}.sfp-access-title p{margin-top:10px;color:var(--sf-muted);font-size:.83rem;line-height:1.55}.sfp-access-price strong{display:block;color:#fff;font-family:"Plus Jakarta Sans";font-size:1.4rem}.sfp-access-price span{display:block;margin-top:4px;color:#71839b;font-size:.72rem}.sfp-access-row ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}.sfp-access-row li{position:relative;padding-left:16px;color:#b9c6d6;font-size:.78rem}.sfp-access-row li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--sf-cyan)}.sfp-access-row>a{justify-self:end;color:#fff;font-size:.78rem;font-weight:800}.sfp-access-row>a span{margin-left:8px;color:var(--sf-cyan)}

.sfp-beta-focus{padding:112px 30px;border-bottom:1px solid var(--sf-line);background:radial-gradient(circle at 78% 50%,rgba(11,115,255,.12),transparent 32rem),linear-gradient(145deg,#030812,#02050d)}.sfp-beta-inner{display:grid;grid-template-columns:minmax(0,.78fr) minmax(560px,1.22fr);gap:72px;align-items:center}.sfp-beta-copy h2{margin-bottom:22px;font-size:clamp(2.6rem,4.4vw,4.3rem);line-height:1}.sfp-beta-copy p:not(.section-label){color:var(--sf-muted);line-height:1.75}.sfp-beta-badges{margin-top:28px;display:flex;flex-wrap:wrap;gap:9px}.sfp-beta-badges span{padding:8px 11px;border:1px solid var(--sf-line);border-radius:999px;color:#b7c5d8;font-size:.72rem;font-weight:700}.sfp-beta-dashboard{padding:25px;border:1px solid var(--sf-line-strong);border-radius:28px;background:linear-gradient(155deg,rgba(13,32,63,.88),rgba(3,9,21,.97));box-shadow:0 30px 90px rgba(0,0,0,.34)}.sfp-beta-head{display:flex;justify-content:space-between;color:#71849d;font-size:.61rem;font-weight:800;letter-spacing:.11em}.sfp-beta-head b{color:#56e09b}.sfp-beta-score{margin-top:28px;padding:22px;display:grid;grid-template-columns:100px 1fr;gap:24px;align-items:center;border:1px solid var(--sf-line);border-radius:18px;background:rgba(1,6,15,.46)}.sfp-beta-score>strong{width:84px;height:84px;display:grid;place-items:center;border:1px solid rgba(36,223,255,.35);border-radius:50%;color:var(--sf-cyan);font-family:"Plus Jakarta Sans";font-size:1.5rem;box-shadow:inset 0 0 30px rgba(36,223,255,.08)}.sfp-beta-score span,.sfp-beta-score small{display:block;color:#71839c;font-size:.65rem}.sfp-beta-score i{height:7px;margin:10px 0;display:block;border-radius:999px;background:#14233a;overflow:hidden}.sfp-beta-score i b{display:block;height:100%;background:linear-gradient(90deg,var(--sf-blue),var(--sf-cyan))}.sfp-beta-list{margin-top:14px}.sfp-beta-list>div{padding:14px 4px;display:flex;justify-content:space-between;border-bottom:1px solid var(--sf-line);color:#8496ad;font-size:.75rem}.sfp-beta-list strong{color:#dce9f8}.sfp-beta-list strong.is-open{color:#ff8b9b}

.sfp-compare{padding:112px 30px;border-bottom:1px solid var(--sf-line);background:#02050d}.sfp-compare-board{border:1px solid var(--sf-line);border-radius:24px;overflow:hidden;background:rgba(4,11,24,.75);box-shadow:0 28px 80px rgba(0,0,0,.26)}.sfp-compare-row{min-height:67px;display:grid;grid-template-columns:1.45fr repeat(3,1fr);border-bottom:1px solid var(--sf-line)}.sfp-compare-row:last-child{border-bottom:0}.sfp-compare-row>div{padding:17px 22px;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--sf-line);color:#9aabc0;font-size:.79rem;text-align:center}.sfp-compare-row>div:first-child{justify-content:flex-start;color:#d9e5f4;font-weight:700;text-align:left}.sfp-compare-row>div:last-child{border-right:0}.sfp-compare-row.is-head{background:linear-gradient(90deg,rgba(11,115,255,.18),rgba(36,223,255,.05));}.sfp-compare-row.is-head>div{color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.sfp-compare-row b{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:rgba(36,223,255,.09);color:var(--sf-cyan)}.sfp-compare-row span{color:#6f8198}.sfp-compare-row em{font-style:normal;color:#7eb9ff}

.sfp-readiness{padding:112px 30px;border-bottom:1px solid var(--sf-line);background:linear-gradient(145deg,#030914,#02050d)}.sfp-readiness-inner{display:grid;grid-template-columns:minmax(0,.78fr) minmax(560px,1.22fr);gap:72px;align-items:center}.sfp-readiness h2{margin-bottom:22px;font-size:clamp(2.5rem,4.4vw,4.25rem);line-height:1.02}.sfp-readiness p:not(.section-label){color:var(--sf-muted);line-height:1.75}.sfp-readiness-stack{border-top:1px solid var(--sf-line);border-bottom:1px solid var(--sf-line)}.sfp-readiness-stack>div{min-height:82px;padding:17px 10px;display:grid;grid-template-columns:54px 1fr auto;gap:16px;align-items:center;border-bottom:1px solid var(--sf-line)}.sfp-readiness-stack>div>span{color:var(--sf-cyan);font-family:"Plus Jakarta Sans";font-size:.68rem;font-weight:800}.sfp-readiness-stack p{color:#cbd8e8!important;font-size:.84rem!important}.sfp-readiness-stack strong{color:#87a2c3;font-size:.76rem}.sfp-readiness-stack footer{min-height:92px;padding:20px 10px;display:flex;justify-content:space-between;align-items:center}.sfp-readiness-stack footer span{color:#71849e;font-size:.6rem;font-weight:800;letter-spacing:.11em}.sfp-readiness-stack footer strong{color:#fff;font-family:"Plus Jakarta Sans";font-size:1.05rem}

.sfp-paths{padding:112px 30px;border-bottom:1px solid var(--sf-line);background:#02050d}.sfp-path-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.sfp-path-grid a{position:relative;min-height:330px;padding:26px;display:flex;flex-direction:column;border:1px solid var(--sf-line);border-radius:22px;background:linear-gradient(155deg,rgba(11,27,53,.72),rgba(3,9,21,.95));overflow:hidden;transition:transform 180ms ease,border-color 180ms ease}.sfp-path-grid a:hover{transform:translateY(-5px);border-color:var(--sf-line-strong)}.sfp-path-grid a>span{color:rgba(255,255,255,.08);font-family:"Plus Jakarta Sans";font-size:4rem;font-weight:800}.sfp-path-grid small{margin-top:auto;color:var(--sf-cyan);font-size:.58rem;font-weight:800;letter-spacing:.11em}.sfp-path-grid h3{margin-top:12px;color:#fff;font-family:"Plus Jakarta Sans";font-size:1.35rem;letter-spacing:-.04em}.sfp-path-grid p{margin-top:12px;color:var(--sf-muted);font-size:.82rem;line-height:1.6}.sfp-path-grid b{position:absolute;right:22px;top:22px;color:var(--sf-cyan);font-size:1.1rem}

.sfp-faq{padding:112px 30px;border-bottom:1px solid var(--sf-line);background:#030812}.sfp-faq-inner{display:grid;grid-template-columns:minmax(0,.65fr) minmax(620px,1.35fr);gap:76px;align-items:start}.sfp-faq h2{margin-bottom:18px;font-size:clamp(2.4rem,4vw,3.8rem)}.sfp-faq p:not(.section-label){color:var(--sf-muted)}.sfp-faq-list{border-top:1px solid var(--sf-line)}.sfp-faq-list details{border-bottom:1px solid var(--sf-line)}.sfp-faq-list summary{position:relative;padding:23px 42px 23px 0;color:#fff;font-family:"Plus Jakarta Sans";font-size:.98rem;font-weight:700;cursor:pointer;list-style:none}.sfp-faq-list summary::-webkit-details-marker{display:none}.sfp-faq-list summary::after{content:"+";position:absolute;right:2px;top:19px;color:var(--sf-cyan);font-size:1.35rem}.sfp-faq-list details[open] summary::after{content:"–"}.sfp-faq-list details p{padding:0 42px 23px 0;color:var(--sf-muted)!important;line-height:1.7}

@media (max-width: 1220px) {
  .sfk-hero-inner,.sfa-hero-inner,.sfp-hero-inner{grid-template-columns:minmax(0,.85fr) minmax(500px,1.15fr);gap:40px}.sfp-hero-inner{grid-template-columns:minmax(0,.72fr) minmax(580px,1.28fr)}
  .sfk-editorial-inner{grid-template-columns:90px minmax(0,.9fr) minmax(400px,1.1fr);gap:35px}.sfk-flow-inner,.sfa-boundaries-inner{grid-template-columns:1fr;}.sfk-flow-track{max-width:900px}.sfa-boundaries-title{max-width:760px}.sfp-access-row{grid-template-columns:65px minmax(230px,1fr) 170px minmax(230px,.9fr) 125px;gap:18px;padding-left:10px;padding-right:10px}.sfp-app-main{padding:17px}.sfp-app-content{grid-template-columns:1.25fr .75fr}
}

@media (max-width: 1020px) {
  .sfk-hero,.sfa-hero,.sfp-hero{min-height:0;padding-top:128px}.sfk-hero-inner,.sfa-hero-inner,.sfp-hero-inner{min-height:0;grid-template-columns:1fr;}.sfk-hero-copy,.sfa-hero-copy,.sfp-hero-copy{max-width:800px}.sfk-hero-console,.sfp-product-stage{max-width:820px;width:100%;margin:0 auto}.sfa-flux-core{max-width:680px;width:100%;margin:0 auto}.sfk-index-inner{grid-template-columns:1fr 1fr}.sfk-index a:nth-child(3){border-left:1px solid var(--sf-line)}.sfk-index a:nth-child(-n+2){border-bottom:1px solid var(--sf-line)}
  .sfk-editorial-inner{grid-template-columns:1fr}.sfk-editorial-number{display:none}.sfk-ratio-machine{max-width:760px;width:100%}.sfk-atlas-card.is-journal,.sfk-atlas-card.is-psychology,.sfk-atlas-card.is-analytics,.sfk-atlas-card.is-drawdown{grid-column:span 6}.sfk-flow-track{grid-template-columns:1fr 1fr;gap:14px}.sfk-flow-track>i{display:none}
  .sfa-manifesto-inner,.sfa-status-inner,.sfa-boundaries-inner,.sfp-beta-inner,.sfp-readiness-inner,.sfp-faq-inner{grid-template-columns:1fr}.sfa-manifesto-index{display:none}.sfa-story-track{grid-template-columns:1fr 1fr}.sfa-story-track article:nth-child(2){border-right:0}.sfa-story-track article:nth-child(-n+2){border-bottom:1px solid var(--sf-line)}.sfa-principle-lines article{grid-template-columns:70px minmax(240px,.85fr) 1.15fr}.sfa-roadmap-track{grid-template-columns:1fr 1fr;gap:42px 0}.sfa-roadmap-track::before{display:none}
  .sfp-access-row{grid-template-columns:70px 1fr auto;}.sfp-access-row ul{grid-column:2/4}.sfp-access-row>a{grid-column:3}.sfp-path-grid{grid-template-columns:1fr 1fr}.sfp-product-stage{transform:none}.sfp-faq-list{max-width:none}
  .sfx-final-cta-inner{grid-template-columns:1fr}.sfx-final-actions{grid-template-columns:1fr 1fr;min-width:0}.sfx-section-intro{align-items:flex-start;flex-direction:column;gap:18px}
}

@media (max-width: 720px) {
  .sfk-hero,.sfa-hero,.sfp-hero{padding:116px 18px 58px}.sfk-hero-copy h1,.sfa-hero-copy h1,.sfp-hero-copy h1{font-size:clamp(2.75rem,13vw,4.25rem)}.sfx-hero-actions{display:grid}.sfx-hero-actions .button{width:100%;min-width:0}.sfx-proof-line i{display:none}.sfx-proof-line{gap:8px}.sfx-proof-line span{padding:6px 9px;border:1px solid var(--sf-line);border-radius:999px}
  .sfk-hero-console{min-height:0;padding:16px;border-radius:22px}.sfk-console-stage{height:255px}.sfk-stage-tag{min-width:70px;padding:7px}.sfk-stage-tag.is-entry{left:43%}.sfk-console-story{grid-template-columns:auto 1fr}.sfk-console-story>a{display:none}.sfk-index-inner{padding:0 18px;grid-template-columns:1fr}.sfk-index a,.sfk-index a:nth-child(3){border-left:1px solid var(--sf-line);border-bottom:1px solid var(--sf-line);border-right:1px solid var(--sf-line)}.sfk-index a:last-child{border-bottom:0}.sfk-editorial,.sfk-atlas-section,.sfk-flow-section{padding:82px 18px}.sfk-ratio-machine{min-height:0;padding:16px}.sfk-ratio-scale{height:300px}.sfk-atlas-grid{grid-template-columns:1fr}.sfk-atlas-card.is-journal,.sfk-atlas-card.is-psychology,.sfk-atlas-card.is-analytics,.sfk-atlas-card.is-drawdown{grid-column:auto}.sfk-atlas-card{min-height:480px;padding:20px}.sfk-flow-track{grid-template-columns:1fr}.sfk-flow-track a{min-height:125px}
  .sfa-flux-core{height:440px;margin-left:-12px;margin-right:-12px;width:calc(100% + 24px)}.sfa-core-label{min-width:90px;padding:8px}.sfa-core-label strong{font-size:.67rem}.sfa-manifesto,.sfa-storyline,.sfa-status,.sfa-principles,.sfa-boundaries,.sfa-roadmap{padding:82px 18px}.sfa-manifesto-inner{gap:28px}.sfa-manifesto blockquote{font-size:1.2rem}.sfa-story-track{grid-template-columns:1fr}.sfa-story-track article{border-right:0;border-bottom:1px solid var(--sf-line);min-height:280px}.sfa-principle-lines article{grid-template-columns:50px 1fr}.sfa-principle-lines p{grid-column:2}.sfa-status-stage{padding:17px}.sfa-stage-lane{grid-template-columns:1fr}.sfa-stage-lane span{margin-top:10px}.sfa-stage-facts{grid-template-columns:1fr}.sfa-boundary-grid{grid-template-columns:1fr}.sfa-boundary-grid>div{min-height:0}.sfa-roadmap-track{grid-template-columns:1fr;gap:34px}.sfa-roadmap-track article{padding:0 4px}.sfa-wordmark{display:none}
  .sfp-product-stage{padding:10px;border-radius:20px}.sfp-browser-bar{grid-template-columns:65px 1fr}.sfp-browser-bar>b{display:none}.sfp-app-shell{grid-template-columns:42px 1fr;min-height:0}.sfp-app-nav{gap:15px}.sfp-app-nav span{width:18px;height:18px}.sfp-app-main{padding:12px}.sfp-app-top button{display:none}.sfp-app-metrics{grid-template-columns:1fr 1fr}.sfp-app-metrics>div:last-child{grid-column:1/-1}.sfp-app-content{grid-template-columns:1fr}.sfp-review-card{min-height:170px}.sfp-floating-access{position:static;margin-top:10px}.sfp-model,.sfp-beta-focus,.sfp-compare,.sfp-readiness,.sfp-paths,.sfp-faq{padding:82px 18px}.sfp-access-row{padding:28px 4px;grid-template-columns:55px 1fr}.sfp-access-price{grid-column:2}.sfp-access-row ul{grid-column:2;grid-template-columns:1fr}.sfp-access-row>a{grid-column:2;justify-self:start}.sfp-access-number{font-size:3rem}.sfp-compare-board{overflow-x:auto}.sfp-compare-row{min-width:720px}.sfp-path-grid{grid-template-columns:1fr}.sfp-path-grid a{min-height:280px}.sfp-beta-dashboard{padding:17px}.sfp-beta-score{grid-template-columns:1fr}.sfp-beta-score>strong{margin:0 auto}.sfp-readiness-stack>div{grid-template-columns:45px 1fr}.sfp-readiness-stack>div>strong{grid-column:2}.sfp-readiness-stack footer{align-items:flex-start;flex-direction:column;gap:8px}
  .sfx-final-cta{padding:72px 18px}.sfx-final-cta-inner{padding:34px 22px;border-radius:24px}.sfx-final-actions{grid-template-columns:1fr}.sfx-final-actions .button{width:100%;min-width:0}.sfx-disclaimer{padding:22px 18px}.sfx-disclaimer .section-inner{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: no-preference) {
  .sfk-stage-chart path:nth-of-type(2) { stroke-dasharray: 950; stroke-dashoffset: 950; animation: sfLineReveal 2.2s .25s ease forwards; }
  .sfa-flux-core svg > circle:nth-of-type(2) { transform-origin: 330px 280px; animation: sfOrbit 24s linear infinite; }
  .sfp-product-stage { animation: sfStageFloat 7s ease-in-out infinite; }
  @keyframes sfLineReveal { to { stroke-dashoffset: 0; } }
  @keyframes sfOrbit { to { transform: rotate(360deg); } }
  @keyframes sfStageFloat { 0%,100% { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg) translateY(0); } 50% { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg) translateY(-7px); } }
}

/* =========================================================
   Phase 29C-0C4 – Globaler Grössen- und Typografie-Finish
   Plus Jakarta Sans für die gesamte öffentliche Oberfläche.
   Sora bleibt ausschliesslich für Marke und Intro erhalten.
   ========================================================= */

:root {
  --font-brand: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --header-height: 80px;
  --max-width: 1280px;
  --section-space: clamp(70px, 6.2vw, 88px);
  --section-space-compact: clamp(58px, 5vw, 74px);
}

html {
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.58;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
button,
.button,
.main-nav,
.mobile-nav-panel,
.login-button,
.eyebrow,
.section-label,
.sfx-kicker {
  font-family: var(--font-display) !important;
}

h1 {
  letter-spacing: -0.045em !important;
}

h2 {
  letter-spacing: -0.035em !important;
}

h3,
h4,
h5,
h6 {
  letter-spacing: -0.02em !important;
}

.brand-name,
.intro-name,
.hero-title {
  font-family: var(--font-brand) !important;
}

/* Header und Navigation */
.site-header {
  width: min(100%, 1280px);
  height: var(--header-height);
  padding: 0 24px;
  grid-template-columns: 220px minmax(0, 1fr) 150px;
  gap: 18px;
}

.brand {
  gap: 11px;
}

.brand-logo {
  width: 38px;
  height: 38px;
}

.brand-name {
  font-size: 1.18rem;
  letter-spacing: -0.035em;
}

.main-nav {
  gap: clamp(17px, 2.05vw, 32px);
  font-size: 0.86rem;
  font-weight: 700;
}

.main-nav a {
  padding: 9px 0 12px;
}

.login-button {
  min-width: 118px;
  min-height: 44px;
  padding: 10px 15px;
  font-size: 0.86rem;
}

.login-icon,
.login-icon svg {
  width: 19px;
  height: 19px;
}

/* Einheitliche Buttons */
.button {
  min-height: 48px;
  padding: 12px 21px;
  gap: 12px;
  font-size: 0.9rem;
  border-radius: 9px;
}

.button-primary {
  min-width: 210px;
}

.button-secondary {
  min-width: 180px;
}

.button-circle {
  width: 23px;
  height: 23px;
  font-size: 1.15rem;
}

/* Globale Inhaltsbreite und Standardabstände */
.section-inner,
.home-product-gallery-section .section-inner,
.journal-showcase-hero-inner,
.home-premium-hero-inner,
.risk-center-premium-inner,
.risk-radar-premium-inner,
.sfk-hero-inner,
.sfa-hero-inner,
.sfp-hero-inner {
  width: min(100%, 1280px);
}

.content-section,
.product-section {
  padding-top: var(--section-space-compact);
  padding-bottom: var(--section-space-compact);
}

.section-inner h2,
.section-heading h2,
.home-section-heading h2,
.home-centered-heading h2,
.home-risk-spotlight-copy h2,
.home-trust-grid h2,
.home-final-cta-inner h2,
.journal-stage-heading h2,
.journal-centered-heading h2,
.journal-beta-trust-copy h2,
.journal-faq-grid h2,
.journal-final-cta-section h2,
.sfx-section-intro h2,
.sfx-final-cta h2 {
  font-size: clamp(2rem, 3.2vw, 3.05rem) !important;
  line-height: 1.08 !important;
}

.section-inner p:not(.section-label),
.product-lead,
.home-showcase-lead,
.home-premium-lead,
.journal-showcase-lead,
.risk-center-premium-lead,
.risk-radar-premium-lead,
.sfk-hero-lead,
.sfa-hero-copy > p:not(.sfx-kicker),
.sfp-hero-copy > p:not(.sfx-kicker) {
  font-size: clamp(0.95rem, 1.05vw, 1.04rem);
  line-height: 1.62;
}

.eyebrow,
.sfx-kicker {
  padding: 7px 13px;
  font-size: 0.69rem;
  letter-spacing: 0.11em;
}

.section-label {
  margin-bottom: 13px;
  font-size: 0.69rem;
  letter-spacing: 0.12em;
}

/* Startseite: kompletter Hero im Viewport */
.home-premium-hero {
  min-height: 620px;
  height: 100svh;
  max-height: 760px;
  padding: 94px 24px 22px;
}

.home-premium-hero-inner {
  height: min(560px, calc(100svh - 116px));
  min-height: 450px;
  max-height: 560px;
  grid-template-columns: minmax(390px, 0.86fr) minmax(570px, 1.14fr);
  gap: clamp(30px, 4vw, 56px);
}

.home-premium-copy {
  max-width: 545px;
}

.home-premium-title,
.home-showcase-title {
  max-width: 560px;
  font-size: clamp(2.75rem, 4vw, 3.85rem) !important;
  line-height: 1.01 !important;
}

.home-premium-lead {
  max-width: 535px;
  margin-top: 15px;
}

.home-hero-capabilities {
  margin-top: 16px;
  gap: 8px 14px;
}

.home-premium-actions {
  margin-top: 18px;
}

.home-hero-beta-note {
  margin-top: 13px;
}

.home-product-scene {
  max-width: 690px;
  height: min(455px, calc(100svh - 180px));
  min-height: 395px;
  max-height: 455px;
}

.home-product-main-window {
  top: 26px;
  height: calc(100% - 46px);
  border-radius: 20px;
}

.home-product-window-topbar {
  min-height: 48px;
  padding: 8px 12px;
}

.home-product-status-badge {
  min-width: 174px;
  padding: 7px 11px;
}

.home-product-gallery-section {
  padding: 74px 24px 78px;
}

.home-product-gallery-heading {
  gap: 28px;
}

.home-product-gallery-heading h2 {
  font-size: clamp(2rem, 3.1vw, 2.95rem) !important;
}

.home-gallery-visual {
  min-height: 410px;
}

.home-gallery-card-copy {
  padding-top: 20px;
}

.home-gallery-card-copy h3 {
  font-size: clamp(1.35rem, 2vw, 1.9rem) !important;
}

.home-platform-section,
.home-workflow-section,
.home-risk-spotlight-section,
.home-trust-section,
.home-final-cta-section {
  padding: var(--section-space) 24px;
}

.home-section-heading {
  gap: 38px;
  margin-bottom: 34px;
}

/* Journal-Seite */
.journal-showcase-hero {
  min-height: 650px;
  height: min(100svh, 720px);
  max-height: 720px;
  padding: 108px 24px 54px;
}

.journal-showcase-hero-inner {
  min-height: 0;
  height: 100%;
  grid-template-columns: minmax(365px, 0.76fr) minmax(570px, 1.24fr);
  gap: clamp(36px, 4.4vw, 62px);
}

.journal-showcase-copy {
  max-width: 560px;
}

.journal-beta-eyebrow {
  margin-bottom: 18px;
}

.journal-showcase-title {
  max-width: 590px;
  font-size: clamp(2.8rem, 4.15vw, 4rem) !important;
  line-height: 1 !important;
}

.journal-showcase-lead {
  margin-top: 18px;
  line-height: 1.62;
}

.journal-showcase-actions {
  margin-top: 22px;
}

.journal-proof-row {
  margin-top: 22px;
  padding-top: 18px;
  gap: 12px;
}

.journal-hero-product {
  max-width: 760px;
  justify-self: end;
  transform: scale(0.91);
  transform-origin: center right;
}

.journal-app-topbar {
  min-height: 62px;
  padding: 11px 15px;
}

.journal-product-stage,
.journal-workflow-section,
.journal-capabilities-section,
.journal-beta-trust-section,
.journal-faq-section,
.journal-final-cta-section {
  padding: var(--section-space) 24px;
}

.journal-stage-heading {
  gap: 42px;
  margin-bottom: 38px;
}

.journal-workflow-step {
  min-height: 220px;
}

.journal-capability-panel {
  min-height: 0;
  padding: 42px;
}

/* Risk Center und Risk Radar */
.risk-center-premium-hero,
.risk-radar-premium-hero {
  min-height: 640px;
  padding: 106px 24px 54px;
}

.risk-center-premium-inner,
.risk-radar-premium-inner {
  min-height: 480px;
  grid-template-columns: minmax(360px, 0.8fr) minmax(540px, 1.2fr);
  gap: clamp(36px, 4.4vw, 62px);
}

.risk-center-premium-title,
.risk-radar-premium-title {
  font-size: clamp(2.8rem, 4.15vw, 4rem) !important;
  line-height: 1 !important;
}

.risk-center-premium-lead,
.risk-radar-premium-lead {
  margin-top: 18px;
}

.risk-center-premium-actions,
.risk-radar-premium-actions {
  margin-top: 22px;
}

.risk-center-premium-points,
.risk-radar-premium-points {
  margin-top: 20px;
}

.risk-tool-navigation,
.radar-state-navigation {
  padding-left: 24px;
  padding-right: 24px;
}

.risk-tools-grid {
  gap: 18px;
}

.risk-tool-card {
  padding: 24px;
}

/* Wissen, Über, Preise: Hero und Sektionen */
.sfk-hero,
.sfa-hero,
.sfp-hero {
  min-height: 650px;
  padding: 108px 24px 56px;
}

.sfk-hero-inner,
.sfa-hero-inner,
.sfp-hero-inner {
  min-height: 485px;
  gap: clamp(36px, 4.6vw, 64px);
}

.sfk-hero-inner {
  grid-template-columns: minmax(0, 0.84fr) minmax(520px, 1.16fr);
}

.sfa-hero-inner {
  grid-template-columns: minmax(0, 0.9fr) minmax(500px, 1.1fr);
}

.sfp-hero-inner {
  grid-template-columns: minmax(0, 0.78fr) minmax(580px, 1.22fr);
}

.sfk-hero-copy h1,
.sfa-hero-copy h1,
.sfp-hero-copy h1 {
  font-size: clamp(2.85rem, 4.3vw, 4.15rem) !important;
  line-height: 0.99 !important;
}

.sfk-hero-lead,
.sfa-hero-copy > p:not(.sfx-kicker),
.sfp-hero-copy > p:not(.sfx-kicker) {
  margin-top: 18px;
}

.sfk-hero-console {
  min-height: 455px;
  padding: 20px;
  border-radius: 24px;
}

.sfk-console-stage {
  height: 250px;
  margin-top: 18px;
}

.sfa-flux-core {
  height: 470px;
}

.sfp-product-stage {
  transform: perspective(1400px) rotateY(-1.4deg) rotateX(0.7deg) scale(0.92);
  transform-origin: center right;
}

.sfk-editorial,
.sfk-atlas-section,
.sfk-flow-section,
.sfa-manifesto,
.sfa-storyline,
.sfa-status,
.sfa-principles,
.sfa-boundaries,
.sfa-roadmap,
.sfp-model,
.sfp-beta-focus,
.sfp-compare,
.sfp-readiness,
.sfp-paths,
.sfp-faq {
  padding: var(--section-space) 24px;
}

.sfk-editorial-inner {
  grid-template-columns: 92px minmax(0, 0.92fr) minmax(400px, 1.08fr);
  gap: clamp(30px, 4vw, 56px);
}

.sfk-editorial-number,
.sfa-manifesto-index {
  font-size: clamp(4.8rem, 7vw, 7rem);
}

.sfk-editorial-copy h2,
.sfa-manifesto-copy h2,
.sfa-status-copy h2,
.sfa-principles-head h2,
.sfp-beta-copy h2,
.sfp-readiness h2,
.sfp-faq h2 {
  font-size: clamp(2.05rem, 3.45vw, 3.25rem) !important;
  line-height: 1.06 !important;
}

.sfk-ratio-machine {
  min-height: 410px;
}

.sfk-ratio-scale {
  height: 286px;
}

.sfk-atlas-card {
  min-height: 430px;
  padding: 23px;
  border-radius: 24px;
}

.sfk-atlas-card h3 {
  font-size: clamp(1.35rem, 2vw, 1.95rem) !important;
}

.sfk-behaviour-map,
.sfk-drawdown-visual {
  min-height: 210px;
  height: 210px;
}

.sfk-flow-inner,
.sfa-status-inner,
.sfp-beta-inner,
.sfp-readiness-inner,
.sfp-faq-inner {
  gap: 54px;
}

.sfk-flow-track a {
  min-height: 136px;
}

.sfa-manifesto-inner {
  grid-template-columns: 98px minmax(0, 1fr) minmax(300px, 0.66fr);
  gap: clamp(32px, 4vw, 58px);
}

.sfa-manifesto blockquote {
  font-size: clamp(1.12rem, 1.7vw, 1.48rem);
}

.sfa-story-track article {
  min-height: 290px;
  padding: 28px 24px;
}

.sfa-story-track span {
  font-size: 3.7rem;
}

.sfa-story-track small {
  margin-top: 20px;
}

.sfa-principles-head {
  margin-bottom: 36px;
}

.sfa-principle-lines article {
  min-height: 122px;
  padding: 22px 8px;
  grid-template-columns: 86px minmax(270px, 0.72fr) minmax(0, 1.28fr);
  gap: 24px;
}

.sfa-principle-lines h3 {
  font-size: 1.35rem;
}

.sfa-roadmap-track article > span {
  width: 80px;
  height: 80px;
  margin-bottom: 22px;
}

.sfa-roadmap-track::before {
  top: 40px;
}

.sfp-access-row {
  min-height: 190px;
  padding: 28px 20px;
  grid-template-columns: 72px minmax(230px, 1.1fr) minmax(160px, 0.6fr) minmax(240px, 0.9fr) 135px;
  gap: 22px;
}

.sfp-access-number {
  font-size: 3.25rem;
}

.sfp-access-title h3 {
  font-size: 1.5rem;
}

.sfp-beta-dashboard,
.sfa-status-stage {
  padding: 22px;
  border-radius: 24px;
}

.sfp-path-grid a {
  min-height: 265px;
  padding: 22px;
}

.sfp-path-grid a > span {
  font-size: 3.3rem;
}

.sfp-faq-list summary {
  padding-top: 19px;
  padding-bottom: 19px;
  font-size: 0.93rem;
}

/* Rechtliche Seiten: ruhiger, kompakter, lesbarer */
.legal-hero-section {
  padding-top: 126px;
  padding-bottom: 60px;
}

.legal-page-title {
  font-family: var(--font-display) !important;
  font-size: clamp(2.5rem, 4.2vw, 3.8rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
}

.legal-hero-section + .content-section,
body:not(.product-page) .content-section {
  padding-top: 64px;
  padding-bottom: 64px;
}

/* Tablet */
@media (max-width: 1120px) {
  :root {
    --header-height: 76px;
  }

  .site-header {
    grid-template-columns: 210px 1fr auto;
  }

  .main-nav {
    display: none;
  }

  .mobile-menu-button,
  .mobile-nav-toggle {
    display: grid;
  }

  .home-premium-hero,
  .journal-showcase-hero,
  .risk-center-premium-hero,
  .risk-radar-premium-hero,
  .sfk-hero,
  .sfa-hero,
  .sfp-hero {
    height: auto;
    max-height: none;
    min-height: 0;
    padding-top: 110px;
    padding-bottom: 58px;
  }

  .home-premium-hero-inner,
  .journal-showcase-hero-inner,
  .risk-center-premium-inner,
  .risk-radar-premium-inner,
  .sfk-hero-inner,
  .sfa-hero-inner,
  .sfp-hero-inner {
    height: auto;
    min-height: 0;
    max-height: none;
    grid-template-columns: 1fr;
  }

  .home-product-scene,
  .journal-hero-product,
  .sfk-hero-console,
  .sfa-flux-core,
  .sfp-product-stage {
    width: min(100%, 820px);
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
  }

  .journal-hero-product,
  .sfp-product-stage {
    transform: none;
  }

  .home-product-scene {
    height: 470px;
  }

  .sfk-editorial-inner,
  .sfa-manifesto-inner,
  .sfa-status-inner,
  .sfp-beta-inner,
  .sfp-readiness-inner,
  .sfp-faq-inner {
    grid-template-columns: 1fr;
  }

  .sfk-editorial-number,
  .sfa-manifesto-index {
    display: none;
  }

  .sfp-access-row {
    grid-template-columns: 64px 1fr auto;
  }

  .sfp-access-row ul {
    grid-column: 2 / 4;
  }

  .sfp-access-row > a {
    grid-column: 3;
  }
}

/* Mobile */
@media (max-width: 720px) {
  :root {
    --section-space: 62px;
    --section-space-compact: 56px;
  }

  .site-header {
    height: 72px;
    padding: 0 18px;
    grid-template-columns: 1fr auto;
  }

  .brand-logo {
    width: 35px;
    height: 35px;
  }

  .brand-name {
    font-size: 1.08rem;
  }

  .login-button {
    display: none;
  }

  .button {
    min-height: 47px;
    width: 100%;
    min-width: 0;
  }

  .home-premium-hero,
  .journal-showcase-hero,
  .risk-center-premium-hero,
  .risk-radar-premium-hero,
  .sfk-hero,
  .sfa-hero,
  .sfp-hero {
    padding: 94px 18px 50px;
  }

  .home-premium-title,
  .home-showcase-title,
  .journal-showcase-title,
  .risk-center-premium-title,
  .risk-radar-premium-title,
  .sfk-hero-copy h1,
  .sfa-hero-copy h1,
  .sfp-hero-copy h1 {
    font-size: clamp(2.35rem, 11.5vw, 3.15rem) !important;
    line-height: 1.02 !important;
  }

  .home-product-scene {
    height: 405px;
    min-height: 405px;
  }

  .journal-proof-row {
    grid-template-columns: 1fr;
  }

  .home-product-gallery-section,
  .home-platform-section,
  .home-workflow-section,
  .home-risk-spotlight-section,
  .home-trust-section,
  .home-final-cta-section,
  .journal-product-stage,
  .journal-workflow-section,
  .journal-capabilities-section,
  .journal-beta-trust-section,
  .journal-faq-section,
  .journal-final-cta-section,
  .sfk-editorial,
  .sfk-atlas-section,
  .sfk-flow-section,
  .sfa-manifesto,
  .sfa-storyline,
  .sfa-status,
  .sfa-principles,
  .sfa-boundaries,
  .sfa-roadmap,
  .sfp-model,
  .sfp-beta-focus,
  .sfp-compare,
  .sfp-readiness,
  .sfp-paths,
  .sfp-faq,
  .sfx-final-cta {
    padding-left: 18px;
    padding-right: 18px;
  }

  .home-gallery-visual {
    min-height: 340px;
  }

  .journal-capability-panel {
    padding: 28px 20px;
  }

  .sfk-atlas-card {
    min-height: 390px;
  }

  .sfk-ratio-machine {
    min-height: 0;
  }

  .sfk-ratio-scale {
    height: 260px;
  }

  .sfa-flux-core {
    height: 390px;
  }

  .sfa-story-track article {
    min-height: 240px;
  }

  .sfa-principle-lines article {
    min-height: 0;
  }

  .sfp-access-row {
    min-height: 0;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .sfp-path-grid a {
    min-height: 235px;
  }

  .legal-hero-section {
    padding-top: 104px;
    padding-bottom: 48px;
  }

  body:not(.product-page) .content-section {
    padding-top: 54px;
    padding-bottom: 54px;
  }
}


/* =========================================================
   Phase 29D - Premium Brand Experience / Signature Rebuild
   ========================================================= */


:root {
  --page-gutter: clamp(20px, 3.2vw, 34px);
  --content-max: min(100% - (var(--page-gutter) * 2), 1360px);
  --surface-1: rgba(6, 18, 43, 0.84);
  --surface-2: rgba(5, 14, 31, 0.95);
  --line-soft: rgba(62, 133, 255, 0.16);
  --line-strong: rgba(62, 133, 255, 0.34);
  --glow-soft: 0 24px 60px rgba(0, 0, 0, 0.42);
  --radius-xl: 30px;
  --radius-lg: 24px;
  --radius-md: 18px;
}

html {
  background:
    radial-gradient(circle at 20% 0%, rgba(15, 95, 214, 0.14), transparent 28rem),
    radial-gradient(circle at 100% 18%, rgba(0, 190, 255, 0.09), transparent 32rem),
    linear-gradient(180deg, #02050d 0%, #020915 28%, #01040b 100%);
}

body {
  background:
    radial-gradient(circle at 18% 0%, rgba(12, 115, 255, 0.08), transparent 30rem),
    radial-gradient(circle at 88% 14%, rgba(22, 228, 255, 0.05), transparent 28rem),
    linear-gradient(180deg, #02050d 0%, #020915 38%, #01040b 100%);
  color: rgba(247, 251, 255, 0.96);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

main,
.section-inner,
.content-section-inner,
.home-showcase-hero-inner,
.journal-showcase-hero-inner,
.risk-center-premium-hero-inner,
.risk-radar-premium-hero-inner,
.sfa-hero-inner,
.sfp-hero-inner,
.sfk-hero-inner,
.site-footer,
.site-header {
  position: relative;
  z-index: 1;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(33, 91, 190, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(33, 91, 190, 0.08) 1px, transparent 1px);
  background-size: 86px 86px;
  mask-image: radial-gradient(circle at 50% 18%, rgba(0, 0, 0, 0.72), transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 18%, rgba(0, 0, 0, 0.72), transparent 78%);
  opacity: 0.2;
  z-index: 0;
}

.site-header {
  top: 14px;
  width: var(--content-max);
  max-width: 1360px;
  height: 78px;
  padding: 0 22px;
  border: 1px solid rgba(42, 102, 197, 0.2);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(4, 10, 22, 0.9), rgba(3, 10, 22, 0.74));
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px) saturate(1.1);
}

.site-header.is-scrolled {
  background: rgba(4, 10, 22, 0.94);
  border-color: rgba(42, 102, 197, 0.28);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.34);
}

.brand-name,
.intro-name,
.home-showcase-title,
.home-premium-title,
.journal-showcase-title,
.risk-center-title,
.risk-radar-title,
.sfa-hero h1,
.sfp-hero h1,
.sfk-hero h1,
.content-section h1,
.content-section h2,
.sfx-final-cta h2,
.section-inner h2,
.section-inner h3 {
  font-family: "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.055em;
}

.brand-name {
  font-size: 1.42rem;
  letter-spacing: -0.06em;
}

.main-nav {
  gap: clamp(18px, 2vw, 36px);
  font-size: 0.96rem;
}

.main-nav > a,
.main-nav .nav-menu-main {
  padding-top: 12px;
  padding-bottom: 12px;
}

.login-button {
  min-height: 50px;
  border-radius: 14px;
  border-color: rgba(62, 133, 255, 0.4);
  background: linear-gradient(180deg, rgba(8, 18, 42, 0.88), rgba(4, 13, 28, 0.66));
}

.login-button:hover {
  box-shadow: 0 12px 28px rgba(11, 115, 255, 0.18);
}

.nav-menu-group {
  position: relative;
}

.nav-submenu {
  top: calc(100% + 10px);
  left: 50%;
  width: 460px;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  border: 1px solid rgba(56, 129, 240, 0.22);
  border-radius: 24px;
  background:
    radial-gradient(circle at 15% 0%, rgba(11, 115, 255, 0.16), transparent 18rem),
    linear-gradient(180deg, rgba(4, 13, 28, 0.96), rgba(2, 8, 19, 0.96));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
  transform: translate(-50%, 14px);
}

.main-nav .nav-submenu a,
.main-nav .nav-submenu a.nav-submenu-card {
  min-height: 132px;
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  border: 1px solid rgba(53, 117, 217, 0.16);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01));
  color: rgba(255, 255, 255, 0.88);
}

.main-nav .nav-submenu a small {
  color: var(--color-cyan);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.main-nav .nav-submenu a strong {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 1rem;
  line-height: 1.2;
}

.main-nav .nav-submenu a span {
  color: rgba(194, 208, 228, 0.84);
  font-size: 0.82rem;
  line-height: 1.45;
}

.main-nav .nav-submenu a:hover,
.main-nav .nav-submenu a:focus-visible,
.main-nav .nav-submenu a.is-active {
  border-color: rgba(62, 133, 255, 0.34);
  background:
    radial-gradient(circle at 80% 0%, rgba(34, 228, 255, 0.1), transparent 10rem),
    rgba(11, 115, 255, 0.12);
  transform: translateY(-2px);
}

.button,
.button-primary,
.button-secondary {
  border-radius: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.button-primary {
  box-shadow: 0 16px 36px rgba(11, 115, 255, 0.22);
}

.button-secondary {
  background: rgba(3, 13, 29, 0.74);
  border-color: rgba(48, 121, 230, 0.26);
}

.home-premium-hero,
.journal-showcase-hero,
.risk-center-premium-hero,
.risk-radar-premium-hero,
.sfa-hero,
.sfp-hero,
.sfk-hero {
  position: relative;
  min-height: min(840px, 100svh);
  padding-top: calc(var(--header-height) + clamp(30px, 4vh, 52px));
  padding-bottom: clamp(44px, 5vh, 68px);
  overflow: hidden;
}

.home-showcase-hero-inner,
.journal-showcase-hero-inner,
.risk-center-premium-hero-inner,
.risk-radar-premium-hero-inner,
.sfa-hero-inner,
.sfp-hero-inner,
.sfk-hero-inner {
  min-height: min(610px, calc(100svh - 220px));
  align-items: center;
}

.home-premium-hero::after,
.journal-showcase-hero::after,
.risk-center-premium-hero::after,
.risk-radar-premium-hero::after,
.sfp-hero::after,
.sfk-hero::after {
  position: absolute;
  left: clamp(18px, 3vw, 40px);
  bottom: clamp(-10px, 2vw, 20px);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: clamp(5.8rem, 15vw, 15.5rem);
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: -0.09em;
  color: rgba(255, 255, 255, 0.04);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.home-premium-hero::after { content: "SUPRAFLUX"; }
.journal-showcase-hero::after { content: "JOURNAL"; }
.risk-center-premium-hero::after { content: "RISK"; }
.risk-radar-premium-hero::after { content: "RADAR"; }
.sfp-hero::after { content: "ACCESS"; }
.sfk-hero::after { content: "WISSEN"; }

.home-premium-copy,
.journal-showcase-copy,
.risk-center-copy,
.risk-radar-copy,
.sfa-hero-copy,
.sfp-hero-copy,
.sfk-hero-copy {
  position: relative;
  z-index: 2;
}

.home-showcase-title,
.home-premium-title,
.journal-showcase-title,
.risk-center-title,
.risk-radar-title,
.sfa-hero h1,
.sfp-hero h1,
.sfk-hero h1 {
  font-size: clamp(3rem, 5.7vw, 6rem);
  line-height: 0.95;
  margin-bottom: 20px;
}

.home-showcase-lead,
.home-premium-lead,
.journal-showcase-lead,
.risk-center-lead,
.risk-radar-lead,
.sfa-hero p,
.sfp-hero p,
.sfk-hero p {
  max-width: 700px;
  color: rgba(216, 224, 236, 0.92);
  font-size: clamp(1rem, 1.28vw, 1.2rem);
  line-height: 1.65;
}

.home-hero-beta-note,
.eyebrow,
.sfx-kicker,
.section-label,
.home-eyebrow,
.journal-beta-eyebrow {
  letter-spacing: 0.14em;
  font-weight: 800;
}

.home-hero-capabilities li,
.journal-proof-row > div,
.risk-center-micro-list li,
.risk-radar-micro-list li {
  border-radius: 18px;
  background: rgba(5, 16, 37, 0.54);
  border: 1px solid rgba(42, 102, 197, 0.16);
  backdrop-filter: blur(8px);
}

.home-product-scene,
.journal-app-window,
.risk-center-cockpit,
.risk-radar-cockpit,
.sfa-flux-core,
.sfp-stage-shell,
.sfk-knowledge-stage {
  position: relative;
  z-index: 2;
  border-radius: 30px;
  border: 1px solid rgba(48, 121, 230, 0.18);
  box-shadow: var(--glow-soft);
}

.home-product-scene::before,
.journal-app-window::before,
.risk-center-cockpit::before,
.risk-radar-cockpit::before {
  content: "BULLE";
  position: absolute;
  top: 16px;
  right: 22px;
  padding: 6px 12px;
  border: 1px solid rgba(34, 228, 255, 0.3);
  border-radius: 999px;
  color: rgba(34, 228, 255, 0.88);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  background: rgba(5, 16, 37, 0.65);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.home-product-scene::after,
.journal-app-window::after,
.risk-center-cockpit::after,
.risk-radar-cockpit::after {
  content: "BÄR";
  position: absolute;
  top: 16px;
  right: 88px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 108, 129, 0.24);
  border-radius: 999px;
  color: rgba(255, 132, 152, 0.82);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  background: rgba(5, 16, 37, 0.6);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.sfa-wordmark {
  color: rgba(255, 255, 255, 0.042);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: clamp(6rem, 16vw, 16rem);
  letter-spacing: -0.09em;
  bottom: -6px;
}

.sfa-flux-core {
  background:
    radial-gradient(circle at 50% 50%, rgba(11, 115, 255, 0.1), transparent 48%),
    rgba(3, 10, 22, 0.28);
  min-height: 520px;
}

.sfx-final-cta {
  padding-bottom: clamp(82px, 10vw, 118px);
}

.sfx-final-cta-inner,
.sfa-status-stage,
.sfp-plan-grid article,
.sfa-story-track article,
.sfa-roadmap-track article,
.journal-product-stage,
.risk-tool-navigation,
.radar-state-navigation,
.sfk-editorial-card,
.sfk-atlas-card,
.sfp-model article,
.content-section,
.content-section.section-muted {
  border-radius: 28px;
  border-color: rgba(45, 107, 205, 0.14);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.18);
}

.site-footer {
  width: var(--content-max);
  max-width: 1360px;
  margin: 0 auto;
  padding-inline: 0;
}

@media (max-width: 1260px) {
  .site-header {
    grid-template-columns: 240px 1fr 160px;
  }
  .nav-submenu {
    width: 430px;
  }
}

@media (max-width: 1100px) {
  .site-header {
    top: 0;
    width: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .nav-submenu {
    width: min(420px, calc(100vw - 40px));
    left: 0;
    transform: translate(0, 14px);
  }

  .nav-menu-group:hover .nav-submenu,
  .nav-menu-group:focus-within .nav-submenu {
    transform: translate(0, 0);
  }
}

@media (max-width: 920px) {
  .home-premium-hero,
  .journal-showcase-hero,
  .risk-center-premium-hero,
  .risk-radar-premium-hero,
  .sfa-hero,
  .sfp-hero,
  .sfk-hero {
    min-height: auto;
    padding-top: calc(var(--header-height) + 20px);
    padding-bottom: 44px;
  }

  .home-showcase-hero-inner,
  .journal-showcase-hero-inner,
  .risk-center-premium-hero-inner,
  .risk-radar-premium-hero-inner,
  .sfa-hero-inner,
  .sfp-hero-inner,
  .sfk-hero-inner {
    min-height: 0;
  }

  .home-premium-hero::after,
  .journal-showcase-hero::after,
  .risk-center-premium-hero::after,
  .risk-radar-premium-hero::after,
  .sfp-hero::after,
  .sfk-hero::after,
  .sfa-wordmark {
    font-size: clamp(4.6rem, 24vw, 8rem);
    bottom: -4px;
  }

  .nav-submenu {
    display: none;
  }
}

@media (max-width: 640px) {
  .site-header {
    padding-inline: 16px;
    height: 74px;
  }

  .brand-logo {
    width: 40px;
    height: 40px;
  }

  .brand-name {
    font-size: 1.26rem;
  }

  .home-showcase-title,
  .home-premium-title,
  .journal-showcase-title,
  .risk-center-title,
  .risk-radar-title,
  .sfa-hero h1,
  .sfp-hero h1,
  .sfk-hero h1 {
    font-size: clamp(2.4rem, 12vw, 3.4rem);
    line-height: 0.96;
  }

  .home-product-scene::before,
  .home-product-scene::after,
  .journal-app-window::before,
  .journal-app-window::after,
  .risk-center-cockpit::before,
  .risk-center-cockpit::after,
  .risk-radar-cockpit::before,
  .risk-radar-cockpit::after {
    top: 12px;
    padding: 5px 10px;
    font-size: 0.62rem;
  }

  .home-product-scene::after,
  .journal-app-window::after,
  .risk-center-cockpit::after,
  .risk-radar-cockpit::after {
    right: 78px;
  }
}


/* =========================================================
   Phase 29D.1 - Startseite Feinschliff
   Hero, Produktgalerie, Plattform und Bull-Signature
   ========================================================= */

@media (min-width: 1181px) {
  .home-premium-hero {
    min-height: 650px;
    height: min(760px, calc(100svh - 6px));
    max-height: 760px;
    padding: 108px 30px 30px;
  }

  .home-premium-hero-inner {
    width: min(100%, 1320px);
    height: auto;
    min-height: 510px;
    max-height: none;
    grid-template-columns: minmax(420px, 0.9fr) minmax(560px, 1.1fr);
    gap: clamp(34px, 4vw, 58px);
  }

  .home-premium-copy {
    max-width: 550px;
  }

  .home-premium-title {
    max-width: 545px;
    font-size: clamp(3.05rem, 4.2vw, 4.25rem);
    line-height: 0.98;
  }

  .home-premium-lead {
    max-width: 535px;
    font-size: 1rem;
    line-height: 1.56;
  }

  .home-product-scene {
    width: 92%;
    max-width: 670px;
    height: 440px;
    min-height: 440px;
    max-height: 440px;
    transform: translateY(6px);
  }

  .home-product-market-layer {
    inset: 1% 0 2% 2%;
    width: 96%;
    height: 92%;
    opacity: 0.12;
  }

  .home-product-scene-glow {
    width: 68%;
    height: 60%;
    right: 5%;
    top: 18%;
    opacity: 0.72;
  }

  .home-premium-hero::after {
    left: clamp(44px, 5vw, 82px);
    bottom: auto;
    top: 112px;
    font-size: clamp(6.2rem, 11.6vw, 11.6rem);
    color: rgba(255, 255, 255, 0.032);
    line-height: 0.8;
  }
}

/* Die versteckten Bull-/Bear-Badges hinter der Startseiten-Produktoberfläche entfernen. */
.home-product-scene::before,
.home-product-scene::after {
  content: none !important;
  display: none !important;
}

.home-product-gallery-track {
  grid-auto-columns: calc((100% - 24px) / 2);
  gap: 24px;
}

.home-product-gallery-section {
  padding-top: 78px;
  padding-bottom: 82px;
}

.home-product-gallery-heading {
  align-items: center;
}

.home-gallery-visual {
  height: 310px;
}

.home-gallery-card-copy h3 {
  font-size: 1.22rem;
}

.home-gallery-pagination {
  gap: 14px;
}

.home-gallery-pagination button {
  width: 112px;
  height: 4px;
}

.home-platform-section {
  padding-top: 70px;
  padding-bottom: 78px;
}

.home-section-heading {
  margin-bottom: 34px;
}

.home-ecosystem-journal {
  min-height: 520px;
  padding: 34px 36px;
  grid-template-columns: minmax(270px, 0.72fr) minmax(390px, 1fr);
  gap: 34px;
}

.home-ecosystem-copy h3 {
  font-size: clamp(1.95rem, 2.6vw, 2.65rem);
}

.home-ecosystem-copy p {
  margin-top: 13px;
  line-height: 1.58;
}

.home-feature-list {
  margin: 19px 0 22px;
  gap: 9px;
}

.home-mini-toolbar {
  min-height: 48px;
}

.home-mini-metrics {
  padding: 11px;
}

.home-mini-metrics div {
  min-height: 62px;
}

.home-mini-chart {
  margin: 0 11px 11px;
}

.home-mini-chart svg {
  height: 150px;
}

.home-mini-trades {
  padding: 0 11px 11px;
  gap: 6px;
}

.home-mini-trades div {
  padding: 8px 10px;
}

.home-risk-spotlight-grid {
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 0.72fr);
  gap: clamp(44px, 6vw, 84px);
}

.home-bull-signature {
  position: relative;
  min-height: 500px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(42, 102, 197, 0.08);
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 44%, rgba(11, 115, 255, 0.08), transparent 20rem),
    linear-gradient(145deg, rgba(4, 15, 34, 0.34), rgba(2, 7, 17, 0.12));
}

.home-bull-signature::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(44, 112, 211, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44, 112, 211, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at center, #000 10%, transparent 76%);
  -webkit-mask-image: radial-gradient(circle at center, #000 10%, transparent 76%);
}

.home-bull-word {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%);
  color: rgba(255, 255, 255, 0.026);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: clamp(7rem, 13vw, 12rem);
  font-weight: 800;
  letter-spacing: -0.09em;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

.home-bull-art {
  position: relative;
  z-index: 1;
  width: min(94%, 650px);
  height: auto;
  opacity: 0.58;
}

.home-bull-grid path {
  fill: none;
  stroke: rgba(48, 121, 230, 0.1);
  stroke-width: 1;
  stroke-dasharray: 7 13;
}

.home-bull-eyes circle {
  fill: rgba(34, 228, 255, 0.74);
  filter: drop-shadow(0 0 10px rgba(34, 228, 255, 0.5));
}

.home-bull-candles line,
.home-bull-candles rect {
  stroke: rgba(34, 228, 255, 0.45);
  fill: rgba(34, 228, 255, 0.07);
  stroke-width: 2;
}

.home-bull-caption {
  position: absolute;
  z-index: 2;
  left: 28px;
  bottom: 24px;
}

.home-bull-caption span,
.home-bull-caption strong {
  display: block;
}

.home-bull-caption span {
  color: rgba(34, 228, 255, 0.72);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.home-bull-caption strong {
  margin-top: 5px;
  color: rgba(231, 239, 250, 0.74);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 0.94rem;
}

@media (max-width: 1180px) {
  .home-premium-hero::after {
    top: 100px;
    bottom: auto;
    font-size: clamp(5.4rem, 17vw, 10rem);
  }

  .home-product-scene {
    width: 100%;
    max-width: 760px;
    height: 520px;
    min-height: 520px;
    margin-inline: auto;
  }

  .home-ecosystem-journal {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .home-product-gallery-track {
    grid-auto-columns: 100%;
    gap: 18px;
  }

  .home-gallery-pagination button {
    width: 54px;
  }

  .home-gallery-visual {
    height: 292px;
  }

  .home-bull-signature {
    min-height: 390px;
  }

  .home-bull-word {
    font-size: clamp(5rem, 26vw, 8rem);
  }

  .home-bull-caption {
    left: 20px;
    bottom: 18px;
  }
}


/* =========================================================
   Phase 29D.2 - Startseite Hero, Abschnittshöhen und Bull-Art
   ========================================================= */

.home-premium-hero::after {
  content: none !important;
  display: none !important;
}

.home-hero-wordmark {
  position: absolute;
  z-index: 0;
  top: 116px;
  right: clamp(22px, 3.5vw, 58px);
  width: min(65vw, 980px);
  overflow: hidden;
  color: rgba(255, 255, 255, 0.05);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: clamp(5.5rem, 10vw, 9.8rem);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.09em;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.home-product-market-layer {
  display: none !important;
}

@media (min-width: 1181px) {
  .home-premium-hero {
    height: min(620px, calc(100svh - 6px));
    min-height: 560px;
    max-height: 620px;
    padding: 96px 30px 16px;
  }

  .home-premium-hero-inner {
    width: min(100%, 1320px);
    height: 468px;
    min-height: 468px;
    max-height: 468px;
    grid-template-columns: minmax(410px, 0.88fr) minmax(540px, 1.02fr);
    gap: clamp(30px, 3.7vw, 54px);
    align-items: center;
  }

  .home-premium-copy {
    max-width: 535px;
    transform: translateY(12px);
  }

  .home-premium-title {
    max-width: 520px;
    font-size: clamp(2.92rem, 3.75vw, 3.82rem);
    line-height: 0.97;
  }

  .home-premium-lead {
    max-width: 520px;
    margin-top: 13px;
    font-size: 0.96rem;
    line-height: 1.48;
  }

  .home-hero-capabilities {
    margin-top: 12px;
  }

  .home-premium-actions {
    margin-top: 15px;
  }

  .home-premium-actions .button {
    min-height: 50px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .home-hero-beta-note {
    display: none;
  }

  .home-product-scene {
    width: min(100%, 625px);
    max-width: 625px;
    height: 382px;
    min-height: 382px;
    max-height: 382px;
    transform: translateY(44px);
  }

  .home-product-scene::before {
    inset: 8% 2% 1% 6%;
    opacity: 0.5;
  }

  .home-product-scene-glow {
    width: 62%;
    height: 52%;
    right: 8%;
    top: 22%;
    opacity: 0.45;
  }

  .home-product-status-badge {
    top: -1px;
    left: 9%;
    min-width: 180px;
    padding: 7px 11px;
  }

  .home-product-main-window {
    top: 26px;
    width: 94%;
    height: calc(100% - 38px);
    border-radius: 20px;
  }

  .home-product-window-topbar {
    min-height: 50px;
    padding: 8px 12px;
  }

  .home-product-window-body {
    height: calc(100% - 50px);
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .home-product-window-content {
    padding: 10px;
  }

  .home-product-window-metrics {
    margin-top: 8px;
  }

  .home-product-window-metrics article {
    min-height: 56px;
    padding: 8px;
  }

  .home-product-window-main {
    margin-top: 7px;
    grid-template-columns: minmax(0, 1fr) 124px;
  }

  .home-product-equity-chart {
    height: 112px;
  }

  .home-product-trade-card {
    width: 218px;
    padding: 10px;
    bottom: -2px;
    transform: scale(0.9);
    transform-origin: bottom left;
  }

  .home-product-insight-card {
    top: 70px;
    right: -5px;
    width: 175px;
    transform: scale(0.9);
    transform-origin: top right;
  }
}

@media (min-width: 1181px) and (max-height: 720px) {
  .home-premium-hero {
    height: 560px;
    min-height: 560px;
    padding-top: 90px;
  }

  .home-premium-hero-inner {
    height: 445px;
    min-height: 445px;
    max-height: 445px;
  }

  .home-product-scene {
    height: 360px;
    min-height: 360px;
    max-height: 360px;
    transform: translateY(38px);
  }

  .home-premium-title {
    font-size: 3.25rem;
  }
}

.home-product-gallery-section {
  padding-top: 52px;
  padding-bottom: 58px;
}

.home-product-gallery-heading {
  margin-bottom: 28px;
}

.home-product-gallery-heading h2 {
  max-width: 760px;
  font-size: clamp(2.25rem, 3.5vw, 3.25rem);
  line-height: 1.02;
}

.home-product-gallery-heading p:not(.section-label) {
  max-width: 780px;
  margin-top: 12px;
  line-height: 1.55;
}

.home-gallery-visual {
  height: 250px;
}

.home-gallery-card-copy {
  padding-top: 18px;
}

.home-gallery-card-copy h3 {
  margin-top: 7px;
  font-size: 1.12rem;
}

.home-gallery-card-copy p {
  margin-top: 6px;
  line-height: 1.5;
}

.home-gallery-pagination {
  margin-top: 24px;
}

.home-risk-spotlight-section {
  padding-top: 70px;
  padding-bottom: 76px;
}

.home-risk-spotlight-grid {
  align-items: center;
}

.home-bull-signature {
  min-height: 430px;
  border-color: rgba(42, 102, 197, 0.11);
  background:
    radial-gradient(circle at 56% 44%, rgba(11, 115, 255, 0.1), transparent 20rem),
    linear-gradient(145deg, rgba(4, 15, 34, 0.32), rgba(2, 7, 17, 0.1));
}

.home-bull-word {
  font-size: clamp(6rem, 11vw, 10rem);
  color: rgba(255, 255, 255, 0.028);
}

.home-bull-art {
  width: min(92%, 650px);
  opacity: 0.72;
}

.home-bull-silhouette {
  fill: url(#bullBodyFill);
  stroke: url(#bullOutline);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#bullLineGlow);
}

.home-bull-tail,
.home-bull-horns,
.home-bull-facets {
  fill: none;
  stroke: url(#bullOutline);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-bull-tail,
.home-bull-horns {
  stroke-width: 4;
  filter: url(#bullLineGlow);
}

.home-bull-facets {
  stroke-width: 1.6;
  stroke-opacity: 0.42;
}

.home-bull-eye {
  fill: rgba(34, 228, 255, 0.88);
  filter: drop-shadow(0 0 8px rgba(34, 228, 255, 0.58));
}

.home-bull-ground {
  fill: none;
  stroke: rgba(34, 228, 255, 0.12);
  stroke-width: 1;
  stroke-dasharray: 8 13;
}

.home-bull-candles-back {
  opacity: 0.42;
}

@media (max-width: 1180px) {
  .home-hero-wordmark {
    top: 102px;
    right: 18px;
    width: 74%;
    font-size: clamp(5rem, 15vw, 9rem);
  }

  .home-product-gallery-section {
    padding-top: 58px;
    padding-bottom: 64px;
  }

  .home-gallery-visual {
    height: 280px;
  }
}

@media (max-width: 760px) {
  .home-hero-wordmark {
    top: 100px;
    right: 10px;
    width: 92%;
    font-size: clamp(4rem, 22vw, 7rem);
    opacity: 0.78;
  }

  .home-product-gallery-section {
    padding-top: 46px;
    padding-bottom: 52px;
  }

  .home-gallery-visual {
    height: 272px;
  }

  .home-bull-signature {
    min-height: 350px;
  }
}


/* =========================================================
   Phase 29D.3 - Wordmark und klar erkennbare Bull-Silhouette
   ========================================================= */

.home-hero-wordmark {
  top: 72px;
  right: clamp(28px, 4.4vw, 72px);
  width: min(62vw, 930px);
  color: rgba(255, 255, 255, 0.078);
  font-size: clamp(5.15rem, 8.7vw, 8.85rem);
  line-height: 0.8;
  text-align: right;
  text-shadow:
    0 0 38px rgba(11, 115, 255, 0.09),
    0 0 78px rgba(34, 228, 255, 0.035);
}

.home-bull-signature {
  overflow: hidden;
  min-height: 430px;
}

.home-bull-market-art {
  position: absolute;
  inset: 22px 18px 46px 18px;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.home-bull-candles-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.34;
}

.home-bull-candles-art line,
.home-bull-candles-art rect {
  fill: rgba(34, 228, 255, 0.045);
  stroke: rgba(34, 228, 255, 0.34);
  stroke-width: 2;
}

.home-bull-image {
  position: relative;
  z-index: 2;
  width: min(88%, 660px);
  max-height: 330px;
  object-fit: contain;
  opacity: 0.5;
  filter:
    drop-shadow(0 0 14px rgba(34, 228, 255, 0.16))
    drop-shadow(0 0 36px rgba(11, 115, 255, 0.13));
  mix-blend-mode: screen;
}

.home-bull-word {
  z-index: 1;
  color: rgba(255, 255, 255, 0.026);
}

.home-bull-caption {
  z-index: 4;
}

@media (max-width: 1180px) {
  .home-hero-wordmark {
    top: 76px;
    right: 20px;
    width: 72%;
    color: rgba(255, 255, 255, 0.07);
    font-size: clamp(4.7rem, 13vw, 8rem);
  }
}

@media (max-width: 760px) {
  .home-hero-wordmark {
    top: 86px;
    right: 10px;
    width: 94%;
    color: rgba(255, 255, 255, 0.055);
    font-size: clamp(3.8rem, 20vw, 6.6rem);
    text-align: center;
  }

  .home-bull-market-art {
    inset: 18px 8px 42px;
  }

  .home-bull-image {
    width: 94%;
    max-height: 270px;
  }
}


/* =========================================================
   Phase 29D.4 - Breiter Wordmark sowie echte Bull-/Bear-Bilder
   ========================================================= */

.home-hero-wordmark {
  top: 28px;
  right: clamp(30px, 4.4vw, 72px);
  width: min(66vw, 1020px);
  color: rgba(255, 255, 255, 0.092);
  font-size: clamp(4.9rem, 8.35vw, 8.55rem);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.025em;
  text-align: right;
  transform: scaleX(1.055);
  transform-origin: right top;
  text-shadow:
    0 0 42px rgba(11, 115, 255, 0.12),
    0 0 86px rgba(34, 228, 255, 0.045);
}

.home-bull-image {
  width: min(78%, 560px);
  max-height: 350px;
  object-fit: contain;
  object-position: center;
  opacity: 0.34;
  mix-blend-mode: screen;
  filter:
    hue-rotate(72deg)
    saturate(0.72)
    brightness(0.86)
    contrast(1.08)
    drop-shadow(0 0 16px rgba(34, 228, 255, 0.16))
    drop-shadow(0 0 42px rgba(11, 115, 255, 0.14));
  mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 84%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 84%, transparent 100%);
}

.home-bull-market-art {
  inset: 12px 18px 42px 18px;
}

.home-bull-candles-art {
  opacity: 0.28;
}

.risk-radar-premium-hero {
  isolation: isolate;
}

.risk-radar-bear-watermark {
  position: absolute;
  z-index: 0;
  top: 96px;
  right: clamp(-82px, -3vw, -28px);
  width: min(38vw, 520px);
  height: min(70vh, 620px);
  overflow: hidden;
  pointer-events: none;
  opacity: 0.13;
  mix-blend-mode: screen;
  mask-image: radial-gradient(circle at 58% 48%, #000 0%, rgba(0,0,0,.92) 46%, transparent 76%);
  -webkit-mask-image: radial-gradient(circle at 58% 48%, #000 0%, rgba(0,0,0,.92) 46%, transparent 76%);
}

.risk-radar-bear-watermark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center right;
  filter:
    saturate(0.72)
    brightness(0.76)
    contrast(1.08)
    drop-shadow(0 0 32px rgba(255, 52, 73, 0.16));
}

.risk-radar-premium-inner,
.market-risk-console,
.risk-radar-premium-copy {
  position: relative;
  z-index: 2;
}

@media (max-width: 1180px) {
  .home-hero-wordmark {
    top: 34px;
    right: 18px;
    width: 76%;
    color: rgba(255, 255, 255, 0.078);
    font-size: clamp(4.3rem, 12.5vw, 7.7rem);
    letter-spacing: -0.02em;
    transform: scaleX(1.035);
  }

  .risk-radar-bear-watermark {
    top: 108px;
    right: -70px;
    width: min(48vw, 480px);
    opacity: 0.1;
  }
}

@media (max-width: 760px) {
  .home-hero-wordmark {
    top: 62px;
    right: 6px;
    width: 96%;
    color: rgba(255, 255, 255, 0.055);
    font-size: clamp(3.5rem, 18vw, 6rem);
    letter-spacing: -0.015em;
    text-align: center;
    transform: none;
  }

  .home-bull-image {
    width: 90%;
    max-height: 285px;
    opacity: 0.29;
  }

  .risk-radar-bear-watermark {
    top: 124px;
    right: -92px;
    width: 78vw;
    height: 440px;
    opacity: 0.075;
  }
}


/* =========================================================
   Phase 29D.5 - Breiterer Wordmark und originale Bullenfarbe
   ========================================================= */

.home-hero-wordmark {
  right: clamp(18px, 3.4vw, 56px);
  width: min(72vw, 1120px);
  font-size: clamp(4.75rem, 8.15vw, 8.45rem);
  letter-spacing: 0.008em;
  transform: scaleX(1.13);
  transform-origin: right top;
}

.home-bull-image {
  width: min(80%, 580px);
  max-height: 360px;
  opacity: 0.50;
  mix-blend-mode: screen;
  filter:
    saturate(1.08)
    brightness(0.96)
    contrast(1.06)
    drop-shadow(0 0 18px rgba(39, 255, 92, 0.20))
    drop-shadow(0 0 46px rgba(10, 178, 74, 0.16));
}

@media (max-width: 1180px) {
  .home-hero-wordmark {
    right: 10px;
    width: 82%;
    font-size: clamp(4.15rem, 12vw, 7.45rem);
    letter-spacing: 0.004em;
    transform: scaleX(1.09);
  }

  .home-bull-image {
    width: 84%;
    opacity: 0.46;
  }
}

@media (max-width: 760px) {
  .home-hero-wordmark {
    right: 0;
    width: 100%;
    font-size: clamp(3.35rem, 17.2vw, 5.7rem);
    letter-spacing: 0;
    transform: scaleX(1.035);
    transform-origin: center top;
  }

  .home-bull-image {
    width: 92%;
    max-height: 290px;
    opacity: 0.42;
  }
}


/* =========================================================
   Phase 29D.6 - Grössere Bulleninszenierung ohne sichtbaren Bildhintergrund
   ========================================================= */

.home-bull-signature {
  min-height: 500px;
  border-color: transparent;
  background:
    radial-gradient(ellipse at 62% 46%, rgba(15, 107, 56, 0.105), transparent 48%),
    radial-gradient(ellipse at 48% 55%, rgba(11, 115, 255, 0.045), transparent 66%);
  box-shadow: none;
}

.home-bull-signature::before {
  opacity: 0.5;
  mask-image: radial-gradient(ellipse at 58% 50%, #000 0%, rgba(0, 0, 0, 0.6) 46%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse at 58% 50%, #000 0%, rgba(0, 0, 0, 0.6) 46%, transparent 82%);
}

.home-bull-market-art {
  inset: -22px -54px 22px -36px;
  overflow: visible;
  isolation: isolate;
}

.home-bull-market-art::before {
  content: "";
  position: absolute;
  inset: -6% -4% 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 59% 48%, rgba(23, 168, 78, 0.16), transparent 46%),
    radial-gradient(ellipse at 52% 64%, rgba(0, 0, 0, 0) 0%, rgba(2, 7, 17, 0.24) 62%, rgba(2, 7, 17, 0.92) 100%);
}

.home-bull-image {
  z-index: 2;
  width: min(108%, 760px);
  max-width: none;
  max-height: 455px;
  object-fit: contain;
  object-position: 58% 50%;
  opacity: 0.64;
  transform: translate(4%, -1%) scale(1.04);
  transform-origin: center;
  mix-blend-mode: screen;
  filter:
    saturate(1.1)
    brightness(0.98)
    contrast(1.07)
    drop-shadow(0 0 20px rgba(39, 255, 92, 0.19))
    drop-shadow(0 0 58px rgba(10, 178, 74, 0.14));
  mask-image:
    radial-gradient(ellipse 68% 72% at 56% 49%, #000 0%, #000 54%, rgba(0, 0, 0, 0.78) 68%, transparent 100%);
  -webkit-mask-image:
    radial-gradient(ellipse 68% 72% at 56% 49%, #000 0%, #000 54%, rgba(0, 0, 0, 0.78) 68%, transparent 100%);
}

.home-bull-candles-art {
  inset: 8% 2% 4%;
  width: 96%;
  height: 88%;
  opacity: 0.23;
  mix-blend-mode: screen;
  mask-image: radial-gradient(ellipse at 55% 53%, #000 16%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse at 55% 53%, #000 16%, transparent 82%);
}

.home-bull-word {
  opacity: 0.82;
}

.home-bull-caption {
  left: 30px;
  bottom: 24px;
}

@media (max-width: 1180px) {
  .home-bull-signature {
    min-height: 440px;
  }

  .home-bull-market-art {
    inset: -12px -34px 28px -26px;
  }

  .home-bull-image {
    width: min(112%, 680px);
    max-height: 410px;
    opacity: 0.6;
    transform: translate(3%, 0) scale(1.03);
  }
}

@media (max-width: 760px) {
  .home-bull-signature {
    min-height: 360px;
    border-radius: 24px;
  }

  .home-bull-market-art {
    inset: 4px -34px 42px -26px;
  }

  .home-bull-image {
    width: 122%;
    max-height: 315px;
    opacity: 0.54;
    transform: translate(4%, 0) scale(1.02);
    mask-image:
      radial-gradient(ellipse 74% 78% at 55% 49%, #000 0%, #000 50%, rgba(0, 0, 0, 0.72) 68%, transparent 100%);
    -webkit-mask-image:
      radial-gradient(ellipse 74% 78% at 55% 49%, #000 0%, #000 50%, rgba(0, 0, 0, 0.72) 68%, transparent 100%);
  }

  .home-bull-caption {
    left: 20px;
    bottom: 18px;
  }
}


/* =========================================================
   Phase 29D.7 - Bulle vollständig, weiter links und ohne Bildfläche
   ========================================================= */

.home-bull-signature {
  min-height: 470px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.home-bull-signature::before {
  display: none;
}

.home-bull-market-art {
  inset: -18px 22px 28px -18px;
  overflow: visible;
  isolation: isolate;
}

.home-bull-market-art::before {
  display: none;
}

.home-bull-image {
  width: min(86%, 610px);
  max-width: none;
  max-height: 430px;
  object-fit: contain;
  object-position: center;
  opacity: 0.72;
  transform: translateX(-7%);
  mix-blend-mode: normal;
  filter:
    saturate(1.08)
    brightness(1.02)
    contrast(1.05)
    drop-shadow(0 0 18px rgba(39, 255, 92, 0.18))
    drop-shadow(0 0 54px rgba(10, 178, 74, 0.12));
  mask-image: none;
  -webkit-mask-image: none;
}

.home-bull-candles-art {
  inset: 10% 7% 8% 3%;
  width: 90%;
  height: 82%;
  opacity: 0.15;
  mix-blend-mode: screen;
  mask-image: radial-gradient(ellipse at 47% 52%, #000 10%, transparent 84%);
  -webkit-mask-image: radial-gradient(ellipse at 47% 52%, #000 10%, transparent 84%);
}

.home-bull-word {
  left: 45%;
  opacity: 0.7;
}

.home-bull-caption {
  left: 8px;
  bottom: 20px;
}

@media (max-width: 1180px) {
  .home-bull-signature {
    min-height: 420px;
  }

  .home-bull-market-art {
    inset: -10px 12px 34px -10px;
  }

  .home-bull-image {
    width: min(88%, 560px);
    max-height: 390px;
    transform: translateX(-6%);
  }
}

@media (max-width: 760px) {
  .home-bull-signature {
    min-height: 350px;
    overflow: hidden;
  }

  .home-bull-market-art {
    inset: 0 -8px 44px -10px;
  }

  .home-bull-image {
    width: 92%;
    max-height: 300px;
    opacity: 0.66;
    transform: translateX(-3%);
  }

  .home-bull-caption {
    left: 4px;
    bottom: 14px;
  }
}


/* =========================================================
   Phase 29D.8 - Transparenter Bulle ohne Bild-im-Bild-Effekt
   ========================================================= */

.home-bull-signature {
  min-height: 455px;
  position: relative;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.home-bull-signature::before,
.home-bull-signature::after,
.home-bull-market-art::before,
.home-bull-market-art::after {
  display: none !important;
}

.home-bull-market-art {
  position: absolute;
  inset: -8px -6px 56px -34px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background: transparent;
  isolation: isolate;
}

.home-bull-market-art::before {
  content: "";
  display: block !important;
  position: absolute;
  inset: 12% 10% 8% 4%;
  border-radius: 50%;
  background: radial-gradient(circle at 48% 52%, rgba(28, 255, 105, 0.16), rgba(7, 125, 58, 0.06) 38%, transparent 72%);
  filter: blur(24px);
  z-index: -1;
}

.home-bull-image {
  width: min(96%, 660px);
  height: auto;
  max-width: none;
  max-height: 405px;
  object-fit: contain;
  object-position: center;
  opacity: 0.9;
  transform: translateX(-5%);
  mix-blend-mode: normal;
  filter:
    saturate(1.08)
    brightness(1.04)
    contrast(1.04)
    drop-shadow(0 0 14px rgba(46, 255, 113, 0.16))
    drop-shadow(0 0 40px rgba(10, 179, 76, 0.12));
  mask-image: none;
  -webkit-mask-image: none;
}

.home-bull-candles-art,
.home-bull-word {
  display: none !important;
}

.home-bull-caption {
  left: 4px;
  bottom: 12px;
}

@media (max-width: 1180px) {
  .home-bull-signature {
    min-height: 410px;
  }

  .home-bull-market-art {
    inset: 0 -4px 52px -22px;
  }

  .home-bull-image {
    width: min(94%, 590px);
    max-height: 365px;
    transform: translateX(-4%);
  }
}

@media (max-width: 760px) {
  .home-bull-signature {
    min-height: 340px;
  }

  .home-bull-market-art {
    inset: 0 -8px 48px -8px;
  }

  .home-bull-image {
    width: min(100%, 470px);
    max-height: 285px;
    opacity: 0.86;
    transform: none;
  }

  .home-bull-caption {
    left: 0;
    bottom: 10px;
  }
}

/* =========================================================
   Phase 29D.9 - Startseite: verbindliches Grössensystem,
   früher Produktnutzen, echte Statusbeweise und klare Wege
   ========================================================= */

:root {
  --sf-home-hero-desktop: 680px;
  --sf-home-hero-laptop: 620px;
  --sf-home-section-space: 88px;
  --sf-home-section-space-mobile: 56px;
  --sf-home-h1: clamp(3.25rem, 5vw, 4.5rem);
  --sf-home-h2: clamp(2.125rem, 3.4vw, 3rem);
  --sf-home-body: clamp(1rem, 1.1vw, 1.125rem);
  --sf-home-product-max: 520px;
  --sf-home-card-radius: 22px;
}

.home-showcase-page main section {
  scroll-margin-top: 104px;
}

.home-showcase-page .section-inner,
.home-showcase-page .home-premium-hero-inner,
.home-showcase-page .home-product-gallery-section .section-inner {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.home-showcase-page .home-premium-hero {
  height: var(--sf-home-hero-desktop) !important;
  min-height: 620px !important;
  max-height: 700px !important;
  padding: 104px 24px 40px !important;
  align-items: center;
}

.home-showcase-page .home-premium-hero::after {
  display: none;
}

.home-showcase-page .home-premium-hero-inner {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  grid-template-columns: minmax(390px, 0.9fr) minmax(560px, 1.1fr);
  gap: clamp(34px, 4vw, 54px);
  align-items: center;
}

.home-showcase-page .home-premium-copy {
  max-width: 560px;
}

.home-showcase-page .home-premium-title,
.home-showcase-page .home-showcase-title {
  max-width: 610px;
  margin: 0;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: var(--sf-home-h1) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.055em;
}

.home-showcase-page .home-premium-lead,
.home-showcase-page .home-showcase-lead {
  max-width: 590px;
  margin-top: 18px;
  font-size: var(--sf-home-body) !important;
  line-height: 1.58;
}

.home-showcase-page .home-hero-capabilities {
  margin-top: 16px;
  gap: 8px 10px;
}

.home-showcase-page .home-hero-capabilities li {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
}

.home-showcase-page .home-premium-actions {
  margin-top: 20px;
  gap: 11px;
}

.home-showcase-page .home-premium-actions .button {
  min-height: 48px;
  padding: 11px 18px;
}

.home-hero-proof-points {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 15px;
}

.home-hero-proof-points span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(205, 216, 232, 0.76);
  font-size: 0.72rem;
  font-weight: 750;
}

.home-hero-proof-points i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22e4ff;
  box-shadow: 0 0 14px rgba(34, 228, 255, 0.55);
}

.home-showcase-page .home-product-scene {
  width: 100%;
  max-width: 680px;
  height: var(--sf-home-product-max) !important;
  min-height: 480px !important;
  max-height: 540px !important;
  justify-self: end;
}

.home-showcase-page .home-product-main-window {
  top: 30px;
  height: calc(100% - 50px);
}

.home-showcase-page .home-product-floating-card {
  backdrop-filter: blur(14px);
}

.home-showcase-page .home-product-gallery-section,
.home-showcase-page .home-platform-section,
.home-showcase-page .home-workflow-section,
.home-showcase-page .home-risk-spotlight-section,
.home-showcase-page .home-final-cta-section {
  padding: var(--sf-home-section-space) 24px !important;
}

.home-entry-section {
  position: relative;
  padding: 72px 24px 76px;
  border-top: 1px solid rgba(34, 143, 255, 0.12);
  border-bottom: 1px solid rgba(34, 143, 255, 0.1);
  background:
    radial-gradient(circle at 14% 20%, rgba(34, 228, 255, 0.055), transparent 25rem),
    linear-gradient(180deg, #030914 0%, #02050d 100%);
}

.home-entry-inner {
  display: grid;
  gap: 28px;
}

.home-entry-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(340px, 0.65fr);
  gap: 36px;
  align-items: end;
}

.home-entry-heading h2,
.home-showcase-page .home-product-gallery-heading h2,
.home-showcase-page .home-section-heading h2,
.home-showcase-page .home-centered-heading h2,
.home-showcase-page .home-risk-spotlight-copy h2,
.home-showcase-page .home-final-cta-inner h2 {
  margin: 0;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: var(--sf-home-h2) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.045em;
}

.home-entry-heading > p:last-child,
.home-showcase-page .home-product-gallery-heading p:not(.section-label),
.home-showcase-page .home-section-heading > p,
.home-showcase-page .home-centered-heading > p:last-child,
.home-showcase-page .home-risk-spotlight-copy > p,
.home-showcase-page .home-final-cta-copy > p {
  font-size: var(--sf-home-body) !important;
  line-height: 1.62;
}

.home-entry-heading > p:last-child {
  margin: 0;
  color: rgba(178, 189, 208, 0.88);
}

.home-entry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.home-entry-card {
  position: relative;
  min-height: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(34, 143, 255, 0.16);
  border-radius: var(--sf-home-card-radius);
  background: linear-gradient(155deg, rgba(8, 25, 53, 0.78), rgba(2, 8, 20, 0.92));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}

.home-entry-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 85% 8%, rgba(11, 115, 255, 0.11), transparent 42%);
}

.home-entry-card.is-primary {
  border-color: rgba(34, 228, 255, 0.26);
  background: linear-gradient(155deg, rgba(9, 36, 72, 0.9), rgba(2, 9, 23, 0.94));
}

.home-entry-card:hover {
  transform: translateY(-4px);
  border-color: rgba(34, 228, 255, 0.34);
}

.home-entry-card > * {
  position: relative;
  z-index: 1;
}

.home-entry-number {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(34, 228, 255, 0.25);
  border-radius: 10px;
  color: #22e4ff;
  font-size: 0.68rem;
  font-weight: 900;
}

.home-entry-card small {
  margin-top: 20px;
  color: rgba(106, 190, 255, 0.86);
  font-size: 0.69rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-entry-card > strong {
  margin-top: 8px;
  color: #fff;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 1.25rem;
  letter-spacing: -0.035em;
}

.home-entry-card p {
  margin: 10px 0 20px;
  color: rgba(178, 189, 208, 0.82);
  font-size: 0.91rem;
  line-height: 1.55;
}

.home-entry-card b {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 0.8rem;
}

.home-entry-card b span {
  color: #22e4ff;
}

.home-proof-strip {
  min-height: 64px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 1.25fr repeat(4, auto);
  gap: 18px;
  align-items: center;
  border: 1px solid rgba(34, 143, 255, 0.13);
  border-radius: 18px;
  background: rgba(2, 9, 22, 0.62);
}

.home-proof-strip-label {
  color: rgba(178, 189, 208, 0.72);
  font-size: 0.69rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-proof-strip div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.home-proof-strip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #35d399;
  box-shadow: 0 0 12px rgba(53, 211, 153, 0.42);
}

.home-proof-strip strong {
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.74rem;
  white-space: nowrap;
}

.home-showcase-page .home-product-gallery-heading,
.home-showcase-page .home-section-heading {
  gap: 32px;
  margin-bottom: 32px;
}

.home-showcase-page .home-product-gallery-heading > div:first-child {
  max-width: 790px;
}

.home-showcase-page .home-gallery-visual {
  height: 480px;
  min-height: 0 !important;
  max-height: 520px;
}

.home-showcase-page .home-gallery-card-copy {
  padding-top: 18px;
}

.home-showcase-page .home-gallery-card-copy h3 {
  font-size: clamp(1.35rem, 1.8vw, 1.75rem) !important;
}

.home-showcase-page .home-ecosystem-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr);
  gap: 18px;
}

.home-showcase-page .home-ecosystem-journal {
  min-height: 0 !important;
  padding: 32px;
  grid-template-columns: minmax(260px, 0.72fr) minmax(360px, 1fr);
  gap: 28px;
}

.home-showcase-page .home-ecosystem-side {
  gap: 18px;
}

.home-showcase-page .home-ecosystem-card {
  min-height: 0 !important;
  padding: 26px;
}

.home-showcase-page .home-mini-chart svg {
  height: 150px;
}

.home-showcase-page .home-feature-list {
  margin: 20px 0 22px;
  gap: 9px;
}

.home-showcase-page .home-risk-visual,
.home-showcase-page .home-knowledge-topics {
  margin-top: 20px;
  margin-bottom: 22px;
}

.home-showcase-page .home-centered-heading {
  max-width: 820px;
  margin-bottom: 34px;
}

.home-showcase-page .home-workflow-line {
  gap: 12px;
}

.home-showcase-page .home-workflow-line::before {
  top: 63px;
}

.home-showcase-page .home-workflow-line article {
  min-height: 0 !important;
  padding: 20px;
  border-radius: 18px;
}

.home-showcase-page .home-workflow-icon {
  width: 52px;
  height: 52px;
  margin: 16px 0 18px;
  border-radius: 15px;
}

.home-showcase-page .home-workflow-icon svg {
  width: 24px;
  height: 24px;
}

.home-showcase-page .home-workflow-line p {
  font-size: 0.83rem;
  line-height: 1.52;
}

.home-showcase-page .home-risk-spotlight-grid {
  grid-template-columns: minmax(0, 0.88fr) minmax(470px, 1fr);
  gap: clamp(36px, 5vw, 64px);
}

.home-showcase-page .home-risk-tool-list {
  margin-top: 26px;
  gap: 8px;
}

.home-showcase-page .home-risk-tool-list a {
  padding: 13px 15px;
}

.home-showcase-page .home-bull-signature {
  min-height: 400px;
}

.home-showcase-page .home-bull-market-art {
  inset: -4px -4px 48px -28px;
}

.home-showcase-page .home-bull-image {
  width: min(94%, 620px);
  max-height: 360px;
}

.home-showcase-page .home-final-cta-inner {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 34px 56px;
}

.home-final-cta-copy {
  max-width: 800px;
}

.home-showcase-page .home-final-actions {
  gap: 10px;
}

.home-final-proof-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.home-final-proof-grid div {
  min-height: 0;
  padding: 14px 15px;
  border: 1px solid rgba(34, 143, 255, 0.13);
  border-radius: 14px;
  background: rgba(2, 8, 20, 0.52);
}

.home-final-proof-grid span,
.home-final-proof-grid strong {
  display: block;
}

.home-final-proof-grid span {
  color: rgba(178, 189, 208, 0.68);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-final-proof-grid strong {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.79rem;
}

@media (max-width: 1280px), (max-height: 820px) {
  .home-showcase-page .home-premium-hero {
    height: var(--sf-home-hero-laptop) !important;
    min-height: 560px !important;
    max-height: 640px !important;
    padding-top: 92px !important;
    padding-bottom: 28px !important;
  }

  .home-showcase-page .home-premium-hero-inner {
    grid-template-columns: minmax(360px, 0.92fr) minmax(520px, 1.08fr);
    gap: 32px;
  }

  .home-showcase-page .home-premium-title,
  .home-showcase-page .home-showcase-title {
    font-size: clamp(3rem, 4.5vw, 4rem) !important;
  }

  .home-showcase-page .home-product-scene {
    height: 460px !important;
    min-height: 430px !important;
    max-height: 480px !important;
    max-width: 630px;
  }

  .home-showcase-page .home-gallery-visual {
    height: 450px;
  }

  .home-proof-strip {
    grid-template-columns: 1fr repeat(2, minmax(0, 1fr));
  }

  .home-proof-strip-label {
    grid-row: span 2;
  }

  .home-proof-strip strong {
    white-space: normal;
  }
}

@media (max-width: 1020px) {
  .home-showcase-page .home-premium-hero {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: 112px !important;
    padding-bottom: 52px !important;
  }

  .home-showcase-page .home-premium-hero-inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .home-showcase-page .home-premium-copy {
    max-width: 700px;
  }

  .home-showcase-page .home-product-scene {
    width: min(100%, 720px);
    height: 440px !important;
    min-height: 400px !important;
    max-height: 460px !important;
    justify-self: center;
  }

  .home-entry-heading,
  .home-showcase-page .home-section-heading,
  .home-showcase-page .home-product-gallery-heading {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .home-entry-grid {
    grid-template-columns: 1fr 1fr;
  }

  .home-entry-card:first-child {
    grid-column: 1 / -1;
  }

  .home-showcase-page .home-ecosystem-grid,
  .home-showcase-page .home-risk-spotlight-grid {
    grid-template-columns: 1fr;
  }

  .home-showcase-page .home-ecosystem-journal {
    grid-template-columns: minmax(240px, 0.8fr) minmax(340px, 1fr);
  }

  .home-showcase-page .home-workflow-line {
    grid-template-columns: repeat(3, 1fr);
  }

  .home-showcase-page .home-workflow-line::before {
    display: none;
  }

  .home-showcase-page .home-bull-signature {
    width: min(100%, 680px);
    margin-inline: auto;
  }

  .home-showcase-page .home-final-cta-inner {
    grid-template-columns: 1fr;
  }

  .home-showcase-page .home-final-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 760px) {
  :root {
    --sf-home-section-space: var(--sf-home-section-space-mobile);
    --sf-home-h1: clamp(2.55rem, 13vw, 3.45rem);
    --sf-home-h2: clamp(2rem, 9vw, 2.65rem);
    --sf-home-body: 1rem;
  }

  .home-showcase-page .section-inner,
  .home-showcase-page .home-premium-hero-inner,
  .home-showcase-page .home-product-gallery-section .section-inner {
    width: min(100% - 30px, 1180px);
  }

  .home-showcase-page .home-premium-hero {
    padding: 104px 15px 44px !important;
  }

  .home-showcase-page .home-premium-title,
  .home-showcase-page .home-showcase-title {
    line-height: 1.01 !important;
  }

  .home-showcase-page .home-premium-lead,
  .home-showcase-page .home-showcase-lead {
    margin-top: 16px;
    line-height: 1.55;
  }

  .home-showcase-page .home-hero-capabilities {
    margin-top: 14px;
  }

  .home-showcase-page .home-premium-actions {
    margin-top: 18px;
  }

  .home-showcase-page .home-premium-actions .button {
    width: 100%;
    min-width: 0;
  }

  .home-hero-proof-points {
    gap: 7px 12px;
  }

  .home-showcase-page .home-product-scene {
    height: 315px !important;
    min-height: 300px !important;
    max-height: 340px !important;
  }

  .home-showcase-page .home-product-floating-card {
    transform: scale(0.82);
  }

  .home-entry-section,
  .home-showcase-page .home-product-gallery-section,
  .home-showcase-page .home-platform-section,
  .home-showcase-page .home-workflow-section,
  .home-showcase-page .home-risk-spotlight-section,
  .home-showcase-page .home-final-cta-section {
    padding: var(--sf-home-section-space-mobile) 15px !important;
  }

  .home-entry-grid {
    grid-template-columns: 1fr;
  }

  .home-entry-card:first-child {
    grid-column: auto;
  }

  .home-entry-card {
    padding: 21px;
  }

  .home-proof-strip {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .home-proof-strip-label {
    grid-row: auto;
  }

  .home-showcase-page .home-gallery-visual {
    height: 330px;
    max-height: 360px;
  }

  .home-showcase-page .home-ecosystem-journal {
    padding: 24px;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .home-showcase-page .home-ecosystem-card {
    padding: 23px;
  }

  .home-showcase-page .home-workflow-line {
    grid-template-columns: 1fr;
  }

  .home-showcase-page .home-workflow-line article {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    align-items: start;
  }

  .home-showcase-page .home-workflow-line article > span {
    grid-column: 1 / -1;
  }

  .home-showcase-page .home-workflow-icon {
    grid-row: 2 / span 2;
    margin: 14px 0 0;
  }

  .home-showcase-page .home-workflow-line h3 {
    margin-top: 14px;
  }

  .home-showcase-page .home-workflow-line p {
    margin-top: 7px;
  }

  .home-showcase-page .home-risk-tool-list a {
    grid-template-columns: 30px 1fr;
  }

  .home-showcase-page .home-risk-tool-list small {
    grid-column: 2;
  }

  .home-showcase-page .home-bull-signature {
    min-height: 320px;
  }

  .home-showcase-page .home-bull-market-art {
    inset: 0 -8px 42px -8px;
  }

  .home-showcase-page .home-bull-image {
    max-height: 270px;
  }

  .home-showcase-page .home-final-actions {
    flex-direction: column;
  }

  .home-showcase-page .home-final-actions .button {
    width: 100%;
    min-width: 0;
  }

  .home-final-proof-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 460px) {
  .home-showcase-page .home-product-scene {
    height: 285px !important;
    min-height: 270px !important;
  }

  .home-showcase-page .home-gallery-visual {
    height: 295px;
  }

  .home-final-proof-grid {
    grid-template-columns: 1fr;
  }
}

.home-entry-heading > div:first-child { max-width: 760px; }
.home-entry-heading > div:first-child .section-label { margin-bottom: 12px; }

/* Phase 29D.9 - Mobile Längenoptimierung */
@media (max-width: 760px) {
  .home-showcase-page .home-premium-hero {
    padding-bottom: 36px !important;
  }

  .home-showcase-page .home-premium-hero-inner {
    gap: 0;
  }

  .home-showcase-page .home-product-scene {
    display: none;
  }

  .home-entry-section {
    padding-top: 48px !important;
    padding-bottom: 50px !important;
  }

  .home-entry-inner {
    gap: 20px;
  }

  .home-entry-heading {
    gap: 10px;
  }

  .home-entry-heading > p:last-child {
    font-size: 0.94rem !important;
    line-height: 1.5;
  }

  .home-entry-grid {
    gap: 10px;
  }

  .home-entry-card,
  .home-entry-card:first-child {
    min-height: 78px;
    padding: 14px 15px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
  }

  .home-entry-number {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 34px;
    height: 34px;
  }

  .home-entry-card small {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 0.61rem;
  }

  .home-entry-card > strong {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    font-size: 1rem;
  }

  .home-entry-card p {
    display: none;
  }

  .home-entry-card b {
    grid-column: 3;
    grid-row: 1 / 3;
    margin: 0;
    font-size: 0;
  }

  .home-entry-card b span {
    font-size: 1.05rem;
  }

  .home-proof-strip {
    min-height: 0;
    padding: 14px;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
  }

  .home-proof-strip-label {
    grid-column: 1 / -1;
    padding-bottom: 4px;
  }

  .home-proof-strip strong {
    font-size: 0.69rem;
    line-height: 1.35;
  }

  .home-showcase-page .home-product-gallery-section {
    padding-top: 50px !important;
    padding-bottom: 52px !important;
  }

  .home-showcase-page .home-product-gallery-heading {
    margin-bottom: 24px;
  }

  .home-showcase-page .home-gallery-visual {
    height: 300px;
    max-height: 315px;
  }

  .home-showcase-page .home-gallery-card-copy {
    padding-top: 14px;
  }

  .home-showcase-page .home-gallery-card-copy p {
    margin-top: 8px;
    font-size: 0.88rem;
    line-height: 1.5;
  }

  .home-showcase-page .home-platform-section {
    padding-top: 52px !important;
    padding-bottom: 54px !important;
  }

  .home-showcase-page .home-section-heading {
    margin-bottom: 24px;
  }

  .home-showcase-page .home-ecosystem-grid,
  .home-showcase-page .home-ecosystem-side {
    gap: 12px;
  }

  .home-showcase-page .home-ecosystem-journal {
    padding: 22px;
  }

  .home-showcase-page .home-journal-mini-ui {
    display: none;
  }

  .home-showcase-page .home-ecosystem-copy h3 {
    font-size: 2rem;
  }

  .home-showcase-page .home-ecosystem-copy p,
  .home-showcase-page .home-ecosystem-card p {
    margin-top: 12px;
    line-height: 1.55;
  }

  .home-showcase-page .home-feature-list {
    margin: 17px 0 18px;
    gap: 8px;
  }

  .home-showcase-page .home-feature-list li {
    font-size: 0.86rem;
  }

  .home-showcase-page .home-ecosystem-card {
    padding: 20px;
  }

  .home-showcase-page .home-ecosystem-card h3 {
    margin-top: 10px;
    font-size: 1.35rem;
  }

  .home-showcase-page .home-risk-visual {
    margin: 18px 0;
    grid-template-columns: 96px 1fr;
    gap: 15px;
  }

  .home-showcase-page .home-risk-ring {
    width: 94px;
    height: 94px;
  }

  .home-showcase-page .home-risk-ring::before {
    width: 70px;
    height: 70px;
  }

  .home-showcase-page .home-risk-ring span {
    font-size: 1.2rem;
  }

  .home-showcase-page .home-knowledge-topics {
    margin: 17px 0 20px;
    gap: 7px;
  }

  .home-showcase-page .home-knowledge-topics span {
    padding: 7px 9px;
    font-size: 0.67rem;
  }

  .home-showcase-page .home-workflow-section {
    padding-top: 50px !important;
    padding-bottom: 52px !important;
  }

  .home-showcase-page .home-centered-heading {
    margin-bottom: 24px;
  }

  .home-showcase-page .home-workflow-line {
    gap: 9px;
  }

  .home-showcase-page .home-workflow-line article {
    padding: 13px 14px;
    grid-template-columns: 42px 1fr;
    column-gap: 12px;
    border-radius: 15px;
  }

  .home-showcase-page .home-workflow-line article > span {
    grid-column: 1 / -1;
    font-size: 0.6rem;
  }

  .home-showcase-page .home-workflow-icon {
    width: 40px;
    height: 40px;
    margin-top: 10px;
    border-radius: 12px;
  }

  .home-showcase-page .home-workflow-icon svg {
    width: 20px;
    height: 20px;
  }

  .home-showcase-page .home-workflow-line h3 {
    margin-top: 10px;
    font-size: 0.98rem;
  }

  .home-showcase-page .home-workflow-line p {
    margin-top: 4px;
    font-size: 0.77rem;
    line-height: 1.42;
  }

  .home-showcase-page .home-risk-spotlight-section {
    padding-top: 52px !important;
    padding-bottom: 50px !important;
  }

  .home-showcase-page .home-risk-tool-list {
    margin-top: 20px;
  }

  .home-showcase-page .home-risk-tool-list a {
    padding: 11px 12px;
  }

  .home-showcase-page .home-bull-signature {
    min-height: 245px;
    margin-top: 6px;
  }

  .home-showcase-page .home-bull-market-art {
    inset: 0 -4px 36px -4px;
  }

  .home-showcase-page .home-bull-image {
    width: min(94%, 390px);
    max-height: 210px;
  }

  .home-showcase-page .home-bull-caption {
    bottom: 2px;
  }

  .home-showcase-page .home-final-cta-section {
    padding-top: 52px !important;
    padding-bottom: 50px !important;
  }

  .home-showcase-page .home-final-cta-inner {
    gap: 24px;
  }

  .home-showcase-page .home-final-cta-copy > p {
    margin-top: 13px;
    line-height: 1.52;
  }

  .home-final-proof-grid {
    gap: 8px;
  }

  .home-final-proof-grid div {
    padding: 11px 12px;
  }

  .home-final-proof-grid strong {
    font-size: 0.73rem;
  }
}

/* =========================================================
   Phase 29D.10 - Journal Premium-Grössensystem
   Gleiche Raumlogik wie die überarbeitete Home-Seite
   ========================================================= */

.journal-showcase-page {
  --journal-section-space: 88px;
  --journal-section-space-mobile: 56px;
}

/* Hero: vollständig im Viewport und visuell auf Home-Niveau */
.journal-showcase-page .journal-showcase-hero {
  min-height: 680px;
  height: 680px;
  max-height: 680px;
  padding: 88px 24px 32px;
  background:
    radial-gradient(circle at 75% 42%, rgba(16, 112, 255, 0.16), transparent 31rem),
    radial-gradient(circle at 17% 27%, rgba(53, 226, 255, 0.055), transparent 24rem),
    linear-gradient(135deg, #01040b 0%, #020916 45%, #01030a 100%);
}

.journal-showcase-page .journal-showcase-hero::before {
  background-size: 65% auto;
  background-position: 105% 47%;
  opacity: 0.15;
}

.journal-showcase-page .journal-showcase-hero::after {
  content: "JOURNAL";
  inset: auto auto auto auto;
  top: 104px;
  left: clamp(42px, 7vw, 116px);
  bottom: auto;
  z-index: 0;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: clamp(7.4rem, 14.8vw, 13.7rem);
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: -0.075em;
  color: rgba(255, 255, 255, 0.045);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.journal-showcase-page .journal-showcase-hero-inner {
  width: min(100%, 1280px);
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(390px, 0.84fr) minmax(560px, 1.16fr);
  gap: clamp(34px, 4.2vw, 58px);
  align-items: center;
}

.journal-showcase-page .journal-showcase-copy {
  max-width: 555px;
}

.journal-showcase-page .journal-beta-eyebrow {
  margin-bottom: 16px;
}

.journal-showcase-page .journal-showcase-title {
  max-width: 565px;
  font-size: clamp(3.25rem, 4.25vw, 4.35rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.065em;
}

.journal-showcase-page .journal-showcase-lead {
  max-width: 535px;
  margin-top: 16px;
  font-size: clamp(0.96rem, 1.05vw, 1.04rem);
  line-height: 1.6;
}

.journal-showcase-page .journal-showcase-actions {
  margin-top: 20px;
}

.journal-showcase-page .journal-proof-row {
  margin-top: 18px;
  padding-top: 15px;
  gap: 9px;
  border-top-color: rgba(53, 226, 255, 0.1);
}

.journal-showcase-page .journal-proof-row > div {
  min-height: 58px;
  padding: 10px 11px;
  border-radius: 14px;
}

.journal-showcase-page .journal-proof-row strong {
  font-size: 0.73rem;
}

.journal-showcase-page .journal-proof-row span {
  margin-top: 3px;
  font-size: 0.64rem;
  line-height: 1.3;
}

/* Hero-Produktgrafik: 480-520 px statt überhoher App-Screenshot */
.journal-showcase-page .journal-hero-product {
  width: 100%;
  max-width: 700px;
  height: 500px;
  justify-self: end;
  transform: none;
  perspective: none;
}

.journal-showcase-page .journal-app-window-hero {
  position: absolute;
  top: 50%;
  right: 0;
  width: 825px;
  transform: translateY(-50%) scale(0.76);
  transform-origin: center right;
  border-radius: 26px;
}

.journal-showcase-page .journal-floating-stat {
  z-index: 4;
  transform: scale(0.9);
}

.journal-showcase-page .journal-floating-stat-left {
  left: -8px;
  bottom: 2px;
}

.journal-showcase-page .journal-floating-stat-right {
  right: -6px;
  top: 52px;
}

.journal-showcase-page .journal-hero-orbit-one {
  width: 540px;
  height: 540px;
  top: 14%;
  right: -170px;
  opacity: 0.65;
}

.journal-showcase-page .journal-hero-orbit-two {
  width: 330px;
  height: 330px;
  right: 16%;
  bottom: -180px;
  opacity: 0.55;
}

/* Direkter Einstieg wie auf der Home-Seite */
.journal-entry-section {
  position: relative;
  padding: 72px 24px 76px;
  border-top: 1px solid rgba(48, 121, 230, 0.12);
  background:
    radial-gradient(circle at 76% 0%, rgba(11, 115, 255, 0.075), transparent 26rem),
    #01050e;
}

.journal-entry-inner {
  width: min(100%, 1280px);
}

.journal-entry-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.62fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: end;
  margin-bottom: 28px;
}

.journal-entry-heading h2 {
  max-width: 700px;
  font-size: clamp(2.15rem, 3.3vw, 3rem) !important;
  line-height: 1.06 !important;
}

.journal-entry-heading > p {
  max-width: 510px;
  color: rgba(190, 205, 226, 0.72);
  font-size: 0.98rem;
  line-height: 1.6;
}

.journal-entry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.journal-entry-card {
  min-height: 224px;
  padding: 22px;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto 1fr auto;
  column-gap: 15px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(54, 126, 230, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 90% 0%, rgba(34, 228, 255, 0.055), transparent 12rem),
    linear-gradient(180deg, rgba(7, 18, 40, 0.82), rgba(3, 10, 24, 0.88));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.journal-entry-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.035), transparent 25%);
}

.journal-entry-card:hover,
.journal-entry-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(53, 226, 255, 0.34);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.28), 0 0 36px rgba(11, 115, 255, 0.08);
}

.journal-entry-card.is-primary {
  border-color: rgba(34, 228, 255, 0.27);
  background:
    radial-gradient(circle at 88% 0%, rgba(34, 228, 255, 0.095), transparent 14rem),
    linear-gradient(180deg, rgba(8, 25, 54, 0.88), rgba(3, 11, 27, 0.94));
}

.journal-entry-number {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(53, 226, 255, 0.22);
  border-radius: 13px;
  color: var(--journal-cyan);
  background: rgba(53, 226, 255, 0.055);
  font-size: 0.7rem;
  font-weight: 800;
}

.journal-entry-card small,
.journal-entry-card strong,
.journal-entry-card p,
.journal-entry-card b {
  position: relative;
  z-index: 1;
}

.journal-entry-card small {
  grid-column: 2;
  color: var(--journal-cyan);
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.journal-entry-card > strong {
  grid-column: 2;
  margin-top: 4px;
  color: #fff;
  font-size: 1.16rem;
  line-height: 1.25;
}

.journal-entry-card p {
  grid-column: 1 / -1;
  margin-top: 18px;
  color: rgba(185, 202, 227, 0.68);
  font-size: 0.87rem;
  line-height: 1.55;
}

.journal-entry-card b {
  grid-column: 1 / -1;
  align-self: end;
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(224, 235, 250, 0.88);
  font-size: 0.76rem;
}

.journal-entry-card b span {
  color: var(--journal-cyan);
}

.journal-proof-strip {
  min-height: 60px;
  margin-top: 14px;
  padding: 13px 17px;
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) repeat(5, auto);
  align-items: center;
  gap: 14px 24px;
  border: 1px solid rgba(54, 126, 230, 0.15);
  border-radius: 18px;
  background: rgba(4, 14, 32, 0.68);
}

.journal-proof-strip-label {
  color: rgba(157, 179, 211, 0.66);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.journal-proof-strip strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(226, 236, 249, 0.86);
  font-size: 0.71rem;
  white-space: nowrap;
}

.journal-proof-strip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--journal-cyan);
  box-shadow: 0 0 12px rgba(53, 226, 255, 0.7);
}

/* Verbindliches Grössensystem für alle Journal-Sektionen */
.journal-showcase-page .journal-product-stage,
.journal-showcase-page .journal-workflow-section,
.journal-showcase-page .journal-capabilities-section,
.journal-showcase-page .journal-beta-trust-section,
.journal-showcase-page .journal-faq-section,
.journal-showcase-page .journal-final-cta-section {
  padding: var(--journal-section-space) 24px;
}

.journal-showcase-page .journal-stage-heading {
  gap: clamp(32px, 5vw, 68px);
  margin-bottom: 32px;
}

.journal-showcase-page .journal-stage-heading h2,
.journal-showcase-page .journal-centered-heading h2,
.journal-showcase-page .journal-beta-trust-copy h2,
.journal-showcase-page .journal-faq-grid h2,
.journal-showcase-page .journal-final-cta-inner h2 {
  font-size: clamp(2.15rem, 3.35vw, 3rem) !important;
  line-height: 1.06 !important;
}

.journal-showcase-page .journal-stage-heading > p,
.journal-showcase-page .journal-centered-heading > p,
.journal-showcase-page .journal-beta-trust-copy > p,
.journal-showcase-page .journal-faq-grid > div > p,
.journal-showcase-page .journal-final-cta-inner > p {
  font-size: clamp(0.95rem, 1.05vw, 1.04rem);
  line-height: 1.62;
}

/* Produktansicht auf maximal rund 520 px begrenzen */
.journal-showcase-page .journal-showcase-frame {
  max-width: 1180px;
  margin: 0 auto;
  border-radius: 24px;
}

.journal-showcase-page .journal-showcase-toolbar {
  min-height: 52px;
  padding-inline: 16px;
}

.journal-showcase-page .journal-showcase-screen {
  padding: 18px;
}

.journal-showcase-page .journal-showcase-metric-row {
  gap: 10px;
}

.journal-showcase-page .journal-showcase-metric-row article {
  min-height: 84px;
  padding: 13px 14px;
  border-radius: 14px;
}

.journal-showcase-page .journal-showcase-metric-row span {
  font-size: 0.58rem;
}

.journal-showcase-page .journal-showcase-metric-row strong {
  margin-top: 6px;
  font-size: clamp(1.05rem, 1.55vw, 1.45rem);
}

.journal-showcase-page .journal-showcase-metric-row small {
  margin-top: 3px;
  font-size: 0.57rem;
}

.journal-showcase-page .journal-showcase-content-grid {
  margin-top: 10px;
  grid-template-columns: minmax(0, 1.62fr) minmax(235px, 0.58fr);
  gap: 10px;
}

.journal-showcase-page .journal-showcase-primary-chart {
  padding: 16px;
  border-radius: 15px;
}

.journal-showcase-page .journal-large-chart {
  height: 235px;
  margin-top: 10px;
}

.journal-showcase-page .journal-showcase-side-stack {
  gap: 10px;
}

.journal-showcase-page .journal-result-card,
.journal-showcase-page .journal-highlight-card {
  padding: 14px;
  border-radius: 15px;
}

.journal-showcase-page .journal-result-donut {
  width: 102px;
  height: 102px;
  margin: 10px auto;
}

.journal-showcase-page .journal-result-donut::before {
  inset: 14px;
}

.journal-showcase-page .journal-result-donut span {
  font-size: 1.45rem;
}

.journal-showcase-page .journal-highlight-card > p {
  margin-top: 7px;
  font-size: 0.68rem;
  line-height: 1.45;
}

.journal-showcase-page .journal-highlight-card > div {
  padding: 7px 0;
  font-size: 0.66rem;
}

.journal-showcase-page .journal-example-note {
  margin-top: 16px;
  font-size: 0.7rem;
}

/* Workflow: kompakt und ohne unnötige Kartenhöhe */
.journal-showcase-page .journal-centered-heading {
  margin-bottom: 30px;
}

.journal-showcase-page .journal-centered-heading > p {
  margin-top: 12px;
}

.journal-showcase-page .journal-workflow-line {
  gap: 10px;
}

.journal-showcase-page .journal-workflow-line::before {
  top: 44px;
}

.journal-showcase-page .journal-workflow-step {
  min-height: 156px;
  padding: 16px 14px;
  border-radius: 17px;
}

.journal-showcase-page .journal-workflow-step > span {
  font-size: 0.6rem;
}

.journal-showcase-page .journal-workflow-icon {
  width: 46px;
  height: 46px;
  margin: 13px auto 12px;
  border-radius: 14px;
}

.journal-showcase-page .journal-workflow-icon svg {
  width: 23px;
  height: 23px;
}

.journal-showcase-page .journal-workflow-step h3 {
  font-size: 0.92rem;
}

.journal-showcase-page .journal-workflow-step p {
  margin-top: 6px;
  font-size: 0.72rem;
  line-height: 1.42;
}

/* Drei Produktbereiche nebeneinander statt drei überhoher Vollbreiten-Blöcke */
.journal-showcase-page .journal-capabilities-heading {
  margin-bottom: 32px;
}

.journal-showcase-page .journal-capability-stack {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.journal-showcase-page .journal-capability-panel,
.journal-showcase-page .journal-capability-panel.is-reversed {
  min-height: 0;
  padding: 24px;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 22px;
  align-items: start;
  border-radius: 22px;
}

.journal-showcase-page .journal-capability-panel.is-reversed .journal-capability-copy,
.journal-showcase-page .journal-capability-panel.is-reversed .journal-capability-ui {
  order: initial;
}

.journal-showcase-page .journal-capability-number {
  font-size: 2.75rem;
}

.journal-showcase-page .journal-capability-copy .section-label {
  margin-top: 8px;
  margin-bottom: 8px;
}

.journal-showcase-page .journal-capability-copy h3 {
  font-size: clamp(1.35rem, 1.8vw, 1.75rem);
  line-height: 1.12;
}

.journal-showcase-page .journal-capability-copy > p:not(.section-label) {
  margin-top: 12px;
  font-size: 0.86rem;
  line-height: 1.55;
}

.journal-showcase-page .journal-capability-copy ul {
  margin-top: 16px;
  gap: 7px;
}

.journal-showcase-page .journal-capability-copy li {
  padding-left: 21px;
  font-size: 0.78rem;
  line-height: 1.4;
}

.journal-showcase-page .journal-capability-ui {
  width: 100%;
  min-height: 256px;
  padding: 17px;
  align-self: end;
  border-radius: 18px;
}

.journal-showcase-page .journal-ui-head {
  padding-bottom: 12px;
}

.journal-showcase-page .journal-form-grid {
  margin-top: 12px;
  gap: 8px;
}

.journal-showcase-page .journal-form-grid label {
  min-height: 58px;
  padding: 10px 11px;
  border-radius: 10px;
}

.journal-showcase-page .journal-form-grid span,
.journal-showcase-page .journal-review-score-row span,
.journal-showcase-page .journal-mini-stat-grid span {
  font-size: 0.57rem;
}

.journal-showcase-page .journal-form-grid strong,
.journal-showcase-page .journal-review-score-row strong,
.journal-showcase-page .journal-mini-stat-grid strong {
  margin-top: 5px;
  font-size: 0.82rem;
}

.journal-showcase-page .journal-ui-action-row {
  margin-top: 10px;
  padding: 9px 10px;
  font-size: 0.68rem;
}

.journal-showcase-page .journal-review-score-row {
  margin-top: 13px;
  gap: 7px;
}

.journal-showcase-page .journal-review-score-row div,
.journal-showcase-page .journal-mini-stat-grid div {
  padding: 10px;
}

.journal-showcase-page .journal-review-note {
  margin-top: 10px;
  padding: 11px;
}

.journal-showcase-page .journal-review-note p {
  margin-top: 5px;
  font-size: 0.7rem;
  line-height: 1.45;
}

.journal-showcase-page .journal-review-tags {
  margin-top: 9px;
  gap: 5px;
}

.journal-showcase-page .journal-review-tags span {
  padding: 5px 7px;
  font-size: 0.57rem;
}

.journal-showcase-page .journal-mini-bars {
  height: 120px;
  margin-top: 14px;
  padding: 14px 10px 8px;
  gap: 5px;
  background-size: 100% 28px, auto;
}

.journal-showcase-page .journal-mini-stat-grid {
  margin-top: 9px;
  gap: 7px;
}

/* Beta, FAQ und Abschluss kompakter */
.journal-showcase-page .journal-beta-trust-grid,
.journal-showcase-page .journal-faq-grid {
  gap: clamp(36px, 5vw, 68px);
}

.journal-showcase-page .journal-beta-trust-copy > p:not(.section-label),
.journal-showcase-page .journal-faq-grid > div > p:not(.section-label) {
  margin-top: 14px;
}

.journal-showcase-page .journal-beta-actions,
.journal-showcase-page .journal-final-actions {
  margin-top: 20px;
}

.journal-showcase-page .journal-beta-status-card {
  padding: 22px;
  border-radius: 21px;
}

.journal-showcase-page .journal-beta-status-head {
  padding-bottom: 14px;
}

.journal-showcase-page .journal-beta-status-list {
  margin-top: 8px;
}

.journal-showcase-page .journal-beta-status-list div {
  padding: 10px 0;
  font-size: 0.72rem;
}

.journal-showcase-page .journal-beta-status-card > p {
  margin-top: 13px;
  font-size: 0.7rem;
  line-height: 1.5;
}

.journal-showcase-page .journal-compact-faq {
  gap: 8px;
}

.journal-showcase-page .journal-compact-faq details summary {
  padding-top: 16px;
  padding-bottom: 16px;
}

.journal-showcase-page .journal-final-cta-section {
  min-height: 0;
  padding-top: 76px;
  padding-bottom: 76px;
}

.journal-showcase-page .journal-final-cta-inner > p {
  margin-top: 14px;
}

/* Laptop */
@media (min-width: 921px) and (max-width: 1180px) {
  .journal-showcase-page .journal-showcase-hero {
    min-height: 620px;
    height: 620px;
    max-height: 620px;
    padding: 80px 24px 26px;
  }

  .journal-showcase-page .journal-showcase-hero::after {
    top: 92px;
    left: 40px;
    font-size: clamp(6.6rem, 14vw, 9.8rem);
  }

  .journal-showcase-page .journal-showcase-hero-inner {
    grid-template-columns: minmax(350px, 0.86fr) minmax(500px, 1.14fr);
    gap: 26px;
  }

  .journal-showcase-page .journal-showcase-title {
    font-size: clamp(2.85rem, 4.25vw, 3.45rem) !important;
  }

  .journal-showcase-page .journal-hero-product {
    height: 450px;
  }

  .journal-showcase-page .journal-app-window-hero {
    width: 800px;
    transform: translateY(-50%) scale(0.68);
  }

  .journal-showcase-page .journal-floating-stat-left {
    left: -18px;
  }

  .journal-showcase-page .journal-floating-stat-right {
    right: -8px;
  }

  .journal-proof-strip {
    grid-template-columns: 1fr repeat(3, auto);
  }

  .journal-proof-strip strong:nth-of-type(n + 4) {
    display: none;
  }

  .journal-showcase-page .journal-capability-panel,
  .journal-showcase-page .journal-capability-panel.is-reversed {
    padding: 20px;
  }
}

/* Tablet */
@media (max-width: 920px) {
  .journal-showcase-page .journal-showcase-hero {
    min-height: auto;
    height: auto;
    max-height: none;
    padding: 106px 22px 48px;
  }

  .journal-showcase-page .journal-showcase-hero::after {
    top: 96px;
    left: 24px;
    font-size: clamp(5rem, 20vw, 8rem);
  }

  .journal-showcase-page .journal-showcase-hero-inner {
    height: auto;
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .journal-showcase-page .journal-showcase-copy {
    max-width: 650px;
  }

  .journal-showcase-page .journal-showcase-title {
    max-width: 620px;
    font-size: clamp(2.75rem, 8vw, 4rem) !important;
  }

  .journal-showcase-page .journal-hero-product {
    max-width: 760px;
    height: 470px;
    justify-self: center;
  }

  .journal-showcase-page .journal-app-window-hero {
    left: 50%;
    right: auto;
    width: 820px;
    transform: translate(-50%, -50%) scale(0.69);
    transform-origin: center;
  }

  .journal-entry-heading,
  .journal-showcase-page .journal-stage-heading,
  .journal-showcase-page .journal-beta-trust-grid,
  .journal-showcase-page .journal-faq-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .journal-entry-grid {
    grid-template-columns: 1fr 1fr;
  }

  .journal-entry-card:first-child {
    grid-column: 1 / -1;
  }

  .journal-proof-strip {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .journal-proof-strip-label {
    grid-column: 1 / -1;
  }

  .journal-showcase-page .journal-showcase-content-grid {
    grid-template-columns: 1fr;
  }

  .journal-showcase-page .journal-showcase-side-stack {
    grid-template-columns: 1fr 1fr;
  }

  .journal-showcase-page .journal-workflow-line {
    grid-template-columns: repeat(3, 1fr);
  }

  .journal-showcase-page .journal-workflow-line::before {
    display: none;
  }

  .journal-showcase-page .journal-capability-stack {
    grid-template-columns: 1fr;
  }

  .journal-showcase-page .journal-capability-panel,
  .journal-showcase-page .journal-capability-panel.is-reversed {
    grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1fr);
    grid-template-rows: auto;
    align-items: center;
  }

  .journal-showcase-page .journal-capability-panel.is-reversed .journal-capability-copy {
    order: 1;
  }

  .journal-showcase-page .journal-capability-panel.is-reversed .journal-capability-ui {
    order: 2;
  }
}

/* Mobile: kurze Abschnitte und reduzierte Produktgrafiken */
@media (max-width: 640px) {
  .journal-showcase-page {
    --journal-section-space: var(--journal-section-space-mobile);
  }

  .journal-showcase-page .journal-showcase-hero {
    padding: 94px 16px 42px;
  }

  .journal-showcase-page .journal-showcase-hero::after {
    top: 92px;
    left: 16px;
    font-size: clamp(4rem, 24vw, 6.2rem);
    color: rgba(255, 255, 255, 0.035);
  }

  .journal-showcase-page .journal-showcase-title {
    font-size: clamp(2.45rem, 12vw, 3.35rem) !important;
    line-height: 0.98 !important;
  }

  .journal-showcase-page .journal-showcase-lead {
    font-size: 0.94rem;
    line-height: 1.52;
  }

  .journal-showcase-page .journal-showcase-actions {
    display: grid;
    gap: 10px;
  }

  .journal-showcase-page .journal-showcase-actions .button {
    width: 100%;
    min-width: 0;
  }

  .journal-showcase-page .journal-proof-row {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .journal-showcase-page .journal-proof-row > div {
    min-height: 50px;
    padding: 9px 11px;
  }

  .journal-showcase-page .journal-hero-product {
    height: 300px;
    margin-top: -2px;
    overflow: hidden;
    border-radius: 22px;
  }

  .journal-showcase-page .journal-app-window-hero {
    top: 0;
    left: 50%;
    width: 790px;
    transform: translateX(-50%) scale(0.43);
    transform-origin: top center;
  }

  .journal-showcase-page .journal-floating-stat {
    display: none;
  }

  .journal-entry-section {
    padding: 50px 16px 52px;
  }

  .journal-entry-heading {
    gap: 10px;
    margin-bottom: 20px;
  }

  .journal-entry-heading h2 {
    font-size: clamp(2rem, 10vw, 2.55rem) !important;
  }

  .journal-entry-heading > p {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .journal-entry-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .journal-entry-card,
  .journal-entry-card:first-child {
    min-height: 78px;
    padding: 14px 15px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    border-radius: 16px;
  }

  .journal-entry-number {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 34px;
    height: 34px;
  }

  .journal-entry-card small {
    grid-column: 2;
    grid-row: 1;
    font-size: 0.59rem;
  }

  .journal-entry-card > strong {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    font-size: 0.98rem;
  }

  .journal-entry-card p {
    display: none;
  }

  .journal-entry-card b {
    grid-column: 3;
    grid-row: 1 / 3;
    margin: 0;
    font-size: 0;
  }

  .journal-entry-card b span {
    font-size: 1rem;
  }

  .journal-proof-strip {
    min-height: 0;
    padding: 13px;
    grid-template-columns: 1fr 1fr;
    gap: 9px 10px;
    border-radius: 15px;
  }

  .journal-proof-strip-label {
    grid-column: 1 / -1;
  }

  .journal-proof-strip strong {
    font-size: 0.65rem;
    white-space: normal;
  }

  .journal-showcase-page .journal-product-stage,
  .journal-showcase-page .journal-workflow-section,
  .journal-showcase-page .journal-capabilities-section,
  .journal-showcase-page .journal-beta-trust-section,
  .journal-showcase-page .journal-faq-section,
  .journal-showcase-page .journal-final-cta-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .journal-showcase-page .journal-stage-heading {
    gap: 12px;
    margin-bottom: 22px;
  }

  .journal-showcase-page .journal-stage-heading h2,
  .journal-showcase-page .journal-centered-heading h2,
  .journal-showcase-page .journal-beta-trust-copy h2,
  .journal-showcase-page .journal-faq-grid h2,
  .journal-showcase-page .journal-final-cta-inner h2 {
    font-size: clamp(2rem, 10vw, 2.55rem) !important;
  }

  .journal-showcase-page .journal-showcase-toolbar {
    min-height: 46px;
    grid-template-columns: 34px 1fr auto;
    padding: 0 10px;
  }

  .journal-showcase-page .journal-window-dots i {
    width: 7px;
    height: 7px;
  }

  .journal-showcase-page .journal-showcase-tabs {
    justify-content: flex-start;
    overflow: hidden;
  }

  .journal-showcase-page .journal-showcase-tabs span {
    display: none;
  }

  .journal-showcase-page .journal-showcase-tabs span.is-active {
    display: inline-flex;
  }

  .journal-showcase-page .journal-showcase-filter {
    padding: 6px 8px;
    font-size: 0.58rem;
  }

  .journal-showcase-page .journal-showcase-screen {
    padding: 10px;
  }

  .journal-showcase-page .journal-showcase-metric-row {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .journal-showcase-page .journal-showcase-metric-row article {
    min-height: 72px;
    padding: 10px;
  }

  .journal-showcase-page .journal-showcase-metric-row strong {
    font-size: 1rem;
  }

  .journal-showcase-page .journal-large-chart {
    height: 185px;
  }

  .journal-showcase-page .journal-showcase-side-stack {
    display: none;
  }

  .journal-showcase-page .journal-example-note {
    text-align: left;
  }

  .journal-showcase-page .journal-centered-heading {
    margin-bottom: 20px;
    text-align: left;
  }

  .journal-showcase-page .journal-workflow-line {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .journal-showcase-page .journal-workflow-step {
    min-height: 92px;
    padding: 12px 13px;
    display: grid;
    grid-template-columns: 42px 1fr;
    grid-template-rows: auto auto;
    gap: 2px 12px;
    text-align: left;
  }

  .journal-showcase-page .journal-workflow-step > span {
    position: absolute;
    top: 10px;
    right: 12px;
  }

  .journal-showcase-page .journal-workflow-icon {
    grid-row: 1 / 3;
    width: 40px;
    height: 40px;
    margin: 0;
  }

  .journal-showcase-page .journal-workflow-step h3 {
    align-self: end;
    font-size: 0.94rem;
  }

  .journal-showcase-page .journal-workflow-step p {
    margin-top: 3px;
    font-size: 0.72rem;
  }

  .journal-showcase-page .journal-capability-panel,
  .journal-showcase-page .journal-capability-panel.is-reversed {
    padding: 19px;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .journal-showcase-page .journal-capability-copy ul {
    display: none;
  }

  .journal-showcase-page .journal-capability-ui {
    min-height: 225px;
    padding: 14px;
  }

  .journal-showcase-page .journal-form-grid label {
    min-height: 52px;
  }

  .journal-showcase-page .journal-mini-bars {
    height: 104px;
  }

  .journal-showcase-page .journal-beta-trust-grid,
  .journal-showcase-page .journal-faq-grid {
    gap: 24px;
  }

  .journal-showcase-page .journal-beta-actions,
  .journal-showcase-page .journal-final-actions {
    display: grid;
    gap: 10px;
  }

  .journal-showcase-page .journal-beta-actions .button,
  .journal-showcase-page .journal-final-actions .button {
    width: 100%;
    min-width: 0;
  }

  .journal-showcase-page .journal-beta-status-card {
    padding: 18px;
  }

  .journal-showcase-page .journal-beta-status-list div {
    gap: 12px;
    font-size: 0.68rem;
  }

  .journal-showcase-page .journal-final-cta-section {
    padding-top: 54px;
    padding-bottom: 54px;
  }
}

/* Phase 29D.10 - Mobile wie Home: Hero-Produktgrafik später im Produktbereich zeigen */
@media (max-width: 640px) {
  .journal-showcase-page .journal-hero-product {
    display: none;
  }
}

/* Phase 29D.10 - Mobile Produktnutzen als kompakte Chips wie auf Home */
@media (max-width: 640px) {
  .journal-showcase-page .journal-proof-row {
    margin-top: 14px;
    padding-top: 0;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    border-top: 0;
  }

  .journal-showcase-page .journal-proof-row > div {
    min-height: 36px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    border-radius: 999px;
  }

  .journal-showcase-page .journal-proof-row strong {
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .journal-showcase-page .journal-proof-row strong::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 7px;
    display: inline-block;
    border-radius: 50%;
    background: var(--journal-cyan);
    box-shadow: 0 0 10px rgba(53, 226, 255, 0.75);
  }

  .journal-showcase-page .journal-proof-row span {
    display: none;
  }
}

/* =========================================================
   Phase 29D.11 - Journal Hero exakt an Home ausgerichtet
   ========================================================= */

/* gleiche Gesamtbreite, gleiche Hero-Höhe und gleiche Achsen wie Home */
.journal-showcase-page .journal-showcase-hero {
  height: 680px !important;
  min-height: 620px !important;
  max-height: 700px !important;
  padding: 104px 24px 40px !important;
  align-items: center;
}

.journal-showcase-page .journal-showcase-hero-inner {
  width: min(1180px, calc(100% - 48px)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-inline: auto;
  grid-template-columns: minmax(390px, 0.9fr) minmax(560px, 1.1fr) !important;
  gap: clamp(34px, 4vw, 54px) !important;
  align-items: center !important;
}

/* JOURNAL steht wie SUPRAFLUX auf Home oben rechts, nicht hinter dem Text */
.journal-showcase-page .journal-showcase-hero::after {
  content: "JOURNAL" !important;
  top: 28px !important;
  right: clamp(18px, 3.4vw, 56px) !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  font-size: clamp(4.75rem, 8.15vw, 8.45rem) !important;
  font-weight: 800 !important;
  line-height: 0.84 !important;
  letter-spacing: 0.008em !important;
  text-align: right !important;
  color: rgba(255, 255, 255, 0.082) !important;
  transform: scaleX(1.1) !important;
  transform-origin: right top !important;
  text-shadow:
    0 0 42px rgba(11, 115, 255, 0.11),
    0 0 86px rgba(34, 228, 255, 0.04) !important;
}

.journal-showcase-page .journal-showcase-copy {
  max-width: 560px !important;
}

.journal-showcase-page .journal-showcase-title {
  max-width: 610px !important;
  font-size: clamp(3.25rem, 5vw, 4.5rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.055em !important;
}

.journal-showcase-page .journal-showcase-lead {
  max-width: 590px !important;
  margin-top: 18px !important;
  font-size: clamp(1rem, 1.1vw, 1.125rem) !important;
  line-height: 1.58 !important;
}

/* Produktansicht gleiche visuelle Grösse und Position wie Home */
.journal-showcase-page .journal-hero-product {
  width: 100% !important;
  max-width: 680px !important;
  height: 520px !important;
  min-height: 480px !important;
  max-height: 540px !important;
  justify-self: end !important;
  transform: none !important;
  perspective: none !important;
}

.journal-showcase-page .journal-app-window-hero {
  top: 30px !important;
  right: 0 !important;
  left: auto !important;
  width: 825px !important;
  transform: scale(0.80) !important;
  transform-origin: top right !important;
  border-radius: 24px !important;
}

.journal-showcase-page .journal-floating-stat-left {
  left: -4px !important;
  bottom: 2px !important;
  transform: scale(0.92) !important;
  transform-origin: bottom left !important;
}

.journal-showcase-page .journal-floating-stat-right {
  right: -2px !important;
  top: 72px !important;
  transform: scale(0.92) !important;
  transform-origin: top right !important;
}

/* Laptop genauso wie Home: kompakter, aber nicht winzig */
@media (max-width: 1280px), (max-height: 820px) {
  .journal-showcase-page .journal-showcase-hero {
    height: 620px !important;
    min-height: 560px !important;
    max-height: 640px !important;
    padding-top: 92px !important;
    padding-bottom: 28px !important;
  }

  .journal-showcase-page .journal-showcase-hero-inner {
    grid-template-columns: minmax(360px, 0.92fr) minmax(520px, 1.08fr) !important;
    gap: 32px !important;
  }

  .journal-showcase-page .journal-showcase-hero::after {
    top: 24px !important;
    right: 10px !important;
    font-size: clamp(4.15rem, 12vw, 7.45rem) !important;
    transform: scaleX(1.07) !important;
  }

  .journal-showcase-page .journal-showcase-title {
    font-size: clamp(3rem, 4.5vw, 4rem) !important;
  }

  .journal-showcase-page .journal-hero-product {
    max-width: 630px !important;
    height: 460px !important;
    min-height: 430px !important;
    max-height: 480px !important;
  }

  .journal-showcase-page .journal-app-window-hero {
    top: 26px !important;
    width: 800px !important;
    transform: scale(0.75) !important;
  }
}

/* Tablet */
@media (max-width: 1020px) {
  .journal-showcase-page .journal-showcase-hero {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 112px 24px 52px !important;
  }

  .journal-showcase-page .journal-showcase-hero-inner {
    width: min(100% - 48px, 1180px) !important;
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .journal-showcase-page .journal-showcase-hero::after {
    top: 34px !important;
    right: 18px !important;
    font-size: clamp(4.2rem, 15vw, 7rem) !important;
    color: rgba(255, 255, 255, 0.06) !important;
  }

  .journal-showcase-page .journal-showcase-copy {
    max-width: 700px !important;
  }

  .journal-showcase-page .journal-hero-product {
    width: min(100%, 720px) !important;
    height: 440px !important;
    min-height: 400px !important;
    max-height: 460px !important;
    justify-self: center !important;
  }

  .journal-showcase-page .journal-app-window-hero {
    top: 22px !important;
    left: 50% !important;
    right: auto !important;
    width: 820px !important;
    transform: translateX(-50%) scale(0.72) !important;
    transform-origin: top center !important;
  }
}

/* Mobile folgt Home: klare Typografie, Produktgrafik später auf der Seite */
@media (max-width: 640px) {
  .journal-showcase-page .journal-showcase-hero {
    padding: 104px 15px 36px !important;
  }

  .journal-showcase-page .journal-showcase-hero-inner {
    width: min(100% - 30px, 1180px) !important;
    gap: 0 !important;
  }

  .journal-showcase-page .journal-showcase-hero::after {
    top: 50px !important;
    right: 0 !important;
    width: 100% !important;
    font-size: clamp(3.35rem, 17.2vw, 5.7rem) !important;
    text-align: center !important;
    transform: scaleX(1.03) !important;
    transform-origin: center top !important;
    color: rgba(255, 255, 255, 0.045) !important;
  }

  .journal-showcase-page .journal-showcase-title {
    font-size: clamp(2.55rem, 13vw, 3.45rem) !important;
    line-height: 1.01 !important;
  }

  .journal-showcase-page .journal-showcase-lead {
    margin-top: 16px !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  .journal-showcase-page .journal-hero-product {
    display: none !important;
  }
}

/* Phase 29D.11 - finale Hero-Proportionen: keine Überhöhe */
@media (min-width: 1021px) {
  .journal-showcase-page .journal-showcase-hero-inner {
    grid-template-columns: minmax(500px, 0.96fr) minmax(560px, 1.04fr) !important;
    gap: 40px !important;
  }

  .journal-showcase-page .journal-showcase-title {
    max-width: 560px !important;
    font-size: clamp(3.05rem, 4.4vw, 4rem) !important;
    line-height: 0.98 !important;
  }

  .journal-showcase-page .journal-showcase-title em {
    white-space: nowrap;
  }

  .journal-showcase-page .journal-showcase-actions {
    margin-top: 18px !important;
  }

  .journal-showcase-page .journal-proof-row {
    margin-top: 14px !important;
    padding-top: 0 !important;
    gap: 8px !important;
    border-top: 0 !important;
  }

  .journal-showcase-page .journal-proof-row > div {
    min-height: 34px !important;
    padding: 8px 10px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 999px !important;
  }

  .journal-showcase-page .journal-proof-row strong {
    display: inline-flex !important;
    align-items: center;
    font-size: 0.66rem !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .journal-showcase-page .journal-proof-row strong::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 7px;
    display: inline-block;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--journal-cyan);
    box-shadow: 0 0 10px rgba(53, 226, 255, 0.75);
  }

  .journal-showcase-page .journal-proof-row span {
    display: none !important;
  }

  .journal-showcase-page .journal-hero-product {
    max-width: 640px !important;
  }

  .journal-showcase-page .journal-app-window-hero {
    transform: scale(0.78) !important;
  }
}

@media (min-width: 1021px) and (max-width: 1280px), (min-width: 1021px) and (max-height: 820px) {
  .journal-showcase-page .journal-showcase-hero-inner {
    grid-template-columns: minmax(450px, 0.96fr) minmax(500px, 1.04fr) !important;
    gap: 30px !important;
  }

  .journal-showcase-page .journal-showcase-title {
    font-size: clamp(2.85rem, 4.15vw, 3.55rem) !important;
  }

  .journal-showcase-page .journal-hero-product {
    max-width: 610px !important;
  }

  .journal-showcase-page .journal-app-window-hero {
    transform: scale(0.72) !important;
  }
}

/* Phase 29D.11 - Mobile Hero kürzer und näher an Home */
@media (max-width: 640px) {
  .journal-showcase-page .journal-showcase-hero {
    padding: 94px 15px 34px !important;
  }

  .journal-showcase-page .journal-showcase-hero-inner {
    width: 100% !important;
  }

  .journal-showcase-page .journal-showcase-title {
    max-width: 100% !important;
    font-size: clamp(2.2rem, 10.5vw, 2.65rem) !important;
    line-height: 1.01 !important;
    letter-spacing: -0.045em !important;
  }

  .journal-showcase-page .journal-showcase-title em {
    white-space: normal !important;
  }

  .journal-showcase-page .journal-showcase-lead {
    font-size: 0.94rem !important;
    line-height: 1.5 !important;
  }

  .journal-showcase-page .journal-showcase-actions {
    margin-top: 16px !important;
    gap: 9px !important;
  }

  .journal-showcase-page .journal-showcase-actions .button {
    min-height: 46px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .journal-showcase-page .journal-proof-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 12px !important;
  }

  .journal-showcase-page .journal-proof-row > div {
    min-height: 32px !important;
    padding: 7px 8px !important;
    justify-content: center !important;
  }

  .journal-showcase-page .journal-proof-row strong {
    font-size: 0.58rem !important;
    letter-spacing: 0.025em !important;
  }

  .journal-showcase-page .journal-proof-row strong::before {
    width: 6px !important;
    height: 6px !important;
    margin-right: 5px !important;
  }
}

/* =========================================================
   Phase 29D.12 - Journal Position und Hero-Feinschliff
   ========================================================= */

@media (min-width: 1021px) {
  /* Textblock etwas höher, ohne die Home-Proportionen zu verändern */
  .journal-showcase-page .journal-showcase-copy {
    transform: translateY(-18px) !important;
  }

  /* JOURNAL wie der SUPRAFLUX-Wordmark auf der Home-Seite */
  .journal-showcase-page .journal-showcase-hero::after {
    top: -48px !important;
    right: clamp(30px, 4.4vw, 72px) !important;
    color: rgba(255, 255, 255, 0.092) !important;
    font-family: "Manrope", "Inter", sans-serif !important;
    font-size: clamp(4.9rem, 8.35vw, 8.55rem) !important;
    font-weight: 800 !important;
    line-height: 0.84 !important;
    letter-spacing: -0.025em !important;
    text-align: right !important;
    transform: scaleX(1.055) !important;
    transform-origin: right top !important;
    text-shadow:
      0 0 42px rgba(11, 115, 255, 0.12),
      0 0 86px rgba(34, 228, 255, 0.045) !important;
  }

  /* Dashboard etwas kleiner und ruhiger im rechten Hero-Bereich */
  .journal-showcase-page .journal-hero-product {
    max-width: 600px !important;
  }

  .journal-showcase-page .journal-app-window-hero {
    top: 48px !important;
    transform: scale(0.71) !important;
  }

  .journal-showcase-page .journal-floating-stat-left,
  .journal-showcase-page .journal-floating-stat-right {
    transform: scale(0.84) !important;
  }
}

@media (min-width: 1021px) and (max-width: 1280px),
       (min-width: 1021px) and (max-height: 820px) {
  .journal-showcase-page .journal-showcase-copy {
    transform: translateY(-14px) !important;
  }

  .journal-showcase-page .journal-showcase-hero::after {
    top: -40px !important;
    right: 14px !important;
    font-size: clamp(4.4rem, 10.5vw, 7.7rem) !important;
  }

  .journal-showcase-page .journal-hero-product {
    max-width: 565px !important;
  }

  .journal-showcase-page .journal-app-window-hero {
    top: 44px !important;
    transform: scale(0.67) !important;
  }
}

@media (max-width: 1020px) {
  .journal-showcase-page .journal-showcase-copy {
    transform: none !important;
  }
}

/* =========================================================
   Phase 29D.13 - Journal-Wordmark und kompaktere Produktansicht
   ========================================================= */

@media (min-width: 1021px) {
  /* Exakt gleiche optische Werte wie SUPRAFLUX auf der Home-Seite. */
  .journal-showcase-page .journal-showcase-hero::after {
    top: 28px !important;
    right: clamp(18px, 3.4vw, 56px) !important;
    width: min(72vw, 1120px) !important;
    color: rgba(255, 255, 255, 0.092) !important;
    font-family: "Manrope", "Inter", sans-serif !important;
    font-size: clamp(4.75rem, 8.15vw, 8.45rem) !important;
    font-weight: 800 !important;
    line-height: 0.84 !important;
    letter-spacing: 0.008em !important;
    text-align: right !important;
    transform: scaleX(1.13) !important;
    transform-origin: right top !important;
    text-shadow:
      0 0 42px rgba(11, 115, 255, 0.12),
      0 0 86px rgba(34, 228, 255, 0.045) !important;
  }

  /* Die grosse Produktdarstellung bleibt lesbar, nimmt aber weniger Raum ein. */
  .journal-showcase-page .journal-product-stage {
    padding-top: 78px !important;
    padding-bottom: 78px !important;
  }

  .journal-showcase-page .journal-stage-heading {
    width: min(100%, 1120px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 26px !important;
  }

  .journal-showcase-page .journal-showcase-frame {
    width: min(100%, 1000px) !important;
    max-width: 1000px !important;
    border-radius: 22px !important;
  }

  .journal-showcase-page .journal-showcase-toolbar {
    min-height: 48px !important;
    padding-inline: 14px !important;
  }

  .journal-showcase-page .journal-showcase-screen {
    padding: 14px !important;
  }

  .journal-showcase-page .journal-showcase-metric-row {
    gap: 8px !important;
  }

  .journal-showcase-page .journal-showcase-metric-row article {
    min-height: 72px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }

  .journal-showcase-page .journal-showcase-metric-row strong {
    margin-top: 4px !important;
    font-size: clamp(0.98rem, 1.28vw, 1.28rem) !important;
  }

  .journal-showcase-page .journal-showcase-content-grid {
    margin-top: 8px !important;
    grid-template-columns: minmax(0, 1.68fr) minmax(210px, 0.52fr) !important;
    gap: 8px !important;
  }

  .journal-showcase-page .journal-showcase-primary-chart {
    padding: 13px !important;
    border-radius: 13px !important;
  }

  .journal-showcase-page .journal-large-chart {
    height: 198px !important;
    margin-top: 8px !important;
  }

  .journal-showcase-page .journal-showcase-side-stack {
    gap: 8px !important;
  }

  .journal-showcase-page .journal-result-card,
  .journal-showcase-page .journal-highlight-card {
    padding: 12px !important;
    border-radius: 13px !important;
  }

  .journal-showcase-page .journal-result-donut {
    width: 86px !important;
    height: 86px !important;
    margin: 7px auto !important;
  }

  .journal-showcase-page .journal-result-donut::before {
    inset: 12px !important;
  }

  .journal-showcase-page .journal-result-donut span {
    font-size: 1.25rem !important;
  }

  .journal-showcase-page .journal-highlight-card > p {
    margin-top: 5px !important;
    font-size: 0.64rem !important;
    line-height: 1.4 !important;
  }

  .journal-showcase-page .journal-highlight-card > div {
    padding: 5px 0 !important;
    font-size: 0.62rem !important;
  }

  .journal-showcase-page .journal-example-note {
    max-width: 1000px !important;
    margin: 13px auto 0 !important;
    font-size: 0.68rem !important;
  }
}

@media (min-width: 1021px) and (max-width: 1280px),
       (min-width: 1021px) and (max-height: 820px) {
  .journal-showcase-page .journal-showcase-hero::after {
    top: 28px !important;
    right: 10px !important;
    width: 82% !important;
    font-size: clamp(4.15rem, 12vw, 7.45rem) !important;
    letter-spacing: 0.004em !important;
    transform: scaleX(1.09) !important;
  }

  .journal-showcase-page .journal-product-stage {
    padding-top: 68px !important;
    padding-bottom: 68px !important;
  }

  .journal-showcase-page .journal-showcase-frame,
  .journal-showcase-page .journal-example-note {
    width: min(100%, 940px) !important;
    max-width: 940px !important;
  }

  .journal-showcase-page .journal-large-chart {
    height: 180px !important;
  }
}

@media (max-width: 1020px) {
  .journal-showcase-page .journal-showcase-hero::after {
    top: 34px !important;
  }
}

/* =========================================================
   Phase 29D.14 - Journal-Wordmark weiter links und kompaktere Vollansicht
   ========================================================= */

@media (min-width: 1021px) {
  /* JOURNAL kleiner und deutlich weiter links im freien oberen Hero-Bereich. */
  .journal-showcase-page .journal-showcase-hero::after {
    top: 28px !important;
    right: clamp(150px, 16vw, 260px) !important;
    width: min(58vw, 900px) !important;
    font-size: clamp(4.1rem, 7.05vw, 7.15rem) !important;
    letter-spacing: 0.004em !important;
    transform: scaleX(1.08) !important;
    transform-origin: right top !important;
  }

  /* Die grosse Produktdarstellung beim Herunterscrollen wird klar kompakter. */
  .journal-showcase-page .journal-product-stage {
    padding-top: 68px !important;
    padding-bottom: 68px !important;
  }

  .journal-showcase-page .journal-stage-heading {
    width: min(100%, 1040px) !important;
    margin-bottom: 22px !important;
  }

  .journal-showcase-page .journal-showcase-frame {
    width: min(100%, 860px) !important;
    max-width: 860px !important;
    border-radius: 20px !important;
  }

  .journal-showcase-page .journal-showcase-toolbar {
    min-height: 44px !important;
    padding-inline: 12px !important;
  }

  .journal-showcase-page .journal-showcase-screen {
    padding: 12px !important;
  }

  .journal-showcase-page .journal-showcase-metric-row article {
    min-height: 64px !important;
    padding: 9px 10px !important;
  }

  .journal-showcase-page .journal-showcase-metric-row strong {
    font-size: clamp(0.9rem, 1.1vw, 1.12rem) !important;
  }

  .journal-showcase-page .journal-showcase-content-grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(190px, 0.5fr) !important;
    gap: 7px !important;
  }

  .journal-showcase-page .journal-showcase-primary-chart {
    padding: 11px !important;
  }

  .journal-showcase-page .journal-large-chart {
    height: 158px !important;
  }

  .journal-showcase-page .journal-result-card,
  .journal-showcase-page .journal-highlight-card {
    padding: 10px !important;
  }

  .journal-showcase-page .journal-result-donut {
    width: 74px !important;
    height: 74px !important;
  }

  .journal-showcase-page .journal-result-donut::before {
    inset: 10px !important;
  }

  .journal-showcase-page .journal-result-donut span {
    font-size: 1.08rem !important;
  }

  .journal-showcase-page .journal-example-note {
    max-width: 860px !important;
    margin-top: 11px !important;
    font-size: 0.64rem !important;
  }
}

@media (min-width: 1021px) and (max-width: 1280px),
       (min-width: 1021px) and (max-height: 820px) {
  .journal-showcase-page .journal-showcase-hero::after {
    right: clamp(100px, 13vw, 175px) !important;
    width: 62% !important;
    font-size: clamp(3.85rem, 9.2vw, 6.35rem) !important;
    transform: scaleX(1.055) !important;
  }

  .journal-showcase-page .journal-showcase-frame,
  .journal-showcase-page .journal-example-note {
    width: min(100%, 800px) !important;
    max-width: 800px !important;
  }

  .journal-showcase-page .journal-large-chart {
    height: 146px !important;
  }
}


/* =========================================================
   Phase 29D.15 - Schwarzen Balken hinter JOURNAL entfernen
   ========================================================= */

/* Das ::after-Element wird für den JOURNAL-Schriftzug verwendet.
   Eine ältere Hero-Regel hatte darauf noch einen dunklen Verlauf
   hinterlegt. Dieser Hintergrund wird vollständig entfernt. */
.journal-showcase-page .journal-showcase-hero::after {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* =========================================================
   Phase 29D.16 - Risk Center: transparenter Baer im Tool-Intro
   ========================================================= */

.risk-center-page #tools {
  position: relative;
  overflow: hidden;
}

.risk-tools-intro {
  position: relative;
  z-index: 1;
  min-height: 252px;
  margin-bottom: 28px;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.62fr);
  gap: clamp(34px, 5vw, 78px);
  align-items: center;
}

.risk-tools-intro .section-heading {
  max-width: 760px;
  margin-bottom: 0;
}

.risk-tools-bear {
  position: relative;
  width: min(100%, 470px);
  height: 250px;
  justify-self: end;
  display: grid;
  place-items: center;
  pointer-events: none;
  isolation: isolate;
}

.risk-tools-bear::before {
  content: "";
  position: absolute;
  inset: 12% 5% 4% 10%;
  z-index: -2;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(255, 40, 54, 0.12), rgba(255, 20, 32, 0.035) 48%, transparent 74%);
  filter: blur(24px);
}

.risk-tools-bear-glow {
  position: absolute;
  left: 16%;
  right: 4%;
  bottom: 8%;
  height: 32%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255, 38, 52, 0.1);
  filter: blur(34px);
}

.risk-tools-bear img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0.88;
  filter:
    saturate(1.08)
    contrast(1.04)
    drop-shadow(0 0 14px rgba(255, 44, 58, 0.2))
    drop-shadow(0 20px 46px rgba(0, 0, 0, 0.34));
}

@media (max-width: 1080px) {
  .risk-tools-intro {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.5fr);
    gap: 28px;
  }

  .risk-tools-bear {
    width: min(100%, 390px);
    height: 220px;
  }
}

@media (max-width: 820px) {
  .risk-tools-intro {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .risk-tools-bear {
    width: min(100%, 380px);
    height: 190px;
    justify-self: center;
  }
}

@media (max-width: 560px) {
  .risk-tools-intro {
    margin-bottom: 22px;
  }

  .risk-tools-bear {
    width: min(100%, 320px);
    height: 160px;
  }

  .risk-tools-bear img {
    opacity: 0.78;
  }
}


/* =========================================================
   Phase 29D.17 - Risk Center Hero kompakter ausrichten
   Leerraum unter Header entfernen und RISK-Wordmark anheben
   ========================================================= */

@media (min-width: 1021px) {
  .risk-center-page .risk-center-premium-hero {
    min-height: 620px !important;
    height: auto !important;
    padding: 116px 24px 42px !important;
  }

  .risk-center-page .risk-center-premium-inner {
    min-height: 0 !important;
    align-items: start !important;
  }

  .risk-center-page .risk-center-premium-copy {
    padding-top: 8px;
  }

  .risk-center-page .risk-cockpit {
    margin-top: 0;
  }

  .risk-center-page .risk-center-premium-hero::after {
    left: clamp(22px, 2.6vw, 38px) !important;
    top: 174px !important;
    right: auto !important;
    bottom: auto !important;
    width: min(48vw, 720px) !important;
    overflow: hidden;
    font-size: clamp(8rem, 15.2vw, 13.2rem) !important;
    font-weight: 800 !important;
    line-height: 0.78 !important;
    letter-spacing: -0.09em !important;
    color: rgba(255, 255, 255, 0.032) !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: 0 0 68px rgba(11, 115, 255, 0.055);
    opacity: 1 !important;
    z-index: 0 !important;
  }
}

@media (min-width: 1021px) and (max-height: 820px) {
  .risk-center-page .risk-center-premium-hero {
    min-height: 590px !important;
    padding-top: 108px !important;
    padding-bottom: 34px !important;
  }

  .risk-center-page .risk-center-premium-hero::after {
    top: 160px !important;
  }
}

@media (max-width: 1020px) {
  .risk-center-page .risk-center-premium-hero {
    min-height: auto !important;
    padding-top: 102px !important;
    padding-bottom: 44px !important;
  }

  .risk-center-page .risk-center-premium-inner {
    min-height: 0 !important;
    align-items: start !important;
  }

  .risk-center-page .risk-center-premium-hero::after {
    left: 18px !important;
    top: 148px !important;
    right: auto !important;
    bottom: auto !important;
    width: 78vw !important;
    overflow: hidden;
    font-size: clamp(5rem, 23vw, 8rem) !important;
    color: rgba(255, 255, 255, 0.026) !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: 0 0 52px rgba(11, 115, 255, 0.045);
    z-index: 0 !important;
  }
}

@media (max-width: 640px) {
  .risk-center-page .risk-center-premium-hero {
    padding-top: 92px !important;
    padding-bottom: 38px !important;
  }

  .risk-center-page .risk-center-premium-hero::after {
    top: 128px !important;
    left: 14px !important;
    width: 88vw !important;
    font-size: clamp(4.5rem, 25vw, 6.8rem) !important;
    color: rgba(255, 255, 255, 0.022) !important;
  }
}

/* =========================================================
   Phase 29D.18 - Risk Center Proportionen, Wordmark und Klickmenue
   ========================================================= */

/* Desktop-Untermenue bleibt nach einem Klick geoeffnet. */
.nav-menu-group.is-open .nav-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-menu-group.is-open .nav-menu-chevron {
  color: var(--color-blue);
  transform: rotate(180deg);
}

/* Verbindliche Proportionen fuer die Risk-Center-Seite. */
.risk-center-page .content-section {
  padding-top: clamp(64px, 6vw, 84px);
  padding-bottom: clamp(64px, 6vw, 84px);
}

.risk-center-page .section-inner,
.risk-center-page .risk-tool-navigation-inner {
  width: min(calc(100% - 48px), 1280px);
}

@media (min-width: 1121px) {
  .risk-center-page .risk-center-premium-hero {
    min-height: 586px !important;
    padding: 104px 24px 34px !important;
  }

  .risk-center-page .risk-center-premium-inner {
    width: min(100%, 1280px) !important;
    min-height: 448px !important;
    grid-template-columns: minmax(420px, 0.88fr) minmax(560px, 680px) !important;
    gap: clamp(40px, 4.2vw, 64px) !important;
    align-items: center !important;
  }

  .risk-center-page .risk-center-premium-copy {
    max-width: 560px !important;
    padding-top: 0 !important;
  }

  .risk-center-page .risk-center-premium-title {
    font-size: clamp(3.2rem, 4.35vw, 4.35rem) !important;
  }

  .risk-center-page .risk-center-premium-lead {
    max-width: 540px !important;
    margin-top: 20px !important;
    font-size: 1rem !important;
    line-height: 1.62 !important;
  }

  .risk-center-page .risk-center-premium-actions {
    margin-top: 24px !important;
  }

  .risk-center-page .risk-center-premium-points {
    margin-top: 20px !important;
  }

  /* Wortmarke im freien oberen rechten Bereich, nicht im Haupttext. */
  .risk-center-page .risk-center-premium-hero::after {
    content: "RISIKOCENTER" !important;
    top: 108px !important;
    right: 26px !important;
    bottom: auto !important;
    left: auto !important;
    width: min(61vw, 920px) !important;
    height: auto !important;
    overflow: visible !important;
    text-align: right !important;
    white-space: nowrap !important;
    font-family: "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif !important;
    font-size: clamp(4.8rem, 7.2vw, 7.1rem) !important;
    font-weight: 800 !important;
    line-height: 0.86 !important;
    letter-spacing: -0.075em !important;
    color: rgba(255, 255, 255, 0.052) !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: 0 0 62px rgba(11, 115, 255, 0.075) !important;
    opacity: 1 !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  /* Produktgrafik kleiner und vollstaendig im ersten Bildschirm. */
  .risk-center-page .risk-cockpit {
    width: min(100%, 680px) !important;
    max-width: 680px !important;
    margin-top: 20px !important;
    justify-self: end !important;
    border-radius: 22px !important;
  }

  .risk-center-page .risk-cockpit-topbar {
    min-height: 66px !important;
    padding: 14px 18px !important;
  }

  .risk-center-page .risk-cockpit-topbar > div strong {
    font-size: 0.96rem !important;
  }

  .risk-center-page .risk-cockpit-body {
    padding: 16px !important;
    grid-template-columns: 166px 1fr !important;
    gap: 12px !important;
  }

  .risk-center-page .risk-gauge-panel {
    padding: 13px !important;
    border-radius: 15px !important;
  }

  .risk-center-page .risk-gauge {
    width: 130px !important;
  }

  .risk-center-page .risk-gauge-center strong {
    font-size: 1.25rem !important;
  }

  .risk-center-page .risk-gauge-caption {
    margin-top: 11px !important;
    padding-top: 10px !important;
  }

  .risk-center-page .risk-cockpit-values {
    gap: 8px !important;
  }

  .risk-center-page .risk-cockpit-values div {
    min-height: 58px !important;
    padding: 9px 10px !important;
    border-radius: 11px !important;
  }

  .risk-center-page .risk-cockpit-values strong {
    margin-top: 4px !important;
    font-size: 0.74rem !important;
  }

  .risk-center-page .risk-cockpit-plan {
    padding: 11px 12px !important;
    border-radius: 13px !important;
  }

  .risk-center-page .risk-plan-track {
    margin: 14px 0 9px !important;
  }

  .risk-center-page .risk-cockpit-radar {
    min-height: 58px !important;
    padding: 10px 12px !important;
    border-radius: 13px !important;
  }

  .risk-center-page .risk-cockpit-note {
    padding: 0 18px 13px !important;
    font-size: 0.54rem !important;
  }
}

@media (min-width: 1121px) and (max-height: 820px) {
  .risk-center-page .risk-center-premium-hero {
    min-height: 556px !important;
    padding-top: 96px !important;
    padding-bottom: 28px !important;
  }

  .risk-center-page .risk-center-premium-inner {
    min-height: 432px !important;
  }

  .risk-center-page .risk-center-premium-hero::after {
    top: 96px !important;
    font-size: clamp(4.5rem, 6.8vw, 6.65rem) !important;
  }

  .risk-center-page .risk-cockpit {
    width: min(100%, 650px) !important;
    max-width: 650px !important;
    margin-top: 14px !important;
  }
}

@media (min-width: 821px) and (max-width: 1120px) {
  .risk-center-page .risk-center-premium-hero {
    min-height: auto !important;
    padding: 100px 24px 46px !important;
  }

  .risk-center-page .risk-center-premium-inner {
    width: min(100%, 900px) !important;
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .risk-center-page .risk-center-premium-copy {
    max-width: 680px !important;
  }

  .risk-center-page .risk-center-premium-hero::after {
    content: "RISIKOCENTER" !important;
    top: 98px !important;
    right: 20px !important;
    left: auto !important;
    width: 86vw !important;
    text-align: right !important;
    white-space: nowrap !important;
    font-size: clamp(4.2rem, 10.5vw, 6.8rem) !important;
    letter-spacing: -0.075em !important;
    color: rgba(255, 255, 255, 0.042) !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 0 !important;
  }

  .risk-center-page .risk-cockpit {
    width: min(100%, 700px) !important;
    max-width: 700px !important;
    margin-top: 0 !important;
    justify-self: center !important;
  }
}

@media (max-width: 820px) {
  .risk-center-page .content-section {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .risk-center-page .section-inner,
  .risk-center-page .risk-tool-navigation-inner {
    width: min(calc(100% - 32px), 720px);
  }

  .risk-center-page .risk-center-premium-hero {
    min-height: auto !important;
    padding: 92px 16px 40px !important;
  }

  .risk-center-page .risk-center-premium-inner {
    width: min(100%, 720px) !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .risk-center-page .risk-center-premium-hero::after {
    content: "RISIKOCENTER" !important;
    top: 88px !important;
    right: 12px !important;
    left: auto !important;
    width: 92vw !important;
    text-align: right !important;
    white-space: nowrap !important;
    font-size: clamp(3.4rem, 14vw, 5.2rem) !important;
    letter-spacing: -0.075em !important;
    color: rgba(255, 255, 255, 0.032) !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 0 !important;
  }

  .risk-center-page .risk-cockpit {
    width: min(100%, 620px) !important;
    max-width: 620px !important;
    margin-top: 0 !important;
    justify-self: center !important;
  }
}

@media (max-width: 680px) {
  .risk-center-page .risk-center-premium-title {
    font-size: clamp(2.5rem, 12vw, 3.45rem) !important;
  }

  .risk-center-page .risk-center-premium-lead {
    margin-top: 18px !important;
    font-size: 0.98rem !important;
  }

  .risk-center-page .risk-cockpit-body {
    padding: 14px !important;
    gap: 11px !important;
  }

  .risk-center-page .risk-cockpit-values div {
    min-height: 56px !important;
  }
}

/* =========================================================
   Phase 29D.19 - Risk-Center Wortmarke und Dropdown-Fix
   ========================================================= */

/* Der Header bildet einen eigenen hohen Stapelkontext. Dadurch liegt das
   geöffnete Untermenü zuverlässig vor Hero, Wortmarke und Produktgrafik. */
.site-header {
  z-index: 1000 !important;
  overflow: visible !important;
}

.main-nav,
.nav-menu-group {
  overflow: visible !important;
}

.nav-menu-group {
  z-index: 1001 !important;
}

.nav-submenu {
  z-index: 1010 !important;
}

.nav-menu-group.is-open .nav-submenu {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) !important;
}

/* Das Hintergrundwort steht höher im freien Bereich und bleibt hinter allen
   eigentlichen Inhalten. */
@media (min-width: 1121px) {
  .risk-center-page .risk-center-premium-hero::after {
    content: "RISIKO-CENTER" !important;
    top: 48px !important;
    right: 26px !important;
    width: min(64vw, 970px) !important;
    font-size: clamp(4.45rem, 6.65vw, 6.65rem) !important;
    color: rgba(255, 255, 255, 0.046) !important;
    text-shadow: 0 0 58px rgba(11, 115, 255, 0.068) !important;
  }
}

@media (min-width: 1121px) and (max-height: 820px) {
  .risk-center-page .risk-center-premium-hero::after {
    top: 42px !important;
    font-size: clamp(4.2rem, 6.25vw, 6.15rem) !important;
  }
}

@media (min-width: 821px) and (max-width: 1120px) {
  .risk-center-page .risk-center-premium-hero::after {
    content: "RISIKO-CENTER" !important;
    top: 38px !important;
    right: 18px !important;
    width: 90vw !important;
    font-size: clamp(3.9rem, 9.8vw, 6.25rem) !important;
  }
}

@media (max-width: 820px) {
  .risk-center-page .risk-center-premium-hero::after {
    content: "RISIKO-CENTER" !important;
    top: 34px !important;
    right: 10px !important;
    width: 94vw !important;
    font-size: clamp(3rem, 12.5vw, 4.8rem) !important;
  }
}

/* =========================================================
   Phase 29D.20 - Risk Radar kompakter Hero und Ampel im Viewport
   ========================================================= */

.risk-radar-page .risk-radar-premium-hero::after {
  content: none !important;
  display: none !important;
}

.risk-radar-page .risk-radar-premium-hero {
  min-height: 690px !important;
  padding: 92px 24px 24px !important;
  overflow: hidden !important;
}

.risk-radar-page .risk-radar-premium-inner {
  width: min(calc(100% - 48px), 1280px) !important;
  min-height: 430px !important;
  grid-template-columns: minmax(390px, 0.84fr) minmax(540px, 680px) !important;
  gap: clamp(38px, 4.2vw, 62px) !important;
  align-items: start !important;
}

.risk-radar-page .risk-radar-premium-copy {
  max-width: 555px !important;
  padding-top: 12px !important;
}

.risk-radar-page .risk-radar-premium-title {
  max-width: 540px !important;
  font-size: clamp(3.05rem, 4.35vw, 4.25rem) !important;
  line-height: 0.98 !important;
}

.risk-radar-page .risk-radar-premium-lead {
  max-width: 535px !important;
  margin-top: 17px !important;
  font-size: 0.98rem !important;
  line-height: 1.58 !important;
}

.risk-radar-page .risk-radar-premium-actions {
  margin-top: 20px !important;
  gap: 12px !important;
}

.risk-radar-page .risk-radar-premium-points {
  margin-top: 16px !important;
  gap: 8px 15px !important;
}

.risk-radar-page .risk-radar-hero-wordmark {
  width: fit-content;
  max-width: 100%;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.06);
  font-family: "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(3.25rem, 4.75vw, 4.75rem);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.065em;
  white-space: nowrap;
  text-shadow: 0 0 54px rgba(242, 201, 76, 0.045);
  pointer-events: none;
  user-select: none;
}

.risk-radar-page .market-risk-console {
  width: min(100%, 680px) !important;
  max-width: 680px !important;
  margin-top: 0 !important;
  justify-self: end !important;
  border-radius: 22px !important;
}

.risk-radar-page .market-risk-console-head {
  min-height: 62px !important;
  padding: 13px 18px !important;
}

.risk-radar-page .market-risk-console-head > div strong {
  margin-top: 3px !important;
  font-size: 0.94rem !important;
}

.risk-radar-page .market-risk-console-main {
  padding: 15px 18px 10px !important;
  grid-template-columns: 164px 1fr !important;
  gap: 18px !important;
}

.risk-radar-page .market-risk-dial {
  width: 156px !important;
}

.risk-radar-page .market-risk-dial::before {
  inset: 15px !important;
}

.risk-radar-page .market-risk-dial-inner strong {
  font-size: 2.25rem !important;
}

.risk-radar-page .market-risk-summary > strong {
  margin-top: 6px !important;
  font-size: 1.3rem !important;
}

.risk-radar-page .market-risk-summary p {
  margin-top: 7px !important;
  font-size: 0.74rem !important;
  line-height: 1.48 !important;
}

.risk-radar-page .market-risk-factor-list {
  padding: 0 18px 10px !important;
  gap: 4px !important;
}

.risk-radar-page .market-risk-factor-list > div {
  min-height: 27px !important;
  grid-template-columns: 96px 1fr 68px !important;
  gap: 10px !important;
}

.risk-radar-page .market-risk-factor-list span,
.risk-radar-page .market-risk-factor-list strong {
  font-size: 0.56rem !important;
}

.risk-radar-page .market-risk-console-footer {
  margin: 0 18px 9px !important;
  padding: 10px 12px !important;
  gap: 12px !important;
  border-radius: 12px !important;
}

.risk-radar-page .market-risk-console-footer small {
  font-size: 0.5rem !important;
}

.risk-radar-page .market-risk-console-footer strong {
  margin-top: 3px !important;
  font-size: 0.64rem !important;
}

.risk-radar-page .market-risk-note {
  padding: 0 18px 11px !important;
  font-size: 0.52rem !important;
}

.risk-radar-page .radar-state-navigation-hero {
  position: relative;
  z-index: 3;
  width: min(calc(100% - 48px), 1280px);
  margin: 16px auto 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.risk-radar-page .radar-state-navigation-hero .radar-state-navigation-inner {
  width: 100% !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.risk-radar-page .radar-state-navigation-hero .radar-state-card {
  min-height: 84px !important;
  padding: 13px 15px !important;
  gap: 11px !important;
  border-radius: 15px !important;
}

.risk-radar-page .radar-state-navigation-hero .radar-state-card strong {
  margin-top: 3px !important;
  font-size: 0.76rem !important;
}

.risk-radar-page .radar-state-navigation-hero .radar-state-card p {
  margin-top: 3px !important;
  font-size: 0.6rem !important;
  line-height: 1.38 !important;
}

@media (min-width: 1121px) and (max-height: 820px) {
  .risk-radar-page .risk-radar-premium-hero {
    min-height: 620px !important;
    padding-top: 84px !important;
    padding-bottom: 18px !important;
  }

  .risk-radar-page .risk-radar-premium-inner {
    min-height: 392px !important;
    grid-template-columns: minmax(370px, 0.82fr) minmax(520px, 640px) !important;
    gap: 36px !important;
  }

  .risk-radar-page .risk-radar-premium-copy {
    padding-top: 4px !important;
  }

  .risk-radar-page .risk-radar-premium-title {
    font-size: clamp(2.85rem, 4vw, 3.8rem) !important;
  }

  .risk-radar-page .risk-radar-premium-lead {
    margin-top: 14px !important;
    font-size: 0.92rem !important;
  }

  .risk-radar-page .risk-radar-premium-actions {
    margin-top: 16px !important;
  }

  .risk-radar-page .risk-radar-premium-points {
    margin-top: 12px !important;
  }

  .risk-radar-page .risk-radar-hero-wordmark {
    margin-top: 13px !important;
    font-size: clamp(3rem, 4.25vw, 4.1rem) !important;
  }

  .risk-radar-page .market-risk-console {
    width: min(100%, 640px) !important;
    max-width: 640px !important;
  }

  .risk-radar-page .market-risk-console-head {
    min-height: 56px !important;
    padding: 11px 16px !important;
  }

  .risk-radar-page .market-risk-console-main {
    padding: 12px 16px 8px !important;
    grid-template-columns: 142px 1fr !important;
    gap: 15px !important;
  }

  .risk-radar-page .market-risk-dial {
    width: 136px !important;
  }

  .risk-radar-page .market-risk-dial-inner strong {
    font-size: 2rem !important;
  }

  .risk-radar-page .market-risk-factor-list {
    padding: 0 16px 7px !important;
  }

  .risk-radar-page .market-risk-factor-list > div {
    min-height: 24px !important;
  }

  .risk-radar-page .market-risk-console-footer {
    margin: 0 16px 7px !important;
    padding: 8px 10px !important;
  }

  .risk-radar-page .market-risk-note {
    padding: 0 16px 8px !important;
  }

  .risk-radar-page .radar-state-navigation-hero {
    margin-top: 11px !important;
  }

  .risk-radar-page .radar-state-navigation-hero .radar-state-card {
    min-height: 72px !important;
    padding: 10px 13px !important;
  }
}

@media (min-width: 821px) and (max-width: 1120px) {
  .risk-radar-page .risk-radar-premium-hero {
    min-height: auto !important;
    padding: 94px 24px 30px !important;
  }

  .risk-radar-page .risk-radar-premium-inner {
    width: min(calc(100% - 48px), 900px) !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }

  .risk-radar-page .risk-radar-premium-copy {
    max-width: 690px !important;
    padding-top: 0 !important;
  }

  .risk-radar-page .risk-radar-hero-wordmark {
    font-size: clamp(3.4rem, 9vw, 5.4rem) !important;
  }

  .risk-radar-page .market-risk-console {
    width: min(100%, 700px) !important;
    max-width: 700px !important;
    justify-self: center !important;
  }

  .risk-radar-page .radar-state-navigation-hero {
    width: min(calc(100% - 48px), 900px) !important;
    margin-top: 22px !important;
  }
}

@media (max-width: 820px) {
  .risk-radar-page .risk-radar-premium-hero {
    min-height: auto !important;
    padding: 88px 16px 34px !important;
  }

  .risk-radar-page .risk-radar-premium-inner {
    width: min(100%, 720px) !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .risk-radar-page .risk-radar-premium-copy {
    padding-top: 0 !important;
  }

  .risk-radar-page .risk-radar-premium-title {
    font-size: clamp(2.45rem, 11.5vw, 3.45rem) !important;
  }

  .risk-radar-page .risk-radar-hero-wordmark {
    margin-top: 16px !important;
    font-size: clamp(2.85rem, 13vw, 4.35rem) !important;
    white-space: normal !important;
  }

  .risk-radar-page .market-risk-console {
    width: min(100%, 640px) !important;
    max-width: 640px !important;
    justify-self: center !important;
  }

  .risk-radar-page .radar-state-navigation-hero {
    width: min(100%, 720px) !important;
    margin-top: 22px !important;
  }

  .risk-radar-page .radar-state-navigation-hero .radar-state-navigation-inner {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  .risk-radar-page .risk-radar-premium-actions .button {
    width: 100% !important;
  }

  .risk-radar-page .market-risk-console-main {
    grid-template-columns: 1fr !important;
  }

  .risk-radar-page .market-risk-dial {
    margin: 0 auto !important;
  }

  .risk-radar-page .market-risk-factor-list > div {
    grid-template-columns: 84px 1fr !important;
  }

  .risk-radar-page .market-risk-factor-list strong {
    display: none !important;
  }

  .risk-radar-page .market-risk-console-footer {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   Phase 29D.21 - Global stabiles Risk-Center-Klickmenue
   Native details/summary: funktioniert auch ohne JavaScript.
   ========================================================= */

.site-header {
  z-index: 5000 !important;
  overflow: visible !important;
  isolation: isolate;
}

.main-nav,
.main-nav .nav-menu-group {
  overflow: visible !important;
}

.main-nav details.nav-menu-group {
  position: relative;
  z-index: 5001;
  display: flex;
  align-items: center;
}

.main-nav summary.nav-menu-main {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 0;
  color: rgba(255, 255, 255, 0.88);
  font: inherit;
  font-weight: 700;
  line-height: inherit;
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: color var(--transition);
}

.main-nav summary.nav-menu-main::-webkit-details-marker {
  display: none;
}

.main-nav summary.nav-menu-main::marker {
  content: "";
}

.main-nav summary.nav-menu-main::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: var(--color-blue);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition);
}

.main-nav details.nav-menu-group:hover summary.nav-menu-main,
.main-nav details.nav-menu-group[open] summary.nav-menu-main,
.main-nav details.nav-menu-group.is-active summary.nav-menu-main {
  color: #1590ff;
}

.main-nav details.nav-menu-group:hover summary.nav-menu-main::after,
.main-nav details.nav-menu-group[open] summary.nav-menu-main::after,
.main-nav details.nav-menu-group.is-active summary.nav-menu-main::after {
  transform: scaleX(1);
}

.main-nav details.nav-menu-group[open] .nav-menu-chevron {
  color: var(--color-blue);
  transform: rotate(180deg);
}

.main-nav details.nav-menu-group .nav-submenu {
  z-index: 5010 !important;
}

.main-nav details.nav-menu-group[open] .nav-submenu {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) !important;
}

@media (min-width: 1121px) {
  .main-nav details.nav-menu-group .nav-submenu {
    display: grid;
  }
}

@media (max-width: 1120px) {
  .main-nav details.nav-menu-group .nav-submenu {
    display: none !important;
  }
}

/* =========================================================
   Phase 29D.22 - Risk Radar One-Screen Hero
   Kompakter erster Bereich mit vollstaendiger Grafik und Ampelfeldern.
   ========================================================= */

@media (min-width: 1121px) {
  .risk-radar-page .risk-radar-premium-hero {
    min-height: 620px !important;
    padding: 32px 24px 16px !important;
  }

  .risk-radar-page .risk-radar-premium-inner {
    width: min(calc(100% - 48px), 1240px) !important;
    min-height: 382px !important;
    grid-template-columns: minmax(420px, 1fr) minmax(520px, 620px) !important;
    gap: clamp(28px, 3vw, 42px) !important;
    align-items: start !important;
  }

  .risk-radar-page .risk-radar-premium-copy {
    position: relative !important;
    max-width: 560px !important;
    min-height: 382px !important;
    padding-top: 4px !important;
  }

  .risk-radar-page .eyebrow {
    margin-bottom: 15px !important;
    padding: 8px 15px !important;
  }

  .risk-radar-page .risk-radar-premium-title {
    max-width: 535px !important;
    font-size: clamp(3rem, 3.7vw, 3.55rem) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.068em !important;
  }

  .risk-radar-page .risk-radar-premium-lead {
    max-width: 520px !important;
    margin-top: 13px !important;
    font-size: 0.91rem !important;
    line-height: 1.48 !important;
  }

  .risk-radar-page .risk-radar-premium-actions {
    margin-top: 15px !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }

  .risk-radar-page .risk-radar-premium-actions .button {
    min-height: 48px !important;
    min-width: 0 !important;
    padding: 11px 18px !important;
    font-size: 0.86rem !important;
  }

  .risk-radar-page .risk-radar-premium-actions .button-primary {
    width: 224px !important;
  }

  .risk-radar-page .risk-radar-premium-actions .button-secondary {
    width: 214px !important;
  }

  .risk-radar-page .risk-radar-premium-points {
    margin-top: 11px !important;
    gap: 7px 14px !important;
  }

  .risk-radar-page .risk-radar-premium-points span {
    padding-left: 14px !important;
    font-size: 0.69rem !important;
  }

  .risk-radar-page .risk-radar-hero-wordmark {
    position: absolute !important;
    z-index: 0 !important;
    left: 0 !important;
    bottom: -20px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.052) !important;
    font-size: clamp(3.15rem, 4.25vw, 4.25rem) !important;
    line-height: 0.82 !important;
    letter-spacing: -0.06em !important;
    white-space: nowrap !important;
    text-shadow: 0 0 44px rgba(242, 201, 76, 0.04) !important;
  }

  .risk-radar-page .market-risk-console {
    width: min(100%, 620px) !important;
    max-width: 620px !important;
    margin-top: 0 !important;
    border-radius: 20px !important;
  }

  .risk-radar-page .market-risk-console-head {
    min-height: 52px !important;
    padding: 10px 16px !important;
  }

  .risk-radar-page .market-risk-console-head > div span {
    font-size: 0.59rem !important;
  }

  .risk-radar-page .market-risk-console-head > div strong {
    margin-top: 2px !important;
    font-size: 0.88rem !important;
  }

  .risk-radar-page .market-risk-status {
    min-height: 29px !important;
    padding: 5px 11px !important;
    font-size: 0.65rem !important;
  }

  .risk-radar-page .market-risk-console-main {
    padding: 10px 16px 7px !important;
    grid-template-columns: 126px 1fr !important;
    gap: 15px !important;
  }

  .risk-radar-page .market-risk-dial {
    width: 118px !important;
  }

  .risk-radar-page .market-risk-dial::before {
    inset: 13px !important;
  }

  .risk-radar-page .market-risk-dial-inner small,
  .risk-radar-page .market-risk-dial-inner span {
    font-size: 0.52rem !important;
  }

  .risk-radar-page .market-risk-dial-inner strong {
    font-size: 1.9rem !important;
  }

  .risk-radar-page .market-risk-summary > span {
    font-size: 0.56rem !important;
  }

  .risk-radar-page .market-risk-summary > strong {
    margin-top: 4px !important;
    font-size: 1.16rem !important;
  }

  .risk-radar-page .market-risk-summary p {
    margin-top: 5px !important;
    font-size: 0.68rem !important;
    line-height: 1.4 !important;
  }

  .risk-radar-page .market-risk-factor-list {
    padding: 0 16px 6px !important;
    gap: 2px !important;
  }

  .risk-radar-page .market-risk-factor-list > div {
    min-height: 22px !important;
    grid-template-columns: 88px 1fr 64px !important;
    gap: 8px !important;
  }

  .risk-radar-page .market-risk-factor-list span,
  .risk-radar-page .market-risk-factor-list strong {
    font-size: 0.52rem !important;
  }

  .risk-radar-page .market-risk-factor-list i {
    height: 4px !important;
  }

  .risk-radar-page .market-risk-console-footer {
    margin: 0 16px 6px !important;
    padding: 8px 10px !important;
    gap: 10px !important;
    border-radius: 11px !important;
  }

  .risk-radar-page .market-risk-console-footer small {
    font-size: 0.46rem !important;
  }

  .risk-radar-page .market-risk-console-footer strong {
    margin-top: 2px !important;
    font-size: 0.59rem !important;
  }

  .risk-radar-page .market-risk-note {
    padding: 0 16px 8px !important;
    font-size: 0.48rem !important;
  }

  .risk-radar-page .radar-state-navigation-hero {
    width: min(calc(100% - 48px), 1240px) !important;
    margin: 9px auto 0 !important;
  }

  .risk-radar-page .radar-state-navigation-hero .radar-state-navigation-inner {
    gap: 10px !important;
  }

  .risk-radar-page .radar-state-navigation-hero .radar-state-card {
    min-height: 68px !important;
    padding: 9px 13px !important;
    gap: 10px !important;
    border-radius: 14px !important;
  }

  .risk-radar-page .radar-state-navigation-hero .radar-state-dot {
    width: 16px !important;
    height: 16px !important;
  }

  .risk-radar-page .radar-state-navigation-hero .radar-state-card small {
    font-size: 0.49rem !important;
  }

  .risk-radar-page .radar-state-navigation-hero .radar-state-card strong {
    margin-top: 2px !important;
    font-size: 0.7rem !important;
  }

  .risk-radar-page .radar-state-navigation-hero .radar-state-card p {
    margin-top: 2px !important;
    font-size: 0.55rem !important;
    line-height: 1.3 !important;
  }
}

@media (min-width: 1121px) and (max-height: 820px) {
  .risk-radar-page .risk-radar-premium-hero {
    min-height: 560px !important;
    padding-top: 22px !important;
    padding-bottom: 12px !important;
  }

  .risk-radar-page .risk-radar-premium-inner {
    min-height: 348px !important;
    grid-template-columns: minmax(400px, 1fr) minmax(500px, 585px) !important;
    gap: 26px !important;
  }

  .risk-radar-page .risk-radar-premium-copy {
    min-height: 348px !important;
    padding-top: 0 !important;
  }

  .risk-radar-page .eyebrow {
    margin-bottom: 11px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }

  .risk-radar-page .risk-radar-premium-title {
    font-size: clamp(2.72rem, 3.5vw, 3.25rem) !important;
  }

  .risk-radar-page .risk-radar-premium-lead {
    margin-top: 10px !important;
    font-size: 0.84rem !important;
    line-height: 1.42 !important;
  }

  .risk-radar-page .risk-radar-premium-actions {
    margin-top: 12px !important;
  }

  .risk-radar-page .risk-radar-premium-actions .button {
    min-height: 44px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  .risk-radar-page .risk-radar-premium-points {
    margin-top: 8px !important;
  }

  .risk-radar-page .risk-radar-hero-wordmark {
    bottom: -10px !important;
    font-size: clamp(2.85rem, 3.85vw, 3.7rem) !important;
  }

  .risk-radar-page .market-risk-console {
    max-width: 585px !important;
  }

  .risk-radar-page .market-risk-console-head {
    min-height: 48px !important;
  }

  .risk-radar-page .market-risk-console-main {
    grid-template-columns: 112px 1fr !important;
    padding-top: 8px !important;
    padding-bottom: 5px !important;
  }

  .risk-radar-page .market-risk-dial {
    width: 104px !important;
  }

  .risk-radar-page .market-risk-dial-inner strong {
    font-size: 1.72rem !important;
  }

  .risk-radar-page .market-risk-factor-list > div {
    min-height: 19px !important;
  }

  .risk-radar-page .market-risk-console-footer {
    padding: 6px 9px !important;
  }

  .risk-radar-page .radar-state-navigation-hero {
    margin-top: 6px !important;
  }

  .risk-radar-page .radar-state-navigation-hero .radar-state-card {
    min-height: 61px !important;
    padding: 7px 11px !important;
  }
}

@media (min-width: 821px) and (max-width: 1120px) {
  .risk-radar-page .risk-radar-premium-hero {
    padding-top: 42px !important;
  }
}


/* =========================================================
   Phase 29D.23 - Risk Radar Hoehe und Wordmark
   Entfernt unnoetige Resthoehe und macht RISK-RADAR sichtbarer.
   ========================================================= */

@media (min-width: 1121px) {
  .risk-radar-page .risk-radar-premium-hero {
    min-height: 548px !important;
    padding-top: 30px !important;
    padding-bottom: 10px !important;
  }

  .risk-radar-page .risk-radar-premium-inner {
    min-height: 372px !important;
  }

  .risk-radar-page .risk-radar-premium-copy {
    min-height: 372px !important;
  }

  .risk-radar-page .risk-radar-hero-wordmark {
    left: -4px !important;
    bottom: -2px !important;
    color: rgba(255, 255, 255, 0.078) !important;
    font-size: clamp(4.35rem, 5.7vw, 5.55rem) !important;
    font-weight: 800 !important;
    line-height: 0.78 !important;
    letter-spacing: -0.072em !important;
    text-shadow:
      0 0 38px rgba(34, 143, 255, 0.08),
      0 0 68px rgba(242, 201, 76, 0.035) !important;
  }

  .risk-radar-page .radar-state-navigation-hero {
    margin-top: 6px !important;
  }
}

@media (min-width: 1121px) and (max-height: 820px) {
  .risk-radar-page .risk-radar-premium-hero {
    min-height: 520px !important;
    padding-top: 22px !important;
    padding-bottom: 8px !important;
  }

  .risk-radar-page .risk-radar-hero-wordmark {
    bottom: -1px !important;
    font-size: clamp(3.8rem, 5vw, 4.8rem) !important;
  }
}

@media (min-width: 821px) and (max-width: 1120px) {
  .risk-radar-page .risk-radar-hero-wordmark {
    color: rgba(255, 255, 255, 0.072) !important;
    font-size: clamp(3.45rem, 8.2vw, 4.8rem) !important;
    text-shadow: 0 0 42px rgba(34, 143, 255, 0.07) !important;
  }
}

/* =========================================================
   Phase 29D.24 - Risk Radar Balance und Zentrierung
   Etwas mehr Hero-Hoehe und mittig gesetztes Hintergrundwort.
   ========================================================= */

@media (min-width: 1121px) {
  .risk-radar-page .risk-radar-premium-hero {
    min-height: 578px !important;
    padding-top: 30px !important;
    padding-bottom: 14px !important;
  }

  .risk-radar-page .risk-radar-premium-inner {
    min-height: 390px !important;
  }

  .risk-radar-page .risk-radar-premium-copy {
    min-height: 390px !important;
  }

  .risk-radar-page .risk-radar-hero-wordmark {
    left: 50% !important;
    bottom: -7px !important;
    width: max-content !important;
    max-width: none !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.084) !important;
    font-size: clamp(4.8rem, 6.2vw, 6.05rem) !important;
    line-height: 0.78 !important;
    letter-spacing: -0.07em !important;
    text-shadow:
      0 0 42px rgba(34, 143, 255, 0.09),
      0 0 72px rgba(242, 201, 76, 0.04) !important;
  }

  .risk-radar-page .radar-state-navigation-hero {
    margin-top: 9px !important;
  }
}

@media (min-width: 1121px) and (max-height: 820px) {
  .risk-radar-page .risk-radar-premium-hero {
    min-height: 542px !important;
    padding-top: 23px !important;
    padding-bottom: 10px !important;
  }

  .risk-radar-page .risk-radar-premium-inner,
  .risk-radar-page .risk-radar-premium-copy {
    min-height: 360px !important;
  }

  .risk-radar-page .risk-radar-hero-wordmark {
    bottom: -5px !important;
    font-size: clamp(4.25rem, 5.55vw, 5.35rem) !important;
  }
}

@media (min-width: 821px) and (max-width: 1120px) {
  .risk-radar-page .risk-radar-hero-wordmark {
    left: 50% !important;
    width: max-content !important;
    max-width: none !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.078) !important;
    font-size: clamp(3.8rem, 9vw, 5.15rem) !important;
  }
}

/* =========================================================
   Phase 29D.25 - Risk Radar Aufteilung und sichtbare Wortmarke
   Bestehende Zweispalten-Aufteilung bewahren und RISK-RADAR klarer zeigen.
   ========================================================= */

@media (min-width: 1121px) {
  .risk-radar-page .risk-radar-premium-hero {
    min-height: 562px !important;
    height: auto !important;
    padding-top: 24px !important;
    padding-bottom: 10px !important;
  }

  .risk-radar-page .risk-radar-premium-inner {
    width: min(calc(100% - 48px), 1240px) !important;
    min-height: 382px !important;
    grid-template-columns: minmax(500px, 0.94fr) minmax(590px, 680px) !important;
    gap: clamp(34px, 3.4vw, 50px) !important;
    align-items: start !important;
  }

  .risk-radar-page .risk-radar-premium-copy {
    max-width: 590px !important;
    min-height: 382px !important;
    padding-top: 1px !important;
  }

  .risk-radar-page .risk-radar-premium-title {
    max-width: 590px !important;
    font-size: clamp(3.05rem, 3.9vw, 3.75rem) !important;
    line-height: 0.94 !important;
    letter-spacing: -0.067em !important;
  }

  .risk-radar-page .risk-radar-premium-lead {
    max-width: 570px !important;
    margin-top: 12px !important;
    font-size: 0.88rem !important;
    line-height: 1.48 !important;
  }

  .risk-radar-page .risk-radar-premium-actions {
    margin-top: 14px !important;
  }

  .risk-radar-page .risk-radar-premium-points {
    margin-top: 10px !important;
  }

  /* Die Wortmarke bleibt mittig unter dem linken Textblock. Sie ist jetzt
     deutlicher, aber weiterhin transparent und klar hinter dem Inhalt. */
  .risk-radar-page .risk-radar-hero-wordmark {
    left: 50% !important;
    bottom: -6px !important;
    width: max-content !important;
    max-width: none !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    color: rgba(135, 177, 208, 0.145) !important;
    font-size: clamp(5.15rem, 6.55vw, 6.35rem) !important;
    font-weight: 800 !important;
    line-height: 0.76 !important;
    letter-spacing: -0.068em !important;
    text-shadow:
      0 0 34px rgba(34, 143, 255, 0.14),
      0 0 64px rgba(34, 143, 255, 0.065) !important;
  }

  .risk-radar-page .market-risk-console {
    width: min(100%, 680px) !important;
    max-width: 680px !important;
    justify-self: end !important;
    margin-top: 0 !important;
  }

  .risk-radar-page .radar-state-navigation-hero {
    width: min(calc(100% - 48px), 1240px) !important;
    margin: 7px auto 0 !important;
  }

  .risk-radar-page .radar-state-navigation-hero .radar-state-card {
    min-height: 68px !important;
    padding: 9px 13px !important;
  }
}

@media (min-width: 1121px) and (max-height: 820px) {
  .risk-radar-page .risk-radar-premium-hero {
    min-height: 532px !important;
    padding-top: 17px !important;
    padding-bottom: 8px !important;
  }

  .risk-radar-page .risk-radar-premium-inner,
  .risk-radar-page .risk-radar-premium-copy {
    min-height: 352px !important;
  }

  .risk-radar-page .risk-radar-premium-title {
    font-size: clamp(2.8rem, 3.55vw, 3.35rem) !important;
  }

  .risk-radar-page .risk-radar-hero-wordmark {
    bottom: -4px !important;
    color: rgba(135, 177, 208, 0.135) !important;
    font-size: clamp(4.55rem, 5.85vw, 5.65rem) !important;
  }

  .risk-radar-page .radar-state-navigation-hero .radar-state-card {
    min-height: 62px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }
}

@media (min-width: 821px) and (max-width: 1120px) {
  .risk-radar-page .risk-radar-hero-wordmark {
    left: 50% !important;
    width: max-content !important;
    max-width: none !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    color: rgba(135, 177, 208, 0.12) !important;
    font-size: clamp(4rem, 9.2vw, 5.35rem) !important;
    text-shadow: 0 0 42px rgba(34, 143, 255, 0.11) !important;
  }
}

@media (max-width: 820px) {
  .risk-radar-page .risk-radar-hero-wordmark {
    color: rgba(135, 177, 208, 0.09) !important;
    text-shadow: 0 0 34px rgba(34, 143, 255, 0.08) !important;
  }
}

/* =========================================================
   Phase 29D.26 - Risk Radar Grafik groesser, Ampelfelder tiefer
   Nur die beiden abgestimmten Desktop-Korrekturen.
   ========================================================= */

@media (min-width: 1121px) {
  /* Mehr nutzbare Breite fuer das Marktumfeld, ohne den linken Textblock
     zu beschneiden. */
  .risk-radar-page .risk-radar-premium-inner {
    width: min(calc(100% - 48px), 1400px) !important;
    grid-template-columns: minmax(470px, 1fr) minmax(660px, 740px) !important;
    gap: clamp(30px, 2.7vw, 42px) !important;
  }

  .risk-radar-page .market-risk-console {
    width: min(100%, 740px) !important;
    max-width: 740px !important;
    min-height: 410px !important;
  }

  .risk-radar-page .market-risk-console-head {
    min-height: 58px !important;
    padding: 12px 18px !important;
  }

  .risk-radar-page .market-risk-console-main {
    grid-template-columns: 138px 1fr !important;
    gap: 18px !important;
    padding: 13px 18px 9px !important;
  }

  .risk-radar-page .market-risk-dial {
    width: 130px !important;
  }

  .risk-radar-page .market-risk-dial-inner strong {
    font-size: 2.02rem !important;
  }

  .risk-radar-page .market-risk-summary > strong {
    font-size: 1.24rem !important;
  }

  .risk-radar-page .market-risk-summary p {
    font-size: 0.72rem !important;
  }

  .risk-radar-page .market-risk-factor-list {
    padding: 0 18px 8px !important;
  }

  .risk-radar-page .market-risk-factor-list > div {
    min-height: 24px !important;
    grid-template-columns: 94px 1fr 70px !important;
  }

  .risk-radar-page .market-risk-factor-list span,
  .risk-radar-page .market-risk-factor-list strong {
    font-size: 0.55rem !important;
  }

  .risk-radar-page .market-risk-console-footer {
    margin: 0 18px 8px !important;
    padding: 9px 11px !important;
  }

  .risk-radar-page .market-risk-note {
    padding: 0 18px 10px !important;
    font-size: 0.5rem !important;
  }

  /* Die drei Ampelfelder bewusst etwas unterhalb der beiden Hauptbereiche
     platzieren. */
  .risk-radar-page .radar-state-navigation-hero {
    width: min(calc(100% - 48px), 1400px) !important;
    margin-top: 28px !important;
  }
}

@media (min-width: 1121px) and (max-height: 820px) {
  .risk-radar-page .risk-radar-premium-hero {
    min-height: 575px !important;
  }

  .risk-radar-page .risk-radar-premium-inner {
    grid-template-columns: minmax(455px, 1fr) minmax(640px, 720px) !important;
  }

  .risk-radar-page .market-risk-console {
    width: min(100%, 720px) !important;
    max-width: 720px !important;
    min-height: 396px !important;
  }

  .risk-radar-page .market-risk-console-main {
    grid-template-columns: 130px 1fr !important;
  }

  .risk-radar-page .market-risk-dial {
    width: 122px !important;
  }

  .risk-radar-page .radar-state-navigation-hero {
    margin-top: 24px !important;
  }
}

/* =========================================================
   Phase 29D.27 - Risk Radar Titel kompakter
   Verkleinert die Hero-Ueberschrift, damit die transparente Wortmarke
   RISK-RADAR klarer sichtbar bleibt.
   ========================================================= */

@media (min-width: 1121px) {
  .risk-radar-page .risk-radar-premium-title {
    max-width: 590px !important;
    font-size: clamp(2.65rem, 3.05vw, 2.95rem) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.061em !important;
  }
}

@media (min-width: 1121px) and (max-height: 820px) {
  .risk-radar-page .risk-radar-premium-title {
    font-size: clamp(2.45rem, 2.85vw, 2.72rem) !important;
    line-height: 0.95 !important;
  }
}

/* =========================================================
   Phase 29D.28 - Bulle und Bär im Faktorenbereich
   Füllt die freie obere Fläche ohne zusätzliche Karte oder Bildrahmen.
   ========================================================= */

.risk-radar-page #faktoren .radar-factor-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.1fr);
  gap: clamp(36px, 5vw, 82px);
  align-items: center;
  margin-bottom: 34px;
}

.risk-radar-page #faktoren .radar-factor-intro .section-heading {
  margin-bottom: 0;
}

.risk-radar-page #faktoren .radar-market-duel {
  position: relative;
  min-height: 230px;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
}

.risk-radar-page #faktoren .radar-market-duel::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 17px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 91, 103, 0.22) 22%,
    rgba(99, 137, 175, 0.16) 50%,
    rgba(49, 229, 164, 0.22) 78%,
    transparent
  );
  box-shadow: 0 0 24px rgba(38, 139, 255, 0.12);
  z-index: 1;
}

.risk-radar-page #faktoren .radar-market-glow {
  position: absolute;
  top: 22%;
  width: 44%;
  height: 60%;
  border-radius: 50%;
  filter: blur(54px);
  opacity: 0.34;
  z-index: 0;
}

.risk-radar-page #faktoren .radar-market-glow-bear {
  left: 2%;
  background: rgba(255, 57, 82, 0.28);
}

.risk-radar-page #faktoren .radar-market-glow-bull {
  right: 2%;
  background: rgba(33, 224, 145, 0.28);
}

.risk-radar-page #faktoren .radar-market-animal {
  position: absolute;
  bottom: 0;
  width: 54%;
  margin: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  z-index: 2;
}

.risk-radar-page #faktoren .radar-market-animal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0.68;
  mask-image: linear-gradient(180deg, black 0%, black 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 78%, transparent 100%);
}

.risk-radar-page #faktoren .radar-market-bear {
  left: -1%;
}

.risk-radar-page #faktoren .radar-market-bear img {
  transform: scaleX(-1) translateX(-2%);
  filter:
    saturate(1.08)
    brightness(0.92)
    contrast(1.08)
    drop-shadow(0 0 18px rgba(255, 62, 83, 0.28));
}

.risk-radar-page #faktoren .radar-market-bull {
  right: -1%;
}

.risk-radar-page #faktoren .radar-market-bull img {
  transform: scaleX(-1) translateX(-2%);
  filter:
    saturate(1.08)
    brightness(0.94)
    contrast(1.06)
    drop-shadow(0 0 18px rgba(39, 229, 151, 0.28));
}

.risk-radar-page #faktoren .radar-market-center-line {
  position: absolute;
  left: 50%;
  top: 27%;
  bottom: 16%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    transparent,
    rgba(120, 170, 220, 0.18),
    transparent
  );
  z-index: 1;
}

@media (min-width: 1121px) and (max-height: 820px) {
  .risk-radar-page #faktoren .radar-factor-intro {
    margin-bottom: 28px;
  }

  .risk-radar-page #faktoren .radar-market-duel {
    min-height: 205px;
  }
}

@media (min-width: 821px) and (max-width: 1120px) {
  .risk-radar-page #faktoren .radar-factor-intro {
    grid-template-columns: minmax(0, 0.95fr) minmax(390px, 1.05fr);
    gap: 32px;
    margin-bottom: 30px;
  }

  .risk-radar-page #faktoren .radar-market-duel {
    min-height: 195px;
  }
}

@media (max-width: 820px) {
  .risk-radar-page #faktoren .radar-factor-intro {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 24px;
  }

  .risk-radar-page #faktoren .radar-market-duel {
    min-height: 190px;
  }

  .risk-radar-page #faktoren .radar-market-animal {
    width: 58%;
  }

  .risk-radar-page #faktoren .radar-market-animal img {
    opacity: 0.58;
  }
}

@media (max-width: 520px) {
  .risk-radar-page #faktoren .radar-market-duel {
    min-height: 154px;
  }

  .risk-radar-page #faktoren .radar-market-glow {
    filter: blur(38px);
  }
}


/* =========================================================
   Phase 29D.29 - Linien bei Bulle und Bär entfernt
   Entfernt die horizontale Bodenlinie und die vertikale Trennlinie.
   ========================================================= */

.risk-radar-page #faktoren .radar-market-duel::before,
.risk-radar-page #faktoren .radar-market-center-line {
  display: none !important;
  content: none !important;
}