/* Cashare Global Styles - BEM */

/* Google Fonts - Plus Jakarta Sans */


/* Foundation */
/* variables.css */
/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
  /* ==========================================================================
     Brand Colors
     ========================================================================== */

  /* Primary Brand Colors */
  --color-primary: #007399;
  --color-secondary: #00b5ce;
  --color-primary-light: #d0f3ff;
  --color-primary-subtle: #d2faff;

  /* Text Colors */
  --color-text: #091124;
  --color-accent: #00d924;

  /* ==========================================================================
     Dark Colors (for text, backgrounds, UI elements)
     ========================================================================== */
  --color-dark-1: #2a3547;
  --color-dark-2: #5a6a85;
  --color-dark-3: #7c8fac;
  --color-dark-4: #dfe5ef;

  /* ==========================================================================
     Light Colors (for backgrounds, borders, subtle UI)
     ========================================================================== */
  --color-light-1: #c7c9d9;
  --color-light-2: #e0e3eb;
  --color-light-3: #ebeef5;
  --color-light-4: #f5f7fa;

  /* ==========================================================================
     State Colors
     ========================================================================== */
  --color-error: #fa896b;
  --color-warning: #ffae1f;
  --color-info: #539bff;
  --color-success: #13deb9;
  /* Warnfläche für Risikohinweise (CAS-2983 §6, Privatanleger) —
     Schrift #92400e auf #fffaf2: 6.8:1 */
  --color-tint-warning: #fffaf2;
  --color-border-warning: #f4e3c8;
  --color-accent-warning: #92400e;

  /* ==========================================================================
     Neutral Colors (legacy, for backwards compatibility)
     ========================================================================== */
  --color-text-light: #3f4e53;
  --color-gray-dark: #424748;
  --color-gray: #929292;
  --color-gray-light: #8e8f8f;
  --color-silver: #c4c4c4;
  --color-white: #fff;
  --color-border: #e5e5e5;
  --color-bg-light: #f5f5f5;
  --color-bg-section: linear-gradient(
    to bottom,
    white 0%,
    #f9fafb 15%,
    #f9fafb 85%,
    white 100%
  );
  --color-bg-section-solid: #f9fafb;

  /* ==========================================================================
     Icon Tile Tint (the 64px tiles on the product cards)

     Eine Spur heller als frueher (#e0edf3): --color-primary lag darauf nur
     bei 4.49:1 und verfehlte AA knapp. Mit #e8f3f8 sind es 4.76:1 — damit
     liegt der neutrale Rueckfall im selben Band wie die Weltfarben
     (4.5-6.9:1 auf ihrem jeweiligen Tint).
     ========================================================================== */
  --color-tint-primary: #e8f3f8;

  /* ==========================================================================
     Welt-Akzente — Tint fuer Flaechen, Ink fuer Strich und Label

     Je Produktwelt ein Paar. Die Ink-Werte liegen auf ihrem Tint ueber
     4.5:1; die Markenfarbe #00d924 erreicht auf Weiss nur etwa 1.8:1 und
     taugt deshalb nicht als Text- oder Strichfarbe.
     ========================================================================== */
  --color-accent-private: #7b4bd8;
  --color-tint-private: #f1eafe;
  /* #d31f66 aus der Vorlage erreicht auf seinem Tint nur 4.38:1 —
     eine Spur dunkler, gleicher Farbton, damit es AA haelt. */
  --color-accent-sme: #cf1e64;
  --color-tint-sme: #fdeaf2;
  --color-accent-hypo: #0153c6;
  --color-tint-hypo: #e7f0fe;
  /* Private und institutionelle Anleger teilen die Welt — Entscheid
     22.09.2026: gleiches Produkt, zwei Zielgruppen; Gelb (#ffd849, 1.4:1)
     und Orange (#fe9503, 2.2:1) tragen als Schrift/Icon nicht. */
  --color-accent-investing: #0d7c27;
  --color-tint-investing: #e8f8ea;
  /* Embedded Lending (Partner/Agenten), aus den Landing Pages abgeleitet.
     Alle Farben dort liegen im Petrol-Farbton der Marke; unterscheidbar
     wird die Welt durch die Kombination: dunkles Tile (Navy) mit
     Sky-Glyph (8.2:1), Tiefpetrol als Schrift (8.1:1 auf Weiss). */
  --color-accent-embedded: #005772;
  --color-tint-embedded: #e1f0f5;
  --color-surface-embedded: #091124;
  --color-glyph-embedded: #3fb9d9;

  /* Hero-Verlauf: der Akzent selbst ist zu dunkel, um Text zu tragen
     (#7b4bd8 gibt ink-80 nur 2.3:1). Dieser Ton haelt denselben Farbton,
     liegt aber bei ink-80 auf 5.4:1 — ueber der 5.0:1, die
     --color-secondary im Mesh ohnehin als Untergrenze setzt. */
  --color-mesh-private: #b39dff;
  /* Dieselbe Ueberlegung fuer KMU und Hypothek: der Weltakzent ist als
     Verlaufsfarbe zu dunkel. Gemessen gegen ink-80 (#2a3547):
     #ff9ec4 = 6.4:1, #8ab4ff = 5.9:1 — beide ueber der 5.0:1, die
     --color-secondary im Mesh ohnehin als Untergrenze setzt. */
  --color-mesh-sme: #ff9ec4;
  --color-mesh-hypo: #8ab4ff;
  /* Je Welt ein zweiter, hellerer Ton. Der Verlauf traegt seit dem
     23.09.2026 nur noch Farben der eigenen Zielgruppe - vorher steckte in
     jedem Mesh das Marken-Cyan, dadurch sahen alle Seiten gleich aus und
     der Cyan-CTA verschwand im Hintergrund.
     Alle Toene gegen ink-80 gemessen, Untergrenze 5.0:1:
     privat 5.4/9.0 - KMU 6.4/9.4 - Hypothek 5.9/9.3 -
     Anleger 7.2/9.9 - neutral 8.5/10.6 */
  --color-mesh-private-soft: #e0d6ff;
  --color-mesh-sme-soft: #ffd6e6;
  --color-mesh-hypo-soft: #cfe0ff;
  --color-mesh-investing: #7fd98f;
  --color-mesh-investing-soft: #c9f0d1;
  --color-mesh-neutral: #8fe3f0;
  --color-mesh-neutral-soft: #d0f3ff;

  /* Kontrastebene ueber farbigen Koepfen — wie im Hero der Startseite */
  --veil-hero: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.93) 0px,
    rgba(255, 255, 255, 0.55) 180px,
    rgba(255, 255, 255, 0) 320px
  );

  /* ==========================================================================
     Footer Surface
     ========================================================================== */
  --color-footer-start: #fff;
  --color-footer-mid: #f4fdfc;
  --color-footer-end: #eaf8fb;

  /* Service Colors */
  --color-borrowing: #11efe3;
  --color-investing: #00d924;

  /* Borrower Service Gradients */
  --gradient-borrower-private: linear-gradient(
    135deg,
    #9966ff 0%,
    #11efe3 100%
  );
  --gradient-borrower-sme: linear-gradient(135deg, #fa4b8c 0%, #11efe3 100%);
  --gradient-borrower-hypo: linear-gradient(135deg, #0153c6 0%, #11efe3 100%);

  /* Investor Service Gradients */
  --gradient-investor-private: linear-gradient(
    135deg,
    #ffd849 0%,
    #00d924 100%
  );
  --gradient-investor-institutional: linear-gradient(
    135deg,
    #fe9503 0%,
    #00d924 100%
  );

  /* Icon Gradients */
  --gradient-icon-pink-purple: linear-gradient(
    135deg,
    #ff5191 0%,
    #6e00f5 100%
  );
  --gradient-icon-blue-magenta: linear-gradient(
    135deg,
    #0073e6 0%,
    #ff80ff 100%
  );

  /* Container theming */
  --container-primary-color: var(--color-primary);
  --container-secondary-color: var(--color-secondary);

  /* Rating-Klassen: volle Notenfarbe, immer weisse Schrift (--color-rating-on), Buchstabe gross und fett (ab 19 px bzw. 14 pt fett, Kontrast >= 3:1), keine Tönungen, nie schwarze Schrift (Entscheid 01.10.2026, Vorschlag 2) */
  --color-rating-a: #18aa55;
  --color-rating-b-plus: #19ac25;
  --color-rating-b: #44a813;
  --color-rating-c-plus: #82a008;
  --color-rating-c: #b28f00;
  --color-rating-d: #e5392d;
  --color-rating-e: #b8241f;
  --color-rating-f: #7a1a1a;
  --color-rating-d-f: #b8241f;
  --color-rating-nr: #76829a;
  --color-rating-on: #ffffff;

  /* Slider track */
  --track-color: var(--color-text);
  --track-color-bg: #e5e5e5;

  /* Motion (Web Next Level, Styleguide v1.7): Dauer und Easing nur über diese Tokens */
  --duration-instant: 100ms;
  --duration-fast: 200ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 700ms;
  --duration-slowest: 1000ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --stagger-1: 0ms;
  --stagger-2: 100ms;
  --stagger-3: 200ms;
  --stagger-4: 300ms;
  --stagger-5: 400ms;
  --stagger-6: 500ms;
  --transition-colors: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  --transition-lift: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);

  /* Spotlight (Web Next Level, Weisung 01.10.2026): Lichtpunkt folgt dem Zeiger, Farbe der Karte */
  --spotlight-strength-light: 22%;
  --spotlight-strength-glow: 42%;
  --spotlight-border-size: 260px;
  --spotlight-glow-size: 380px;

  /* Shadows */
  --shadow-card: 3.26px 8.16px 24.48px 0 rgba(0, 0, 0, 0.06);
  --shadow-tooltip: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Border Radius */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Font */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  /* Font Sizes */
  --text-2xs: 0.75rem;
  --text-xs: 0.875rem;
  --text-sm: 1rem;
  --text-base: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.125rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.5rem;

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* Z-index Scale */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 1000;
  --z-tooltip: 1100;
}

/* reset.css */
/* ==========================================================================
   CSS Reset / Normalize
   ========================================================================== */

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

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  font-weight: 500;
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

html {
  /* overflow-x: hidden removed — when both html AND body have this,
     Android Chrome switches the root scroller from the viewport to body,
     causing position:fixed elements to receive touch events at wrong
     coordinates (Chromium bug). body-only is sufficient. */
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  text-wrap: balance;
}

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

ul,
ol {
  list-style: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* typography.css */
/* ==========================================================================
   Typography
   ========================================================================== */

h1,
.h1 {
  font-size: var(--text-5xl);
  font-weight: 800;
  line-height: var(--leading-tight);
}

h2,
.h2 {
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: var(--leading-tight);
}

h3,
.h3 {
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: var(--leading-tight);
}

h4,
.h4 {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-tight);
}

h5,
.h5 {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-tight);
}

h6,
.h6 {
  font-size: var(--text-base);
  font-weight: 600;
  line-height: var(--leading-tight);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  @media (max-width: 768px) {
    /* Hyphenate long words on mobile (especially for German compound words) */
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

p {
  margin-bottom: var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

strong,
b {
  font-weight: 800;
}

small {
  font-size: var(--text-xs);
}

a {
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-bottom-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}


/* Animations & Effects (Stripe-inspired) */
/* animations.css */
/* ==========================================================================
   Animations - Stripe-Inspired Motion System
   ========================================================================== */

/* Motion-Tokens (--duration-*, --ease-*, --stagger-*) stehen in variables.css,
   erzeugt aus der Token-Quelle tokens.yaml (Web Next Level, Styleguide v1.7). */

/* ==========================================================================
   Keyframes
   ========================================================================== */

/* Fade animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Slide animations */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale animations */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Gradient animation (Stripe-style shifting gradient) */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Pulse animation for attention */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.02);
  }
}

/* Shimmer effect (loading/skeleton) */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Float animation for decorative elements */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Rotate for loading spinners */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Counter tick animation */
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Animation Utility Classes
   ========================================================================== */

/* Base animation class - elements start hidden */
.animate {
  opacity: 0;
}

/* When element is visible (triggered by Intersection Observer) */
.animate.is-visible {
  animation-fill-mode: forwards;
}

/* Fade variants */
.animate--fade.is-visible {
  animation: fadeIn var(--duration-normal) var(--ease-out) forwards;
}

.animate--fade-up.is-visible {
  animation: slideUp var(--duration-slow) var(--ease-out) forwards;
}

.animate--fade-down.is-visible {
  animation: slideDown var(--duration-slow) var(--ease-out) forwards;
}

.animate--fade-left.is-visible {
  animation: slideLeft var(--duration-slow) var(--ease-out) forwards;
}

.animate--fade-right.is-visible {
  animation: slideRight var(--duration-slow) var(--ease-out) forwards;
}

/* Scale variants */
.animate--scale.is-visible {
  animation: scaleIn var(--duration-normal) var(--ease-spring) forwards;
}

.animate--scale-up.is-visible {
  animation: scaleUp var(--duration-slow) var(--ease-spring) forwards;
}

/* Stagger delays */
.animate--delay-1 {
  animation-delay: var(--stagger-1);
}
.animate--delay-2 {
  animation-delay: var(--stagger-2);
}
.animate--delay-3 {
  animation-delay: var(--stagger-3);
}
.animate--delay-4 {
  animation-delay: var(--stagger-4);
}
.animate--delay-5 {
  animation-delay: var(--stagger-5);
}
.animate--delay-6 {
  animation-delay: var(--stagger-6);
}

/* ==========================================================================
   Interactive Animations (hover, focus, active)
   ========================================================================== */

/* Card lift effect */
.hover-lift {
  transition:
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Card tilt effect (requires JS for full effect) */
.hover-tilt {
  transition: transform var(--duration-fast) var(--ease-out);
  transform-style: preserve-3d;
}

/* Scale on hover */
.hover-scale {
  transition: transform var(--duration-fast) var(--ease-spring);
}

.hover-scale:hover {
  transform: scale(1.02);
}

/* Button press effect */
.hover-press {
  transition: transform var(--duration-instant) var(--ease-out);
}

.hover-press:active {
  transform: scale(0.98);
}

/* Glow effect on hover */
.hover-glow {
  transition: box-shadow var(--duration-normal) var(--ease-out);
}

.hover-glow:hover {
  box-shadow: 0 0 20px rgba(0, 181, 206, 0.4);
}

/* Underline animation */
.hover-underline {
  position: relative;
}

.hover-underline::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width var(--duration-normal) var(--ease-out);
}

.hover-underline:hover::after {
  width: 100%;
}

/* ==========================================================================
   Gradient Animations
   ========================================================================== */

/* Animated gradient background */
.gradient-animate {
  background: linear-gradient(
    -45deg,
    #0a2540,
    #007399,
    #00b5ce,
    #0a2540
  );
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}

/* Hero gradient - vibrant colorful blend with animation */
.gradient-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f0e8ff 0%, #e8fffe 40%, #fff5e8 100%);
}

/* Main colorful gradient blob - primary (vibrant cloud effect) */
.gradient-hero::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 130%;
  height: 160%;
  background: /* Top-left: Purple (Private Borrower) */
    radial-gradient(
      ellipse 70% 60% at 10% 15%,
      rgba(153, 102, 255, 1) 0%,
      rgba(153, 102, 255, 0.6) 30%,
      transparent 60%
    ),
     /* Top-right: Yellow (Private Investor) */radial-gradient(
    ellipse 55% 50% at 85% 10%,
    rgba(255, 216, 73, 1) 0%,
    rgba(255, 216, 73, 0.5) 35%,
    transparent 55%
  ),
     /* Center: Pink (SME Borrower) */radial-gradient(
    ellipse 60% 55% at 55% 35%,
    rgba(250, 75, 140, 0.9) 0%,
    rgba(250, 75, 140, 0.45) 40%,
    transparent 60%
  ),
     /* Bottom-right: Cyan (Borrowers main) */radial-gradient(
    ellipse 65% 55% at 80% 70%,
    rgba(17, 239, 227, 1) 0%,
    rgba(17, 239, 227, 0.5) 35%,
    transparent 60%
  ),
     /* Bottom-left: Green (Investors main) */radial-gradient(
    ellipse 55% 50% at 15% 75%,
    rgba(0, 217, 36, 0.95) 0%,
    rgba(0, 217, 36, 0.4) 40%,
    transparent 55%
  ),
     /* Far right: Orange (Institutional Investor) */radial-gradient(
    ellipse 40% 45% at 95% 45%,
    rgba(254, 149, 3, 0.85) 0%,
    transparent 50%
  );
  transform: rotate(-5deg);
  animation: heroGradientMove 25s ease-in-out infinite;
  z-index: 0;
  filter: blur(45px);
}

/* Subtle dot grid pattern overlay */
.gradient-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle at center,
    rgba(0, 115, 153, 0.06) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
  z-index: 1;
  pointer-events: none;
}

/* Additional animated orb layers - vibrant flowing colors */
.gradient-hero .hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  animation: heroOrbFadeIn var(--duration-slowest) var(--ease-out) forwards;
  will-change: transform;
}

.gradient-hero .hero__orb--1 {
  width: 550px;
  height: 550px;
  top: -10%;
  left: -5%;
  background: radial-gradient(
    circle,
    rgba(153, 102, 255, 0.95) 0%,
    rgba(153, 102, 255, 0.5) 35%,
    transparent 65%
  );
  animation:
    heroOrbFloat1 30s ease-in-out infinite,
    heroOrbFadeIn 1.2s ease-out forwards;
  animation-delay: 0s, 0s;
}

.gradient-hero .hero__orb--2 {
  width: 480px;
  height: 480px;
  bottom: 0%;
  right: 10%;
  background: radial-gradient(
    circle,
    rgba(17, 239, 227, 0.9) 0%,
    rgba(17, 239, 227, 0.45) 40%,
    transparent 65%
  );
  animation:
    heroOrbFloat2 35s ease-in-out infinite,
    heroOrbFadeIn 1.2s ease-out forwards;
  animation-delay: var(--stagger-4), var(--stagger-4);
}

.gradient-hero .hero__orb--3 {
  width: 420px;
  height: 420px;
  top: 15%;
  right: -5%;
  background: radial-gradient(
    circle,
    rgba(255, 216, 73, 0.85) 0%,
    rgba(254, 149, 3, 0.45) 35%,
    transparent 65%
  );
  animation:
    heroOrbFloat3 28s ease-in-out infinite,
    heroOrbFadeIn 1.2s ease-out forwards;
  animation-delay: var(--stagger-6), var(--stagger-6);
}

.gradient-hero .hero__orb--4 {
  width: 380px;
  height: 380px;
  bottom: 15%;
  left: 25%;
  background: radial-gradient(
    circle,
    rgba(250, 75, 140, 0.8) 0%,
    rgba(250, 75, 140, 0.4) 40%,
    transparent 65%
  );
  animation:
    heroOrbFloat4 32s ease-in-out infinite,
    heroOrbFadeIn 1.2s ease-out forwards;
  animation-delay: var(--stagger-6), var(--stagger-6);
}

@keyframes heroOrbFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes heroGradientMove {
  0%, 100% {
    transform: rotate(-8deg) translate(0%, 0%) scale(1);
  }
  20% {
    transform: rotate(-5deg) translate(4%, -2%) scale(1.03);
  }
  40% {
    transform: rotate(-12deg) translate(-3%, 5%) scale(1.05);
  }
  60% {
    transform: rotate(-6deg) translate(5%, 3%) scale(1.02);
  }
  80% {
    transform: rotate(-10deg) translate(-2%, -3%) scale(1.04);
  }
}

@keyframes heroOrbFloat1 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  20% {
    transform: translate(40px, 30px) scale(1.08);
  }
  40% {
    transform: translate(20px, 70px) scale(1.12);
  }
  60% {
    transform: translate(-30px, 50px) scale(1.05);
  }
  80% {
    transform: translate(-20px, 20px) scale(0.98);
  }
}

@keyframes heroOrbFloat2 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(-50px, -40px) scale(1.1);
  }
  50% {
    transform: translate(-30px, -70px) scale(1.05);
  }
  75% {
    transform: translate(40px, -30px) scale(0.95);
  }
}

@keyframes heroOrbFloat3 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(-40px, 50px) scale(1.08);
  }
  66% {
    transform: translate(-60px, 20px) scale(1.15);
  }
}

@keyframes heroOrbFloat4 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translate(30px, -40px) scale(1.1);
    opacity: 0.9;
  }
}

/* Floating orb animation */
@keyframes floatOrb {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.15;
  }
  25% {
    transform: translate(10px, -15px) scale(1.05);
    opacity: 0.2;
  }
  50% {
    transform: translate(-5px, -25px) scale(1.1);
    opacity: 0.25;
  }
  75% {
    transform: translate(-10px, -10px) scale(1.02);
    opacity: 0.18;
  }
}

@keyframes floatOrbSlow {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.1;
  }
  33% {
    transform: translate(-15px, 20px) scale(1.08);
    opacity: 0.15;
  }
  66% {
    transform: translate(10px, -15px) scale(0.95);
    opacity: 0.12;
  }
}

.orb-float {
  animation: floatOrb 8s ease-in-out infinite;
}

.orb-float-slow {
  animation: floatOrbSlow 12s ease-in-out infinite;
}

/* Text reveal animation */
@keyframes textReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.text-reveal {
  animation: textReveal var(--duration-slower) var(--ease-out) forwards;
}

.text-reveal-delay-1 {
  animation-delay: var(--stagger-2);
  opacity: 0;
}
.text-reveal-delay-2 {
  animation-delay: var(--stagger-3);
  opacity: 0;
}
.text-reveal-delay-3 {
  animation-delay: var(--stagger-4);
  opacity: 0;
}
.text-reveal-delay-4 {
  animation-delay: var(--stagger-5);
  opacity: 0;
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    #00d4e8 50%,
    var(--color-primary-dark) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Animated gradient text */
.gradient-text-animate {
  background: linear-gradient(
    90deg,
    var(--color-primary),
    #00d4e8,
    var(--color-primary-dark),
    var(--color-primary)
  );
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 8s ease infinite;
}

/* ==========================================================================
   Glassmorphism Effects
   ========================================================================== */

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass--light {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass--dark {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   Shadow System (Stripe-inspired depth)
   ========================================================================== */

:root {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl:
    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Colored shadows for primary elements */
  --shadow-primary: 0 10px 30px -5px rgba(0, 181, 206, 0.3);
  --shadow-primary-lg: 0 20px 40px -10px rgba(0, 181, 206, 0.4);
}

.shadow-xs {
  box-shadow: var(--shadow-xs);
}
.shadow-sm {
  box-shadow: var(--shadow-sm);
}
.shadow-md {
  box-shadow: var(--shadow-md);
}
.shadow-lg {
  box-shadow: var(--shadow-lg);
}
.shadow-xl {
  box-shadow: var(--shadow-xl);
}
.shadow-2xl {
  box-shadow: var(--shadow-2xl);
}
.shadow-primary {
  box-shadow: var(--shadow-primary);
}
.shadow-primary-lg {
  box-shadow: var(--shadow-primary-lg);
}

/* ==========================================================================
   Loading & Skeleton States
   ========================================================================== */

/* Note: .skeleton and .spinner are in their component files */

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .animate {
    opacity: 1;
  }

  .gradient-animate {
    animation: none;
  }
}

/* ==========================================================================
   Scroll-Driven Animations (CSS-based, high performance)
   ========================================================================== */

/* Keyframes for scroll-driven reveal */
@keyframes scroll-fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scroll-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scroll-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Section headers - fade up on scroll */
@supports (animation-timeline: view()) {
  .section__header,
  .section__title,
  .borrowers__header,
  .investors__header,
  .benefits__header,
  .requirements__header,
  .faq__header {
    animation: scroll-fade-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }

  /* Stats - scale in */
  .stats__item {
    animation: scroll-scale-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 25%;
  }

  /* Stagger stats items */
  .stats__item:nth-child(1) {
    animation-delay: 0ms;
  }
  .stats__item:nth-child(2) {
    animation-delay: var(--stagger-1);
  }
  .stats__item:nth-child(3) {
    animation-delay: var(--stagger-2);
  }
  .stats__item:nth-child(4) {
    animation-delay: var(--stagger-2);
  }

  /* Feature cards - fade up */
  .feature-card {
    animation: scroll-fade-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 20%;
  }

  /* Stagger feature cards */
  .feature-card:nth-child(1) {
    animation-delay: 0ms;
  }
  .feature-card:nth-child(2) {
    animation-delay: var(--stagger-2);
  }
  .feature-card:nth-child(3) {
    animation-delay: var(--stagger-2);
  }

  /* Benefits items */
  .benefits__item {
    animation: scroll-fade-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 25%;
  }

  .benefits__item:nth-child(odd) {
    animation-delay: 0ms;
  }
  .benefits__item:nth-child(even) {
    animation-delay: var(--stagger-2);
  }

  /* FAQ items - subtle fade */
  .faq__item {
    animation: scroll-fade-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 15%;
  }

  /* Logo bar - fade in */
  .logo-bar__item {
    animation: scroll-fade-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }

  /* Yield calculator */
  .yield-calculator {
    animation: scroll-scale-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 25%;
  }
}

/* Fallback for browsers without scroll-driven animations - use intersection observer classes */
@supports not (animation-timeline: view()) {
  .section__header,
  .section__title,
  .stats__item,
  .feature-card,
  .benefits__item,
  .faq__item {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   NL-C11 (CAS-3120): sanfter Seitenwechsel (Cross-Fade, keine
   Shared-Element-Effekte). Nur ohne «Bewegung reduzieren».
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--duration-normal);
  }
}


/* Utilities */
/* utilities/display.css */
/* ==========================================================================
   Display Utilities
   ========================================================================== */

.u-block {
  display: block;
}
.u-inline {
  display: inline;
}
.u-inline-block {
  display: inline-block;
}
.u-hidden {
  display: none;
}
.u-visible {
  visibility: visible;
}
.u-invisible {
  visibility: hidden;
}

/* Nur für Screenreader und Maschinen sichtbar (z. B. Tabellen-caption, wenn
   der Abschnittstitel schon sichtbar darüber steht) */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* utilities/flex.css */
/* ==========================================================================
   Flexbox Utilities
   ========================================================================== */

.u-flex {
  display: flex;
}
.u-inline-flex {
  display: inline-flex;
}

/* Direction */
.u-flex--col {
  flex-direction: column;
}
.u-flex--row {
  flex-direction: row;
}
.u-flex--col-reverse {
  flex-direction: column-reverse;
}
.u-flex--row-reverse {
  flex-direction: row-reverse;
}

/* Wrap */
.u-flex--wrap {
  flex-wrap: wrap;
}
.u-flex--nowrap {
  flex-wrap: nowrap;
}

/* Grow / Shrink */
.u-flex--grow {
  flex-grow: 1;
}
.u-flex--grow-0 {
  flex-grow: 0;
}
.u-flex--shrink {
  flex-shrink: 1;
}
.u-flex--shrink-0 {
  flex-shrink: 0;
}

/* Align Items */
.u-items--start {
  align-items: flex-start;
}
.u-items--end {
  align-items: flex-end;
}
.u-items--center {
  align-items: center;
}
.u-items--baseline {
  align-items: baseline;
}
.u-items--stretch {
  align-items: stretch;
}

/* Justify Content */
.u-justify--start {
  justify-content: flex-start;
}
.u-justify--end {
  justify-content: flex-end;
}
.u-justify--center {
  justify-content: center;
}
.u-justify--between {
  justify-content: space-between;
}
.u-justify--around {
  justify-content: space-around;
}
.u-justify--evenly {
  justify-content: space-evenly;
}

/* Align Self */
.u-self--start {
  align-self: flex-start;
}
.u-self--end {
  align-self: flex-end;
}
.u-self--center {
  align-self: center;
}
.u-self--stretch {
  align-self: stretch;
}

/* Gap */
.u-gap--0 {
  gap: 0;
}
.u-gap--1 {
  gap: var(--space-1);
}
.u-gap--2 {
  gap: var(--space-2);
}
.u-gap--3 {
  gap: var(--space-3);
}
.u-gap--4 {
  gap: var(--space-4);
}
.u-gap--5 {
  gap: var(--space-5);
}
.u-gap--6 {
  gap: var(--space-6);
}
.u-gap--7 {
  gap: var(--space-7);
}
.u-gap--8 {
  gap: var(--space-8);
}

/* utilities/spacing.css */
/* ==========================================================================
   Spacing Utilities (Margin & Padding)
   ========================================================================== */

/* Padding - All sides */
.u-p--0 {
  padding: 0;
}
.u-p--1 {
  padding: var(--space-1);
}
.u-p--2 {
  padding: var(--space-2);
}
.u-p--3 {
  padding: var(--space-3);
}
.u-p--4 {
  padding: var(--space-4);
}
.u-p--6 {
  padding: var(--space-6);
}
.u-p--8 {
  padding: var(--space-8);
}

/* Padding - X axis */
.u-px--0 {
  padding-left: 0;
  padding-right: 0;
}
.u-px--2 {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}
.u-px--4 {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
.u-px--6 {
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}
.u-px--8 {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

/* Padding - Y axis */
.u-py--0 {
  padding-top: 0;
  padding-bottom: 0;
}
.u-py--1 {
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}
.u-py--2 {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}
.u-py--4 {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}
.u-py--6 {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}
.u-py--8 {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

/* Padding - Individual */
.u-pt--4 {
  padding-top: var(--space-4);
}
.u-pb--4 {
  padding-bottom: var(--space-4);
}
.u-pb--7 {
  padding-bottom: var(--space-7);
}
.u-pl--4 {
  padding-left: var(--space-4);
}
.u-pr--4 {
  padding-right: var(--space-4);
}

/* Margin - All sides */
.u-m--0 {
  margin: 0;
}
.u-m--auto {
  margin: auto;
}
.u-m--1 {
  margin: var(--space-1);
}
.u-m--2 {
  margin: var(--space-2);
}
.u-m--4 {
  margin: var(--space-4);
}

/* Margin - X axis */
.u-mx--auto {
  margin-left: auto;
  margin-right: auto;
}
.u-mx--2 {
  margin-left: var(--space-2);
  margin-right: var(--space-2);
}
.u-mx--4 {
  margin-left: var(--space-4);
  margin-right: var(--space-4);
}

/* Margin - Y axis */
.u-my--2 {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}
.u-my--4 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}
.u-my--8 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

/* Margin - Individual */
.u-mt--2 {
  margin-top: var(--space-2);
}
.u-mt--4 {
  margin-top: var(--space-4);
}
.u-mt--6 {
  margin-top: var(--space-6);
}
.u-mb--2 {
  margin-bottom: var(--space-2);
}
.u-mb--4 {
  margin-bottom: var(--space-4);
}
.u-mb--6 {
  margin-bottom: var(--space-6);
}
.u-ml--auto {
  margin-left: auto;
}
.u-mr--auto {
  margin-right: auto;
}

/* utilities/sizing.css */
/* ==========================================================================
   Sizing Utilities (Width & Height)
   ========================================================================== */

/* Width */
.u-w--full {
  width: 100%;
}
.u-w--auto {
  width: auto;
}
.u-w--1\/2 {
  width: 50%;
}
.u-w--1\/3 {
  width: 33.333%;
}
.u-w--2\/3 {
  width: 66.666%;
}
.u-w--1\/4 {
  width: 25%;
}
.u-w--3\/4 {
  width: 75%;
}
.u-w--1\/5 {
  width: 20%;
}
.u-w--2\/5 {
  width: 40%;
}
.u-w--3\/5 {
  width: 60%;
}
.u-w--4\/5 {
  width: 80%;
}

/* Max Width */
.u-max-w--none {
  max-width: none;
}
.u-max-w--sm {
  max-width: 24rem;
}
.u-max-w--md {
  max-width: 28rem;
}
.u-max-w--lg {
  max-width: 32rem;
}
.u-max-w--xl {
  max-width: 36rem;
}
.u-max-w--2xl {
  max-width: 42rem;
}
.u-max-w--full {
  max-width: 100%;
}

/* Min Width */
.u-min-w--0 {
  min-width: 0;
}
.u-min-w--full {
  min-width: 100%;
}

/* Height */
.u-h--full {
  height: 100%;
}
.u-h--auto {
  height: auto;
}
.u-h--screen {
  height: 100vh;
}

/* Min Height */
.u-min-h--0 {
  min-height: 0;
}
.u-min-h--full {
  min-height: 100%;
}
.u-min-h--screen {
  min-height: 100vh;
}

/* utilities/text.css */
/* ==========================================================================
   Text Utilities
   ========================================================================== */

/* Text Alignment */
.u-text--left {
  text-align: left;
}
.u-text--center {
  text-align: center;
}
.u-text--right {
  text-align: right;
}
.u-text--justify {
  text-align: justify;
}

/* Font Size */
.u-text--2xs {
  font-size: var(--text-2xs);
  line-height: var(--leading-none);
}
.u-text--xs {
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
}
.u-text--sm {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.u-text--base {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
.u-text--lg {
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
}
.u-text--xl {
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}
.u-text--2xl {
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
}
.u-text--3xl {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
}
.u-text--5xl {
  font-size: var(--text-5xl);
  line-height: var(--leading-none);
}

/* Font Weight */
.u-font--normal {
  font-weight: 400;
}
.u-font--medium {
  font-weight: 500;
}
.u-font--semibold {
  font-weight: 600;
}
.u-font--bold {
  font-weight: 800;
}
.u-font--extrabold {
  font-weight: 800;
}

/* White Space */
.u-text--nowrap {
  white-space: nowrap;
}
.u-text--wrap {
  white-space: normal;
}
.u-text--truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Text Transform */
.u-text--uppercase {
  text-transform: uppercase;
}
.u-text--lowercase {
  text-transform: lowercase;
}
.u-text--capitalize {
  text-transform: capitalize;
}

/* Text Decoration */
.u-underline {
  text-decoration: underline;
}
.u-no-underline {
  text-decoration: none;
}
.u-line-through {
  text-decoration: line-through;
}

/* Line Height */
.u-leading--none {
  line-height: var(--leading-none);
}
.u-leading--tight {
  line-height: var(--leading-tight);
}
.u-leading--normal {
  line-height: var(--leading-normal);
}
.u-leading--relaxed {
  line-height: var(--leading-relaxed);
}

/* utilities/colors.css */
/* ==========================================================================
   Color Utilities
   ========================================================================== */

/* Text Colors */
.u-color--primary {
  color: var(--color-primary);
}
.u-color--secondary {
  color: var(--color-secondary);
}
.u-color--text {
  color: var(--color-text);
}
.u-color--text-light {
  color: var(--color-text-light);
}
.u-color--white {
  color: var(--color-white);
}
.u-color--gray {
  color: var(--color-gray);
}
.u-color--gray-light {
  color: var(--color-gray-light);
}
.u-color--gray-dark {
  color: var(--color-gray-dark);
}
.u-color--error {
  color: var(--color-error);
}
.u-color--success {
  color: var(--color-success);
}
.u-color--warning {
  color: var(--color-warning);
}

/* Background Colors */
.u-bg--primary {
  background-color: var(--color-primary);
}
.u-bg--secondary {
  background-color: var(--color-secondary);
}
.u-bg--white {
  background-color: var(--color-white);
}
.u-bg--light {
  background-color: var(--color-bg-light);
}
.u-bg--section {
  background: var(--color-bg-section);
}
.u-bg--transparent {
  background-color: transparent;
}
.u-bg--text {
  background-color: var(--color-text);
}

/* Border Colors */
.u-border--primary {
  border-color: var(--color-primary);
}
.u-border--secondary {
  border-color: var(--color-secondary);
}
.u-border--default {
  border-color: var(--color-border);
}
.u-border--error {
  border-color: var(--color-error);
}

/* Borders */
.u-border {
  border: 1px solid var(--color-border);
}
.u-border--bottom {
  border-bottom: 1px solid var(--color-border);
}
.u-border--top {
  border-top: 1px solid var(--color-border);
}
.u-border--none {
  border: none;
}

/* Border Radius */
.u-rounded--none {
  border-radius: 0;
}
.u-rounded--sm {
  border-radius: var(--radius-sm);
}
.u-rounded--md {
  border-radius: var(--radius-md);
}
.u-rounded--lg {
  border-radius: var(--radius-lg);
}
.u-rounded--xl {
  border-radius: var(--radius-xl);
}
.u-rounded--full {
  border-radius: var(--radius-full);
}


/* Components */
/* components/button.css */
/* ==========================================================================
   Button Component
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.5rem;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 9999px;
  cursor: pointer;
  transition:
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  @media (max-width: 768px) {
    padding-inline: 1rem;
  }
}

.btn:disabled,
.btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Focus state for accessibility */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-white), 0 0 0 5px var(--color-primary);
}

/* Variants */
.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn--secondary {
  background-color: color-mix(in srgb, var(--color-primary) 10%, white);
  color: var(--color-primary);
}

.btn--secondary:hover {
  background-color: color-mix(in srgb, var(--color-primary) 18%, white);
}

.btn--secondary:focus-visible {
  box-shadow: 0 0 0 3px var(--color-white), 0 0 0 5px var(--color-primary);
}

.btn--dark {
  background-color: var(--color-text);
  color: var(--color-white);
  &:hover {
    background-color: var(--color-gray-dark);
  }
}

.btn--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-text);
  box-shadow: none;
  padding-inline: 0.25rem;
}

/* Start-page CTA: the size and the cyan fill come from the redesign, the
   shape stays the CI pill inherited from .btn — the 16px radius the design
   file drew here was reverted on purpose. */
.btn--cta {
  height: 48px;
  padding-inline: 1.5rem;
  gap: 0.5rem;
  font-size: var(--text-sm);
  background-color: var(--color-secondary);
  color: var(--color-text);
  &:hover {
    background-color: #00a3ba;
  }
}

.btn--cta-outline {
  height: 48px;
  padding-inline: 1.5rem;
  gap: 0.5rem;
  font-size: var(--text-sm);
  border-color: rgba(9, 17, 36, 0.16);
  background-color: rgba(255, 255, 255, 0.5);
  color: var(--color-text);
  box-shadow: none;
  &:hover {
    background-color: rgba(255, 255, 255, 0.8);
  }
}

.btn--white {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-gray-dark);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
}

.btn--white:hover {
  background: #fff;
  border-color: #fff;
}

.btn--ghost-white {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}

.btn--ghost-white:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
}

.btn--near-form {
  border-radius: var(--radius-sm);
}

/* NL-A2 (CAS-3118): ein Hover- und Fokusverhalten für alle Varianten.
   Farben bleiben, wie die Varianten sie setzen (CAS-2983); hier kommen nur
   Lift, Schatten und der Fokusring dazu. */
@media (hover: hover) {
  .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -6px rgba(9, 17, 36, 0.28);
  }

  .btn--cta:hover,
  .btn--primary:hover {
    box-shadow: 0 10px 24px -6px
      color-mix(in srgb, var(--color-primary) 55%, transparent);
  }

  /* Navy-CTA auf dem Hero-Verlauf: Schatten im eigenen Ton */
  :is(.hero, [class*="hero--mesh"]) .btn--cta:hover {
    box-shadow: 0 10px 24px -6px rgba(9, 17, 36, 0.45);
  }

  /* Flache Varianten heben sich, ohne Schatten */
  .btn--ghost:hover,
  .btn--cta-outline:hover,
  .btn--ghost-white:hover {
    box-shadow: none;
  }
}

.btn:active {
  transform: translateY(0);
  transition-duration: var(--duration-instant);
}

/* Fokusring zuletzt und mit :hover, damit kein Hover-Schatten ihn verdeckt */
.btn:focus-visible,
.btn:focus-visible:hover {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-white), 0 0 0 5px var(--color-primary);
}

/* Auf dunklem Grund: Navy-Spalt, Cyan-Ring */
:is(.subpage-cta, .subpage-section--dark, .footer, .btn--ghost-white)
  .btn:focus-visible,
.btn--ghost-white:focus-visible {
  box-shadow: 0 0 0 3px var(--color-text), 0 0 0 5px var(--color-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .btn:active {
    transform: none;
  }
}

/* Sizes */
.btn--sm {
  padding: 0.375rem 1rem;
  font-size: var(--text-xs);
}

.btn--lg {
  padding: 1rem 2rem;
  font-size: var(--text-base);
}

.btn--full {
  width: 100%;
}

/* Shapes */
.btn--round {
  border-radius: var(--radius-full);
}

/* Icon */
.btn__icon {
  width: 1.25em;
  height: 1.25em;
}

.btn__icon--left {
  margin-right: 0.5rem;
}

.btn__icon--right {
  margin-left: 0.5rem;
}

/* Arrow animation */
.btn--with-arrow {
  gap: 4px;
}

.btn__arrow {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-normal) var(--ease-out);
}

.btn__arrow .arrow-line {
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transform-box: fill-box;
  transition: transform var(--duration-normal) var(--ease-out);
}

.btn--with-arrow:hover .btn__arrow {
  transform: translateX(4px);
}

.btn--with-arrow:hover .btn__arrow .arrow-line {
  transform: scaleX(1);
}

/* components/form.css */
/* ==========================================================================
   Form Components - Premium Design
   ========================================================================== */

/* ==========================================================================
   Form Group
   ========================================================================== */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ==========================================================================
   Labels
   ========================================================================== */

.form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-dark);
  display: block;
}

.form-label--required::after {
  content: " *";
  color: var(--color-error);
}

/* ==========================================================================
   Text Input
   ========================================================================== */

.form-input {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-text);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  outline: none;
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
}

.form-input::placeholder {
  color: var(--color-gray);
}

.form-input:hover {
  border-color: var(--color-silver);
}

.form-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 115, 153, 0.1);
}

.form-input--error {
  border-color: var(--color-error);
}

.form-input--error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.form-input--success {
  border-color: var(--color-success);
}

.form-input:disabled {
  background-color: var(--color-bg-light);
  color: var(--color-gray);
  cursor: not-allowed;
}

/* Remove spinner from number inputs */
.form-input::-webkit-outer-spin-button,
.form-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.form-input[type="number"] {
  -moz-appearance: textfield;
}

/* ==========================================================================
   Textarea
   ========================================================================== */

.form-textarea {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-text);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  outline: none;
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}

.form-textarea::placeholder {
  color: var(--color-gray);
}

.form-textarea:hover {
  border-color: var(--color-silver);
}

.form-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 115, 153, 0.1);
}

/* ==========================================================================
   Select
   ========================================================================== */

.form-select {
  width: 100%;
  padding: 12px 44px 12px 16px;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-text);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23929292' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
}

.form-select:hover {
  border-color: var(--color-silver);
}

.form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 115, 153, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23007399' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.form-select:disabled {
  background-color: var(--color-bg-light);
  color: var(--color-gray);
  cursor: not-allowed;
}

/* ==========================================================================
   Checkbox - Custom Design
   ========================================================================== */

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  position: relative;
}

.form-checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.form-checkbox__box {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  margin-top: 2px;
}

.form-checkbox__box svg {
  width: 12px;
  height: 12px;
  opacity: 0;
  transform: scale(0.5);
  transition:
    color var(--duration-fast) var(--ease-out),
    height var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    width var(--duration-fast) var(--ease-out);
}

.form-checkbox__input:hover + .form-checkbox__box {
  border-color: var(--color-primary);
}

.form-checkbox__input:focus + .form-checkbox__box {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 115, 153, 0.1);
}

.form-checkbox__input:checked + .form-checkbox__box {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.form-checkbox__input:checked + .form-checkbox__box svg {
  opacity: 1;
  transform: scale(1);
}

.form-checkbox__label {
  font-size: 0.9375rem;
  color: var(--color-gray-dark);
  line-height: 1.5;
  user-select: none;
}

.form-checkbox__label a {
  color: var(--color-primary);
  text-decoration: none;
}

.form-checkbox__label a:hover {
  text-decoration: underline;
}

/* Disabled state */
.form-checkbox--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ==========================================================================
   Radio - Custom Design
   ========================================================================== */

.form-radio {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  position: relative;
}

.form-radio__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.form-radio__circle {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  margin-top: 2px;
}

.form-radio__circle::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-white);
  opacity: 0;
  transform: scale(0);
  transition:
    opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.form-radio__input:hover + .form-radio__circle {
  border-color: var(--color-primary);
}

.form-radio__input:focus + .form-radio__circle {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 115, 153, 0.1);
}

.form-radio__input:checked + .form-radio__circle {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.form-radio__input:checked + .form-radio__circle::after {
  opacity: 1;
  transform: scale(1);
}

.form-radio__label {
  font-size: 0.9375rem;
  color: var(--color-gray-dark);
  line-height: 1.5;
  user-select: none;
}

/* Radio Group */
.form-radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-radio-group--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 24px;
}

/* ==========================================================================
   Toggle / Switch
   ========================================================================== */

.form-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  position: relative;
}

.form-toggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.form-toggle__switch {
  width: 44px;
  height: 24px;
  background: var(--color-border);
  border-radius: 12px;
  position: relative;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.form-toggle__switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--color-white);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition:
    transform var(--duration-fast) var(--ease-out);
}

.form-toggle__input:hover + .form-toggle__switch {
  background: var(--color-silver);
}

.form-toggle__input:focus + .form-toggle__switch {
  box-shadow: 0 0 0 3px rgba(0, 115, 153, 0.1);
}

.form-toggle__input:checked + .form-toggle__switch {
  background: var(--color-primary);
}

.form-toggle__input:checked + .form-toggle__switch::after {
  transform: translateX(20px);
}

.form-toggle__label {
  font-size: 0.9375rem;
  color: var(--color-gray-dark);
  user-select: none;
}

/* ==========================================================================
   Input Group (with prefix/suffix)
   ========================================================================== */

.input-group {
  display: flex;
  align-items: center;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
}

.input-group:hover {
  border-color: var(--color-silver);
}

.input-group:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 115, 153, 0.1);
}

.input-group__prefix,
.input-group__suffix {
  padding: 12px 14px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-gray);
  background: var(--color-bg-light);
  white-space: nowrap;
  border: none;
}

.input-group__prefix {
  border-right: 1px solid var(--color-border);
}

.input-group__suffix {
  border-left: 1px solid var(--color-border);
}

.input-group__input {
  flex: 1;
  padding: 12px 16px;
  border: none;
  background: transparent;
  font-size: 1rem;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  outline: none;
  min-width: 0;
  width: 100%;
}

.input-group__input::placeholder {
  color: var(--color-gray);
}

/* Smooth number transitions with tabular numbers */
.input-group__input[type="number"] {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Error & Helper Text
   ========================================================================== */

.form-error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--color-error);
}

.form-error__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.form-helper {
  font-size: 0.8125rem;
  color: var(--color-gray);
  line-height: 1.5;
}

/* ==========================================================================
   Input with Icon
   ========================================================================== */

.form-input-icon {
  position: relative;
}

.form-input-icon .form-input {
  padding-left: 44px;
}

.form-input-icon__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--color-gray);
  pointer-events: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.form-input-icon:focus-within .form-input-icon__icon {
  color: var(--color-primary);
}

/* ==========================================================================
   Search Input
   ========================================================================== */

.form-search {
  position: relative;
}

.form-search__input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-text);
  background-color: var(--color-bg-light);
  border: 1px solid transparent;
  border-radius: 50px;
  outline: none;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.form-search__input::placeholder {
  color: var(--color-gray);
}

.form-search__input:hover {
  background-color: var(--color-border);
}

.form-search__input:focus {
  background-color: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 115, 153, 0.1);
}

.form-search__icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-gray);
  pointer-events: none;
}

/* ==========================================================================
   File Input
   ========================================================================== */

.form-file {
  position: relative;
}

.form-file__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.form-file__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  border: 2px dashed var(--color-border);
  border-radius: 12px;
  background: var(--color-bg-light);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
  text-align: center;
}

.form-file__dropzone:hover,
.form-file__input:focus + .form-file__dropzone {
  border-color: var(--color-primary);
  background: rgba(0, 115, 153, 0.04);
}

.form-file__icon {
  width: 40px;
  height: 40px;
  color: var(--color-gray);
  margin-bottom: 12px;
}

.form-file__text {
  font-size: 0.9375rem;
  color: var(--color-gray-dark);
  margin-bottom: 4px;
}

.form-file__text strong {
  color: var(--color-primary);
}

.form-file__hint {
  font-size: 0.8125rem;
  color: var(--color-gray);
}

/* ==========================================================================
   Form Row (Side by Side)
   ========================================================================== */

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

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

@media (max-width: 640px) {
  .form-row,
  .form-row--3 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Card Select (Visual Option Cards)
   ========================================================================== */

.form-card-select {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.form-card-option {
  position: relative;
  cursor: pointer;
}

.form-card-option__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.form-card-option__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px;
  background: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: 12px;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  text-align: center;
}

.form-card-option__card:hover {
  border-color: var(--color-primary);
}

.form-card-option__input:focus + .form-card-option__card {
  box-shadow: 0 0 0 3px rgba(0, 115, 153, 0.1);
}

.form-card-option__input:checked + .form-card-option__card {
  border-color: var(--color-primary);
  background: rgba(0, 115, 153, 0.04);
}

.form-card-option__icon {
  width: 32px;
  height: 32px;
  color: var(--color-gray);
  margin-bottom: 8px;
  transition: color var(--duration-fast) var(--ease-out);
}

.form-card-option__input:checked
  + .form-card-option__card
  .form-card-option__icon {
  color: var(--color-primary);
}

.form-card-option__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-dark);
}

.form-card-option__description {
  font-size: 0.75rem;
  color: var(--color-gray);
  margin-top: 4px;
}

/* components/slider.css */
/* ==========================================================================
   Slider Component
   ========================================================================== */

/* Slider thumb pulse animation */
@keyframes slider-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(
    to right,
    var(--track-color) 0%,
    var(--track-color) var(--slider-fill, 50%),
    var(--track-color-bg) var(--slider-fill, 50%),
    var(--track-color-bg) 100%
  );
  overflow: visible;
  padding: 0;
  cursor: pointer;
  transition: background var(--duration-instant) var(--ease-out);
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 28px;
  width: 28px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(240, 240, 240, 0.8) 100%
  );
  border-radius: 50%;
  border: 3px solid var(--track-color);
  cursor: grab;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 2px 4px rgba(255, 255, 255, 1),
    inset 0 -2px 4px rgba(0, 0, 0, 0.08);
  margin-top: -8px;
  transition:
    box-shadow var(--duration-fast) var(--ease-out);
  position: relative;
  z-index: 2;
}

.slider::-moz-range-thumb {
  height: 28px;
  width: 28px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(240, 240, 240, 0.8) 100%
  );
  border-radius: 50%;
  border: 3px solid var(--track-color);
  cursor: grab;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 2px 4px rgba(255, 255, 255, 1),
    inset 0 -2px 4px rgba(0, 0, 0, 0.08);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

/* Hover effects for slider thumb */
.slider:hover::-webkit-slider-thumb {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(245, 245, 245, 0.9) 100%
  );
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.2),
    0 3px 6px rgba(0, 0, 0, 0.12),
    inset 0 2px 4px rgba(255, 255, 255, 1),
    inset 0 -2px 4px rgba(0, 0, 0, 0.1);
  transform: scale(1.05);
}

.slider:hover::-moz-range-thumb {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(245, 245, 245, 0.9) 100%
  );
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.2),
    0 3px 6px rgba(0, 0, 0, 0.12),
    inset 0 2px 4px rgba(255, 255, 255, 1),
    inset 0 -2px 4px rgba(0, 0, 0, 0.1);
  transform: scale(1.05);
}

/* Active/dragging state */
.slider:active::-webkit-slider-thumb {
  cursor: grabbing;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(250, 250, 250, 0.95) 100%
  );
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.25),
    0 4px 8px rgba(0, 0, 0, 0.15),
    inset 0 2px 6px rgba(255, 255, 255, 1),
    inset 0 -2px 4px rgba(0, 0, 0, 0.12);
  transform: scale(1.1);
}

.slider:active::-moz-range-thumb {
  cursor: grabbing;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(250, 250, 250, 0.95) 100%
  );
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.25),
    0 4px 8px rgba(0, 0, 0, 0.15),
    inset 0 2px 6px rgba(255, 255, 255, 1),
    inset 0 -2px 4px rgba(0, 0, 0, 0.12);
  transform: scale(1.1);
}

/* Pulse effect applied via JS */
@media (prefers-reduced-motion: no-preference) {
  .slider--pulse::-webkit-slider-thumb {
    animation: slider-pulse var(--duration-fast) var(--ease-out);
  }

  .slider--pulse::-moz-range-thumb {
    animation: slider-pulse var(--duration-fast) var(--ease-out);
  }
}

.slider::-webkit-slider-runnable-track {
  background: var(--track-color-bg);
  height: 12px;
  border-radius: 6px;
}

.slider::-moz-range-track {
  background: var(--track-color-bg);
  height: 12px;
  border-radius: 6px;
}

.slider:focus {
  outline: none;
}

.slider:focus::-webkit-slider-thumb {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(79, 176, 198, 0.3);
}

/* Variants */
.slider--secondary {
  --track-color: #ebce5b;
}

.slider--investing {
  --track-color: var(--color-accent-investing);
  --track-color-bg: var(--color-tint-investing);
}

/* Slider Wrapper */
.slider-wrapper {
  width: 100%;
}

.slider-wrapper__labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-weight: 800;
  font-size: var(--text-xs);
  color: var(--color-gray-light);
  line-height: 2;
}

/* components/modal.css */
/* ==========================================================================
   Modal Component
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transition:
    color var(--duration-normal) var(--ease-out),
    background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out),
    opacity var(--duration-normal) var(--ease-out);
}

.modal--open {
  opacity: 1;
  visibility: visible;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
}

.modal__content {
  position: relative;
  background: var(--color-white);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-modal);
  transform: translateY(-20px);
  transition:
    height var(--duration-normal) var(--ease-out),
    max-height var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out),
    width var(--duration-normal) var(--ease-out);
}

.modal--open .modal__content {
  transform: translateY(0);
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-6);
}

.modal__title {
  font-size: var(--text-xl);
  font-weight: 800;
  margin: 0;
  padding-right: var(--space-4);
}

.modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-gray);
  padding: 0;
  line-height: 1;
  border-radius: var(--radius-sm);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.modal__close:hover {
  color: var(--color-text);
  background: var(--color-bg-light);
}

.modal__body {
  margin-bottom: var(--space-6);
}

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* Size Variants */
.modal__content--sm {
  max-width: 400px;
}

.modal__content--lg {
  max-width: 700px;
}

.modal__content--full {
  max-width: none;
  width: calc(100% - 2rem);
  height: calc(100vh - 2rem);
  max-height: none;
}

/* ==========================================================================
   Modal Overlay (for island-based modals)
   ========================================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: modal-fade-in var(--duration-fast) var(--ease-out);
}

@keyframes modal-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modal-slide-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-overlay .modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
  animation: modal-slide-in var(--duration-normal) var(--ease-spring);
  opacity: 1;
  visibility: visible;
  padding: var(--space-6);
}

.modal-overlay .modal .modal__content {
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
  width: 100%;
  transform: none;
}

/* ==========================================================================
   Modal Icon Styles
   ========================================================================== */

.modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-5);
  border-radius: var(--radius-full);
}

.modal__icon--email {
  background: rgba(0, 181, 206, 0.1);
  color: var(--color-secondary);
}

.modal__icon--2fa {
  background: rgba(0, 115, 153, 0.1);
  color: var(--color-primary);
}

.modal__icon--error {
  background: rgba(220, 53, 69, 0.1);
  color: var(--color-error);
}

.modal__icon--success {
  background: rgba(40, 167, 69, 0.1);
  color: var(--color-success);
}

/* ==========================================================================
   Modal Messages
   ========================================================================== */

.modal__message {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.6;
  text-align: center;
}

.modal__message--error {
  color: var(--color-error);
}

.modal__email {
  margin: 0 0 var(--space-4);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-primary);
  word-break: break-all;
  text-align: center;
}

.modal__hint {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-gray-dark);
  line-height: 1.5;
  text-align: center;
}

.modal__hint--secondary {
  font-style: italic;
}

/* Status Messages */
.modal__success {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  background: rgba(40, 167, 69, 0.1);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-success);
  text-align: center;
}

.modal__error {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  background: rgba(220, 53, 69, 0.1);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-error);
  text-align: center;
}

/* ==========================================================================
   Modal Form Elements
   ========================================================================== */

.modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.modal__input {
  width: 100%;
  padding: var(--space-4);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  color: var(--color-text);
  text-align: center;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.modal__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 115, 153, 0.1);
}

.modal__input--code {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: 0.5em;
  padding-left: calc(var(--space-4) + 0.25em);
}

/* ==========================================================================
   Modal Actions
   ========================================================================== */

.modal__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.modal__actions .btn {
  flex: 1;
}

/* ==========================================================================
   Role Selection Cards
   ========================================================================== */

.modal__role-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.modal__role-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-5);
  background: var(--color-bg-light);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition:
    background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

.modal__role-card:hover {
  border-color: var(--color-primary);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

.modal__role-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-3);
  background: rgba(0, 115, 153, 0.1);
  border-radius: var(--radius-full);
  color: var(--color-primary);
}

.modal__role-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}

.modal__role-desc {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-gray-dark);
  text-align: center;
  line-height: 1.4;
}

/* ==========================================================================
   Modal Responsive
   ========================================================================== */

@media (max-width: 480px) {
  .modal-overlay .modal {
    max-width: 100%;
    max-height: 100vh;
    border-radius: var(--radius-lg);
  }

  .modal__role-cards {
    grid-template-columns: 1fr;
  }

  .modal__actions {
    flex-direction: column;
  }
}

/* components/tooltip.css */
/* ==========================================================================
   Tooltip Component
   ========================================================================== */

.tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  box-shadow: var(--shadow-tooltip);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: #373f52;
  min-width: 140px;
  margin-bottom: var(--space-4);
  z-index: var(--z-tooltip);
}

.tooltip::before {
  content: "";
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 1rem;
  height: 1rem;
  background: var(--color-white);
  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.1);
}

.tooltip__value {
  font-weight: 800;
}

/* Position Variants */
.tooltip--top::before {
  bottom: auto;
  top: -0.5rem;
  box-shadow: -4px -4px 6px rgba(0, 0, 0, 0.1);
}

.tooltip--left::before {
  bottom: auto;
  left: -0.5rem;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  box-shadow: -4px 4px 6px rgba(0, 0, 0, 0.1);
}

.tooltip--right::before {
  bottom: auto;
  left: auto;
  right: -0.5rem;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 4px -4px 6px rgba(0, 0, 0, 0.1);
}

/* components/card.css */
/* ==========================================================================
   Card Component
   ========================================================================== */

.card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  transition:
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

/* Interactive card with hover lift */
.card--interactive {
  cursor: pointer;
}

.card--interactive:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 40px -12px rgba(0, 0, 0, 0.1),
    0 8px 16px -8px rgba(0, 0, 0, 0.08);
}

.card--interactive:active {
  transform: translateY(-4px);
}

.card--bordered {
  box-shadow: none;
  border: 1px solid var(--color-border);
}

.card--flat {
  box-shadow: none;
  background: var(--color-bg-light);
}

.card__header {
  margin-bottom: var(--space-4);
}

.card__title {
  font-size: var(--text-lg);
  font-weight: 800;
  margin: 0;
}

.card__subtitle {
  font-size: var(--text-xs);
  color: var(--color-gray);
  margin-top: var(--space-1);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.card__footer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* Card with gradient border */
.card--gradient-border {
  position: relative;
  background: var(--color-white);
}

.card--gradient-border::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: linear-gradient(90deg, #176570 0%, #29bace 100%);
  border-radius: var(--radius-xl);
}

/* Project Card styles moved to blocks/projects.css */

/* components/chart.css */
/* ==========================================================================
   Chart Component
   ========================================================================== */

.chart {
  width: 100%;
}

.chart__header {
  margin-bottom: var(--space-4);
}

.chart__title {
  font-size: var(--text-lg);
  font-weight: 800;
  margin: 0;
}

.chart__subtitle {
  font-size: var(--text-xs);
  color: var(--color-gray);
  margin-top: var(--space-1);
}

/* Chart Container (for SVG) */
.chart__container {
  position: relative;
  width: 100%;
}

.chart__svg {
  width: 100%;
  height: auto;
}

/* Legend */
.chart__legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.chart__legend--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.chart__legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  transition:
    opacity var(--duration-fast) var(--ease-out);
}

.chart__legend-item:hover {
  opacity: 0.8;
}

.chart__legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}

.chart__legend-label {
  font-size: var(--text-xs);
  color: var(--color-text);
}

.chart__legend-value {
  font-size: var(--text-xs);
  font-weight: 600;
  margin-left: auto;
}

/* Progress Bar Legend */
.chart__legend-progress {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.chart__legend-bar {
  flex: 1;
  height: 6px;
  background: var(--color-bg-light);
  border-radius: 3px;
  overflow: hidden;
}

.chart__legend-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width var(--duration-slow) var(--ease-out);
}

/* Donut Chart specific */
.chart--donut {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

.chart--donut .chart__container {
  flex-shrink: 0;
  width: 200px;
}

.chart--donut .chart__legend {
  flex: 1;
  margin-top: 0;
}

/* Bar Chart specific */
.chart--bar .chart__container {
  min-height: 300px;
}

/* Loading state */
.chart--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--color-gray);
}

/* components/feature-card.css */
/* ==========================================================================
   Feature Card Component
   Stripe-inspired card with sophisticated hover effects
   ========================================================================== */

/* Base Card Styles
   ========================================================================== */

.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border-radius: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition:
    transform var(--duration-normal) var(--ease-out);
  cursor: pointer;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary);
}

.feature-card:active {
  transform: translateY(-2px);
}

/* Glow Effect (hidden by default, shown on hover)
   ========================================================================== */

.feature-card__glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(59, 130, 246, 0.15),
    transparent 50%
  );
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
  pointer-events: none;
  z-index: 0;
}

.feature-card:hover .feature-card__glow {
  opacity: 1;
}

/* Icon Styles
   ========================================================================== */

.feature-card__icon-wrapper {
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-accent)
  );
  color: white;
  font-size: 1.5rem;
  transition:
    backdrop-filter var(--duration-normal) var(--ease-out),
    background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.feature-card:hover .feature-card__icon {
  transform: scale(1.1) rotate(3deg);
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35);
}

.feature-card__icon-text {
  display: block;
  line-height: 1;
}

/* Content Styles
   ========================================================================== */

.feature-card__content {
  flex: 1;
  position: relative;
  z-index: 1;
}

.feature-card__title {
  margin: 0 0 0.75rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text);
  transition: color var(--duration-normal) var(--ease-out);
}

.feature-card:hover .feature-card__title {
  color: var(--color-primary);
}

.feature-card__description {
  margin: 0;
  font-size: 0.938rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* Arrow Indicator (for links)
   ========================================================================== */

.feature-card__arrow {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-background);
  color: var(--color-text-secondary);
  opacity: 0;
  transform: translate(4px, -4px);
  transition:
    backdrop-filter var(--duration-normal) var(--ease-out),
    background-color var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out),
    opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
  z-index: 1;
}

.feature-card:hover .feature-card__arrow {
  opacity: 1;
  transform: translate(0, 0);
  color: var(--color-primary);
}

/* Shadow Effects
   ========================================================================== */

.feature-card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.feature-card:hover {
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.08),
    0 6px 12px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(59, 130, 246, 0.1);
}

/* Variant: Glass
   ========================================================================== */

.feature-card--glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-card--glass:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(59, 130, 246, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.feature-card--glass .feature-card__icon {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 4px 12px rgba(59, 130, 246, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.feature-card--glass:hover .feature-card__icon {
  background: rgba(255, 255, 255, 0.2);
  box-shadow:
    0 8px 24px rgba(59, 130, 246, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.feature-card--glass .feature-card__title {
  color: var(--color-text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.feature-card--glass .feature-card__arrow {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Variant: Outlined
   ========================================================================== */

.feature-card--outlined {
  background: transparent;
  border: 2px solid var(--color-border);
}

.feature-card--outlined:hover {
  background: var(--color-surface);
  border-color: var(--color-primary);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.08),
    0 6px 12px rgba(0, 0, 0, 0.06),
    inset 0 0 0 1px rgba(59, 130, 246, 0.1);
}

.feature-card--outlined .feature-card__icon {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  box-shadow: none;
}

.feature-card--outlined:hover .feature-card__icon {
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-accent)
  );
  border-color: transparent;
  color: white;
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35);
}

/* 3D Tilt Effect
   ========================================================================== */

.feature-card[data-tilt="true"] {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.feature-card[data-tilt="true"]:hover {
  transform: translateY(-4px) rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg));
}

.feature-card[data-tilt="true"] .feature-card__icon,
.feature-card[data-tilt="true"] .feature-card__content,
.feature-card[data-tilt="true"] .feature-card__arrow {
  transform-style: preserve-3d;
  transform: translateZ(20px);
}

/* Responsive Adjustments
   ========================================================================== */

@media (max-width: 768px) {
  .feature-card {
    padding: 1.5rem;
  }

  .feature-card__icon {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
  }

  .feature-card__title {
    font-size: 1.125rem;
  }

  .feature-card__description {
    font-size: 0.875rem;
  }

  .feature-card__arrow {
    top: 1rem;
    right: 1rem;
    width: 28px;
    height: 28px;
  }

  /* Reduce hover effects on mobile */
  .feature-card:hover {
    transform: translateY(-2px);
  }

  .feature-card[data-tilt="true"]:hover {
    transform: translateY(-2px);
  }
}

@media (max-width: 480px) {
  .feature-card {
    padding: 1.25rem;
  }

  .feature-card__icon-wrapper {
    margin-bottom: 1rem;
  }

  .feature-card__title {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
}

/* Focus States (Accessibility)
   ========================================================================== */

.feature-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Dark Mode Support
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  .feature-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .feature-card:hover {
    background: rgba(255, 255, 255, 0.05);
  }

  .feature-card__glow {
    background: radial-gradient(
      circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(59, 130, 246, 0.2),
      transparent 50%
    );
  }

  .feature-card--glass {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.15);
  }

  .feature-card--glass:hover {
    background: rgba(0, 0, 0, 0.4);
  }

  .feature-card--outlined {
    border-color: rgba(255, 255, 255, 0.15);
  }

  .feature-card__arrow {
    background: rgba(0, 0, 0, 0.4);
  }
}

/* Animation Performance Optimizations
   ========================================================================== */

.feature-card,
.feature-card__icon,
.feature-card__glow,
.feature-card__arrow,
.feature-card__title {
  will-change: transform, opacity, box-shadow;
}

@media (prefers-reduced-motion: reduce) {
  .feature-card,
  .feature-card__icon,
  .feature-card__glow,
  .feature-card__arrow,
  .feature-card__title {
    transition: none;
    animation: none;
  }

  .feature-card:hover {
    transform: none;
  }

  .feature-card__icon:hover {
    transform: none;
  }
}

/* components/section-divider.css */
/* Section Divider Component */

.section-divider {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100px;
  overflow: hidden;
  line-height: 0;
  z-index: 1;
}

/* Direction positioning */
.section-divider--down {
  bottom: -1px; /* Prevent sub-pixel gaps */
}

.section-divider--up {
  top: -1px; /* Prevent sub-pixel gaps */
}

/* SVG fills entire container */
.section-divider__svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

/* Type variations - can be extended with custom animations */
.section-divider--angle {
  /* Minimal height for sharp angles */
  height: 80px;
}

.section-divider--curve {
  /* Medium height for gentle curves */
  height: 100px;
}

.section-divider--wave {
  /* Taller for wave patterns */
  height: 120px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .section-divider {
    height: 60px;
  }

  .section-divider--angle {
    height: 50px;
  }

  .section-divider--curve {
    height: 60px;
  }

  .section-divider--wave {
    height: 80px;
  }
}

@media (max-width: 480px) {
  .section-divider {
    height: 40px;
  }

  .section-divider--angle {
    height: 30px;
  }

  .section-divider--curve {
    height: 40px;
  }

  .section-divider--wave {
    height: 50px;
  }
}

/* Parent section setup - applies to sections using dividers */
.section {
  position: relative;
}

/* Color inheritance from parent section */
.section--dark .section-divider__svg path {
  fill: var(--color-primary, currentColor);
}

.section--secondary .section-divider__svg path {
  fill: var(--color-secondary, currentColor);
}

.section--light .section-divider__svg path {
  fill: var(--color-background-light, #f8f9fa);
}

.section--dark .section-divider__svg path {
  fill: var(--color-background-dark, #1a1a1a);
}

/* Utility classes for custom colors */
.section-divider--white path {
  fill: #ffffff;
}

.section-divider--transparent path {
  fill: transparent;
}

/* Optional: Animated wave effect */
@keyframes wave-flow {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.section-divider--wave.section-divider--animated .section-divider__svg {
  animation: wave-flow 20s linear infinite;
}

/* Ensure proper stacking context */
.section-divider + .section,
.section .section-divider ~ * {
  position: relative;
  z-index: 2;
}

/* components/gradient-breaker.css */
/* ==========================================================================
   Gradient Breaker - Animated Wave/Cloud Section Divider
   Inspired by modern fintech gradients (purple, coral, cyan, blue)
   ========================================================================== */

.gradient-breaker {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 50%, #60a5fa 100%);
}

/* Animated gradient layers */
.gradient-breaker__layer {
  position: absolute;
  inset: 0;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  will-change: transform;
}

/* Layer 1: Purple/violet base with movement */
.gradient-breaker__layer--1 {
  background:
    radial-gradient(
      ellipse 80% 60% at 20% 30%,
      rgba(139, 92, 246, 0.9) 0%,
      transparent 60%
    ),
    radial-gradient(
    ellipse 60% 80% at 80% 70%,
    rgba(167, 139, 250, 0.8) 0%,
    transparent 50%
  );
  animation: gradient-drift-1 25s ease-in-out infinite;
}

/* Layer 2: Coral/orange highlight */
.gradient-breaker__layer--2 {
  background:
    radial-gradient(
      ellipse 70% 50% at 75% 25%,
      rgba(251, 146, 60, 0.7) 0%,
      transparent 50%
    ),
    radial-gradient(
    ellipse 50% 70% at 90% 40%,
    rgba(249, 115, 22, 0.5) 0%,
    transparent 40%
  );
  animation: gradient-drift-2 30s ease-in-out infinite;
  mix-blend-mode: soft-light;
}

/* Layer 3: Pink/magenta mid-tones */
.gradient-breaker__layer--3 {
  background:
    radial-gradient(
      ellipse 90% 70% at 40% 50%,
      rgba(236, 72, 153, 0.5) 0%,
      transparent 55%
    ),
    radial-gradient(
    ellipse 60% 60% at 60% 60%,
    rgba(219, 39, 119, 0.4) 0%,
    transparent 45%
  );
  animation: gradient-drift-3 20s ease-in-out infinite;
  mix-blend-mode: overlay;
}

/* Layer 4: Cyan/blue bottom glow */
.gradient-breaker__layer--4 {
  background:
    radial-gradient(
      ellipse 100% 60% at 50% 90%,
      rgba(34, 211, 238, 0.6) 0%,
      transparent 50%
    ),
    radial-gradient(
    ellipse 80% 50% at 20% 80%,
    rgba(96, 165, 250, 0.5) 0%,
    transparent 40%
  );
  animation: gradient-drift-4 35s ease-in-out infinite;
}

/* Layer 5: Bright accent spots */
.gradient-breaker__layer--5 {
  background:
    radial-gradient(
      ellipse 30% 30% at 85% 15%,
      rgba(251, 191, 36, 0.4) 0%,
      transparent 50%
    ),
    radial-gradient(
    ellipse 25% 25% at 10% 85%,
    rgba(52, 211, 153, 0.3) 0%,
    transparent 50%
  );
  animation: gradient-drift-5 40s ease-in-out infinite;
  mix-blend-mode: screen;
}

/* Drift animations - each layer moves differently */
@keyframes gradient-drift-1 {
  0%,
  100% {
    transform: translate(0%, 0%) rotate(0deg);
  }
  25% {
    transform: translate(5%, 3%) rotate(1deg);
  }
  50% {
    transform: translate(2%, 5%) rotate(-1deg);
  }
  75% {
    transform: translate(-3%, 2%) rotate(0.5deg);
  }
}

@keyframes gradient-drift-2 {
  0%,
  100% {
    transform: translate(0%, 0%) rotate(0deg) scale(1);
  }
  33% {
    transform: translate(-4%, 2%) rotate(-1deg) scale(1.02);
  }
  66% {
    transform: translate(3%, -3%) rotate(1deg) scale(0.98);
  }
}

@keyframes gradient-drift-3 {
  0%,
  100% {
    transform: translate(0%, 0%) scale(1);
  }
  50% {
    transform: translate(6%, 4%) scale(1.05);
  }
}

@keyframes gradient-drift-4 {
  0%,
  100% {
    transform: translate(0%, 0%) rotate(0deg);
  }
  25% {
    transform: translate(-2%, -4%) rotate(-0.5deg);
  }
  50% {
    transform: translate(4%, -2%) rotate(0.5deg);
  }
  75% {
    transform: translate(2%, 3%) rotate(-0.5deg);
  }
}

@keyframes gradient-drift-5 {
  0%,
  100% {
    transform: translate(0%, 0%);
    opacity: 0.8;
  }
  50% {
    transform: translate(-5%, 5%);
    opacity: 1;
  }
}

/* Optional content overlay */
.gradient-breaker__content {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-8);
  color: var(--color-white);
  text-align: center;
}

.gradient-breaker__content h2,
.gradient-breaker__content h3 {
  font-size: var(--text-3xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

/* Size variants */
.gradient-breaker--sm {
  height: 150px;
}

.gradient-breaker--md {
  height: 250px;
}

.gradient-breaker--lg {
  height: 400px;
}

.gradient-breaker--xl {
  height: 500px;
}

/* Color themes */
.gradient-breaker--cashare {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-secondary) 100%
  );
}

.gradient-breaker--cashare .gradient-breaker__layer--1 {
  background:
    radial-gradient(
      ellipse 80% 60% at 20% 30%,
      rgba(0, 115, 153, 0.9) 0%,
      transparent 60%
    ),
    radial-gradient(
    ellipse 60% 80% at 80% 70%,
    rgba(0, 181, 206, 0.8) 0%,
    transparent 50%
  );
}

.gradient-breaker--cashare .gradient-breaker__layer--2 {
  background:
    radial-gradient(
      ellipse 70% 50% at 75% 25%,
      rgba(0, 217, 36, 0.5) 0%,
      transparent 50%
    ),
    radial-gradient(
    ellipse 50% 70% at 90% 40%,
    rgba(33, 207, 224, 0.6) 0%,
    transparent 40%
  );
}

.gradient-breaker--cashare .gradient-breaker__layer--3 {
  background:
    radial-gradient(
      ellipse 90% 70% at 40% 50%,
      rgba(0, 181, 206, 0.5) 0%,
      transparent 55%
    ),
    radial-gradient(
    ellipse 60% 60% at 60% 60%,
    rgba(0, 115, 153, 0.4) 0%,
    transparent 45%
  );
}

.gradient-breaker--cashare .gradient-breaker__layer--4 {
  background:
    radial-gradient(
      ellipse 100% 60% at 50% 90%,
      rgba(33, 207, 224, 0.6) 0%,
      transparent 50%
    ),
    radial-gradient(
    ellipse 80% 50% at 20% 80%,
    rgba(0, 181, 206, 0.5) 0%,
    transparent 40%
  );
}

/* Sunset theme (original image colors) */
.gradient-breaker--sunset {
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 50%, #60a5fa 100%);
}

/* Dark/midnight theme */
.gradient-breaker--midnight {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1e3a8a 100%);
}

.gradient-breaker--midnight .gradient-breaker__layer--1 {
  background:
    radial-gradient(
      ellipse 80% 60% at 20% 30%,
      rgba(99, 102, 241, 0.6) 0%,
      transparent 60%
    ),
    radial-gradient(
    ellipse 60% 80% at 80% 70%,
    rgba(139, 92, 246, 0.5) 0%,
    transparent 50%
  );
}

.gradient-breaker--midnight .gradient-breaker__layer--4 {
  background: radial-gradient(
    ellipse 100% 60% at 50% 90%,
    rgba(59, 130, 246, 0.5) 0%,
    transparent 50%
  );
}

/* Wave edge variants */
.gradient-breaker--wave-top::before,
.gradient-breaker--wave-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--color-white);
  z-index: 5;
}

.gradient-breaker--wave-top::before {
  top: -1px;
  clip-path: ellipse(55% 100% at 50% 0%);
}

.gradient-breaker--wave-bottom::after {
  bottom: -1px;
  clip-path: ellipse(55% 100% at 50% 100%);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .gradient-breaker__layer {
    animation: none;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .gradient-breaker {
    height: 200px;
  }

  .gradient-breaker--sm {
    height: 100px;
  }

  .gradient-breaker--md {
    height: 180px;
  }

  .gradient-breaker--lg {
    height: 280px;
  }

  .gradient-breaker--xl {
    height: 350px;
  }

  .gradient-breaker__content h2,
  .gradient-breaker__content h3 {
    font-size: var(--text-2xl);
  }

  .gradient-breaker--wave-top::before,
  .gradient-breaker--wave-bottom::after {
    height: 40px;
  }
}

@media (max-width: 480px) {
  .gradient-breaker {
    height: 150px;
  }

  .gradient-breaker--sm {
    height: 80px;
  }

  .gradient-breaker--md {
    height: 130px;
  }

  .gradient-breaker--lg {
    height: 200px;
  }

  .gradient-breaker--xl {
    height: 250px;
  }

  .gradient-breaker--wave-top::before,
  .gradient-breaker--wave-bottom::after {
    height: 30px;
  }
}

/* components/alert.css */
/* ==========================================================================
   Alert Component
   BEM: .alert, .alert__element, .alert--modifier
   ========================================================================== */

/* Base Alert */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: var(--color-bg-light);
}

.alert__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.alert__content {
  flex: 1;
  min-width: 0;
}

.alert__title {
  font-size: var(--text-sm);
  font-weight: 600;
  margin: 0 0 var(--space-1);
  color: var(--color-text);
}

.alert__message {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  margin: 0;
  color: var(--color-gray-dark);
}

.alert__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: -4px -4px -4px 0;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--color-gray);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.alert__close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text);
}

.alert__close svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   Alert Variants
   ========================================================================== */

/* Success */
.alert--success {
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 163, 74, 0.2);
}

.alert--success .alert__icon {
  color: var(--color-success);
}

.alert--success .alert__title {
  color: var(--color-success);
}

/* Warning */
.alert--warning {
  background: rgba(202, 138, 4, 0.08);
  border-color: rgba(202, 138, 4, 0.2);
}

.alert--warning .alert__icon {
  color: var(--color-warning);
}

.alert--warning .alert__title {
  color: #a16207;
}

/* Error */
.alert--error {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.2);
}

.alert--error .alert__icon {
  color: var(--color-error);
}

.alert--error .alert__title {
  color: var(--color-error);
}

/* Info */
.alert--info {
  background: rgba(0, 115, 153, 0.08);
  border-color: rgba(0, 115, 153, 0.2);
}

.alert--info .alert__icon {
  color: var(--color-primary);
}

.alert--info .alert__title {
  color: var(--color-primary);
}

/* ==========================================================================
   Alert Sizes
   ========================================================================== */

.alert--sm {
  padding: var(--space-3);
  gap: var(--space-2);
}

.alert--sm .alert__icon {
  width: 16px;
  height: 16px;
}

.alert--sm .alert__title {
  font-size: var(--text-xs);
}

.alert--sm .alert__message {
  font-size: var(--text-2xs);
}

/* ==========================================================================
   Toast Notification
   ========================================================================== */

.toast {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-tooltip);
  min-width: 280px;
  max-width: 420px;
  padding: var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  border: 1px solid var(--color-border);
  transform: translateY(100%);
  opacity: 0;
  transition:
    transform var(--duration-normal) var(--ease-out),
    opacity var(--duration-normal) var(--ease-out);
}

.toast--visible {
  transform: translateY(0);
  opacity: 1;
}

.toast--success {
  border: 1.5px solid var(--color-success);
}

.toast--warning {
  border: 1.5px solid var(--color-warning);
}

.toast--error {
  border: 1.5px solid var(--color-error);
}

.toast--info {
  border: 1.5px solid var(--color-primary);
}

.toast__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.toast__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.toast__message {
  font-size: var(--text-xs);
  color: var(--color-gray-dark);
  line-height: var(--leading-normal);
  margin: 0;
}

.toast__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--color-gray);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.toast__close:hover {
  background: var(--color-bg-light);
  color: var(--color-text);
}

.toast__close svg {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   Banner Alert (Full Width)
   ========================================================================== */

.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 500;
}

.banner--info {
  background: var(--color-primary);
  color: var(--color-white);
}

.banner--warning {
  background: var(--color-warning);
  color: var(--color-white);
}

.banner--error {
  background: var(--color-error);
  color: var(--color-white);
}

.banner--success {
  background: var(--color-success);
  color: var(--color-white);
}

.banner__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.banner__link:hover {
  color: inherit;
  opacity: 0.8;
}

.banner__close {
  margin-left: auto;
  padding: var(--space-1);
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  transition: opacity var(--duration-fast);
}

.banner__close:hover {
  opacity: 1;
}

/* components/spinner.css */
/* ==========================================================================
   Spinner Component
   BEM: .spinner, .spinner--modifier
   ========================================================================== */

/* Base Spinner */
.spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spinner-rotate var(--duration-slower) linear infinite;
}

@keyframes spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   Spinner Sizes
   ========================================================================== */

.spinner--xs {
  width: 14px;
  height: 14px;
  border-width: 1.5px;
}

.spinner--sm {
  width: 18px;
  height: 18px;
  border-width: 2px;
}

.spinner--lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

.spinner--xl {
  width: 48px;
  height: 48px;
  border-width: 4px;
}

/* ==========================================================================
   Spinner Colors
   ========================================================================== */

.spinner--primary {
  border-color: rgba(0, 115, 153, 0.2);
  border-top-color: var(--color-primary);
}

.spinner--secondary {
  border-color: rgba(0, 181, 206, 0.2);
  border-top-color: var(--color-secondary);
}

.spinner--white {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: var(--color-white);
}

.spinner--success {
  border-color: rgba(22, 163, 74, 0.2);
  border-top-color: var(--color-success);
}

.spinner--error {
  border-color: rgba(220, 38, 38, 0.2);
  border-top-color: var(--color-error);
}

/* ==========================================================================
   Spinner with Text
   ========================================================================== */

.spinner-wrapper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.spinner-wrapper__text {
  font-size: var(--text-sm);
  color: var(--color-gray-dark);
}

/* ==========================================================================
   Full Page Spinner
   ========================================================================== */

.spinner-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal);
}

.spinner-overlay__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.spinner-overlay__text {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-gray-dark);
}

/* ==========================================================================
   Dots Spinner (Alternative Style)
   ========================================================================== */

.spinner-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.spinner-dots__dot {
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  border-radius: 50%;
  animation: spinner-dots-bounce 1.4s ease-in-out infinite both;
}

.spinner-dots__dot:nth-child(1) {
  animation-delay: -0.32s;
}

.spinner-dots__dot:nth-child(2) {
  animation-delay: -0.16s;
}

.spinner-dots__dot:nth-child(3) {
  animation-delay: 0s;
}

@keyframes spinner-dots-bounce {
  0%,
  80%,
  100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.spinner-dots--sm .spinner-dots__dot {
  width: 6px;
  height: 6px;
}

.spinner-dots--lg .spinner-dots__dot {
  width: 10px;
  height: 10px;
  gap: 6px;
}

.spinner-dots--white .spinner-dots__dot {
  background: var(--color-white);
}

/* ==========================================================================
   Button Loading State
   ========================================================================== */

.btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn--loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: spinner-rotate var(--duration-slower) linear infinite;
}

.btn--ghost.btn--loading::after {
  border-color: rgba(0, 115, 153, 0.2);
  border-top-color: var(--color-primary);
}

/* components/skeleton.css */
/* ==========================================================================
   Skeleton Loader Component
   BEM: .skeleton, .skeleton--modifier
   ========================================================================== */

/* Base Skeleton */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-light);
  border-radius: var(--radius-sm);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* ==========================================================================
   Skeleton Types
   ========================================================================== */

/* Text Line */
.skeleton--text {
  height: 16px;
  width: 100%;
  border-radius: 4px;
}

.skeleton--text-sm {
  height: 12px;
}

.skeleton--text-lg {
  height: 20px;
}

/* Heading */
.skeleton--heading {
  height: 28px;
  width: 60%;
  border-radius: 4px;
}

.skeleton--heading-lg {
  height: 36px;
  width: 50%;
}

/* Avatar / Circle */
.skeleton--circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.skeleton--circle-sm {
  width: 32px;
  height: 32px;
}

.skeleton--circle-lg {
  width: 64px;
  height: 64px;
}

/* Image / Thumbnail */
.skeleton--image {
  width: 100%;
  height: 200px;
  border-radius: var(--radius-md);
}

.skeleton--image-sm {
  height: 120px;
}

.skeleton--image-lg {
  height: 300px;
}

/* Button */
.skeleton--button {
  height: 44px;
  width: 120px;
  border-radius: var(--radius-full);
}

.skeleton--button-sm {
  height: 36px;
  width: 80px;
}

.skeleton--button-lg {
  height: 52px;
  width: 160px;
}

/* Input */
.skeleton--input {
  height: 44px;
  width: 100%;
  border-radius: var(--radius-sm);
}

/* Badge */
.skeleton--badge {
  height: 24px;
  width: 80px;
  border-radius: var(--radius-full);
}

/* ==========================================================================
   Skeleton Card
   ========================================================================== */

.skeleton-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.skeleton-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.skeleton-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.skeleton-card__footer {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* ==========================================================================
   Skeleton Table Row
   ========================================================================== */

.skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.skeleton-row:last-child {
  border-bottom: none;
}

.skeleton-row__cell {
  flex: 1;
}

.skeleton-row__cell--sm {
  flex: 0 0 80px;
}

.skeleton-row__cell--md {
  flex: 0 0 150px;
}

/* ==========================================================================
   Skeleton List
   ========================================================================== */

.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.skeleton-list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.skeleton-list-item__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ==========================================================================
   Skeleton Paragraph
   ========================================================================== */

.skeleton-paragraph {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.skeleton-paragraph .skeleton--text:last-child {
  width: 70%;
}

/* ==========================================================================
   Skeleton with Pulse Animation (Alternative)
   ========================================================================== */

.skeleton--pulse {
  animation: skeleton-pulse 2s ease-in-out infinite;
}

.skeleton--pulse::after {
  display: none;
}

@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
  }

  .skeleton--pulse {
    animation: none;
  }
}

/* components/progress.css */
/* ==========================================================================
   Progress Bar Component
   BEM: .progress, .progress__element, .progress--modifier
   ========================================================================== */

/* Base Progress Bar */
.progress {
  width: 100%;
  height: 8px;
  background: var(--color-bg-light);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  background: var(--color-primary);
  border-radius: inherit;
  transition: width var(--duration-normal) var(--ease-out);
}

/* ==========================================================================
   Progress Sizes
   ========================================================================== */

.progress--xs {
  height: 4px;
}

.progress--sm {
  height: 6px;
}

.progress--lg {
  height: 12px;
}

.progress--xl {
  height: 16px;
}

/* ==========================================================================
   Progress Colors
   ========================================================================== */

.progress--primary .progress__bar {
  background: var(--color-primary);
}

.progress--secondary .progress__bar {
  background: var(--color-secondary);
}

.progress--success .progress__bar {
  background: var(--color-success);
}

.progress--warning .progress__bar {
  background: var(--color-warning);
}

.progress--error .progress__bar {
  background: var(--color-error);
}

/* Gradient */
.progress--gradient .progress__bar {
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-secondary) 100%
  );
}

/* ==========================================================================
   Progress with Label
   ========================================================================== */

.progress-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.progress-wrapper__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.progress-wrapper__label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-gray-dark);
}

.progress-wrapper__value {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
}

/* ==========================================================================
   Progress Striped
   ========================================================================== */

.progress--striped .progress__bar {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
}

/* ==========================================================================
   Progress Animated
   ========================================================================== */

.progress--animated .progress__bar {
  animation: progress-stripes var(--duration-slowest) linear infinite;
}

@keyframes progress-stripes {
  0% {
    background-position: 1rem 0;
  }
  100% {
    background-position: 0 0;
  }
}

/* ==========================================================================
   Progress Indeterminate
   ========================================================================== */

.progress--indeterminate .progress__bar {
  width: 30% !important;
  animation: progress-indeterminate 1.5s ease-in-out infinite;
}

@keyframes progress-indeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}

/* ==========================================================================
   Circular Progress
   ========================================================================== */

.progress-circle {
  position: relative;
  width: 64px;
  height: 64px;
}

.progress-circle__svg {
  transform: rotate(-90deg);
}

.progress-circle__track {
  fill: none;
  stroke: var(--color-bg-light);
  stroke-width: 4;
}

.progress-circle__bar {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--duration-normal) var(--ease-out);
}

.progress-circle__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

/* Circle Sizes */
.progress-circle--sm {
  width: 48px;
  height: 48px;
}

.progress-circle--sm .progress-circle__value {
  font-size: var(--text-xs);
}

.progress-circle--lg {
  width: 96px;
  height: 96px;
}

.progress-circle--lg .progress-circle__value {
  font-size: var(--text-lg);
}

/* ==========================================================================
   Steps Progress
   ========================================================================== */

.progress-steps {
  display: flex;
  align-items: center;
}

.progress-steps__step {
  display: flex;
  align-items: center;
  flex: 1;
}

.progress-steps__step:last-child {
  flex: 0;
}

.progress-steps__indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg-light);
  border: 2px solid var(--color-border);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-gray);
  transition:
    background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out);
}

.progress-steps__line {
  flex: 1;
  height: 2px;
  background: var(--color-border);
  margin: 0 var(--space-2);
}

/* Step States */
.progress-steps__step--active .progress-steps__indicator {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.progress-steps__step--completed .progress-steps__indicator {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-white);
}

.progress-steps__step--completed .progress-steps__line {
  background: var(--color-success);
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .progress--animated .progress__bar {
    animation: none;
  }

  .progress--indeterminate .progress__bar {
    animation: none;
    width: 100% !important;
    transform: none;
  }
}

/* components/rating-table.css */
/* ==========================================================================
   Rating Table Component
   ========================================================================== */

.rating-section {
  padding: 88px 40px;
  background: var(--color-bg-section);
}

.rating-section__container {
  max-width: 1200px;
  margin: 0 auto;
}

.rating-section__header {
  margin-bottom: 48px;
}

/* Sektionskopf §0 */
.rating-section__title {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: 16px;
  letter-spacing: -0.015em;
}

.rating-section__subtitle {
  font-size: 1.125rem;
  color: var(--color-text-light);
  max-width: 800px;
  line-height: 1.6;
}

.rating-section__description {
  font-size: 0.9375rem;
  color: var(--color-text-light);
  max-width: 1100px;
  margin-top: 32px;
  line-height: 1.7;
}

/* Rating Table */
.rating-table {
  margin: 1.5rem 0 0;
  max-width: none;
  width: 100%;
  border-collapse: collapse;
}

.rating-table th,
.rating-table td {
  padding: 16px 12px;
  text-align: center;
  white-space: nowrap;
}

.rating-table thead tr {
  background: var(--color-bg-section, #f5f5f5);
}

.rating-table th {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-light, #666);
}

.rating-table td {
  font-size: 0.9375rem;
  color: var(--color-text, #1a1a1a);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.rating-table tr:last-child td {
  border-bottom: none;
}

.rating-table__card {
  background: var(--color-white);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.rating-table__row {
  display: grid;
  grid-template-columns: 140px repeat(8, minmax(80px, 1fr)) 140px;
  border-bottom: 1px solid var(--color-border);
}

.rating-table__row:last-child {
  border-bottom: none;
}

.rating-table__row--header {
  background: var(--color-bg-section);
}

.rating-table__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 12px;
  text-align: center;
  border-right: 1px solid var(--color-border);
}

.rating-table__cell:last-child {
  border-right: none;
}

.rating-table__cell--label {
  justify-content: flex-start;
  font-weight: 600;
  color: var(--color-text-light);
  font-size: 0.875rem;
  padding-left: 24px;
}

.rating-table__cell--total {
  font-weight: 700;
  color: var(--color-text);
  font-size: 0.875rem;
}

/* Rating Badge */
.rating-badge {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--color-white);
  position: relative;
}

.rating-badge sup {
  font-size: 0.75rem;
  position: absolute;
  top: 10px;
  right: 8px;
  font-weight: 600;
}

/* Table Values */
.rating-table__value {
  font-size: 0.9375rem;
  color: var(--color-text);
  font-weight: 500;
  white-space: nowrap;
}

.rating-table__rejected {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
}

.rating-table__rejected svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

/* gleiche Farbe wie die mobile Summenkarte */
.rating-table__total-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-accent-investing);
}

.rating-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -16px;
  padding: 0 16px;
}

/* Responsive */
@media (max-width: 1024px) {
  .rating-section {
    padding: 80px 24px;
  }

  .rating-section__title {
    font-size: 2.25rem;
  }

  .rating-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .rating-table__card {
    min-width: 900px;
  }

  .rating-table__row {
    grid-template-columns: 120px repeat(8, 90px) 130px;
  }

  .rating-badge {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
  }
}

@media (max-width: 640px) {
  .rating-section {
    padding: 60px 16px;
  }

  .rating-section__title {
    font-size: 1.75rem;
  }

  .rating-section__subtitle {
    font-size: 1rem;
  }

  .rating-table__cell--label {
    padding-left: 16px;
  }
}

/* Mobile Cards - hidden on desktop */
.rating-cards--mobile {
  display: none;
}

/* Mobile stacked cards */
@media (max-width: 768px) {
  .rating-table--desktop {
    display: none;
  }

  .rating-cards--mobile {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .rating-card {
    background: var(--color-white);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .rating-card__badge {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.375rem;
    color: var(--color-white);
    position: relative;
  }

  .rating-card__badge sup {
    font-size: 0.625rem;
    position: absolute;
    top: 10px;
    right: 8px;
    font-weight: 600;
  }

  .rating-card__details {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .rating-card__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
  }

  .rating-card__row:last-child {
    border-bottom: none;
  }

  .rating-card__label {
    font-size: 0.75rem;
    color: var(--color-text-light);
    font-weight: 500;
  }

  .rating-card__value {
    font-size: 0.875rem;
    color: var(--color-text);
    font-weight: 600;
  }

  .rating-card__value--highlight {
    color: var(--color-primary);
    font-weight: 700;
  }

  .rating-card--rejected {
    opacity: 0.6;
  }

  .rating-card__rejected {
    font-size: 0.8125rem;
    color: var(--color-text-light);
    font-weight: 500;
    text-align: center;
    padding: 8px 0;
  }

  .rating-card--total {
    background: var(--color-tint-investing);
    justify-content: center;
    text-align: center;
    padding: 24px 16px;
  }

  .rating-card__total-label {
    font-size: 0.875rem;
    color: var(--color-gray);
    font-weight: 500;
    margin-bottom: 8px;
  }

  /* #22c55e erreichte als Schrift nur 2.28:1 */
  .rating-card__total-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-accent-investing);
    letter-spacing: -0.02em;
  }
}

@media (max-width: 580px) {
  .rating-cards--mobile {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 400px) {
  .rating-cards--mobile {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .rating-card {
    flex-direction: row;
    padding: 16px;
    gap: 16px;
  }

  .rating-card__badge {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
    flex-shrink: 0;
  }

  .rating-card__details {
    flex: 1;
  }

  .rating-card__row {
    padding: 4px 0;
  }
}

/* ==========================================================================
   Yield Calculator Section Wrapper
   ========================================================================== */

.yield-calculator-section {
  padding: 88px 40px;
  background: var(--color-bg-section);
  position: relative;
}

.yield-calculator-section__container {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Override calculator colors for investing theme */
.yield-calculator-section .yield-calculator__result-amount {
  color: var(--color-accent-investing);
}

.yield-calculator-section .yield-calculator__input-group:focus-within {
  border-color: var(--color-accent-investing);
  box-shadow: 0 0 0 3px var(--color-tint-investing);
}

.yield-calculator-section .slider {
  --track-color: var(--color-accent-investing);
  --track-color-bg: var(--color-tint-investing);
}

@media (max-width: 768px) {
  .yield-calculator-section {
    padding: 80px 24px;
  }
}

.rating-section__link {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  transition: text-decoration-color var(--duration-fast) var(--ease-out);
}

.rating-section__link:hover {
  text-decoration-color: var(--color-primary);
}

/* Zellinhalte mittig zur Rating-Plakette */
.rating-table td {
  vertical-align: middle;
}

/* components/icon.css */
/* ==========================================================================
   Icon System
   Standardized icon sizes and styling
   ========================================================================== */

/* Base icon - 24px default */
.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Size variants */
.icon--sm {
  width: 16px;
  height: 16px;
}

.icon--md {
  width: 20px;
  height: 20px;
}

.icon--lg {
  width: 32px;
  height: 32px;
}

.icon--xl {
  width: 48px;
  height: 48px;
}

.icon--2xl {
  width: 64px;
  height: 64px;
}

/* Icon in buttons */
.btn .icon {
  transition:
    transform var(--duration-fast) var(--ease-out);
}

.btn:hover .icon {
  transform: translateX(2px);
}

/* Icon color utilities */
.icon--primary {
  color: var(--color-primary);
}

.icon--secondary {
  color: var(--color-secondary);
}

.icon--success {
  color: var(--color-success);
}

.icon--error {
  color: var(--color-error);
}

.icon--muted {
  color: var(--color-text-light);
}

/* Rotation utilities for chevrons/arrows */
.icon--rotate-90 {
  transform: rotate(90deg);
}

.icon--rotate-180 {
  transform: rotate(180deg);
}

.icon--rotate-270 {
  transform: rotate(270deg);
}

/* Animation utilities */
.icon--spin {
  animation: icon-spin var(--duration-slowest) linear infinite;
}

@keyframes icon-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* components/decorative-icon.css */
/* ==========================================================================
   Decorative Icon System
   Gradient-based icons for product cards, benefits, requirements, etc.
   ========================================================================== */

/* Base decorative icon */
.decorative-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Size variants */
.decorative-icon--sm {
  width: 40px;
  height: 40px;
}

.decorative-icon--md {
  width: 48px;
  height: 48px;
}

.decorative-icon--lg {
  width: 64px;
  height: 64px;
}

/* With background (rounded square) */
.decorative-icon--with-bg {
  /* Background is rendered in SVG */
}

/* Hover effects for interactive contexts */
.decorative-icon--interactive {
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
  cursor: pointer;
}

.decorative-icon--interactive:hover {
  transform: scale(1.05);
}

/* Card context - margin below */
.decorative-icon--card {
  margin-bottom: var(--space-4);
}

/* components/rating-badge.css */
/* ==========================================================================
   Rating Badge Component
   ========================================================================== */

.rating-badge {
  display: inline-flex;
  flex-shrink: 0;
}

/* Sizes */
.rating-badge--sm {
  width: 32px;
  height: 32px;
}

.rating-badge--md {
  width: 40px;
  height: 40px;
}

.rating-badge--lg {
  width: 56px;
  height: 56px;
}

/* Interactive state for clickable badges */
.rating-badge--interactive {
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out);
}

.rating-badge--interactive:hover {
  transform: scale(1.05);
}

/* Shadow variant */
.rating-badge--shadow {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

/* components/table.css */
/* ==========================================================================
   Table Component - Responsive Tables
   ========================================================================== */

/* Base table styles */
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: var(--text-sm);
}

th,
td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}

/* Titelzeile hell-neutral: das fruehere --color-gray-light (#8e8f8f) gab
   dunkler Schrift nur schwachen Kontrast und wirkte wie ein Balken. */
th {
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-light-4);
}

td {
  color: var(--color-gray-dark);
}

/* Responsive table wrapper - use this class to wrap tables */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--space-4);
}

.table-responsive table {
  min-width: 600px;
}

/* Make all tables in content areas responsive on mobile */
@media (max-width: 768px) {
  /* Wrap tables in scrollable container */
  .legal-section__content,
  .blog__content,
  .subpage__content,
  .prose,
  article,
  .content {
    /* Allow tables to overflow and scroll */
    & > table,
    & table {
      display: block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin-bottom: var(--space-4);
    }
  }

  /* Fallback for browsers without nesting support */
  .legal-section__content > table,
  .blog__content > table,
  .subpage__content > table,
  .prose > table,
  article > table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Ensure table content doesn't wrap awkwardly */
  table {
    min-width: 500px;
  }

  th,
  td {
    padding: var(--space-2) var(--space-3);
    white-space: nowrap;
  }

  /* Allow text wrapping in specific columns if needed */
  td.wrap,
  th.wrap {
    white-space: normal;
    min-width: 150px;
  }
}

/* components/cookie-consent.css */
/* ==========================================================================
   Cookie Consent Modal
   EDÖB-konformes Cookie-Banner – cashare.ch
   ========================================================================== */

/* Overlay */
.cc-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(9, 17, 36, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: cc-fade-in var(--duration-fast) var(--ease-out);
}

@keyframes cc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Modal box */
.cc-modal {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px rgba(9, 17, 36, 0.18);
  padding: var(--space-8);
  animation: cc-slide-in var(--duration-normal) var(--ease-spring);
}

@keyframes cc-slide-in {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(-12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Header */
.cc-modal__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.cc-modal__icon {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
}

.cc-modal__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.2;
}

/* Intro text */
.cc-modal__intro {
  margin: 0 0 var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-gray-dark);
  line-height: 1.6;
}

.cc-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cc-link:hover {
  color: var(--color-secondary);
}

/* Action buttons */
.cc-modal__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.cc-btn-full {
  width: 100%;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-size: var(--text-sm);
}

/* "Einstellungen anpassen" subtle link */
.cc-customize-link {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  padding: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-gray);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cc-customize-link:hover {
  color: var(--color-primary);
}

/* Back button */
.cc-back-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary);
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}

.cc-back-btn:hover {
  opacity: 0.75;
}

/* Categories */
.cc-categories {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
}

.cc-category {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-light-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-light-2);
}

.cc-category__info {
  flex: 1;
  min-width: 0;
}

.cc-category__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-1);
  cursor: default;
}

label.cc-category__label {
  cursor: pointer;
}

.cc-category__desc {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-gray-dark);
  line-height: 1.5;
}

/* "Immer aktiv" badge */
.cc-always-on {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  background: rgba(19, 222, 185, 0.12);
  color: #0a8f76;
  border-radius: 9999px;
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  margin-top: 2px;
}

/* Toggle switch */
.cc-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
}

.cc-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.cc-toggle__slider {
  position: absolute;
  inset: 0;
  background: var(--color-light-1);
  border-radius: 9999px;
  transition: background var(--duration-fast) var(--ease-out);
}

.cc-toggle__slider::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  background: var(--color-white);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform var(--duration-fast) var(--ease-out);
}

.cc-toggle input:checked + .cc-toggle__slider {
  background: var(--color-primary);
}

.cc-toggle input:checked + .cc-toggle__slider::before {
  transform: translateX(20px);
}

.cc-toggle input:focus-visible + .cc-toggle__slider {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Newsletter form blocked state */
.newsletter-consent-blocked {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-light-4);
  border: 1px solid var(--color-light-2);
  border-radius: var(--radius-lg);
}

.newsletter-consent-blocked__text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-gray-dark);
  line-height: 1.5;
}

/* Footer action button (cookie settings link) */
.footer__link--action {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

/* Responsive */
@media (max-width: 560px) {
  .cc-modal {
    padding: var(--space-6);
    max-height: 100vh;
    border-radius: var(--radius-lg);
  }

  .cc-category {
    gap: var(--space-3);
  }
}


/* Pages */
/* pages/error.css */
/* ==========================================================================
   Error Page (404)

   CAS-2983 §7.4: eine zentrierte Karte mit Icon-Tile, Eyebrow und drei
   Wegen. Der Emoji-Wirbel (drei rotierende Ringe plus Mondphasen) ist
   entfallen — er lenkte von der einzigen Aufgabe der Seite ab, den Weg
   zurück zu zeigen, und lief als Dauer-Animation.
   ========================================================================== */

.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 120px 20px 88px;
  background: var(--color-bg-section);
}

.error-page__card {
  max-width: 560px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 40px;
  background: var(--color-white);
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.error-page__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--color-tint-primary);
  color: var(--color-primary);
  margin-bottom: var(--space-5);
}

.error-page__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.error-page__title {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

.error-page__description {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-ink-60);
  margin: 0 0 var(--space-6);
  max-width: 44ch;
}

.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

@media (max-width: 600px) {
  .error-page {
    padding: 100px 16px 60px;
  }

  .error-page__card {
    padding: 32px 24px;
  }

  .error-page__title {
    font-size: 1.875rem;
  }

  .error-page__actions {
    flex-direction: column;
    align-self: stretch;
  }
}

/* pages/product.css */
/* ==========================================================================
   Product Pages Styles (Privatkredit, KMU-Kredit, Hypothek)
   ========================================================================== */

/* Product Hero Section */
.product-hero {
  position: relative;
  overflow: hidden;
  padding: 104px 40px 88px;
  background: linear-gradient(180deg, #fff 0%, #f6fcfd 52%, #fff 100%);
}

/* Akzent-Wash. Vorher lagen hier drei Radialverlaeufe bei 90 % Deckkraft
   plus blur(50px) — der Kopf war farbiger als die ganze uebrige Seite. */
/* Akzent-Wash aus der Weltfarbe der Seite (theme-*). Vorher drei Varianten
   mit festen rgba-Werten; Privatkredit hatte gar keine eigene. */
.product-hero::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto -25%;
  height: 150%;
  background:
    radial-gradient(
      ellipse 60% 55% at 22% 26%,
      color-mix(
        in srgb,
        var(--world-accent, var(--color-primary)) 18%,
        transparent
      ),
      transparent 68%
    ),
    radial-gradient(
    ellipse 52% 48% at 78% 70%,
    rgba(0, 181, 206, 0.13),
    transparent 70%
  );
  filter: blur(30px);
  pointer-events: none;
}

/* Kontrastebene wie im Hero der Startseite: oben deckend, damit die
   fixierte Navigation auf jedem Kopf lesbar bleibt. */
.product-hero::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 320px;
  background: var(--veil-hero);
  pointer-events: none;
}

/* Je Welt nur die erste Ellipse umfaerben, das Cyan bleibt */
/* Zwei Spalten, linksbuendig wie auf der Startseite — zentriert war vorher
   die Regel und passte zu keiner anderen Sektion. */
.product-hero__container {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

/* Zwei Spalten erst, wenn rechts wirklich etwas steht. Die Glaskarte
   "In drei Schritten" braucht Inhalt, den die content-Objekte heute nicht
   hergeben — bis dahin steht der Kopf einspaltig statt halb leer. */
.product-hero__container--split {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

/* ==========================================================================
   Rechner im Seitenkopf (23.09.2026)

   Auf den Kreditnehmer- und Anlegerseiten steht der Rechner im Hero statt
   am Seitenende: die erste Frage ist "was kostet mich das?". Die Insel
   braucht 658px Mindestbreite (gemessen), deshalb erst ab 1200px
   nebeneinander - darunter stapelt der Kopf wie bisher.
   ========================================================================== */

/* Dieselbe Aufteilung wie im Hero der Startseite: `1fr 1fr` degradiert von
   selbst zu (Rest, Rechner) — die Insel nimmt ihre Mindestbreite von 655px,
   die Textspalte bekommt, was uebrig bleibt. Unter 1024px gestapelt, auch
   das wie auf der Startseite. */
@media (min-width: 1025px) {
  .product-hero__container--calc {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
  }

  /* Die Textspalte darf schrumpfen: sonst drueckt ein langes Titelwort
     («Finanzierungslösungen», KMU) die Spalte breiter, und der Rechner
     ragt rechts aus dem Bild (bei 1280px um 72px). Die Aufteilung bleibt
     1fr 1fr wie auf der Startseite. */
  .product-hero__container--calc > .product-hero__content {
    min-width: 0;
  }
}

/* Hero-CTA auf dem farbigen Verlauf: Navy gefuellt, weisse Schrift
   (Entscheid 24.09.2026). Marken-Cyan hatte gegen die hellen Verlaufstoene
   nur 1.1-2.1:1 und stach vor Lila und Pink hervor; die Navy-Kante half nur
   halb. Navy steht gegen jeden Verlaufston bei >= 14:1, Weiss darauf 18:1 —
   wie «Loslegen» in der Navigation und der Knopf im Rechner. Tuerkis bleibt
   der CTA auf dunklen Flaechen (CTA-Baender, Landing Pages). */
:is(.hero, [class*="hero--mesh"]) .btn--cta {
  background-color: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-white);
}

:is(.hero, [class*="hero--mesh"]) .btn--cta:hover {
  background-color: #1d2a45;
  border-color: #1d2a45;
  color: var(--color-white);
}

/* Die Inseln bringen fuer den Vollbreiten-Einsatz einen Seitenabstand mit;
   in der Spalte stoert er. */
.product-hero__calc .loan-calculator,
.product-hero__calc .home-calculator,
.product-hero__calc .yield-calculator {
  margin: 0;
}

/* Mesh statt statischem Wash: derselbe Verlauf wie auf der Startseite,
   inklusive Ausblenden nach oben zur Navigation und nach unten zur
   naechsten Sektion. */
.product-hero--mesh {
  background: var(--color-white);
  isolation: isolate;
}

.product-hero--mesh::before {
  display: none;
}

/* Scroll-Kopplung nur mit Browser-Unterstützung — sonst springt die Animation
   in den Endzustand (Firefox: Verlauf unsichtbar). CAS-3118 */
@supports (animation-timeline: scroll()) {
  .product-hero--mesh .mesh-gradient {
    animation: hero-fade-out linear both;
    animation-timeline: scroll();
    animation-range: 150px 450px;
  }
}

.product-hero--mesh::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Die Basisregel setzt height: 320px; ohne das hier endete die Ebene
     samt Weiss-Auslauf bei 320px - mit dem Rechner im Hero (~970px hoch)
     als harte waagrechte Kante mitten im Verlauf. */
  height: auto;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.97) 0px,
      rgba(255, 255, 255, 0.85) 72px,
      rgba(255, 255, 255, 0) 200px
    ),
    linear-gradient(
    to bottom,
    transparent 76%,
    rgba(255, 255, 255, 0.75) 92%,
    #fff 100%
  );
}

.product-hero__content {
  position: relative;
  z-index: 2;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Ersetzt .product-hero__badge — die Pille mit grauem Rand faellt weg */
.product-hero__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--world-accent, var(--color-primary));
  margin-bottom: var(--space-4);
}

.product-hero__title {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  /* max-width haelt den Titel in der Spalte; Silbentrennung nur im
     Deutschen (lange Komposita), siehe :lang(de) unten. In FR trennte sie
     «finan- / cement» (CAS-3088, Nr. 103) */
  max-width: 100%;
  hyphens: manual;
  overflow-wrap: break-word;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-4);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.product-hero__title:lang(de) {
  hyphens: auto;
}

.product-hero__subtitle {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-4);
  line-height: 1.4;
}

.product-hero__text {
  font-size: 1.1875rem;
  color: var(--color-ink-60);
  line-height: 1.6;
  margin-bottom: var(--space-8);
  max-width: 54ch;
  text-wrap: pretty;
}

/* Zwei Kennzahlen mit Trennstrich, wie die Kennzahlen-Zeile der Startseite */
.product-hero__figures {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin: var(--space-8) 0 0;
}

.product-hero__figure {
  position: relative;
  display: flex;
  flex-direction: column;
}

.product-hero__figure + .product-hero__figure::before {
  content: "";
  position: absolute;
  left: calc(var(--space-6) / -2);
  top: 50%;
  width: 1px;
  height: 38px;
  transform: translateY(-50%);
  background: rgba(9, 17, 36, 0.12);
}

.product-hero__figure-value {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.product-hero__figure-label {
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--color-ink-80);
}

/* Glaskarte rechts — dieselbe Oberflaeche wie der Rechner im Startseiten-Hero */
.product-hero__panel {
  position: relative;
  z-index: 2;
  border-radius: var(--radius-panel);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    3.26px 8.16px 24.48px rgba(0, 0, 0, 0.06),
    0 24px 64px rgba(0, 85, 112, 0.08);
  padding: var(--space-8);
}

@media (max-width: 1024px) {
  .product-hero {
    padding: 88px 24px 64px;
  }

  .product-hero__container--split {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

@media (max-width: 600px) {
  .product-hero__figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
  }

  .product-hero__figure + .product-hero__figure::before {
    display: none;
  }
}

/* Product Grid */
.product-grid {
  gap: var(--space-8);
}

@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}

/* Product Card */
.product-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  text-align: left;
}

.product-card__icon {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-4);
  background: var(--world-tint, var(--color-tint-primary));
  color: var(--world-accent, var(--color-primary));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-card__icon-svg {
  width: 28px;
  height: 28px;
  color: var(--color-primary);
}

.product-card__title {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.product-card__description {
  font-size: var(--text-sm);
  color: var(--color-gray);
  line-height: 1.6;
}

/* Requirements List */
.requirements-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.requirements-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.requirements-list__icon {
  width: 24px;
  height: 24px;
  color: var(--color-success);
  flex-shrink: 0;
}

/* Trust Stats */
.trust-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-12);
  flex-wrap: wrap;
  margin-bottom: var(--space-12);
}

.trust-stats--centered {
  margin-bottom: 0;
}

.trust-stat {
  text-align: center;
}

.trust-stat__value {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.trust-stat__label {
  font-size: var(--text-sm);
  color: var(--color-gray);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Trust Section */
.trust-section {
  max-width: 900px;
}

.trust-section__header {
  margin-bottom: var(--space-10);
}

.trust-section__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--space-4);
  line-height: 1.2;
}

.trust-section__subtitle {
  font-size: var(--text-lg);
  color: var(--color-gray);
  line-height: 1.7;
}

.trust-section__stats {
  margin-bottom: var(--space-12);
}

/* Trust Features */
.trust-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.trust-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-white);
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.trust-feature__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--world-tint, var(--color-tint-primary));
  color: var(--world-accent, var(--color-primary));
  display: flex;
  align-items: center;
  justify-content: center;
}

.trust-feature__content {
  flex: 1;
}

.trust-feature__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.trust-feature__description {
  font-size: var(--text-sm);
  color: var(--color-gray);
  line-height: 1.6;
}

/* CTA Block */
.cta-block {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
  position: relative;
}

.cta-block__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--color-white);
  margin-bottom: var(--space-4);
  line-height: 1.2;
}

.cta-block__subtitle {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--space-8);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .cta-block .btn {
    display: inline-flex;
    width: auto;
  }
}

/* Loan Type Cards (KMU) */
.loan-types {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}

@media (max-width: 768px) {
  .loan-types {
    grid-template-columns: 1fr;
  }
}

.loan-type-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
  text-align: left;
  transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

.loan-type-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    135deg,
    rgba(0, 181, 206, 0.1) 0%,
    rgba(0, 115, 153, 0.1) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  transition: transform var(--duration-normal) var(--ease-out);
}

.loan-type-card__icon svg {
  width: 28px;
  height: 28px;
  color: var(--color-primary);
}

.loan-type-card__title {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.loan-type-card__description {
  font-size: var(--text-base);
  color: var(--color-gray);
  line-height: 1.6;
  margin-bottom: var(--space-6);
}

/* Use Case Cards */
.use-cases {
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .use-cases {
    grid-template-columns: repeat(2, 1fr);
  }
}

.use-case-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  text-align: left;
  box-shadow: var(--shadow-card);
}

.use-case-card__icon {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-4);
  background: linear-gradient(
    135deg,
    rgba(0, 181, 206, 0.1) 0%,
    rgba(0, 115, 153, 0.1) 100%
  );
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.use-case-card__icon svg {
  width: 28px;
  height: 28px;
  color: var(--color-primary);
}

.use-case-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.use-case-card__description {
  font-size: var(--text-sm);
  color: var(--color-gray);
  line-height: 1.5;
}

/* Two Column Layout */
.two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
}

@media (max-width: 768px) {
  .two-column {
    grid-template-columns: 1fr;
  }
}

.two-column__left,
.two-column__right {
  display: flex;
  flex-direction: column;
}

.two-column .section__title {
  text-align: left;
  margin-bottom: var(--space-6);
}

/* Advantages Grid */
.advantages-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

@media (max-width: 1024px) {
  .advantages-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .advantages-grid {
    grid-template-columns: 1fr;
  }
}

.advantage-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  transition:
    background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
  border: 1px solid transparent;
}

.advantage-card--with-icon .advantage-card__icon {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-4);
  background: linear-gradient(
    135deg,
    rgba(0, 181, 206, 0.12) 0%,
    rgba(0, 115, 153, 0.12) 100%
  );
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--duration-normal) var(--ease-out);
}

.advantage-card--with-icon .advantage-card__icon svg {
  width: 26px;
  height: 26px;
  color: var(--color-primary);
}

.advantage-card__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.advantage-card__description {
  font-size: var(--text-sm);
  color: var(--color-gray);
  line-height: 1.6;
}

/* Enhanced Requirements & Advantages */
.two-column--enhanced {
  gap: var(--space-16);
  align-items: start;
}

.requirements-list--enhanced {
  gap: var(--space-3);
}

.requirements-list__item--enhanced {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition:
    background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.requirements-list__check {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.requirements-list__check svg {
  width: 14px;
  height: 14px;
}

.advantages-grid--enhanced {
  gap: var(--space-4);
}

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

.advantage-card--enhanced {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition:
    background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
  text-align: left;
}

.advantage-card__icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(0, 181, 206, 0.12),
    rgba(0, 115, 153, 0.12)
  );
  color: var(--color-primary);
  transition: transform var(--duration-fast) var(--ease-out);
}

.advantage-card--enhanced:hover .advantage-card__icon {
  transform: scale(1.05);
}

.advantage-card--enhanced .advantage-card__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.advantage-card--enhanced .advantage-card__description {
  font-size: var(--text-sm);
  color: var(--color-gray);
}

/* Mortgage Products */
.mortgage-products {
  gap: var(--space-6);
}

@media (max-width: 768px) {
  .mortgage-products {
    grid-template-columns: 1fr;
  }
}

.mortgage-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
  transition:
    transform var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    background var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: block;
}

.mortgage-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 115, 153, 0.12);
  border-color: rgba(0, 181, 206, 0.2);
}

.mortgage-card:hover .mortgage-card__icon {
  transform: scale(1.1);
  background: linear-gradient(
    135deg,
    rgba(0, 181, 206, 0.2),
    rgba(0, 115, 153, 0.12)
  );
}

.mortgage-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-secondary) 100%
  );
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.mortgage-card:hover::before {
  opacity: 1;
}

.mortgage-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.mortgage-card__icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(
    135deg,
    rgba(0, 181, 206, 0.1) 0%,
    rgba(0, 115, 153, 0.1) 100%
  );
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--duration-normal) var(--ease-out), background var(--duration-normal) var(--ease-out);
}

.mortgage-card__icon svg {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}

.mortgage-card__title {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-text);
}

.mortgage-card__description {
  font-size: var(--text-sm);
  color: var(--color-gray);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.mortgage-card__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.mortgage-card__feature {
  font-size: var(--text-xs);
  color: var(--color-primary);
  background: rgba(0, 115, 153, 0.08);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-weight: 500;
}

/* Requirement Cards (Mortgage) */
.requirement-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 768px) {
  .requirement-cards {
    grid-template-columns: 1fr;
  }
}

.requirement-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  transition:
    color var(--duration-normal) var(--ease-out),
    background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out),
    opacity var(--duration-normal) var(--ease-out);
  border: 1px solid transparent;
}

.requirement-card--enhanced {
  padding: var(--space-8) var(--space-6);
}

.requirement-card__icon {
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-4);
  background: linear-gradient(
    135deg,
    rgba(0, 181, 206, 0.12) 0%,
    rgba(0, 115, 153, 0.12) 100%
  );
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--duration-normal) var(--ease-out);
}

.requirement-card__icon svg {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}

.requirement-card__label {
  font-size: var(--text-xs);
  color: var(--color-gray);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.requirement-card__value {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.3;
}

/* Audience Cards */
.audience-grid {
  gap: var(--space-6);
}

@media (max-width: 768px) {
  .audience-grid {
    grid-template-columns: 1fr;
  }
}

.audience-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
  transition:
    color var(--duration-normal) var(--ease-out),
    background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out),
    opacity var(--duration-normal) var(--ease-out);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}

.audience-card::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-secondary) 100%
  );
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.audience-card__icon {
  width: 72px;
  height: 72px;
  margin-bottom: var(--space-5);
  background: linear-gradient(
    135deg,
    rgba(0, 181, 206, 0.12) 0%,
    rgba(0, 115, 153, 0.12) 100%
  );
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    color var(--duration-normal) var(--ease-out),
    background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out),
    opacity var(--duration-normal) var(--ease-out);
}

.audience-card__icon svg {
  width: 32px;
  height: 32px;
  color: var(--color-primary);
}

.audience-card__title {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.audience-card__description {
  font-size: var(--text-sm);
  color: var(--color-gray);
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
  .product-hero {
    /* War 0 links/rechts: Titel und Text stiessen an den Bildschirmrand
       (Fund 27.09.2026, Samsung S24 FE). Andere Seitenkoepfe haben 16-24px. */
    padding: 100px 20px 80px;
  }

  .product-hero__text {
    font-size: var(--text-base);
  }

  .product-hero .btn--ghost {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
  }

  .trust-stats {
    gap: var(--space-8);
  }

  .trust-features,
  .advantages-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Rechner als Seitenabschluss (CAS-2983 2.7)

   Auf einer Produktseite ist die offene Frage "was kostet mich das?", nicht
   "welche Kreditart?" - deshalb schliesst der Rechner ab statt einer
   Karten-CTA. Ein Rechner der Zielgruppe, ohne Tabs; der Antragsknopf steckt
   in der Insel und muss daneben nicht wiederholt werden.
   ========================================================================== */

.calc-closer__grid {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

/* Erst ab 1200px nebeneinander: die Rechner-Insel braucht 658px
   Mindestbreite (gemessen), dazu die Textspalte und der Abstand. Bei 1000px
   lief sie ueber den Rand hinaus. */
@media (min-width: 1200px) {
  .calc-closer__grid {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: var(--space-12);
  }
}

.calc-closer__title {
  font-size: 2.25rem;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}

.calc-closer__subtitle {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-ink-70);
  margin: 0;
}

@media (max-width: 1199px) {
  .calc-closer__title {
    font-size: 1.75rem;
  }
}

/* Die Insel bringt fuer den Hero einen eigenen Seitenabstand mit; in einer
   Spalte stoert er. */
.calc-closer__panel .loan-calculator {
  margin: 0;
}

/* pages/legal.css */
/* ==========================================================================
   Legal Pages (AGB, Datenschutz, Impressum, Cookies) - Modern Design
   ========================================================================== */

.legal-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

/* Header - Clean and Professional */
.legal-page__header {
  padding: 140px 0 80px;
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
  position: relative;
  overflow: hidden;
}

/* Subtle decorative element */
.legal-page__header::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 115, 153, 0.03) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.legal-page__header .container {
  position: relative;
  z-index: 1;
}

/* Eyebrow über dem Titel (CAS-2983 §7.3) */
.legal-page__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.legal-page__title {
  font-size: 2.625rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.legal-page__subtitle {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-ink-60);
  margin-bottom: var(--space-6);
}

/* Download & Links */
.legal-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.legal-page__download,
.legal-page__pricing-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
}

.legal-page__download {
  background: var(--color-primary);
  color: var(--color-white);
}

.legal-page__download:hover {
  background: var(--color-primary-dark, #005f7f);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 115, 153, 0.3);
}

.legal-page__pricing-link {
  background: var(--color-white);
  color: var(--color-primary);
  border: 1px solid rgba(0, 115, 153, 0.2);
}

.legal-page__pricing-link:hover {
  background: rgba(0, 115, 153, 0.05);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

/* Content Area */
.legal-page__content {
  padding: var(--space-10) 20px var(--space-20);
  position: relative;
}

/* Links das Inhaltsverzeichnis, rechts die Lesespalte (§7.3) */
.legal-page__layout {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.legal-page__column {
  max-width: 760px;
}

.legal-toc {
  position: sticky;
  top: 96px;
  padding: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}

.legal-toc__title {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-60);
  margin-bottom: var(--space-3);
}

/* Keine eigene Nummerierung: die Abschnittstitel tragen schon
   römische Ziffern (I., II., …) */
.legal-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.legal-toc__link {
  display: block;
  padding: 7px 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--color-ink-70);
  text-decoration: none;
  border-top: 1px solid var(--color-light-3);
}

.legal-toc__item:first-child .legal-toc__link {
  border-top: 0;
}

.legal-toc__link:hover {
  color: var(--color-primary);
}

/* Legal Sections - Refined Cards */
.legal-section {
  margin-bottom: var(--space-10);
  scroll-margin-top: 96px;
}

.legal-section:last-child {
  margin-bottom: 0;
}

/* Section Title - Elegant Underline */
.legal-section__title {
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-light-3);
  letter-spacing: -0.01em;
}

/* Content Styling */
.legal-section__content {
  font-size: 1.0625rem;
  color: var(--color-ink-80);
  line-height: 1.75;
}

.legal-section__content h4 {
  font-size: 1.3125rem;
  font-weight: 600;
  color: var(--color-text);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
}

.legal-section__content h4:first-child {
  margin-top: 0;
}

.legal-section__content h5 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.legal-section__content p {
  margin-bottom: var(--space-4);
}

.legal-section__content p:last-child {
  margin-bottom: 0;
}

/* Lists - Modern Styling */
.legal-section__content ul,
.legal-section__content ol {
  margin: var(--space-4) 0;
  padding-left: 0;
  list-style: none;
}

.legal-section__content li {
  margin-bottom: var(--space-3);
  padding-left: var(--space-6);
  position: relative;
}

.legal-section__content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-secondary) 100%
  );
  border-radius: 50%;
}

.legal-section__content ol {
  counter-reset: legal-counter;
}

.legal-section__content ol li {
  counter-increment: legal-counter;
}

.legal-section__content ol li::before {
  content: counter(legal-counter) ".";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--text-sm);
}

/* Links - Subtle and Professional */
.legal-section__content a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-bottom-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
  border-bottom: 1px solid transparent;
}

.legal-section__content a:hover {
  color: var(--color-secondary);
  border-bottom-color: currentColor;
}

/* Strong text */
.legal-section__content strong {
  color: var(--color-text);
  font-weight: 600;
}

/* Blockquote/Important notices */
/* Ein Absatz, der nur aus <strong> besteht, ist im Rechtstext ein
   Risikohinweis — Warnfläche statt Petrol-Kachel (CAS-2983 §7.3) */
.legal-section__content p strong:first-child:last-child {
  display: block;
  padding: var(--space-4) var(--space-5);
  background: var(--color-tint-warning);
  border: 1px solid var(--color-border-warning);
  border-radius: var(--radius-md);
  margin: var(--space-5) 0;
}

/* Responsive */
@media (max-width: 768px) {
  .legal-page__header {
    padding: 100px var(--space-4) 50px;
  }

  .legal-page__title {
    font-size: var(--text-2xl);
  }

  .legal-page__subtitle {
    font-size: var(--text-base);
  }

  .legal-page__content {
    padding: var(--space-8) 0 var(--space-16);
  }

  .legal-section {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
  }

  .legal-section__title {
    font-size: var(--text-lg);
  }

  .legal-section__content {
    font-size: var(--text-sm);
  }

  .legal-section__content h4 {
    font-size: var(--text-base);
  }
}

/* Print styles */
@media print {
  .legal-page__header {
    padding: 20px 0;
    background: none;
  }

  .legal-section {
    box-shadow: none;
    border: 1px solid #e5e5e5;
    page-break-inside: avoid;
  }
}

/* ==========================================================================
   Hilfe-Karte am Ende (§7.3) — eine Rechtsseite verkauft nicht
   ========================================================================== */

.legal-help {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin-top: var(--space-10);
  padding: var(--space-6);
  background: var(--color-light-4);
  border-radius: var(--radius-lg);
}

.legal-help__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-primary);
}

.legal-help__title {
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 4px;
}

.legal-help__text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-ink-60);
  margin: 0 0 var(--space-3);
}

.legal-help__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.legal-help__link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

.legal-help__link:hover {
  text-decoration: underline;
}

@media (max-width: 1024px) {
  .legal-page__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .legal-toc {
    position: static;
    max-height: none;
  }
}

/* ==========================================================================
   Tabellen im Rechtstext (z. B. Cookie-Liste)

   Das HTML kommt als String aus dem content-Objekt, es gibt also keinen
   Wrapper zum Scrollen — deshalb scrollt die Tabelle selbst, sonst läuft
   sie auf dem Handy über den Rand (Befund /cookies, 375px).
   ========================================================================== */

.legal-section__content table {
  display: block;
  width: 100%;
  /* hebt das globale min-width: 500px aus components/table.css auf —
     sonst schiebt die Tabelle die Seite auf dem Handy auseinander */
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  margin: var(--space-5) 0;
  font-size: 0.9375rem;
}

.legal-section__content th,
.legal-section__content td {
  padding: 12px 16px;
  text-align: left;
  border-top: 1px solid var(--color-light-3);
  vertical-align: top;
}

.legal-section__content thead th {
  border-top: 0;
  background: var(--color-light-4);
  font-weight: 600;
  color: var(--color-ink-80);
  white-space: nowrap;
}

/* pages/pricing.css */
/* ==========================================================================
   Pricing / Gebührenverordnung Page
   ========================================================================== */

/* Fee Table */
.fee-table {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Echte Tabelle (CAS-2981 Punkt 6), Layout weiter als Flex-Zeilen */
table.fee-table {
  display: block;
  width: 100%;
  /* die allgemeine Tabellenregel der Rechtstexte (min-width 500px) gilt hier
     nicht - sonst wird die Tabelle auf dem Handy abgeschnitten */
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.fee-table__body {
  display: block;
}

.fee-table th {
  font-weight: inherit;
  text-align: left;
}

.fee-table__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  gap: var(--space-4);
  transition:
    background-color var(--duration-fast) var(--ease-out);
}

.fee-table__row:last-child {
  border-bottom: none;
}

.fee-table__row:hover {
  background: rgba(0, 115, 153, 0.02);
}

.fee-table__row--group {
  background: linear-gradient(
    135deg,
    rgba(0, 115, 153, 0.04) 0%,
    rgba(0, 181, 206, 0.02) 100%
  );
  font-weight: 600;
  border-bottom: 1px solid rgba(0, 115, 153, 0.1);
}

.fee-table__row--child {
  padding-left: var(--space-8);
  background: var(--color-white);
}

.fee-table__row--child:hover {
  background: rgba(0, 115, 153, 0.02);
}

.fee-table__children {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.fee-table__children:last-child {
  border-bottom: none;
}

.fee-table__label {
  flex: 1;
  min-width: 0;
}

.fee-table__label-text {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.5;
}

.fee-table__sublabel {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-gray);
  margin-top: 2px;
  line-height: 1.4;
}

.fee-table__value {
  flex-shrink: 0;
  max-width: 45%;
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-weight: 600;
  text-align: right;
  line-height: 1.5;
}

/* Pricing Section Overrides */
.pricing-section {
  overflow: hidden;
}

.pricing-section__note {
  font-size: var(--text-xs);
  color: var(--color-gray);
  font-style: italic;
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgba(255, 174, 31, 0.06);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-warning);
  line-height: 1.5;
}

/* Subsections (for reminder fees) */
.pricing-subsection {
  margin-top: var(--space-5);
}

.pricing-subsection:first-of-type {
  margin-top: 0;
}

.pricing-subsection__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  padding: var(--space-3) var(--space-5);
  background: linear-gradient(
    135deg,
    rgba(0, 115, 153, 0.06) 0%,
    rgba(0, 181, 206, 0.03) 100%
  );
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-bottom: 1px solid rgba(0, 115, 153, 0.1);
}

/* Free/Kostenlos highlight */
.fee-table__row .fee-table__value {
  white-space: normal;
}

/* Responsive */
@media (max-width: 768px) {
  .fee-table__row {
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
  }

  .fee-table__row--child {
    padding-left: var(--space-6);
  }

  .fee-table__value {
    max-width: 100%;
    text-align: left;
    font-size: var(--text-xs);
  }

  .pricing-subsection__title {
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-4);
  }
}

/* Print styles */
@media print {
  .fee-table {
    border: 1px solid #e5e5e5;
  }

  .fee-table__row {
    border-bottom: 1px solid #e5e5e5;
  }

  .fee-table__row--group {
    background: #f5f5f5;
  }

  .fee-table__row:hover,
  .fee-table__row--child:hover {
    background: none;
  }
}

/* pages/who-we-are.css */
/* ==========================================================================
   Who We Are Page - Wer sind wir

   CAS-2983 §6: Karten und Sektionsköpfe wie überall (§0). Entfallen:
   Konfetti-Radials und dunkle Fläche der Jubiläumssektion, dunkler
   Board-Block, die unbenutzten .wwa-hero-Regeln (die Seite nutzt
   .subpage-hero). Neutrale Seite ohne Zielgruppe — Akzent Petrol.
   ========================================================================== */

/* ==========================================================================
   Credentials — Vertrauens-Vierer
   ========================================================================== */

.wwa-credentials {
  position: relative;
  z-index: 2;
  padding: 24px 40px 88px;
}

.wwa-credentials__container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.wwa-credentials__card {
  background: var(--color-white);
  padding: 32px;
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* Logo-Zeile (23.09.2026): Siegel und Logos in ihren eigenen Farben, ohne
   Kachel. In der 64px-Kachel mit Tint blieb vom Polyreg-Schriftzug (99x41)
   ein 16px hoher grauer Rest, und das Cashare-Zeichen war grau. Die Zeile
   hat eine feste Hoehe, damit die Titel der vier Karten auf einer Linie
   stehen. */
.wwa-credentials__icon {
  height: 52px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.wwa-credentials__icon svg {
  width: 40px;
  height: 40px;
}

.wwa-credentials__img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.wwa-credentials__title {
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}

.wwa-credentials__text {
  font-size: 0.9375rem;
  color: var(--color-ink-60);
  line-height: 1.6;
  white-space: pre-line;
}

/* ==========================================================================
   Jubiläum — dunkle Bande, damit die Zahl Gewicht bekommt. Die Zahl kommt
   aus companyStats.json. Navy wie die Embedded-Kacheln; Schrift darauf nur
   Weiss (18.8:1), Weiss 72 % (9.9:1) und Marken-Cyan (7.6:1).
   ========================================================================== */

.wwa-years {
  position: relative;
  overflow: hidden;
  padding: 96px 40px;
  background: var(--color-surface-embedded);
  color: var(--color-white);
  isolation: isolate;
}

/* Leiser Schein hinter der Zahl, in Marken-Cyan */
.wwa-years::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 640px;
  height: 640px;
  left: -160px;
  top: 50%;
  transform: translateY(-50%);
  background: radial-gradient(
    circle,
    rgba(0, 181, 206, 0.28) 0%,
    rgba(0, 181, 206, 0) 65%
  );
  pointer-events: none;
}

.wwa-years__container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: center;
}

.wwa-years__badge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.wwa-years__number {
  font-size: clamp(7rem, 16vw, 12.5rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  /* Der negative Zeichenabstand zieht die Box unter die letzte Ziffer;
     ohne Innenabstand malt background-clip:text deren rechte Kante nicht
     (die «8» war abgeschnitten). */
  padding-right: 0.1em;
  background: linear-gradient(160deg, #ffffff 20%, #00b5ce 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.wwa-years__since {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

.wwa-years__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: 12px;
}

.wwa-years__title {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-white);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.wwa-years__subtitle {
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
  max-width: 58ch;
}

.wwa-years__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 40px 0 0;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.wwa-years__fact {
  margin: 0;
}

.wwa-years__fact-value {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-white);
  white-space: nowrap;
}

.wwa-years__fact-label {
  margin: 4px 0 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 1024px) {
  .wwa-years__container {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

@media (max-width: 640px) {
  .wwa-years__facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

/* ==========================================================================
   About Section (What We Do / Who We Are)
   ========================================================================== */

.wwa-about {
  padding: 88px 40px;
  background: var(--color-white);
}

.wwa-about__container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.wwa-about__block {
  padding: 40px;
  background: var(--color-white);
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.wwa-about__label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.wwa-about__title {
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}

.wwa-about__text {
  font-size: var(--text-sm);
  color: var(--color-ink-60);
  line-height: 1.7;
  margin-bottom: 16px;
}

.wwa-about__text:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Why Cashare Section
   ========================================================================== */

.wwa-why {
  padding: 88px 40px;
  background: var(--color-bg-section);
}

.wwa-why__container {
  max-width: 1200px;
  margin: 0 auto;
}

.wwa-why__header {
  text-align: center;
  margin-bottom: 56px;
}

.wwa-why__title {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: 16px;
  letter-spacing: -0.015em;
}

.wwa-why__subtitle {
  font-size: var(--text-sm);
  color: var(--color-ink-60);
  max-width: 58ch;
  margin: 0 auto;
  line-height: 1.6;
}

.wwa-why__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.wwa-why__card {
  background: var(--color-white);
  padding: 32px;
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.wwa-why__card-title {
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}

.wwa-why__card-text {
  font-size: 0.9375rem;
  color: var(--color-ink-60);
  line-height: 1.6;
}

/* ==========================================================================
   Team Section — Raster mit 1:1-Porträts
   ========================================================================== */

.wwa-team {
  padding: 88px 40px;
  background: var(--color-white);
}

.wwa-team__container {
  max-width: 1200px;
  margin: 0 auto;
}

.wwa-team__header {
  text-align: center;
  margin-bottom: 56px;
}

.wwa-team__title {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: 16px;
  letter-spacing: -0.015em;
}

.wwa-team__subtitle {
  font-size: var(--text-sm);
  color: var(--color-ink-60);
  line-height: 1.6;
}

.wwa-team__grid,
.wwa-board__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  margin-bottom: 48px;
}

.wwa-team__card,
.wwa-board__card {
  text-align: left;
}

/* Porträt füllt die Spaltenbreite, quadratisch */
.wwa-team__avatar,
.wwa-board__avatar {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  margin: 0 0 14px;
  border-radius: var(--radius-lg);
  background: var(--color-tint-primary);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 600;
}

.wwa-team__avatar--photo,
.wwa-board__avatar--photo {
  display: block;
  object-fit: cover;
}

.wwa-team__name,
.wwa-board__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 2px;
}

.wwa-team__role,
.wwa-board__role {
  font-size: var(--text-xs);
  color: var(--color-ink-60);
  line-height: 1.4;
}

.wwa-team__cta {
  text-align: center;
}

/* ==========================================================================
   Board & Advisory — vorher dunkel; hier ist Dunkel keine Aussage
   ========================================================================== */

.wwa-board {
  padding: 88px 40px;
  background: var(--color-bg-section);
}

.wwa-board__container {
  max-width: 1200px;
  margin: 0 auto;
}

.wwa-board__title {
  text-align: center;
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: 56px;
  letter-spacing: -0.015em;
}

.wwa-board__grid {
  margin-bottom: 0;
}

/* ==========================================================================
   Benefits Section
   ========================================================================== */

.wwa-benefits {
  padding: 88px 40px;
  background: var(--color-bg-section);
}

.wwa-benefits__container {
  max-width: 1200px;
  margin: 0 auto;
}

.wwa-benefits__header {
  text-align: center;
  margin-bottom: 56px;
}

.wwa-benefits__label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.wwa-benefits__title {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: 16px;
  letter-spacing: -0.015em;
}

.wwa-benefits__subtitle {
  font-size: var(--text-sm);
  color: var(--color-ink-60);
  max-width: 58ch;
  margin: 0 auto;
  line-height: 1.6;
}

.wwa-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.wwa-benefits__card {
  background: var(--color-white);
  padding: 32px;
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.wwa-benefits__icon {
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  background: var(--color-tint-primary);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wwa-benefits__icon svg {
  width: 30px;
  height: 30px;
  color: var(--color-primary);
}

.wwa-benefits__card-title {
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}

.wwa-benefits__card-text {
  font-size: 0.9375rem;
  color: var(--color-ink-60);
  line-height: 1.6;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .wwa-credentials__container {
    grid-template-columns: repeat(2, 1fr);
  }

  .wwa-about__container {
    grid-template-columns: 1fr;
  }

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

  .wwa-years__title,
  .wwa-why__title,
  .wwa-team__title,
  .wwa-board__title,
  .wwa-benefits__title {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .wwa-credentials {
    padding: 16px 20px 60px;
  }

  .wwa-credentials__container {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .wwa-years,
  .wwa-about,
  .wwa-why,
  .wwa-team,
  .wwa-board,
  .wwa-benefits {
    padding: 60px 20px;
  }

  .wwa-about__block {
    padding: 28px 24px;
  }

  .wwa-why__grid,
  .wwa-benefits__grid {
    grid-template-columns: 1fr;
  }

  .wwa-team__grid,
  .wwa-board__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

/* Team und Vorstand einheitlich: runde Porträts ohne Kachel dahinter */
.wwa-team__card,
.wwa-board__card {
  text-align: center;
}

.wwa-team__avatar,
.wwa-board__avatar {
  width: 100%;
  max-width: 168px;
  margin: 0 auto 14px;
  border-radius: 50%;
}

.wwa-team__avatar--photo,
.wwa-board__avatar--photo {
  background: transparent;
}

/* Vorstand: letzte Reihe mittig statt linksbuendig */
.wwa-board__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px 28px;
}

.wwa-board__card {
  width: 176px;
}

/* pages/press.css */
/* ==========================================================================
   Press Page Styles

   CAS-2983 §6: Mitteilungen als Liste mit Datum und Medium, Medienkontakt
   links. Presse-Logos entsättigt, nie umgefärbt. Die früheren .press-hero-
   Regeln sind entfallen — die Seite nutzt .subpage-hero.
   ========================================================================== */

/* ==========================================================================
   Year Navigation
   ========================================================================== */

/* Sticky unter der fixierten .stripe-nav (72px, wie .glossary__nav), damit
   das aktive Jahr (NL-A6) beim Scrollen sichtbar bleibt. scroll-margin-top
   der Jahresgruppen und top von .press-contact rechnen beide Leisten ein. */
.press-year-nav {
  position: sticky;
  top: 72px;
  z-index: 20;
  background: var(--color-white);
  border-top: 1px solid var(--color-light-3);
  border-bottom: 1px solid var(--color-light-3);
  padding: 0 40px;
}

.press-year-nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 12px 0;
}

.press-year-nav__link {
  display: inline-block;
  padding: 6px 12px;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  text-decoration: none;
  color: var(--color-ink-60);
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  white-space: nowrap;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.press-year-nav__link:hover {
  background: var(--color-tint-primary);
  color: var(--color-primary);
}

.press-year-nav__link--all {
  color: var(--color-primary);
  background: var(--color-tint-primary);
  margin-right: 8px;
}

/* ==========================================================================
   Layout — Kontakt links, Liste rechts
   ========================================================================== */

.press-grid {
  padding: 64px 40px 88px;
  background: var(--color-white);
}

.press-grid__container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.press-contact {
  position: sticky;
  top: 160px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-6);
  background: var(--color-light-4);
  border-radius: var(--radius-lg);
}

.press-contact__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.press-contact__text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-ink-60);
  margin: 0;
}

.press-contact__email {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  word-break: break-all;
}

.press-contact__email:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Year Group
   ========================================================================== */

.press-year-group {
  margin-bottom: 56px;
  scroll-margin-top: 160px;
}

.press-year-group:last-child {
  margin-bottom: 0;
}

.press-year-group__heading {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

/* Liste statt Kartenraster: Trennlinie je Mitteilung */
.press-grid__items {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--color-light-3);
}

.press-card {
  border-top: 1px solid var(--color-light-3);
}

.press-card__inner {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 20px 0;
  color: inherit;
  text-decoration: none;
}

.press-card__inner--link {
  cursor: pointer;
}

.press-card__logo {
  height: 40px;
  display: flex;
  align-items: center;
}

/* Entsättigt, nie umgefärbt */
.press-card__logo img {
  max-width: 120px;
  max-height: 32px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}

.press-card__inner--link:hover .press-card__logo img {
  filter: none;
  opacity: 1;
}

.press-card__logo-text {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-ink-60);
}

.press-card__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.press-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  color: var(--color-ink-60);
}

.press-card__media {
  font-weight: 600;
  color: var(--color-ink-80);
}

.press-card__date {
  font-variant-numeric: tabular-nums;
}

.press-card__date::before {
  content: "·";
  margin-right: 8px;
  color: var(--color-ink-40);
}

.press-card__title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text);
  margin: 2px 0 0;
}

.press-card__inner--link:hover .press-card__title {
  color: var(--color-primary);
}

.press-card__description {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-ink-60);
  margin: 0;
}

.press-card__readmore {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
  margin-top: 4px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .press-grid__container {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .press-contact {
    position: static;
  }

  /* Eine Zeile, waagrecht scrollbar: umbrochen belegte die Leiste mehrere
     Zeilen des Bildschirms. Der Enhancer hält das aktive Jahr im Blick. */
  .press-year-nav__inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .press-year-nav__inner::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 768px) {
  .press-year-nav {
    padding: 0 20px;
  }

  .press-grid {
    padding: 40px 20px 60px;
  }
}

@media (max-width: 520px) {
  .press-card__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .press-card__logo {
    height: 28px;
  }
}

/* NL-A6 (CAS-3118): aktives Jahr beim Scrollen (ActiveOnViewEnhancer) */
.press-year-nav__link[aria-current="true"] {
  background: var(--color-primary);
  color: var(--color-white);
}

/* pages/investieren.css */
/* ==========================================================================
   Investieren Page - Premium Investing Landing

   CAS-2983 §3: gleiche Muster wie die Produktseiten. Grün bleibt die Welt,
   aber als Akzent (Wash, Tile-Tint, Glyph, Eyebrow), nicht als Fläche.
   Das Brandgrün #00d924 taugt nicht als Schrift- oder Strichfarbe (1.8:1
   auf Weiss) — Text und Glyphen laufen über --color-accent-investing.
   ========================================================================== */

/* Hero */
.invest-hero {
  position: relative;
  padding: 140px 40px 100px;
  background: linear-gradient(180deg, #fff 0%, #f6fcf8 52%, #fff 100%);
  overflow: hidden;
}

/* Akzent-Wash: Grün als Welt, Cyan als Marke. Vorher drei Radiale bei
   90 % Deckkraft plus blur(50px) in Gelb/Orange und Grün. */
.invest-hero::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto -25%;
  height: 150%;
  background:
    radial-gradient(
      ellipse 60% 55% at 22% 26%,
      rgba(0, 217, 36, 0.14),
      transparent 68%
    ),
    radial-gradient(
    ellipse 52% 48% at 78% 70%,
    rgba(0, 181, 206, 0.12),
    transparent 70%
  );
  filter: blur(30px);
  pointer-events: none;
}

/* Kontrastebene wie auf der Startseite und den Produktseiten */
.invest-hero::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 320px;
  background: var(--veil-hero);
  pointer-events: none;
}

/* Mesh-Hero (Level 2): animierter Verlauf in Anleger-Grün statt Wash.
   Über dem Verlauf nur dunkle Schrift (Label Navy, Untertitel ink-80) —
   Anleger-Grün als Schrift fällt auf Grün unter 4.5:1. */
.invest-hero--mesh {
  background: var(--color-white);
  isolation: isolate;
}

.invest-hero--mesh::before {
  display: none;
}

/* Scroll-Kopplung nur mit Browser-Unterstützung — sonst springt die Animation
   in den Endzustand (Firefox: Verlauf unsichtbar). CAS-3118 */
@supports (animation-timeline: scroll()) {
  .invest-hero--mesh .mesh-gradient {
    animation: hero-fade-out linear both;
    animation-timeline: scroll();
    animation-range: 150px 500px;
  }
}

.invest-hero--mesh::after {
  z-index: 1;
  height: auto;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.97) 0px,
      rgba(255, 255, 255, 0.9) 96px,
      rgba(255, 255, 255, 0.35) 220px,
      rgba(255, 255, 255, 0) 320px
    ),
    linear-gradient(
    to bottom,
    transparent 62%,
    rgba(255, 255, 255, 0.7) 88%,
    #fff 100%
  );
}

.invest-hero--mesh .invest-hero__label {
  color: var(--color-text);
}

.invest-hero--mesh .invest-hero__subtitle {
  color: var(--color-ink-80);
}

/* .invest-hero--private und --institutional bleiben als Modifier im Markup,
   malen aber nichts Eigenes mehr: alle drei Anlegerseiten sind eine Welt. */

.invest-hero__container {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* schmaler bei ~1200 px: der Renditerechner rechts nimmt fest ~680 px,
     sonst bleiben links nur ~370 px für den Titel (CAS-3088, Nr. 104) */
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

.invest-hero__content {
  max-width: 560px;
}

.invest-hero__label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent-investing);
  margin-bottom: var(--space-4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.invest-hero__title {
  font-size: clamp(2.25rem, 3.6vw, 3.5rem);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-4);
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-wrap: balance;
}

.invest-hero__subtitle {
  font-size: 1.1875rem;
  color: var(--color-ink-60);
  line-height: 1.6;
  margin-bottom: var(--space-8);
  text-wrap: pretty;
}

.invest-hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.invest-hero__visual {
  position: relative;
}

/* Glaskarte rechts — dieselbe Oberfläche wie .product-hero__panel */
.invest-hero__stats-card {
  position: relative;
  border-radius: var(--radius-panel);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    3.26px 8.16px 24.48px rgba(0, 0, 0, 0.06),
    0 24px 64px rgba(0, 85, 112, 0.08);
  padding: var(--space-8);
}

/* Investor Type Cards — Karte wie in §0, Tile im Anleger-Tint */
.invest-types {
  padding: 88px 40px;
  background: var(--color-white);
}

.invest-types__container {
  max-width: 1200px;
  margin: 0 auto;
}

.invest-types__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.invest-type-card {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 40px;
  text-decoration: none;
  transition:
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
}

.invest-type-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
  border-color: color-mix(
    in srgb,
    var(--color-accent-investing) 28%,
    transparent
  );
}

.invest-type-card__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  background: var(--color-tint-investing);
  color: var(--color-accent-investing);
  transition: transform var(--duration-fast) var(--ease-out);
}

.invest-type-card__icon svg {
  width: 36px;
  height: 36px;
}

.invest-type-card:hover .invest-type-card__icon {
  transform: scale(1.05);
}

.invest-type-card__title {
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.invest-type-card__desc {
  font-size: var(--text-sm);
  color: var(--color-ink-60);
  line-height: 1.6;
  margin-bottom: 24px;
}

.invest-type-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
}

.invest-type-card__link svg {
  width: 18px;
  height: 18px;
  transition: transform var(--duration-fast) var(--ease-out);
}

.invest-type-card:hover .invest-type-card__link svg {
  transform: translateX(3px);
}

/* Benefits — flach wie .benefits-grid (§2.5), Tile im Anleger-Tint */
.invest-benefits {
  padding: 88px 40px;
}

/* Sektionskopf §0 */
.invest-benefits__header {
  margin-bottom: 56px;
  text-align: center;
}

.invest-benefits__title {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: 16px;
  letter-spacing: -0.015em;
}

.invest-benefits__subtitle {
  font-size: var(--text-sm);
  color: var(--color-ink-60);
  max-width: 58ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.invest-benefits__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 40px 32px;
}

.invest-benefit__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--color-tint-investing);
  color: var(--color-accent-investing);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.invest-benefit__icon svg {
  width: 30px;
  height: 30px;
}

.invest-benefit__title {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text);
  margin-bottom: 8px;
}

.invest-benefit__desc {
  font-size: 0.9375rem;
  color: var(--color-ink-60);
  line-height: 1.6;
}

/* ==========================================================================
   Institutional Compliance Section

   Die einzige dunkle Sektion der Anlegerstrecke — hier ist sie Aussage
   (Regulierung). Fläche --color-text, Fliesstext 85 % Weiss, Titel und
   Labels voll weiss; keine alpha-gedimmte Kleinschrift.
   ========================================================================== */

.inst-compliance {
  padding: 88px 40px;
  background: var(--color-text);
  position: relative;
  overflow: hidden;
}

/* Ein Radial, wie im dunklen Abschluss der Unterseiten */
.inst-compliance::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 80% at 0% 100%,
    rgba(0, 181, 206, 0.22) 0%,
    transparent 60%
  );
  pointer-events: none;
}

.inst-compliance__container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

.inst-compliance__header {
  text-align: center;
  margin-bottom: 56px;
}

.inst-compliance__title {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-white);
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}

.inst-compliance__subtitle {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.85);
  max-width: 58ch;
  margin: 0 auto;
  line-height: 1.6;
}

.inst-compliance__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.inst-compliance__card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
}

.inst-compliance__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.inst-compliance__icon svg {
  width: 30px;
  height: 30px;
}

.inst-compliance__card-title {
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 8px;
}

.inst-compliance__card-desc {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
}

/* ==========================================================================
   Institutional — Intro unter dem Hero und Kontaktblock vor dem CTA
   (CAS-2983 §6: beide lagen im content-Objekt, wurden aber nie gerendert)
   ========================================================================== */

.inst-intro {
  padding: 8px 40px 72px;
  background: var(--color-white);
}

.inst-intro__text {
  max-width: 80ch;
  margin: 0 auto;
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--color-ink-80);
  text-wrap: pretty;
}

.inst-contact {
  padding: 88px 40px;
  background: var(--color-tint-investing);
}

.inst-contact__container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 48px;
  align-items: center;
}

.inst-contact__title {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin-bottom: 12px;
}

.inst-contact__text {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-ink-70);
  max-width: 44ch;
}

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

.inst-contact__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px;
  background: var(--color-white);
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.inst-contact__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
}

.inst-contact__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-tint-investing);
  color: var(--color-accent-investing);
  margin-bottom: 12px;
}

.inst-contact__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-60);
}

.inst-contact__value {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  word-break: break-word;
}

@media (max-width: 1024px) {
  .inst-contact__container {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

@media (max-width: 640px) {
  .inst-intro {
    padding: 0 20px 48px;
  }

  .inst-contact {
    padding: 60px 20px;
  }

  .inst-contact__cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Risiken verstehen (Privatanleger) — Warnton, vor der FAQ
   ========================================================================== */

.invest-risks {
  padding: 0 40px 24px;
}

.invest-risks__box {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 28px 32px;
  background: var(--color-tint-warning);
  border: 1px solid var(--color-border-warning);
  border-radius: var(--radius-lg);
}

.invest-risks__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-accent-warning);
}

.invest-risks__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 6px;
}

.invest-risks__text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-ink-80);
  margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .invest-hero__container {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .invest-hero__visual {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
  }

  .invest-types__grid {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin: 0 auto;
  }

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

  .invest-benefits__title,
  .inst-compliance__title {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .invest-hero {
    padding: 100px 20px 60px;
  }

  .invest-types,
  .invest-benefits,
  .inst-compliance {
    padding: 60px 20px;
  }

  .inst-compliance__grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }

  .invest-type-card {
    padding: 32px 24px;
  }
}

@media (max-width: 480px) {
  .invest-hero__stats-card {
    padding: 24px;
  }
}

/* ==========================================================================
   Hero-Karte (Kennzahlen im Hero aller drei Anlegerseiten)

   Alle vier Kennzahlen im selben Anleger-Tint — vorher trug jede eine
   eigene Farbe (Grün, Blau, Violett), ohne dass die Farbe etwas bedeutete.
   ========================================================================== */

.invest-hero-card {
  position: relative;
}

.invest-hero-card__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-light-3);
}

.invest-hero-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-tint-investing);
  border-radius: var(--radius-lg);
  color: var(--color-accent-investing);
  flex-shrink: 0;
}

.invest-hero-card__icon svg {
  width: 26px;
  height: 26px;
}

.invest-hero-card__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.invest-hero-card__stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.invest-hero-card__stat {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--color-white);
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-md);
}

.invest-hero-card__stat-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  background: var(--color-tint-investing);
  color: var(--color-accent-investing);
}

.invest-hero-card__stat-icon svg {
  width: 22px;
  height: 22px;
}

.invest-hero-card__stat-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.invest-hero-card__stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.invest-hero-card__stat-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-ink-60);
  text-align: right;
}

.invest-hero-card__features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--color-light-3);
}

.invest-hero-card__feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-ink-80);
}

.invest-hero-card__feature svg {
  flex-shrink: 0;
  color: var(--color-accent-investing);
}

@media (max-width: 768px) {
  .invest-hero-card__stat {
    padding: 12px 14px;
    gap: 12px;
  }

  .invest-hero-card__stat-value {
    font-size: 1.25rem;
  }

  .invest-hero-card__stat-label {
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .invest-hero-card__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ==========================================================================
   Solutions Grid - Using CSS Subgrid for aligned cards

   Scoped auf .solutions-grid: .solution-card gibt es auch in subpage.css
   (HowItWorks-Seiten, Kreditnehmerwelt) — dort soll kein Grün landen.
   ========================================================================== */

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto 1fr; /* icon, title, desc, features */
  gap: 24px;
  row-gap: 0;
}

/* Keine Links, deshalb kein Hover-Lift */
.solutions-grid .solution-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  background: var(--color-white);
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 32px;
}

.solutions-grid .solution-card:hover {
  transform: none;
  box-shadow: var(--shadow-card);
}

.solutions-grid .solution-card__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-tint-investing);
  border-radius: var(--radius-lg);
  color: var(--color-accent-investing);
  margin-bottom: 20px;
}

.solutions-grid .solution-card__icon svg {
  width: 36px;
  height: 36px;
}

.solutions-grid .solution-card__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}

.solutions-grid .solution-card__desc {
  font-size: 0.9375rem;
  color: var(--color-ink-60);
  line-height: 1.6;
  margin-bottom: 20px;
}

.solutions-grid .solution-card__features {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
  align-self: start;
}

/* Liste wie bei den Voraussetzungen: Trennlinie je Punkt */
.solutions-grid .solution-card__feature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--color-light-3);
  font-size: 0.9375rem;
  color: var(--color-ink-70);
}

.solutions-grid .solution-card__feature svg {
  flex-shrink: 0;
  color: var(--color-accent-investing);
}

/* Responsive - Solutions Grid */
@media (max-width: 1024px) {
  .solutions-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 20px;
  }

  .solutions-grid .solution-card {
    display: block;
    grid-row: auto;
  }
}

@media (max-width: 768px) {
  .solutions-grid .solution-card {
    padding: 28px 24px;
  }
}

/* ==========================================================================
   Auto-Invest Section
   ========================================================================== */

.auto-invest {
  padding: 88px 40px;
  background: var(--color-bg-section);
}

.auto-invest__container {
  max-width: 1100px;
  margin: 0 auto;
}

.auto-invest__header {
  text-align: center;
  margin-bottom: 48px;
}

/* Eyebrow §0, in der Anlegerfarbe */
.auto-invest__badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent-investing);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.auto-invest__title {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: 16px;
  letter-spacing: -0.015em;
}

.auto-invest__desc {
  font-size: var(--text-sm);
  color: var(--color-ink-60);
  line-height: 1.6;
  max-width: 58ch;
  margin: 0 auto;
}

.auto-invest__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.auto-invest__card {
  background: var(--color-white);
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 32px 24px;
}

.auto-invest__card-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--color-tint-investing);
  color: var(--color-accent-investing);
}

.auto-invest__card-icon svg {
  width: 30px;
  height: 30px;
}

.auto-invest__card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
}

/* Responsive - Auto-Invest */
@media (max-width: 1024px) {
  .auto-invest__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .auto-invest__title {
    font-size: 2rem;
  }
}

@media (max-width: 640px) {
  .auto-invest {
    padding: 60px 24px;
  }

  .auto-invest__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .auto-invest__card {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
    padding: 20px 24px;
  }

  .auto-invest__card-icon {
    margin: 0;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
  }

  .auto-invest__card-icon svg {
    width: 26px;
    height: 26px;
  }
}

/* ==========================================================================
   FAQ Grid
   ========================================================================== */

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

.faq-card {
  background: var(--color-white);
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 32px;
  text-align: left;
}

.faq-card__question {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 12px;
}

.faq-card__answer {
  font-size: 0.9375rem;
  color: var(--color-ink-60);
  line-height: 1.6;
}

@media (max-width: 640px) {
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .faq-card {
    padding: 24px;
  }
}

/* ==========================================================================
   Kennzahlen-Karte als eigene Sektion (23.09.2026)

   Sie stand im Hero, wo jetzt der Renditerechner steht. Ausserhalb der
   Hero-Spalte braucht sie eine Breitenbegrenzung, sonst zieht sie sich
   ueber den ganzen Container.
   ========================================================================== */

.invest-card-section__container {
  display: flex;
  justify-content: center;
}

.invest-card-section .invest-hero-card {
  width: 100%;
  max-width: 640px;
}

/* pages/security.css */
/* ==========================================================================
   Security Page
   ========================================================================== */

/* ==========================================================================
   Hero Section
   ========================================================================== */

.security-hero {
  position: relative;
  padding: 140px 40px 100px;
  background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 50%, #e0f2fe 100%);
  text-align: center;
  overflow: hidden;
}

.security-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, #ffffff);
  pointer-events: none;
}

.security-hero__grid {
  display: none;
}

.security-hero__container {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.security-hero__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-secondary) 100%
  );
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 115, 153, 0.2);
}

.security-hero__icon svg {
  width: 40px;
  height: 40px;
  color: var(--color-white);
}

.security-hero__badge {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.security-hero__title {
  font-size: 3rem;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.security-hero__subtitle {
  font-size: 1.25rem;
  color: var(--color-text-light);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ==========================================================================
   Security Cards Section
   ========================================================================== */

.security-cards {
  padding: 88px 40px;
  background: var(--color-white);
}

.security-cards__container {
  max-width: 1200px;
  margin: 0 auto;
}

.security-cards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

/* Themenkarte nach §0: weisse Fläche, Hairline, 56er Tile im Tint —
   vorher Verlaufs-Tile mit weissem Glyph (CAS-2983 §7.4) */
.security-card {
  background: var(--color-white);
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 32px;
}

.security-card__header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 28px;
}

.security-card__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-tint-primary);
  color: var(--color-primary);
  border-radius: var(--radius-lg);
}

.security-card__icon svg {
  width: 30px;
  height: 30px;
}

.security-card__title {
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.security-card__description {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-ink-60);
  margin: 0;
}

.security-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.security-card__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--color-light-3);
  font-size: 0.9375rem;
  color: var(--color-ink-70);
  line-height: 1.55;
}

.security-card__check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.security-card__check svg {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
}

/* ==========================================================================
   Regulation Section
   ========================================================================== */

/* Dunkel bleibt: Regulierung ist eine Aussage. Fläche wie im dunklen
   Abschluss der Unterseiten. */
.security-regulation {
  padding: 88px 40px;
  background: var(--color-text);
  color: var(--color-white);
}

.security-regulation__container {
  max-width: 1000px;
  margin: 0 auto;
}

.security-regulation__header {
  text-align: center;
  margin-bottom: 48px;
}

.security-regulation__title {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 16px;
  letter-spacing: -0.015em;
}

.security-regulation__subtitle {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.85);
  max-width: 58ch;
  margin: 0 auto;
  line-height: 1.6;
}

/* Badges entsättigt — sie belegen, sie werben nicht */
.security-regulation__badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 60px;
  filter: grayscale(1);
  opacity: 0.9;
}

.security-regulation__badge {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 28px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.security-regulation__badge:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.security-regulation__badge-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.security-regulation__badge-icon svg {
  width: 24px;
  height: 24px;
  color: var(--color-secondary);
}

.security-regulation__badge-text {
  display: flex;
  flex-direction: column;
}

.security-regulation__badge-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-white);
}

.security-regulation__badge-sublabel {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
}

.security-regulation__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.security-regulation__item {
  padding: 24px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.security-regulation__item-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.security-regulation__item-value {
  display: block;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

/* ==========================================================================
   CTA Section
   ========================================================================== */

.security-cta {
  padding: 80px 40px;
  background: var(--color-bg-section);
  text-align: center;
}

.security-cta__container {
  max-width: 600px;
  margin: 0 auto;
}

.security-cta__title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.security-cta__subtitle {
  font-size: 1.0625rem;
  color: var(--color-text-light);
  margin-bottom: 28px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .security-hero {
    padding: 120px 30px 80px;
  }

  .security-hero__title {
    font-size: 2.5rem;
  }

  .security-cards {
    padding: 80px 30px;
  }

  .security-cards__grid {
    gap: 24px;
  }

  .security-card {
    padding: 28px;
  }

  .security-regulation {
    padding: 80px 30px;
  }

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

@media (max-width: 768px) {
  .security-hero {
    padding: 100px 20px 60px;
  }

  .security-hero__icon {
    width: 64px;
    height: 64px;
  }

  .security-hero__icon svg {
    width: 32px;
    height: 32px;
  }

  .security-hero__title {
    font-size: 2rem;
  }

  .security-hero__subtitle {
    font-size: 1.0625rem;
  }

  .security-cards {
    padding: 60px 20px;
  }

  .security-cards__grid {
    grid-template-columns: 1fr;
  }

  .security-card__header {
    flex-direction: column;
    gap: 16px;
  }

  .security-regulation {
    padding: 60px 20px;
  }

  .security-regulation__title {
    font-size: 1.75rem;
  }

  .security-regulation__badges {
    flex-direction: column;
    align-items: center;
  }

  .security-regulation__badge {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }

  .security-regulation__items {
    grid-template-columns: 1fr;
  }

  .security-cta {
    padding: 60px 20px;
  }

  .security-cta__title {
    font-size: 1.5rem;
  }
}


/* Blocks */
/* blocks/hero.css */
/* ==========================================================================
   Hero Section - Two Column Layout (Stripe-inspired)
   ========================================================================== */

/* ==========================================================================
   Scroll-Driven Animations
   ========================================================================== */

@keyframes hero-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-60px);
  }
}

/* ==========================================================================
   Base Hero Styles
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: visible;
  isolation: isolate;
  padding: 7.5rem 1.5rem 3rem;
}

/* Canvas-based gradient background */
.hero--canvas {
  overflow: clip;
  clip-path: inset(0);
}

.hero--canvas .mesh-gradient {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Scroll-Kopplung nur mit Browser-Unterstützung — sonst springt die Animation
   in den Endzustand (Firefox: Verlauf unsichtbar). CAS-3118 */
@supports (animation-timeline: scroll()) {
  .hero--canvas .mesh-gradient {
    /* Beim Scrollen ausblenden */
    animation: hero-fade-out linear both;
    animation-timeline: scroll();
    animation-range: 200px 600px;
  }
}

/* White fade overlay - behind all content */
.hero--canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Top band: never drops below 93% white over the first 120px, which is
       what keeps logo and navigation legible no matter which frame the
       animation is showing — and, since CAS-2946, what replaces the glass
       pill that used to sit behind the logo. Do not thin this out. It runs
       out further down than the design's 320px so the colour arrives
       gradually instead of at an edge. */
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.97) 0px,
      rgba(255, 255, 255, 0.93) 120px,
      rgba(255, 255, 255, 0.55) 260px,
      rgba(255, 255, 255, 0) 420px
    ),
    linear-gradient(
    to bottom,
    transparent 46%,
    rgba(255, 255, 255, 0.62) 84%,
    #fff 100%
  ),
    linear-gradient(
    to right,
    transparent 18%,
    rgba(255, 255, 255, 0.34) 52%,
    rgba(255, 255, 255, 0.86) 100%
  );
}

/* Ensure content is above the overlay */
.hero--canvas .hero__container {
  position: relative;
  z-index: 2;
}

/* Fade mask over hero on scroll */
.hero--canvas::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 100%
  );
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
}

/* Scroll-Kopplung nur mit Browser-Unterstützung — sonst springt die Animation
   in den Endzustand (Firefox: Verlauf unsichtbar). CAS-3118 */
@supports (animation-timeline: scroll()) {
  .hero--canvas::after {
    animation: hero-mask-in linear both;
    animation-timeline: scroll();
    animation-range: 0px 300px;
  }
}

@keyframes hero-mask-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ==========================================================================
   Two Column Container
   ========================================================================== */

.hero__container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}

/* Ensure all content is above the animated background */
.hero > * {
  position: relative;
  z-index: 1;
}

/* Right column - Calculator */
.hero__right {
  position: relative;
  max-width: 100%;
}

/* Calculator in hero - frosted card over the gradient */
:is(.hero__right, .product-hero__calc) .loan-calculator {
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, 0.88);
  border: none;
  border-radius: var(--radius-panel);
  box-shadow:
    3.26px 8.16px 24.48px rgba(0, 0, 0, 0.06),
    0 24px 64px rgba(0, 85, 112, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  margin: 0;
}

/* Override text colors for frosty glass - all dark */
:is(.hero__right, .product-hero__calc) .loan-calculator,
:is(.hero__right, .product-hero__calc) .loan-calculator .loan-calculator__field-label,
:is(.hero__right, .product-hero__calc) .loan-calculator .loan-calculator__disclaimer,
:is(.hero__right, .product-hero__calc) .loan-calculator .loan-calculator__results-col,
:is(.hero__right, .product-hero__calc) .loan-calculator .loan-calculator__results-header,
:is(.hero__right, .product-hero__calc) .loan-calculator .loan-calculator__results-subtext,
:is(.hero__right, .product-hero__calc) .loan-calculator .input-group__prefix,
:is(.hero__right, .product-hero__calc) .loan-calculator .input-group__suffix,
:is(.hero__right, .product-hero__calc) .loan-calculator .input-group__input,
:is(.hero__right, .product-hero__calc) .loan-calculator .calculator__slider-labels,
:is(.hero__right, .product-hero__calc) .loan-calculator .form-group__checkbox span {
  color: var(--color-gray-dark);
}

/* Input fields - frosty inner glass */
:is(.hero__right, .product-hero__calc) .loan-calculator .input-group__input {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(0, 0, 0, 0.08);
}

/* Slider - darker progress track for visibility */
:is(.hero__right, .product-hero__calc) .loan-calculator .slider {
  --track-color: #005570;
  --track-color-bg: rgba(255, 255, 255, 0.2);
}

/* Results rows sit on the panel's own surface */
:is(.hero__right, .product-hero__calc) .loan-calculator .loan-calculator__results-row {
  background: transparent;
  border-color: var(--color-light-2);
}

/* Results header - transparent */
:is(.hero__right, .product-hero__calc) .loan-calculator .loan-calculator__results-header {
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Monthly rate value - accent color for emphasis */
:is(.hero__right, .product-hero__calc) .loan-calculator .loan-calculator__results-value {
  color: var(--color-primary);
}

/* ==========================================================================
   Bottom Fade Overlay
   ========================================================================== */

.hero__fade {
  display: none;
}

/* ==========================================================================
   Typography
   ========================================================================== */

.hero__title {
  font-size: 5rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 32px;
  color: var(--color-text);
  letter-spacing: -0.03em;
}

.hero__subtitle {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 36px;
  max-width: 480px;
}

/* ==========================================================================
   Actions (CTA Buttons)
   ========================================================================== */

.hero__actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* ==========================================================================
   Animated Background Effects
   ========================================================================== */

/* Subtle grid lines */
.hero__grid-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.4;
  background-image:
    linear-gradient(
      to right,
      rgba(0, 115, 153, 0.03) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(0, 115, 153, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(
    ellipse 80% 60% at 70% 40%,
    black 20%,
    transparent 70%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 80% 60% at 70% 40%,
    black 20%,
    transparent 70%
  );
}

/* Moving shine effect */
.hero__shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.03) 35%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.03) 65%,
    transparent 80%
  );
  transform: skewX(-20deg);
  animation: heroShine 12s ease-in-out infinite;
  animation-delay: var(--stagger-6);
}

.hero__shine--2 {
  width: 40%;
  animation: heroShine 15s ease-in-out infinite;
  animation-delay: var(--stagger-6);
  opacity: 0.6;
}

@keyframes heroShine {
  0% {
    left: -100%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: 200%;
    opacity: 0;
  }
}

/* ==========================================================================
   Decorative Floating Shapes
   ========================================================================== */

.hero__shapes {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero__shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.4;
  animation: float 8s ease-in-out infinite;
}

/* Shape 1 - Large circle top right */
.hero__shape--1 {
  width: 400px;
  height: 400px;
  top: -100px;
  right: -100px;
  animation-delay: 0s;
  animation-duration: 10s;
}

/* Shape 2 - Medium circle bottom left */
.hero__shape--2 {
  width: 300px;
  height: 300px;
  bottom: -80px;
  left: -80px;
  animation-delay: var(--stagger-6);
  animation-duration: 12s;
}

/* Shape 3 - Small circle top left */
.hero__shape--3 {
  width: 200px;
  height: 200px;
  top: 20%;
  left: 10%;
  animation-delay: var(--stagger-6);
  animation-duration: 8s;
}

/* Shape 4 - Medium circle bottom right */
.hero__shape--4 {
  width: 250px;
  height: 250px;
  bottom: 15%;
  right: 15%;
  animation-delay: var(--stagger-6);
  animation-duration: 14s;
}

/* Shape 5 - Small circle center-right */
.hero__shape--5 {
  width: 120px;
  height: 120px;
  top: 40%;
  right: 25%;
  animation-delay: var(--stagger-6);
  animation-duration: 9s;
}

.hero__actions .btn {
  line-height: 1.2;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Large tablets / small laptops */
@media (max-width: 1200px) {
  .hero__container {
    gap: 40px;
  }

  .hero__title {
    font-size: 2.75rem;
  }
}

/* Tablets */
@media (max-width: 1024px) {
  .hero {
    min-height: auto;
  }

  .hero__container {
    grid-template-columns: 1fr;
    gap: 64px;
  }

  .hero__left {
    order: 1;
  }

  .hero__right {
    order: 2;
  }

  .hero__title {
    font-size: 2.5rem;
  }

  /* Calculator - left align on tablets */
  :is(.hero__right, .product-hero__calc) .loan-calculator {
    text-align: left;
  }

  :is(.hero__right, .product-hero__calc) .loan-calculator .loan-calculator__results-header,
  :is(.hero__right, .product-hero__calc) .loan-calculator .loan-calculator__results-col,
  :is(.hero__right, .product-hero__calc) .loan-calculator .loan-calculator__results-subtext,
  :is(.hero__right, .product-hero__calc) .loan-calculator .form-group__checkbox span {
    text-align: left;
  }

  .hero__shape--1 {
    width: 300px;
    height: 300px;
  }
  .hero__shape--2 {
    width: 250px;
    height: 250px;
  }
  .hero__shape--3 {
    width: 150px;
    height: 150px;
  }
  .hero__shape--4 {
    width: 200px;
    height: 200px;
  }
  .hero__shape--5 {
    width: 100px;
    height: 100px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .hero__title {
    font-size: 2rem;
  }

  .hero__subtitle {
    font-size: 1.1rem;
  }

  /* Side by side there is room for neither label: both wrapped to three
     lines inside a fixed 48px button. One under the other, full width, each
     label stays on one line. */
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .hero__actions .btn {
    max-width: 380px;
    /* A wrapped label must be able to make the button taller rather than
       overflow it. */
    height: auto;
    min-height: 48px;
    padding-block: 0.75rem;
  }

  /* Calculator - override centered text from container */
  :is(.hero__right, .product-hero__calc) .loan-calculator {
    text-align: left;
  }

  :is(.hero__right, .product-hero__calc) .loan-calculator .loan-calculator__results-header,
  :is(.hero__right, .product-hero__calc) .loan-calculator .loan-calculator__results-col,
  :is(.hero__right, .product-hero__calc) .loan-calculator .loan-calculator__results-subtext,
  :is(.hero__right, .product-hero__calc) .loan-calculator .form-group__checkbox span {
    text-align: left;
  }

  .hero__fade {
    height: 120px;
  }

  .hero__shape--1 {
    width: 200px;
    height: 200px;
    top: -60px;
    right: -60px;
  }
  .hero__shape--2 {
    width: 180px;
    height: 180px;
    bottom: -50px;
    left: -50px;
  }
  .hero__shape--3 {
    width: 100px;
    height: 100px;
  }
  .hero__shape--4 {
    width: 150px;
    height: 150px;
  }
  .hero__shape--5 {
    width: 80px;
    height: 80px;
    right: 20%;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .hero__title {
    font-size: 1.75rem;
  }

  .hero__subtitle {
    font-size: 1rem;
  }
}

/* ==========================================================================
   Accessibility - Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hero__shape {
    animation: none;
  }

  .hero__shine {
    animation: none;
    display: none;
  }

  .hero__orb {
    animation: none;
    opacity: 1;
  }

  .gradient-hero::before {
    animation: none;
  }
}

/* ==========================================================================
   Hero Stats Strip
   ========================================================================== */

.hero__stats {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin: var(--space-10) 0 0;
}

.hero__stat {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Hairline between the figures, drawn by the item that follows it so the
   flex gap stays even. */
.hero__stat-rule {
  position: absolute;
  left: calc(var(--space-6) / -2);
  top: 50%;
  width: 1px;
  height: 38px;
  transform: translateY(-50%);
  background: rgba(9, 17, 36, 0.12);
}

.hero__stat-value {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.hero__stat-label {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.55;
  /* These sit on the bare gradient, below where the white veil runs out.
     ink-60 measured 2.9:1 over the palette's green; ink-80 gives 6.4:1. */
  color: var(--color-ink-80);
}

/* On a phone the three figures no longer fit on one line. A grid of equal
   columns keeps them aligned instead of letting them hug their content and
   break 2 + 1 ragged. */
@media (max-width: 600px) {
  .hero__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    /* The desktop rule centres the row; in a grid that drops the figure with
       the shorter label out of line with the other two. */
    align-items: start;
  }

  .hero__stat-value {
    font-size: var(--text-lg);
  }

  .hero__stat-rule {
    display: none;
  }
}

@media (max-width: 380px) {
  .hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* blocks/calculator.css */
/* ==========================================================================
   Calculator Block
   ========================================================================== */

/* Keyframes for micro-interactions */
@keyframes value-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes value-glow {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
}

/* Value Update Glow - triggered when values change */
@keyframes value-update-glow {
  0% {
    background: rgba(0, 181, 206, 0.2);
    transform: scale(1.02);
  }
  100% {
    background: transparent;
    transform: scale(1);
  }
}

@keyframes slide-in-stagger {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.calculator {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  gap: var(--space-4);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  transition:
    color var(--duration-normal) var(--ease-out),
    background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out),
    opacity var(--duration-normal) var(--ease-out);
}

.calculator__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}

.calculator__title {
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: var(--leading-tight);
}

.calculator__input-wrapper {
  display: flex;
  flex-direction: column;
}

.calculator__input-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: var(--space-4);
}

.calculator__input-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-bg-light);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
}

.calculator__input-group:focus-within {
  background: var(--color-white);
  box-shadow: 0 0 0 2px rgba(0, 185, 208, 0.2);
}

.calculator__input-group input {
  border: none;
  background: transparent;
  font-size: var(--text-base);
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--color-text);
  width: 100%;
  outline: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.calculator__input-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-gray-dark);
  white-space: nowrap;
}

.calculator__error {
  color: var(--color-error);
  font-size: var(--text-xs);
  margin-top: var(--space-2);
}

/* Sachhinweis, kein Fehler: Rechtsregime, Grundpfand, gekappter Betrag
   (CAS-2978). Ink-70 auf Weiss ergibt 7.0:1. */
.calculator__notice {
  color: var(--color-ink-70);
  font-size: var(--text-xs);
  line-height: 1.5;
  margin-top: var(--space-2);
}

.calculator__slider-wrapper {
  display: flex;
  flex-direction: column;
}

.calculator__slider-labels {
  display: flex;
  justify-content: space-between;
  font-weight: 800;
  font-size: var(--text-xs);
  color: var(--color-gray-light);
  line-height: 2;
}

/* Results Table within Calculator */
.calculator__results {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: var(--space-6);
}

.calculator__results-header {
  display: flex;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-2xs);
  color: var(--color-gray-dark);
}

.calculator__results-row {
  display: flex;
  padding: var(--space-1) 0;
  font-size: var(--text-xs);
}

/* Staggered animation for result rows */
@media (prefers-reduced-motion: no-preference) {
  .calculator__results-row--stagger-1 {
    animation: slide-in-stagger var(--duration-normal) var(--ease-out) var(--stagger-1) both;
  }

  .calculator__results-row--stagger-2 {
    animation: slide-in-stagger var(--duration-normal) var(--ease-out) var(--stagger-2) both;
  }
}

.calculator__results-cell {
  display: flex;
  flex-direction: column;
}

.calculator__results-cell--center {
  justify-content: center;
  text-align: center;
}

.calculator__results-cell--right {
  text-align: right;
  line-height: 18px;
}

.calculator__results-value {
  font-weight: 800;
  color: #646464;
  position: relative;
  display: inline-block;
}

/* Animated result values with smooth transition */
.calculator__results-value--animated {
  transition:
    color var(--duration-normal) var(--ease-out),
    background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out),
    opacity var(--duration-normal) var(--ease-out);
}

.calculator__results-value--animated::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 6px;
  background: var(--color-primary, #00b9d0);
  opacity: 0;
  z-index: -1;
  filter: blur(8px);
  transition: opacity var(--duration-normal) var(--ease-out);
}

/* Trigger glow on value change - applied via JS or signal reactivity */
@media (prefers-reduced-motion: no-preference) {
  .calculator__results-value--animated:hover::after {
    animation: value-glow var(--duration-slow) var(--ease-out);
  }
}

.calculator__results-subtext {
  font-size: var(--text-2xs);
  font-weight: 500;
  color: var(--color-gray-light);
}

.calculator__action {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4);
}

/* Home Calculator specific */
.home-calculator {
  max-width: 600px;
}

.home-calculator__tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.home-calculator__tab {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  text-align: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.home-calculator__tab--active {
  background: var(--color-primary);
  color: var(--color-white);
}

.home-calculator__tab:not(.home-calculator__tab--active):hover {
  background: var(--color-bg-light);
}

/* ==========================================================================
   Yield Calculator - Stripe-inspired Professional Design
   ========================================================================== */

.yield-calculator {
  display: grid;
  /* minmax(0, …): die Ergebniszahlen bestimmen die Spaltenbreite nicht mit */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.03),
    0 2px 4px rgba(0, 0, 0, 0.05),
    0 12px 24px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.yield-calculator__panel {
  padding: var(--space-8);
}

.yield-calculator__panel--inputs {
  background: var(--color-white);
  border-right: 1px solid var(--color-border);
}

.yield-calculator__panel--results {
  background: linear-gradient(
    135deg,
    var(--color-bg-light) 0%,
    color-mix(in srgb, var(--color-investing) 5%, white) 100%
  );
}

.yield-calculator__header {
  margin-bottom: var(--space-6);
}

.yield-calculator__title {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.yield-calculator__subtitle {
  font-size: var(--text-sm);
  color: var(--color-gray);
  line-height: 1.6;
}

/* Input Fields */
.yield-calculator__field {
  margin-bottom: var(--space-6);
}

.yield-calculator__field:last-child {
  margin-bottom: 0;
}

.yield-calculator__field-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Mindestabstand: ohne gap stiess «Anlagebetrag» an das Feld. Nicht
     umbrechen lassen — sonst sinkt die Mindestbreite des Rechners und der
     Seitenkopf drueckt ihn auf 584px (Skalen ueberlappen). */
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.yield-calculator__field-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.yield-calculator__input-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
}

.yield-calculator__input-group:focus-within {
  border-color: var(--color-accent-investing);
  box-shadow: 0 0 0 3px var(--color-tint-investing);
}

.yield-calculator__input {
  width: 85px;
  padding: 0;
  border: none;
  background: transparent;
  font-size: var(--text-base);
  font-weight: 600;
  font-family: var(--font-sans);
  text-align: right;
  color: var(--color-text);
  outline: none;
}

.yield-calculator__input-suffix {
  font-size: var(--text-sm);
  color: var(--color-gray);
  font-weight: 500;
}

.yield-calculator__slider-wrapper {
  margin-top: var(--space-2);
}

.yield-calculator__slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-gray);
}

/* Results Panel */
.yield-calculator__results-title {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.yield-calculator__result-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.yield-calculator__result-label {
  font-size: var(--text-sm);
  color: var(--color-gray);
  margin-bottom: var(--space-2);
}

.yield-calculator__result-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.yield-calculator__result-value {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.yield-calculator__result-amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: var(--text-3xl);
  font-weight: 700;
  /* #00d924 als Zahl: 1.9:1 — auf /investieren sichtbar, auf
     /privatinvestoren war es schon überschrieben */
  color: var(--color-accent-investing);
  line-height: 1;
}

.yield-calculator__result-currency {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
}

.yield-calculator__result-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

.yield-calculator__result-rate-label {
  font-size: var(--text-xs);
  color: var(--color-gray);
}

.yield-calculator__result-rate {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}

/* Summary Items */
.yield-calculator__summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.yield-calculator__summary-item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.yield-calculator__summary-label {
  font-size: var(--text-xs);
  color: var(--color-gray);
  margin-bottom: var(--space-1);
}

.yield-calculator__summary-value {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--color-text);
}

/* Responsive */
@media (max-width: 768px) {
  .yield-calculator {
    grid-template-columns: 1fr;
  }

  .yield-calculator__panel--inputs {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .yield-calculator__panel {
    padding: var(--space-6);
  }

  .yield-calculator__result-amount {
    font-size: var(--text-3xl);
  }

  .yield-calculator__summary {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Loan Calculator (Tabbed)
   ========================================================================== */

/* ==========================================================================
   Loan Calculator - Premium Enhancements
   ========================================================================== */

.loan-calculator {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  overflow: visible;
  margin: 0 var(--space-6);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Gradient Border with Hover Intensification */
.loan-calculator::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: calc(var(--radius-xl) + 1px);
  opacity: 0.4;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.loan-calculator__tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  background: linear-gradient(
    to bottom,
    var(--color-bg-light),
    var(--color-white)
  );
}

.loan-calculator__tab {
  flex: 1;
  /* A flex box rather than a block: as an inline box the label's height
     followed the bold glyphs, so the strip grew 2px whenever the other tab
     became the active one and the hero's centred column nudged the headline
     sideways. */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  /* So hoch wie auf der Startseite — auf den Unterseiten war die Leiste
     mit 6px zu knapp (Rueckmeldung 24.09.2026). */
  padding: var(--space-4) var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  background: transparent;
  border: none;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
  position: relative;
  z-index: 1;
  /* #929292 on the near-white card was 3.0:1 — under AA. */
  color: var(--color-ink-60);
}

.loan-calculator__tab:hover {
  color: var(--color-ink-80);
}

.loan-calculator__tab:hover {
  color: var(--color-gray-dark);
}

/* Colour and the indicator carry the active state on their own. Varying the
   weight here is what was left of the headline jump: the bold label built a
   2px taller line box, so the strip changed height with the active tab. */
.loan-calculator__tab--active {
  color: var(--color-primary);
}

/* Animated tab indicator */
.loan-calculator__tab-indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  /* Breite und Versatz setzt die Insel je nach Anzahl Eintraege inline;
     50% ist nur die Vorgabe fuer zwei. */
  width: 50%;
  height: 3px;
  background: var(--color-secondary);
  transition: transform var(--duration-normal) var(--ease-out);
  z-index: 2;
  border-radius: 3px 3px 0 0;
}

/* Fade transition for tab content */
@media (prefers-reduced-motion: no-preference) {
  .loan-calculator__content {
    animation: fade-in var(--duration-normal) var(--ease-out);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.loan-calculator__content {
  padding: var(--space-6) var(--space-6);
}

/* Felder untereinander mit Luft (Entscheid 24.09.2026, Variante 2):
   nebeneinander waren Darlehenssumme und Laufzeit eng und unuebersichtlich. */
.loan-calculator__inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

/* Zeile ueber der Darlehenssumme: Umschalter (Privat) oder Spannweite
   (KMU). Feste Hoehe, damit der Rechner beim Wechsel nicht springt. */
.loan-calculator__security {
  height: 48px;
  display: flex;
  align-items: stretch;
}

.loan-calculator__segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  width: 100%;
  padding: 3px;
  border-radius: 999px;
  background: var(--color-light-4);
  border: 1px solid var(--color-light-2);
}

.loan-calculator__segment-btn {
  min-height: 0;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: 600 var(--text-sm) / 1.2 var(--font-sans);
  color: var(--color-ink-60);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.loan-calculator__segment-btn:hover {
  color: var(--color-ink-80);
}

.loan-calculator__segment-btn[aria-pressed="true"] {
  background: var(--color-white);
  color: var(--color-text);
  box-shadow: 0 1px 3px rgba(9, 17, 36, 0.12);
}

.loan-calculator__segment-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Zwei Zeilen fester Hoehe statt einer umbrechenden: sonst wurde die Zeile
   auf dem Handy hoeher als der Umschalter des Privatkredits. */
.loan-calculator__product-line {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 0 var(--space-5);
  border-radius: 24px;
  background: var(--color-light-4);
  border: 1px solid var(--color-light-2);
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--color-ink-60);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
}

.loan-calculator__product-line strong {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
}

.loan-calculator__product-line span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hinweise: alle moeglichen Texte in einer Rasterzelle, die unsichtbaren
   Platzhalter bestimmen die Hoehe (der laengste gewinnt). */
.loan-calculator__notices {
  display: grid;
}

.loan-calculator__notices > * {
  grid-area: 1 / 1;
}

.loan-calculator__notice-reserve {
  visibility: hidden;
}

/* Beispielrechnung je Kreditart: alle Texte in einer Zelle, der laengste
   bestimmt die Hoehe (Sichttest 24.09.2026). */
.loan-calculator__disclaimer-stack {
  display: grid;
}

.loan-calculator__disclaimer-stack > * {
  grid-area: 1 / 1;
}

.loan-calculator__results-col--invisible {
  visibility: hidden;
}

/* Versicherung unter den Ergebnissen; beim KMU unsichtbar, aber im Fluss */
.loan-calculator__options {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.loan-calculator__options--invisible {
  visibility: hidden;
}

/* Doppelte Klasse: die spaetere Grundregel .form-group__checkbox span
   (Versalien, klein) haette sonst gleiche Spezifitaet und gewaenne. */
.loan-calculator .loan-calculator__option span {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}

.loan-calculator__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.loan-calculator__field-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.loan-calculator__field-header .input-group {
  min-width: 160px;
}

.loan-calculator__field-label {
  font-weight: 800;
  line-height: 1;
  font-size: var(--text-base);
  color: var(--color-gray-dark);
  padding-right: 1rem;
}

.loan-calculator__slider-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.loan-calculator__results {
  position: relative;
  background: var(--color-light-4);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  border: 1px solid var(--color-light-2);
  overflow: hidden;
}

/* Shimmer Animation for Promo Badge */
@keyframes shimmer {
  0%,
  100% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
}

.loan-calculator__results-header {
  display: flex;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-gray);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-primary);
  margin-bottom: var(--space-3);
}

/* Calculator Checkbox */
.form-group__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.form-group__checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-gray);
  border-radius: 4px;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    height var(--duration-fast) var(--ease-out),
    width var(--duration-fast) var(--ease-out);
  position: relative;
  flex-shrink: 0;
}

.form-group__checkbox input[type="checkbox"]:hover {
  border-color: var(--color-primary);
}

.form-group__checkbox input[type="checkbox"]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.form-group__checkbox input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.form-group__checkbox span {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-gray);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.loan-calculator__results-row {
  position: relative;
  display: flex;
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-3);
  margin: 0 calc(-1 * var(--space-3));
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-sm);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-spring);
}

.loan-calculator__results-row:last-of-type {
  border-bottom: none;
}

.loan-calculator__results-row:hover {
  background: rgba(0, 115, 153, 0.04);
}

.loan-calculator__results-col {
  flex: 1;
}

.loan-calculator__results-col--right {
  text-align: right;
}

.loan-calculator__results-value {
  display: inline-block;
  font-weight: 600;
  color: var(--color-primary);
  font-size: var(--text-xl);
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: 4px;
  transition:
    color var(--duration-normal) var(--ease-out),
    background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out),
    opacity var(--duration-normal) var(--ease-out);
}

/* Value update animation - triggered via JS */
.loan-calculator__results-value--updating {
  animation: value-update-glow var(--duration-slow) var(--ease-out);
}

.loan-calculator__results-subtext {
  font-size: var(--text-xs);
  color: var(--color-gray);
  margin-top: var(--space-1);
  white-space: nowrap;
}

.loan-calculator__results-subtext--invisible {
  visibility: hidden;
}

.loan-calculator__bottom-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.loan-calculator__disclaimer {
  font-size: var(--text-xs);
  color: var(--color-gray-light);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  line-height: var(--leading-tight);
}

.loan-calculator__kkg-disclaimer {
  font-size: var(--text-xs);
  color: var(--color-gray);
  margin-top: var(--space-4);
  line-height: var(--leading-tight);
  width: 100%;
  font-style: italic;
}

.loan-calculator__kkg-disclaimer--invisible {
  visibility: hidden;
}

.loan-calculator__action {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

.loan-calculator__action .btn {
  width: 100%;
  transition:
    background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out),
    height var(--duration-normal) var(--ease-out),
    opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out),
    width var(--duration-normal) var(--ease-out);
}

/* Responsive */
@media (max-width: 768px) {
  .loan-calculator {
    margin: 0;
  }

  .loan-calculator__inputs {
    grid-template-columns: 1fr;
  }

  .loan-calculator__results-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    text-align: left;
  }

  .loan-calculator__results-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .loan-calculator__results-col {
    width: 100%;
    text-align: left;
  }

  .loan-calculator__results-col--right {
    text-align: left;
  }

  .loan-calculator__results-value {
    text-align: left;
  }

  .loan-calculator__results-subtext {
    text-align: left;
  }

  .form-group__checkbox {
    justify-content: flex-start;
  }

  .form-group__checkbox span {
    text-align: left;
  }
}

@media (max-width: 575px) {
  .loan-calculator__content {
    padding: var(--space-4);
  }

  .loan-calculator__field-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .loan-calculator__field-label {
    text-align: left;
  }

  .loan-calculator__tab {
    padding: var(--space-3) var(--space-2);
    font-size: var(--text-xs);
  }
}

/* ==========================================================================
   SME Calculator (Standalone)
   ========================================================================== */

.sme-calculator {
  max-width: 700px;
}

.sme-calculator .calculator__results-header,
.sme-calculator .calculator__results-row {
  display: flex;
}

.sme-calculator__disclaimer {
  font-size: var(--text-xs);
  color: var(--color-gray);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  line-height: var(--leading-relaxed);
}

/* ==========================================================================
   Hero Frosty Glass Overrides
   ========================================================================== */

/* Frosty tabs - transparent background */
/* Two flat tabs over a hairline, the way the design draws them. The frosted
   treatment that used to live here gave the active tab a 1px border the
   inactive one did not have — that is where the last of the headline jump
   came from — and it hid the indicator, which left the two tabs almost
   indistinguishable. */
:is(.hero__right, .product-hero__calc) .loan-calculator .loan-calculator__tabs {
  background: transparent;
  border-bottom: 1px solid var(--color-light-2);
  gap: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

:is(.hero__right, .product-hero__calc) .loan-calculator .loan-calculator__tab {
  padding: var(--space-4) var(--space-2);
  border: none;
  background: transparent;
  border-radius: 0;
  transition: color var(--duration-fast) var(--ease-out);
}

:is(.hero__right, .product-hero__calc) .loan-calculator .loan-calculator__tab--active {
  background: transparent;
  color: var(--color-primary);
}

:is(.hero__right, .product-hero__calc) .loan-calculator .loan-calculator__tab-indicator {
  display: block;
  background: var(--color-secondary);
}

:is(.hero__right, .product-hero__calc) .loan-calculator .loan-calculator__content {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* The design stacks the CTA over both disclaimers instead of letting them
   share a row. Scoped to the hero so the SME and mortgage calculators on
   their own pages keep the layout they have. */
:is(.hero__right, .product-hero__calc) .loan-calculator .loan-calculator__bottom-group {
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

:is(.hero__right, .product-hero__calc) .loan-calculator .loan-calculator__action {
  width: 100%;
  margin-top: 0;
}

/* The card underneath is opaque enough now that the results panel can
   take the design's flat grey instead of a frosted tint. */
:is(.hero__right, .product-hero__calc) .loan-calculator .loan-calculator__results {
  background: var(--color-light-4);
  border-color: var(--color-light-2);
}

/* Results top accent - subtle on frosty */
:is(.hero__right, .product-hero__calc) .loan-calculator .loan-calculator__results::before {
  opacity: 0.6;
}

/* Input group - more visible on frosty glass */
:is(.hero__right, .product-hero__calc) .loan-calculator .input-group {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

:is(.hero__right, .product-hero__calc) .loan-calculator .input-group:focus-within {
  background: rgba(255, 255, 255, 0.8);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 115, 153, 0.1);
}


/* ==========================================================================
   Kompakter Rechner (Rueckmeldung 24.09.2026)
   Der Rechner war 1167px hoch; Titel und CTA links fielen aus dem
   Sichtbereich. Engere Abstaende, kleinere Resultat-Schrift. Gleiche
   Spezifitaet wie die Seitenkopf-Regeln oben, steht danach und gewinnt.
   ========================================================================== */

:is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__content {
  padding: var(--space-5) var(--space-6);
}

:is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__inputs {
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

:is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__field {
  gap: var(--space-3);
}

:is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__slider-wrapper {
  gap: 4px;
}

:is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .calculator__slider-labels {
  line-height: 1.4;
}

:is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__security {
  height: 40px;
}

:is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__segment-btn {
  font-size: var(--text-xs);
}

/* Ausgleich beim KMU: Umschalter + Versicherung unsichtbar, mit demselben
   Abstand wie das Raster, damit beide Boxen exakt gleich hoch sind. */
.loan-calculator__private-reserve {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  visibility: hidden;
}

:is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__notices .calculator__notice,
:is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__notices .calculator__error {
  margin-top: 0;
  font-size: 11px;
  line-height: 1.4;
}

:is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__results {
  padding: var(--space-3) var(--space-4) var(--space-4);
}

:is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__results-header {
  font-size: 11px;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-1);
}

:is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__results-row {
  padding-block: var(--space-2);
}

:is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__results-value {
  font-size: var(--text-lg);
  line-height: 1.25;
}

:is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__results-subtext {
  margin-top: 0;
  font-size: 11px;
}

:is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__disclaimer {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  font-size: 11px;
  line-height: 1.4;
}

:is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__bottom-group {
  gap: var(--space-2);
  margin-top: var(--space-2);
}

:is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__kkg-disclaimer {
  margin-top: 0;
  font-size: 11px;
}

/* Zweite Runde (24.09.2026): Spalten nach Inhalt statt je ein Viertel —
   die Rueckzahlung am Ende («CHF 25'960.00») brach in der schmalen
   Ratenspalte um und liess den Rechner beim Wechsel auf «Endfaellig»
   wachsen; die Kopfzeile «Zins (bonitaetsabhaengig)» passt so auf eine
   Zeile. Tab-Leiste und Eingabefelder etwas niedriger. */
/* Nur nebeneinander (ab 769px); darunter stehen die Spalten untereinander. */
@media (min-width: 769px) {
  :is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__results-col {
    flex: 0.8 1 0;
    min-width: 0;
  }

  :is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__results-col:first-child {
    flex: 1.5 1 0;
  }

  :is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__results-col--right {
    flex: 1.5 1 0;
  }

  :is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__results-header {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

:is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__results-value {
  white-space: nowrap;
  font-size: clamp(0.9rem, 1.15vw, 1.05rem);
}

:is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__tab {
  padding: var(--space-3) var(--space-2);
}

:is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .input-group__input,
:is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .input-group__prefix,
:is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .input-group__suffix {
  padding-block: 8px;
}

/* Dritte Runde (24.09.2026): Hinweise einzeilig und ohne eigenen Abstand —
   der Platz zwischen Versicherung und Resultat soll weg. */
:is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__inputs {
  margin-bottom: var(--space-3);
}

:is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__notices {
  margin-top: calc(-1 * var(--space-2));
}

/* ==========================================================================
   Sichttest 24.09.2026 (Startseite, Handy): Rechner kompakter
   - Kreditrechner unter 769px: je Angebot eine Karte — links Zins, rechts
     Rate; darunter Gebuehren links, Versicherung rechts. Die Beschriftung
     steht am Wert (data-label aus der Insel), die Kopfzeile behaelt nur
     «Zins (bonitaetsabhaengig)» und «Mtl. Rate». Die unsichtbare
     Versicherung behaelt ihren Platz (kein Springen beim Anhaken).
   - Renditerechner: Spalte darf schmaler als ihr Inhalt werden, Feldkopf
     bricht um — sonst schneidet er bei 320px ab.
   ========================================================================== */
@media (max-width: 768px) {
  .hero__right {
    min-width: 0;
  }

  :is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__results-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-3);
  }

  :is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__results-header .loan-calculator__results-col:nth-child(2),
  :is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__results-header .loan-calculator__results-col:nth-child(3) {
    display: none;
  }

  :is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__results-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    align-items: baseline;
  }

  :is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__results-col {
    width: auto;
    min-width: 0;
  }

  :is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__results-col--right {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }

  :is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__results-header .loan-calculator__results-col--right {
    grid-row: auto;
  }

  :is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__results-col--right .loan-calculator__results-subtext {
    text-align: right;
  }

  :is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__results-col[data-label] {
    grid-row: 2;
    font-size: 12px;
    color: var(--color-gray);
    white-space: nowrap;
  }

  :is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__results-col[data-label] + .loan-calculator__results-col[data-label] {
    grid-column: 2;
    text-align: right;
  }

  :is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__results-col[data-label]::before {
    content: attr(data-label) " ";
  }

  .yield-calculator {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  :is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__field-label {
    font-size: var(--text-sm);
  }

  :is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__option span {
    font-size: var(--text-xs);
    line-height: 1.35;
  }

  :is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__results-header {
    font-size: 10px;
    letter-spacing: 0.02em;
  }

  :is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__results-row {
    padding-block: var(--space-2);
  }

  :is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__results-row .loan-calculator__results-col:first-child {
    font-size: var(--text-sm);
  }

  :is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__results-value {
    font-size: var(--text-sm);
  }

  :is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__results-subtext {
    font-size: 11px;
  }

  .yield-calculator__panel {
    padding: var(--space-5) var(--space-4);
  }

  .yield-calculator__field-header {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .yield-calculator__result-amount {
    font-size: var(--text-2xl);
  }
}

@media (max-width: 359px) {
  :is(.hero__right, .product-hero__calc, .subpage-section) .loan-calculator .loan-calculator__results-col[data-label] {
    font-size: 11px;
  }
}

/* Ertragsrechner: Betrag als Text mit Tausendertrennung (bis 1'000'000) */
.yield-calculator__input--amount {
  width: 104px;
}

/* Betraege in den Ergebniszeilen nie zwischen «CHF» und Zahl umbrechen
   (Hypothekenseite: «CHF / 9'375,00» auf zwei Zeilen) */
.loan-calculator__results-row .loan-calculator__results-col {
  white-space: nowrap;
}

/* ==========================================================================
   NL-B4 (CAS-3119): Wert-Blase über dem Slider-Daumen
   Erscheint nur während der Bedienung (Ziehen, Hover, Tastaturfokus) und
   liegt über dem Slider, ohne Platz zu nehmen — die Höhe des Rechners
   bleibt (Höhenregel, CLAUDE.md). --pos-n = Daumenposition 0–100.
   ========================================================================== */

.calculator__slider-wrap {
  position: relative;
}

.calculator__bubble {
  position: absolute;
  bottom: calc(100% + 6px);
  /* der Daumen (28px) wandert innerhalb der Spur: Mitte korrigieren */
  left: calc(var(--pos-n, 50) * 1% + 14px - var(--pos-n, 50) * 0.28px);
  transform: translate(-50%, 4px);
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--color-text);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  transition:
    opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.calculator__bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 8px;
  height: 8px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}

.calculator__slider-wrap:hover .calculator__bubble,
.calculator__slider-wrap:active .calculator__bubble,
.calculator__slider-wrap:has(.slider:focus-visible) .calculator__bubble {
  opacity: 1;
  transform: translate(-50%, 0);
}

.loan-calculator__results-value {
  font-variant-numeric: tabular-nums;
}

@media (hover: none) {
  /* Touch: Blase nur beim Ziehen */
  .calculator__slider-wrap:hover .calculator__bubble {
    opacity: 0;
  }

  .calculator__slider-wrap:active .calculator__bubble {
    opacity: 1;
  }
}

/* Renditerechner: volle Breite, im Seitenkopf mit fester Mindestbreite wie
   der Ratenrechner (~760px, CLAUDE.md «Rechner im Seitenkopf»; 655px war zu
   schmal, Betragsfeld und Nettoertrag wurden abgeschnitten). Vorher
   bestimmten die laufenden Ergebniszahlen die Breite mit — die Karte
   zitterte beim Ziehen um bis zu 60px (Meldung 02.10.2026). */
@media (min-width: 1280px) {
  :is(.product-hero__calc, .invest-hero__visual) .yield-calculator {
    min-width: 760px;
  }
}

/* 769–1279px: Eingaben und Ergebnis untereinander. 1024–1279px: der Rechner
   nimmt nur seine Spalte (wie der Ratenrechner) — sonst blieben dem Titel
   205px. 769–1023px: der Seitenkopf ist gestapelt und deckelt den Rechner auf
   500px (investieren.css); zweispaltig bekäme jede Spalte 234px, Eingaben und
   Ergebnis brauchen um 330px und wurden abgeschnitten (CAS-3360). Unter 769px
   stapelt die allgemeine Regel. */
@media (min-width: 769px) and (max-width: 1279px) {
  :is(.product-hero__calc, .invest-hero__visual) .yield-calculator {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(.product-hero__calc, .invest-hero__visual)
    .yield-calculator__panel--inputs {
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }
}

/* blocks/charts.css */
/* ==========================================================================
   Charts Block
   ========================================================================== */

/* ==========================================================================
   Ratings Chart (Donut)
   ========================================================================== */

.ratings-chart {
  padding: var(--space-6);
}

.ratings-chart__header {
  margin-bottom: var(--space-4);
}

.ratings-chart__title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.ratings-chart__overview {
  font-size: var(--text-sm);
  color: var(--color-ink-60);
  margin-bottom: var(--space-6);
}

.ratings-chart__container {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
}

.ratings-chart__donut {
  position: relative;
  flex-shrink: 0;
}

.ratings-chart__segment {
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.ratings-chart__segment:hover,
.ratings-chart__segment--active {
  opacity: 0.8;
}

.ratings-chart__tooltip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  z-index: 10;
}

.ratings-chart__tooltip-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ratings-chart__legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.ratings-chart__legend-item {
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.ratings-chart__legend-item:hover,
.ratings-chart__legend-item--active {
  opacity: 0.8;
}

.ratings-chart__legend-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.ratings-chart__legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ratings-chart__legend-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.ratings-chart__progress-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ratings-chart__progress-bar {
  height: 6px;
  border-radius: var(--radius-sm);
  transition: width var(--duration-normal) var(--ease-out);
}

.ratings-chart__legend-value {
  font-size: var(--text-xs);
  color: var(--color-gray);
  min-width: 40px;
}

/* ==========================================================================
   Volumes Chart (Bar)
   ========================================================================== */

.volumes-chart {
  width: 100%;
  overflow-x: auto;
}

.volumes-chart__axis-label {
  font-family: var(--font-sans);
  font-size: 12px;
  fill: var(--color-ink-60);
}

/* Serie = Secondary, Hover = Primary. Keine Verlaufsfüllung in Balken. */
.volumes-chart__bar {
  fill: var(--color-secondary);
  cursor: pointer;
  transition: fill var(--duration-normal) var(--ease-out);
}

.volumes-chart__bar:hover,
.volumes-chart__bar--active {
  fill: var(--color-primary);
}

.volumes-chart__tooltip {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  box-shadow: var(--shadow-md);
}

.volumes-chart__tooltip-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-secondary);
  flex-shrink: 0;
  margin-top: 4px;
}

/* ==========================================================================
   Timeline Chart (Combo: Bars + Line)
   ========================================================================== */

.timeline-chart {
  width: 100%;
  position: relative;
}

.timeline-chart__axis-title {
  font-family: var(--font-sans);
  font-size: 14px;
  fill: var(--color-ink-80);
  font-weight: 600;
}

.timeline-chart__axis-label {
  font-family: var(--font-sans);
  font-size: 12px;
  fill: var(--color-ink-60);
}

.timeline-chart__bar {
  fill: var(--color-secondary);
  cursor: pointer;
  transition: fill var(--duration-normal) var(--ease-out);
}

.timeline-chart__bar:hover,
.timeline-chart__bar--active {
  fill: var(--color-primary);
}

.timeline-chart__line {
  pointer-events: none;
}

.timeline-chart__point {
  cursor: pointer;
  transition: r var(--duration-fast) var(--ease-out);
}

.timeline-chart__tooltip {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  box-shadow: var(--shadow-md);
}

.timeline-chart__tooltip-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

.timeline-chart__footnote {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-ink-60);
  margin: var(--space-2) 0 0;
  text-align: right;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .ratings-chart__container {
    flex-direction: column;
    align-items: center;
  }

  .ratings-chart__legend {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .ratings-chart {
    padding: var(--space-4);
  }

  .ratings-chart__title {
    font-size: var(--text-lg);
  }

  .ratings-chart__container {
    gap: var(--space-4);
  }

  .volumes-chart__axis-label,
  .timeline-chart__axis-label {
    font-size: 8px;
  }

  .timeline-chart__axis-title {
    font-size: 10px;
  }
}

/* ==========================================================================
   Loans by Intended Use (Donut + Legend with Tabs)
   ========================================================================== */

.loans-by-use__tabs {
  display: flex;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-6, 1.5rem);
  justify-content: center;
}

.loans-by-use__tab {
  padding: 0.5rem 1.5rem;
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: var(--radius-full, 999px);
  background: var(--color-white, #fff);
  color: var(--color-text-secondary, #666);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.loans-by-use__tab:hover {
  border-color: var(--color-primary, #0066cc);
  color: var(--color-primary, #0066cc);
}

.loans-by-use__tab--active {
  background: var(--color-primary, #0066cc);
  border-color: var(--color-primary, #0066cc);
  color: var(--color-white, #fff);
}

.loans-by-use__content {
  display: flex;
  gap: var(--space-8, 2rem);
  align-items: center;
  justify-content: center;
}

.loans-by-use__chart {
  flex-shrink: 0;
}

.loans-by-use__legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
  min-width: 200px;
}

.loans-by-use__legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-out);
  padding: 0.25rem 0;
}

.loans-by-use__legend-item:hover,
.loans-by-use__legend-item--active {
  opacity: 1;
}

.loans-by-use__legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.loans-by-use__legend-label {
  flex: 1;
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text, #1a1a1a);
}

.loans-by-use__legend-value {
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  color: var(--color-text-secondary, #666);
  min-width: 45px;
  text-align: right;
}

@media (max-width: 767px) {
  .loans-by-use__content {
    flex-direction: column;
  }

  .loans-by-use__legend {
    width: 100%;
  }
}

/* ==========================================================================
   Members & Projects Chart Legend
   ========================================================================== */

.members-projects__legend {
  display: flex;
  gap: var(--space-6, 1.5rem);
  justify-content: center;
  margin-bottom: var(--space-4, 1rem);
}

.members-projects__legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-secondary, #666);
  font-weight: 500;
}

.members-projects__legend-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ==========================================================================
   Rating Distribution (Donut + Legend)
   ========================================================================== */

.rating-distribution__content {
  display: flex;
  gap: var(--space-8, 2rem);
  align-items: center;
  justify-content: center;
}

.rating-distribution__chart {
  flex-shrink: 0;
}

.rating-distribution__legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
  flex: 1;
  max-width: 400px;
}

.rating-distribution__legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-out);
  padding: 0.25rem 0;
}

.rating-distribution__legend-item:hover,
.rating-distribution__legend-item--active {
  opacity: 1;
}

.rating-distribution__legend-color {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rating-distribution__legend-grade {
  font-size: var(--text-sm, 0.875rem);
  font-weight: 700;
  min-width: 28px;
  color: var(--color-text, #1a1a1a);
}

.rating-distribution__legend-bar-wrap {
  flex: 1;
  height: 8px;
  background: var(--color-border, #e5e7eb);
  border-radius: 4px;
  overflow: hidden;
}

.rating-distribution__legend-bar {
  display: block;
  height: 100%;
  border-radius: 4px;
  transition: width var(--duration-normal) var(--ease-out);
}

.rating-distribution__legend-value {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-secondary, #666);
  min-width: 100px;
  text-align: right;
}

@media (max-width: 767px) {
  .rating-distribution__content {
    flex-direction: column;
  }

  .rating-distribution__legend {
    width: 100%;
    max-width: none;
  }
}

/* ==========================================================================
   Diagramm-Karten auf /ueber-uns/statistik (CAS-2983 §6)

   Die Statistik-Inseln rendern Sektion, Titel und Diagramm selbst und
   bleiben unangetastet — deshalb wird der Container per :has() zur Karte.
   ========================================================================== */

.subpage-section__container:has(
    > .timeline-chart,
    > .volumes-chart,
    > .rating-distribution__content,
    > .loans-by-use__content,
    > .members-projects__legend
  ) {
  max-width: 1200px;
  padding: 40px;
  background: var(--color-white);
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.subpage-section__container:has(
    > .timeline-chart,
    > .volumes-chart,
    > .rating-distribution__content,
    > .loans-by-use__content,
    > .members-projects__legend
  )
  .subpage-section__header {
  margin-bottom: 24px;
}

.subpage-section__container:has(
    > .timeline-chart,
    > .volumes-chart,
    > .rating-distribution__content,
    > .loans-by-use__content,
    > .members-projects__legend
  )
  .subpage-section__title {
  font-size: 1.5rem;
}

@media (max-width: 768px) {
  .subpage-section__container:has(
      > .timeline-chart,
      > .volumes-chart,
      > .rating-distribution__content,
      > .loans-by-use__content,
      > .members-projects__legend
    ) {
    padding: 24px 16px;
  }
}

/* Balkendiagramme nutzen die ganze Breite der Karte (die Inseln setzen inline
   max-width: 800px, die viewBox skaliert mit) */
.timeline-chart svg,
.volumes-chart svg {
  max-width: none !important;
  width: 100% !important;
  height: auto;
}

/* Statistik: Kreisdiagramm links auf der Titelkante, Legende nutzt den Rest der Karte */
.rating-distribution__content,
.loans-by-use__content {
  justify-content: flex-start;
  gap: 72px;
}

.rating-distribution__legend {
  max-width: none;
}

.loans-by-use__legend {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 56px;
}

@media (max-width: 767px) {
  .rating-distribution__content,
  .loans-by-use__content {
    gap: 32px;
  }

  .loans-by-use__legend {
    grid-template-columns: 1fr;
  }
}

/* blocks/stats.css */
/* Stats Component */

.stats {
  padding: 4rem 0;
}

.stats__header {
  text-align: center;
  margin-bottom: 3rem;
}

.stats__title {
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0;
  color: var(--color-text-primary, #1a1a1a);
}

.stats__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Layout: Row (default) */
.stats--row .stats__list {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 2rem;
  flex-wrap: wrap;
}

.stats--row .stats__item {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.stats--row .stats__item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: var(--color-border, #e0e0e0);
}

/* Layout: Grid */
.stats--grid .stats__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 3rem 2rem;
}

/* Layout: Centered */
.stats--centered .stats__list {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 4rem;
  flex-wrap: wrap;
}

.stats--centered .stats__item {
  min-width: 200px;
  max-width: 300px;
}

/* Stat Item */
.stats__item {
  text-align: center;
  opacity: 0;
  animation: statsItemFadeIn var(--duration-slow) var(--ease-out) forwards;
}

@keyframes statsItemFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stats__value-wrapper {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.stats__value {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary, #0066cc);
  font-variant-numeric: tabular-nums;
}

.stats__prefix,
.stats__suffix {
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-primary, #0066cc);
  opacity: 0.8;
}

.stats__label {
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--color-text-secondary, #666);
  margin: 0;
  font-weight: 500;
}

/* Responsive Behavior */

/* Tablet */
@media (max-width: 768px) {
  .stats {
    padding: 3rem 0;
  }

  .stats__title {
    font-size: 2rem;
  }

  .stats__header {
    margin-bottom: 2rem;
  }

  /* Row layout becomes stacked on tablet */
  .stats--row .stats__list {
    flex-direction: column;
    gap: 2.5rem;
  }

  .stats--row .stats__item {
    min-width: auto;
  }

  .stats--row .stats__item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: auto;
    left: 50%;
    top: auto;
    bottom: -1.25rem;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
  }

  /* Grid becomes 2 columns */
  .stats--grid .stats__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 1.5rem;
  }

  /* Centered becomes stacked */
  .stats--centered .stats__list {
    flex-direction: column;
    gap: 2.5rem;
  }

  .stats__value {
    font-size: 2.75rem;
  }

  .stats__prefix,
  .stats__suffix {
    font-size: 1.5rem;
  }

  .stats__label {
    font-size: 1rem;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .stats {
    padding: 2rem 0;
  }

  .stats__title {
    font-size: 1.75rem;
  }

  .stats__container {
    padding: 0 0.75rem;
  }

  /* All layouts become single column */
  .stats--grid .stats__list {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .stats--row .stats__list,
  .stats--centered .stats__list {
    gap: 2rem;
  }

  .stats__value {
    font-size: 2.25rem;
  }

  .stats__prefix,
  .stats__suffix {
    font-size: 1.25rem;
  }

  .stats__label {
    font-size: 0.9375rem;
  }
}

/* Animation Variants */

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .stats__item {
    animation: none;
    opacity: 1;
  }
}

/* High contrast support */
@media (prefers-contrast: high) {
  .stats__value,
  .stats__prefix,
  .stats__suffix {
    color: currentColor;
  }

  .stats--row .stats__item:not(:last-child)::after {
    background: currentColor;
  }
}

/* blocks/header.css */
/* ==========================================================================
   Header Block - Stripe-Inspired Navigation
   ========================================================================== */

/* ==========================================================================
   Base Header Styles
   ========================================================================== */

.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background: transparent;
  border-bottom: none;
  transition:
    color var(--duration-normal) var(--ease-out),
    background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out),
    opacity var(--duration-normal) var(--ease-out);
}

/* Scrolled state - disabled, header is not sticky */

.header__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

/* ==========================================================================
   Logo
   ========================================================================== */

.header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out);
  z-index: 10;
}

.header__logo:hover {
  transform: scale(1.02);
}

.header__logo-img {
  height: 36px;
  width: auto;
}

/* ==========================================================================
   Desktop Navigation
   ========================================================================== */

.header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.header__nav--desktop {
  display: none;
}

@media (min-width: 768px) {
  .header__nav--desktop {
    display: flex;
  }
}

.header__nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.header__nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  color: var(--color-white);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--text-sm);
  transition: color var(--duration-fast) var(--ease-out);
  cursor: pointer;
}

.header__nav-link:hover {
  color: rgba(255, 255, 255, 0.8);
}

.header__nav-link--active {
  color: var(--color-white);
}

/* Chevron icon */
.header__nav-chevron {
  transition: transform var(--duration-normal) var(--ease-out);
  opacity: 0.6;
}

.header__nav-chevron--open {
  transform: rotate(180deg);
  opacity: 1;
}

/* ==========================================================================
   Dropdown Menu - Stripe-inspired mega menu
   ========================================================================== */

.header__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: var(--space-2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--duration-normal) var(--ease-out),
    visibility var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
  transform: translateX(-50%) translateY(-10px);
}

.header__dropdown--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.header__dropdown-content {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-2);
  min-width: 240px;
  border: 1px solid var(--color-border);
  overflow: hidden;
}

/* Glass effect for dropdown on scrolled state */
.header--scrolled .header__dropdown-content {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.header__dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}

/* Animated gradient background on hover */
.header__dropdown-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 115, 153, 0.05),
    transparent
  );
  transition: left var(--duration-normal) var(--ease-out);
}

.header__dropdown-link:hover::before {
  left: 100%;
}

.header__dropdown-link:hover {
  background: rgba(0, 115, 153, 0.05);
  color: var(--color-primary);
  transform: translateX(4px);
}

.header__dropdown-link--active {
  background: rgba(0, 115, 153, 0.1);
  color: var(--color-primary);
  font-weight: 600;
}

.header__dropdown-link-text {
  flex: 1;
}

.header__dropdown-link-arrow {
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.header__dropdown-link:hover .header__dropdown-link-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ==========================================================================
   Actions (Language, Login, CTA)
   ========================================================================== */

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Language Switcher - Frosty Glass Effect */
.header__lang-switcher {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.header__lang {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.header__lang:hover {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.15);
}

.header__lang--active {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.35);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Login Button */
.header__login {
  padding: var(--space-2) var(--space-4);
  color: var(--color-white);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--text-sm);
  transition: color var(--duration-fast) var(--ease-out);
}

.header__login:hover {
  color: rgba(255, 255, 255, 0.8);
}

.header__login--desktop {
  display: none;
}

@media (min-width: 768px) {
  .header__login--desktop {
    display: block;
  }
}

/* CTA Button - Stripe-inspired gradient */
.header__cta {
  display: none;
  padding: var(--space-3) var(--space-6);
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-secondary) 100%
  );
  color: var(--color-white);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-sm);
  border-radius: var(--radius-full);
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .header__cta {
    display: block;
  }
}

/* Animated gradient on hover */
.header__cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    var(--color-secondary) 0%,
    var(--color-primary) 100%
  );
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.header__cta:hover::before {
  opacity: 1;
}

.header__cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary);
}

.header__cta:active {
  transform: translateY(0);
}

.header__cta > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Mobile Menu Toggle
   ========================================================================== */

.header__menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: var(--z-modal);
}

@media (min-width: 768px) {
  .header__menu-toggle {
    display: none;
  }
}

.header__menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-white);
  border-radius: 2px;
  transition:
    background-color var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out);
  transform-origin: center;
}

/* Animated hamburger to X */
.header__menu-toggle--open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.header__menu-toggle--open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.header__menu-toggle--open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ==========================================================================
   Mobile Menu Backdrop
   ========================================================================== */

.header__mobile-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: calc(var(--z-modal) - 1);
  animation: fadeIn var(--duration-normal) var(--ease-out);
}

/* ==========================================================================
   Mobile Menu - Slide-in Panel
   ========================================================================== */

.header__mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 400px;
  height: 100vh;
  background: var(--color-white);
  box-shadow: var(--shadow-2xl);
  z-index: var(--z-modal);
  overflow-y: auto;
  transition: right var(--duration-slow) var(--ease-out);
}

.header__mobile-menu--open {
  right: 0;
}

.header__mobile-content {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-height: 100%;
}

/* Mobile Header */
.header__mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.header__mobile-close {
  padding: var(--space-2);
  background: none;
  border: none;
  color: var(--color-gray);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
  border-radius: var(--radius-sm);
}

.header__mobile-close:hover {
  color: var(--color-text);
  background: var(--color-bg-light);
  transform: rotate(90deg);
}

/* Mobile Navigation */
.header__mobile-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.header__mobile-section {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
}

.header__mobile-section:last-of-type {
  border-bottom: none;
}

.header__mobile-section-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  background: none;
  border: none;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  border-radius: var(--radius-sm);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
  animation: slideRight var(--duration-slow) var(--ease-out);
  opacity: 0;
  animation-fill-mode: forwards;
}

.header__mobile-section-button:hover {
  background: var(--color-bg-light);
  color: var(--color-primary);
}

.header__mobile-section-button--open {
  color: var(--color-primary);
}

.header__mobile-section-link {
  display: block;
  padding: var(--space-4);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
  animation: slideRight var(--duration-slow) var(--ease-out);
  opacity: 0;
  animation-fill-mode: forwards;
}

.header__mobile-section-link:hover {
  background: var(--color-bg-light);
  color: var(--color-primary);
}

.header__mobile-section-link--active {
  background: rgba(0, 115, 153, 0.1);
  color: var(--color-primary);
}

.header__mobile-chevron {
  transition: transform var(--duration-normal) var(--ease-out);
  opacity: 0.6;
}

.header__mobile-chevron--open {
  transform: rotate(180deg);
  opacity: 1;
}

/* Mobile Submenu */
.header__mobile-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-slow) var(--ease-out);
}

.header__mobile-submenu--open {
  max-height: 500px;
}

.header__mobile-link {
  display: block;
  padding: var(--space-3) var(--space-4);
  margin-left: var(--space-4);
  color: var(--color-text-light);
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: 500;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-left-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
  animation: slideRight var(--duration-slow) var(--ease-out);
  opacity: 0;
  animation-fill-mode: forwards;
}

.header__mobile-link:hover {
  background: var(--color-bg-light);
  color: var(--color-primary);
  border-left-color: var(--color-primary);
  transform: translateX(4px);
}

.header__mobile-link--active {
  background: rgba(0, 115, 153, 0.05);
  color: var(--color-primary);
  border-left-color: var(--color-primary);
  font-weight: 600;
}

/* Mobile Login */
.header__mobile-login {
  display: block;
  padding: var(--space-4);
  margin-top: var(--space-4);
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-secondary) 100%
  );
  color: var(--color-white);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-base);
  text-align: center;
  border-radius: var(--radius-lg);
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
  box-shadow: var(--shadow-md);
  animation: slideRight var(--duration-slow) var(--ease-out);
  opacity: 0;
  animation-fill-mode: forwards;
}

.header__mobile-login:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary);
}

.header__mobile-login:active {
  transform: translateY(0);
}

/* Mobile Language Switcher */
.header__mobile-lang {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.header__mobile-lang .header__lang {
  padding: var(--space-3) var(--space-4);
  text-align: center;
  text-transform: none;
  font-size: var(--text-sm);
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

@media (min-width: 768px) {
  .header__container {
    padding: 0 var(--space-8);
  }

  .header__logo-img {
    height: 40px;
  }
}

@media (min-width: 1024px) {
  .header__nav {
    gap: var(--space-1);
  }

  .header__nav-link {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-base);
  }

  .header__actions {
    gap: var(--space-4);
  }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .header,
  .header__dropdown,
  .header__mobile-menu,
  .header__mobile-backdrop {
    transition: none;
  }

  .header__mobile-section-button,
  .header__mobile-section-link,
  .header__mobile-link,
  .header__mobile-login {
    animation: none;
    opacity: 1;
  }
}

/* Focus styles for keyboard navigation */
.header__nav-link:focus,
.header__dropdown-link:focus,
.header__lang:focus,
.header__login:focus,
.header__cta:focus,
.header__mobile-section-button:focus,
.header__mobile-link:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .header {
    border-bottom: 2px solid currentColor;
  }

  .header__nav-link,
  .header__dropdown-link {
    text-decoration: underline;
  }
}

/* ==========================================================================
   Sprachwahl auf Seiten ohne Navigation (hideNav — Partnerseite, Funnel)

   Gleiche Form wie .stripe-nav__lang auf der Website und .el-lang auf den
   Landing Pages: offene Pille, drei Sprachen nebeneinander, die aktive auf
   Weiss (Entscheid 22.09.2026, CAS-2983 §6). Vorher war die aktive Sprache
   hier als einzige Stelle der Seite eine volle Petrol-Fläche mit weisser
   Schrift — dieselbe Auszeichnung, die sonst nur ein Button trägt.

   Diese Leiste steht auf Weiss, nicht über einem Verlauf; deshalb ohne
   backdrop-filter.
   ========================================================================== */

.minimal-lang-switcher {
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: var(--radius-full);
  background: var(--color-light-4);
  border: 1px solid var(--color-light-3);
}

.minimal-lang-switcher__link {
  min-width: 36px;
  padding: 6px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--color-ink-60);
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}

.minimal-lang-switcher__link:hover {
  color: var(--color-text);
  background: var(--color-white);
}

.minimal-lang-switcher__link--active,
.minimal-lang-switcher__link--active:hover {
  color: var(--color-text);
  background: var(--color-white);
  box-shadow: 0 1px 3px rgba(9, 17, 36, 0.12);
}

/* blocks/stripe-nav.css */
/* ==========================================================================
   Stripe-Style Navigation - Morphing Dropdown
   ========================================================================== */

/* ==========================================================================
   Scroll-Driven Animation (CSS-based, no JS)
   ========================================================================== */

@keyframes nav-scroll-blur {
  0%, 90% {
    background: transparent;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }
}

/* ==========================================================================
   Base Header
   ========================================================================== */

.stripe-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  /* backdrop-filter is on ::before so the header itself does not create a
     containing block for position:fixed children (Android Chrome bug) */
}

/* Scroll-Kopplung nur mit Browser-Unterstützung — sonst springt die Animation
   in den Endzustand (Firefox: Verlauf unsichtbar). CAS-3118 */
@supports (animation-timeline: scroll()) {
  .stripe-nav {
    /* Scroll-driven animation (only background + shadow, no blur) */
    animation-name: nav-scroll-blur;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll();
    animation-range: 0px 250px;
  }
}

/* Backdrop blur lives on a pseudo-element so the header stays inert as a
   containing block — position:fixed children (mobile menu, backdrop) are
   correctly positioned relative to the viewport on Android Chrome. */
.stripe-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  pointer-events: none;
  z-index: -1;
}

/* Ein Scrollbereich für alle Seiten (vorher Startseite 250px, sonst 100px) */

/* Fallback for browsers without scroll-driven animations */
@supports not (animation-timeline: scroll()) {
  .stripe-nav {
    transition:
    background-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
  }

  .stripe-nav--scrolled {
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  .stripe-nav--scrolled::before {
    backdrop-filter: blur(20px) brightness(1.05);
    -webkit-backdrop-filter: blur(20px) brightness(1.05);
  }
}

.stripe-nav__container {
  /* gleiche Kanten wie der Inhalt: 1200px + 1rem Rand links und rechts */
  max-width: calc(1200px + 2rem);
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.stripe-nav__left {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 32px;
}

/* ==========================================================================
   Logo
   ========================================================================== */

.stripe-nav__logo {
  position: relative;
  display: flex;
  align-items: center;
  text-decoration: none;
  z-index: 10;
}

.stripe-nav__logo svg,
.stripe-nav__logo img {
  height: 36px;
  width: auto;
}

/* CAS-2946/CAS-2983: kein Glas-Pill und keine Skalierung mehr — weder auf
   der Startseite noch auf den Unterseiten. Jeder Hero trägt oben eine
   weisse Kontrastebene, die Logo und Navigation lesbar hält; die dauerhafte
   Transformation legte das SVG auf eine eigene Rasterebene und liess es
   weich aussehen. */

/* ==========================================================================
   Navigation Wrapper (contains items + dropdown)
   ========================================================================== */

.stripe-nav__wrapper {
  position: relative;
  display: none;
  height: 100%;
}

@media (min-width: 900px) {
  .stripe-nav__wrapper {
    display: flex;
    align-items: center;
  }
}

/* Sliding highlight pill */
.stripe-nav__highlight {
  position: absolute;
  top: 50%;
  left: 0;
  height: 36px;
  transform: translateY(-50%);
  background: rgba(0, 181, 206, 0.08);
  border-radius: 8px;
  pointer-events: none;
  transition:
    transform var(--duration-fast) var(--ease-out),
    width var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
  z-index: 0;
}

.stripe-nav__items {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  position: relative;
  z-index: 1;
}

.stripe-nav__item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.stripe-nav__link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  /* 16px = Fliesstextgrösse. 15px war einen Tick zu klein gegenüber dem
     übrigen Text (CAS-2983). */
  font-size: var(--text-sm);
  border-radius: 6px;
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
  /* Improve touch target - prevent accidental taps */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.stripe-nav__link:hover {
  color: var(--color-text);
}

.stripe-nav__link--current {
  color: var(--color-text);
}

.stripe-nav__item--active .stripe-nav__link {
  color: var(--color-text);
}

/* Chevron */
.stripe-nav__chevron {
  opacity: 0.5;
  transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}

.stripe-nav__chevron--open {
  transform: rotate(180deg);
  opacity: 1;
}

/* ==========================================================================
   Animated Dropdown Container (Stripe-style morphing)
   ========================================================================== */

.stripe-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 1px;
  background: var(--color-white);
  border-radius: 12px;
  box-shadow:
    0 50px 100px -20px rgba(50, 50, 93, 0.25),
    0 30px 60px -30px rgba(0, 0, 0, 0.3);
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transform-origin: top center;
  transition:
    opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-normal) var(--ease-out),
    width var(--duration-normal) var(--ease-out);
}

/* Invisible bridge to maintain hover when moving from nav to dropdown */
.stripe-nav__dropdown::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 20px;
}

.stripe-nav__dropdown--visible {
  opacity: 1;
  pointer-events: auto;
}

/* Glass effect on scroll */
.stripe-nav--scrolled .stripe-nav__dropdown {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Arrow pointing up */
.stripe-nav__dropdown-arrow {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: var(--color-white);
  border-radius: 2px;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.04);
}

.stripe-nav--scrolled .stripe-nav__dropdown-arrow {
  background: rgba(255, 255, 255, 0.98);
}

/* ==========================================================================
   Content Panels (cross-fade between menus)
   ========================================================================== */

.stripe-nav__panel {
  display: none;
  /*
   * Fixed width prevents text reflow during dropdown width transitions.
   * The dropdown's overflow:hidden clips content during the morph animation.
   */
  width: 320px;
  flex-shrink: 0;
}

.stripe-nav__panel--active {
  display: block;
}

.stripe-nav__panel--about {
  width: 580px;
}

/* Panel header with title and subtitle */
.stripe-nav__panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  margin: 8px 16px 0;
  text-decoration: none;
  border-radius: 10px;
}

.stripe-nav__panel-header-content {
  flex: 1;
}

.stripe-nav__panel-title {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 2px;
  letter-spacing: -0.01em;
  transition: color var(--duration-fast) var(--ease-out);
}

.stripe-nav__panel-subtitle {
  display: block;
  font-size: 14px;
  color: var(--color-gray);
  line-height: 1.3;
  transition: color var(--duration-fast) var(--ease-out);
}

.stripe-nav__panel-header:hover .stripe-nav__panel-title,
.stripe-nav__panel-header:hover .stripe-nav__panel-subtitle {
  color: var(--color-text);
}

/* Arrow for panel header */
.stripe-nav__panel-header-arrow {
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
  color: var(--color-text);
  flex-shrink: 0;
}

.stripe-nav__panel-header-arrow .btn__arrow {
  transition: transform var(--duration-normal) var(--ease-out);
}

.stripe-nav__panel-header-arrow .btn__arrow .arrow-line {
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transform-box: fill-box;
  transition: transform var(--duration-normal) var(--ease-out);
}

.stripe-nav__panel-header:hover .stripe-nav__panel-header-arrow {
  opacity: 1;
}

.stripe-nav__panel-header:hover .stripe-nav__panel-header-arrow .btn__arrow {
  transform: translateX(4px);
}

.stripe-nav__panel-header:hover
  .stripe-nav__panel-header-arrow
  .btn__arrow
  .arrow-line {
  transform: scaleX(1);
}

.stripe-nav__panel-inner {
  padding: 8px 16px 16px;
}

/* Two-column grid for "about" section */
.stripe-nav__panel--about .stripe-nav__panel-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 20px;
}

/* Last item spans full width if odd number */
.stripe-nav__panel--about .stripe-nav__dropdown-item:last-child:nth-child(odd) {
  grid-column: 1;
}

/* ==========================================================================
   Dropdown Items
   ========================================================================== */

.stripe-nav__dropdown-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  text-decoration: none;
  border-radius: 10px;
  background: transparent;
  transition: background var(--duration-fast) var(--ease-out);
  animation: stripeNavFadeIn var(--duration-normal) var(--ease-out) forwards;
  opacity: 0;
  /* Touch improvements */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.stripe-nav__dropdown-item + .stripe-nav__dropdown-item {
  margin-top: 0.25rem;
}

@keyframes stripeNavFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stripe-nav__dropdown-item:hover {
  background: transparent;
}

.stripe-nav__dropdown-item--active {
  background: transparent;
}

/* Icon */
.stripe-nav__dropdown-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  background: #f7f7f7;
  border-radius: 10px;
  transition:
    transform var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
}

.stripe-nav__dropdown-icon svg {
  width: 22px;
  height: 22px;
}

.stripe-nav__dropdown-icon-svg {
  color: var(--color-primary);
  transition: color var(--duration-fast) var(--ease-out);
}

.stripe-nav__dropdown-item:hover .stripe-nav__dropdown-icon {
  transform: scale(1.02);
  background: #f0f7f9;
}

/* Content */
.stripe-nav__dropdown-content {
  flex: 1;
  min-width: 0;
}

.stripe-nav__dropdown-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 1px;
  letter-spacing: -0.01em;
  transition: color var(--duration-fast) var(--ease-out);
}

.stripe-nav__dropdown-item:hover .stripe-nav__dropdown-label {
  color: var(--color-primary);
}

.stripe-nav__dropdown-item:hover .stripe-nav__dropdown-desc {
  color: var(--color-text);
}

.stripe-nav__dropdown-desc {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-ink-60);
  line-height: 1.3;
  transition: color var(--duration-fast) var(--ease-out);
}

/* Arrow */
.stripe-nav__dropdown-arrow-icon {
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
  color: var(--color-primary);
  flex-shrink: 0;
}

.stripe-nav__dropdown-arrow-icon .btn__arrow {
  transition: transform var(--duration-normal) var(--ease-out);
}

.stripe-nav__dropdown-arrow-icon .btn__arrow .arrow-line {
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transform-box: fill-box;
  transition: transform var(--duration-normal) var(--ease-out);
}

.stripe-nav__dropdown-item:hover .stripe-nav__dropdown-arrow-icon {
  opacity: 1;
}

.stripe-nav__dropdown-item:hover .stripe-nav__dropdown-arrow-icon .btn__arrow {
  transform: translateX(4px);
}

.stripe-nav__dropdown-item:hover
  .stripe-nav__dropdown-arrow-icon
  .btn__arrow
  .arrow-line {
  transform: scaleX(1);
}

/* ==========================================================================
   Right Side Actions
   ========================================================================== */

.stripe-nav__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Language Switcher - Frosty Glass Effect */
.stripe-nav__lang {
  display: none;
  padding: 4px;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  gap: 2px;
}

@media (min-width: 900px) {
  .stripe-nav__lang {
    display: flex;
  }
}

.stripe-nav__lang-item {
  padding: 6px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-gray-dark);
  text-decoration: none;
  border-radius: 9999px;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.stripe-nav__lang-item:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow-sm);
}

.stripe-nav__lang-item--active {
  color: var(--color-dark);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-sm);
}

/* Login */
.stripe-nav__login {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--text-sm);
  transition: color var(--duration-fast) var(--ease-out);
}

@media (min-width: 900px) {
  .stripe-nav__login {
    display: flex;
  }
}

.stripe-nav__login:hover {
  color: var(--color-text);
}

/* CTA Button - hide on small screens and cramped intermediate widths */
@media (max-width: 420px), (min-width: 900px) and (max-width: 1100px) {
  a.stripe-nav__cta {
    display: none;
  }
}

/* ==========================================================================
   Mobile Toggle - Frosty Glass Button
   ========================================================================== */

.stripe-nav__toggle {
  display: block;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50px;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  cursor: pointer;
  z-index: 1001;
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.stripe-nav__toggle:hover {
  background: rgba(255, 255, 255, 0.7);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.stripe-nav__toggle:active {
  transform: scale(0.97);
}

@media (min-width: 900px) {
  .stripe-nav__toggle {
    display: none;
  }
}

.stripe-nav__toggle--open {
  display: none;
}

/* ==========================================================================
   Mobile Backdrop
   ========================================================================== */

.stripe-nav__backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 999;
  animation: fadeIn var(--duration-normal) var(--ease-out);
}

/* Remove nav background when mobile menu is open */
.stripe-nav--mobile-open {
  background: transparent !important;
  box-shadow: none !important;
  animation: none;
}

.stripe-nav--mobile-open::before {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ==========================================================================
   Mobile Menu
   ========================================================================== */

.stripe-nav__mobile {
  position: fixed;
  top: 12px;
  bottom: 12px;
  right: -100%;
  width: calc(100% - 24px);
  max-width: 320px;
  height: calc(100dvh - 24px);
  background: var(--color-white);
  z-index: 1000;
  overflow-y: auto;
  transition: right var(--duration-normal) var(--ease-out);
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  box-shadow: var(--shadow-2xl);
}

.stripe-nav__mobile--open {
  right: 12px;
}

.stripe-nav__mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-border);
}

.stripe-nav__mobile-header svg,
.stripe-nav__mobile-logo {
  height: 32px;
  width: auto;
}

.stripe-nav__mobile-close {
  padding: 8px;
  background: none;
  border: none;
  color: var(--color-gray);
  cursor: pointer;
  border-radius: 8px;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.stripe-nav__mobile-close:hover {
  background: #f5f5f5;
  color: var(--color-text);
}

/* Mobile Language Select */
.stripe-nav__mobile-lang-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 32px 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  background: #f5f5f5;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23424748' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
}

.stripe-nav__mobile-lang-select:hover {
  background-color: #ebebeb;
}

.stripe-nav__mobile-lang-select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Mobile Nav */
.stripe-nav__mobile-nav {
  flex: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Push buttons to bottom */
.stripe-nav__mobile-nav > .btn:first-of-type {
  margin-top: auto;
}

.stripe-nav__mobile-section {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 8px;
}

.stripe-nav__mobile-section:last-of-type {
  border-bottom: none;
}

.stripe-nav__mobile-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 12px;
  background: none;
  border: none;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  border-radius: 8px;
  transition:
    color var(--duration-fast) var(--ease-out);
}

.stripe-nav__mobile-button--open {
  color: var(--color-primary);
}

.stripe-nav__mobile-chevron {
  opacity: 0.5;
  transition: transform var(--duration-normal) var(--ease-out);
}

.stripe-nav__mobile-chevron--open {
  transform: rotate(180deg);
  opacity: 1;
}

/* Mobile Submenu */
.stripe-nav__mobile-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-normal) var(--ease-out);
}

.stripe-nav__mobile-submenu--open {
  max-height: 600px;
}

.stripe-nav__mobile-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 10px;
  text-decoration: none;
  border-radius: 8px;
  transition: background var(--duration-fast) var(--ease-out);
}

.stripe-nav__mobile-link--parent {
  margin-bottom: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.stripe-nav__mobile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

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

.stripe-nav__mobile-icon-svg {
  color: var(--color-primary);
}

.stripe-nav__mobile-text {
  flex: 1;
}

.stripe-nav__mobile-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 2px;
}

.stripe-nav__mobile-desc {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-ink-60);
  line-height: 1.4;
}

/* Mobile Nav Buttons */
.stripe-nav__mobile-nav > .btn {
  width: 100%;
  justify-content: center;
}

.stripe-nav__mobile-nav > .btn + .btn {
  margin-top: 8px;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .stripe-nav,
  .stripe-nav__dropdown,
  .stripe-nav__panel,
  .stripe-nav__mobile,
  .stripe-nav__backdrop {
    transition: none;
  }

  .stripe-nav__dropdown-item {
    animation: none;
    opacity: 1;
  }
}

.stripe-nav__link:focus-visible,
.stripe-nav__dropdown-item:focus-visible,
.stripe-nav__lang-item:focus-visible,
.stripe-nav__login:focus-visible,
.stripe-nav__cta:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   Touch Device Enhancements
   ========================================================================== */

/* Touch feedback on dropdown items */
.stripe-nav__dropdown-item:active {
  transform: scale(0.98);
}

/* ==========================================================================
   Zielgruppenfarben im Mega-Menü

   Eine Definition pro Eintrag, die Regeln darunter lesen sie. Tile = Tint,
   Glyph/Label/Pfeil = Ink-Variante (AA auf Weiss). Anleger sind eine Welt
   in Grün — Entscheid 22.09.2026, siehe handbook style-guide/colors.md.
   Vorher Rohfarben: Gelb 1.9:1, Orange 2.2:1, Pink 3.3:1 als Label.
   ========================================================================== */

.stripe-nav__panel--loan .stripe-nav__dropdown-item:nth-child(1) {
  --nav-accent: var(--color-accent-private);
  --nav-tint: var(--color-tint-private);
}

.stripe-nav__panel--loan .stripe-nav__dropdown-item:nth-child(2) {
  --nav-accent: var(--color-accent-sme);
  --nav-tint: var(--color-tint-sme);
}

.stripe-nav__panel--loan .stripe-nav__dropdown-item:nth-child(3) {
  --nav-accent: var(--color-accent-hypo);
  --nav-tint: var(--color-tint-hypo);
}

.stripe-nav__panel--invest .stripe-nav__dropdown-item {
  --nav-accent: var(--color-accent-investing);
  --nav-tint: var(--color-tint-investing);
}

/* «Über uns» hat keine Zielgruppe — also der neutrale Markenakzent, wie der
   Petrol-Rückfall auf den Unterseiten. Vorher blieben diese Kacheln als
   einzige grau, was wie ein vergessener Abschnitt aussah. */
.stripe-nav__panel--about .stripe-nav__dropdown-item {
  --nav-accent: var(--color-primary);
  --nav-tint: var(--color-tint-primary);
}

.stripe-nav__panel--loan
  .stripe-nav__dropdown-item:nth-child(-n+3)
  .stripe-nav__dropdown-icon,
.stripe-nav__panel--invest
  .stripe-nav__dropdown-item
  .stripe-nav__dropdown-icon,
.stripe-nav__panel--about
  .stripe-nav__dropdown-item
  .stripe-nav__dropdown-icon {
  background: var(--nav-tint);
}

.stripe-nav__panel--loan
  .stripe-nav__dropdown-item:nth-child(-n+3)
  .stripe-nav__dropdown-icon-svg,
.stripe-nav__panel--invest
  .stripe-nav__dropdown-item
  .stripe-nav__dropdown-icon-svg,
.stripe-nav__panel--loan
  .stripe-nav__dropdown-item:nth-child(-n+3)
  .stripe-nav__dropdown-arrow-icon,
.stripe-nav__panel--invest
  .stripe-nav__dropdown-item
  .stripe-nav__dropdown-arrow-icon,
.stripe-nav__panel--about
  .stripe-nav__dropdown-item
  .stripe-nav__dropdown-icon-svg,
.stripe-nav__panel--about
  .stripe-nav__dropdown-item
  .stripe-nav__dropdown-arrow-icon,
.stripe-nav__panel--about
  .stripe-nav__dropdown-item:hover
  .stripe-nav__dropdown-label,
.stripe-nav__panel--loan
  .stripe-nav__dropdown-item:nth-child(-n+3):hover
  .stripe-nav__dropdown-label,
.stripe-nav__panel--invest
  .stripe-nav__dropdown-item:hover
  .stripe-nav__dropdown-label {
  color: var(--nav-accent);
}

.stripe-nav__panel--loan
  .stripe-nav__dropdown-item:nth-child(-n+3):hover
  .stripe-nav__dropdown-icon,
.stripe-nav__panel--invest
  .stripe-nav__dropdown-item:hover
  .stripe-nav__dropdown-icon,
.stripe-nav__panel--about
  .stripe-nav__dropdown-item:hover
  .stripe-nav__dropdown-icon {
  background: color-mix(in srgb, var(--nav-accent) 16%, var(--nav-tint));
}

/* Mobil dieselben Zielgruppenfarben wie im Mega-Menü. Der erste Link im
   Untermenü ist die Übersichtsseite, die Produkte folgen ab dem zweiten. */
.stripe-nav__mobile-submenu--loan .stripe-nav__mobile-link:nth-of-type(2) {
  --nav-accent: var(--color-accent-private);
  --nav-tint: var(--color-tint-private);
}

.stripe-nav__mobile-submenu--loan .stripe-nav__mobile-link:nth-of-type(3) {
  --nav-accent: var(--color-accent-sme);
  --nav-tint: var(--color-tint-sme);
}

.stripe-nav__mobile-submenu--loan .stripe-nav__mobile-link:nth-of-type(4) {
  --nav-accent: var(--color-accent-hypo);
  --nav-tint: var(--color-tint-hypo);
}

.stripe-nav__mobile-submenu--invest .stripe-nav__mobile-link {
  --nav-accent: var(--color-accent-investing);
  --nav-tint: var(--color-tint-investing);
}

.stripe-nav__mobile-submenu--loan .stripe-nav__mobile-icon,
.stripe-nav__mobile-submenu--invest .stripe-nav__mobile-icon {
  border-radius: var(--radius-md);
  background: var(--nav-tint);
}

.stripe-nav__mobile-submenu--loan .stripe-nav__mobile-icon-svg,
.stripe-nav__mobile-submenu--invest .stripe-nav__mobile-icon-svg {
  color: var(--nav-accent);
}

/* Ensure dropdown is accessible on touch by giving it proper padding */
@media (pointer: coarse) {
  .stripe-nav__dropdown {
    padding-top: 0;
    padding-bottom: 8px;
  }

  .stripe-nav__dropdown-item {
    /* Larger touch target */
    padding: 14px 12px;
  }

  .stripe-nav__link {
    /* Larger touch target */
    padding: 10px 16px;
  }
}

/* Uebersichtslink im Menue klar von den Einzeleintraegen abheben */
.stripe-nav__panel-header {
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-radius: 10px 10px 0 0;
  border-bottom: 1px solid var(--color-border, rgba(9, 17, 36, 0.08));
}

.stripe-nav__panel-title {
  color: var(--color-primary);
}

.stripe-nav__panel-header-arrow {
  opacity: 1;
  color: var(--color-primary);
}

.stripe-nav__panel-header:hover {
  background: rgba(0, 115, 153, 0.06);
}

.stripe-nav__panel-header:hover .stripe-nav__panel-title {
  color: var(--color-primary);
}

.stripe-nav__panel-header-arrow .btn__arrow .arrow-line {
  transform: scaleX(1);
}

/* Pfeil im Menuepunkt: grosse Klickflaeche (Padding, durch Margin neutralisiert) */
.stripe-nav__chevron {
  box-sizing: content-box;
  padding: 10px 8px;
  margin: -10px -8px;
  cursor: pointer;
}

/* blocks/footer.css */
/* ==========================================================================
   Footer Block - Stripe-Inspired Premium Design
   ========================================================================== */

/* ==========================================================================
   Base Footer Styles
   ========================================================================== */

.footer {
  position: relative;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f0fdfa 40%,
    #ecfeff 70%,
    #e0f2fe 100%
  );
  color: #64748b;
  overflow: hidden;
}

/* Decorative gradient background with mesh pattern */
.footer__gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.5;
  pointer-events: none;
  background: radial-gradient(
    circle at 90% 90%,
    rgba(34, 211, 238, 0.2) 0%,
    transparent 40%
  );
  background-size: 100% 100%;
}

/* Container */
.footer__container {
  position: relative;
  max-width: 1260px;
  margin: 0 auto;
  padding: var(--space-8) 1rem;
  z-index: 1;
}

/* ==========================================================================
   Social Media Top Section
   ========================================================================== */

.footer__social-top {
  display: flex;
  gap: 24px;
  padding: 40px 0 40px;
}

.footer__social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: #1e293b;
  transition:
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.footer__social-icon svg {
  width: 32px;
  height: 32px;
}

.footer__social-icon:hover {
  color: var(--color-secondary);
  transform: scale(1.1);
}

/* ==========================================================================
   Partner Logos Section
   ========================================================================== */

.footer__partners-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 0 40px;
  max-width: 1200px;
  margin: 24px auto 0;
  flex-wrap: wrap;
}

.footer__partners-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #64748b;
  text-transform: uppercase;
  white-space: nowrap;
}

.footer__partners {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}

.footer__partner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #475569;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.footer__partner:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.footer__partner-name {
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.2;
  color: #1e293b;
}

.footer__partner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #1e293b;
  border-radius: 6px;
  color: white;
  font-size: 1.125rem;
  font-weight: 600;
}

.footer__partner-icon--gray {
  background: #64748b;
}

.footer__partner-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.footer__partner-text-main {
  font-size: 0.75rem;
  font-weight: 800;
  color: #1e293b;
  line-height: 1.2;
}

.footer__partner-text-sub {
  font-size: 0.625rem;
  font-weight: 500;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.footer__partner-logo {
  height: 50px;
  width: auto;
}

.footer__partner-logo--sm {
  height: 36px;
}

.footer__partner-logo--trust-row {
  height: 44px;
  align-self: center;
}

@media (max-width: 480px) {
  .footer__partner-logo--trust-row {
    height: 36px;
  }
}

.footer__partner-logo--lg {
  height: 80px;
}

/* ==========================================================================
   Trust Badges Section - Two-row layout
   ========================================================================== */

.footer__trust {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px 0;
  max-width: 1200px;
  width: 100%;
}

.footer__trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.footer__trust-row--bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  padding-top: 8px;
}

.footer__trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  flex: 0 1 auto;
}

.footer__trust-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer__trust-icon svg {
  width: 100%;
  height: 100%;
}

.footer__trust-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer__trust-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}

.footer__trust-text {
  font-size: 0.75rem;
  color: var(--color-gray);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .footer__trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .footer__trust-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    gap: 10px;
  }

  .footer__trust-row--bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column: 1 / -1;
    gap: 12px;
    padding-top: 8px;
    align-items: center;
  }

  .footer__trust-item {
    gap: 12px;
  }

  .footer__trust-icon {
    width: 36px;
    height: 36px;
  }

  .footer__trust-title {
    font-size: 0.8125rem;
  }

  .footer__trust-text {
    font-size: 0.6875rem;
  }
}

@media (max-width: 480px) {
  .footer__trust {
    gap: 16px;
  }

  .footer__trust-row {
    gap: 10px;
  }

  .footer__trust-row--bottom {
    gap: 16px;
    padding-top: 4px;
  }

  .footer__trust-item {
    flex: 1 1 calc(50% - 5px);
    min-width: 140px;
    gap: 8px;
    flex-direction: column;
    align-items: flex-start;
  }

  .footer__trust-icon {
    width: 40px;
    height: 40px;
  }

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

  .footer__trust-title {
    white-space: normal;
    line-height: 1.3;
    font-size: 0.8125rem;
  }

  .footer__trust-text {
    white-space: normal;
    line-height: 1.3;
    font-size: 0.6875rem;
  }
}

@media (max-width: 768px) {
  .footer__social-top {
    padding: 40px 0 30px;
    gap: 16px;
  }

  .footer__social-icon {
    width: 40px;
    height: 40px;
  }

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

  .footer__partners {
    gap: 24px;
    padding: 30px 0;
  }

  .footer__partner-logo {
    height: 36px;
  }

  .footer__partner-logo--sm {
    height: 28px;
  }

  .footer__partner-logo--lg {
    height: 44px;
  }
}

@media (max-width: 480px) {
  .footer__partners-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 0 0 32px;
  }

  .footer__partners-label {
    font-size: 0.75rem;
  }

  .footer__partners {
    gap: 24px;
    padding: 0;
  }

  .footer__partner-logo {
    height: 36px;
  }

  .footer__partner-logo--lg {
    height: 44px;
  }

  .footer__social-top {
    padding: 36px 0 24px;
    gap: 16px;
  }

  .footer__social-icon {
    width: 40px;
    height: 40px;
  }

  .footer__social-icon svg {
    width: 26px;
    height: 26px;
  }
}

@media (min-width: 768px) {
  .footer__container {
    padding: 4rem var(--space-8) 3rem;
  }
}

@media (min-width: 1024px) {
  .footer__container {
    padding: 5rem var(--space-8) 3rem;
  }
}

/* ==========================================================================
   Main Content Grid
   ========================================================================== */

.footer__main {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .footer__main {
    grid-template-columns: 1.2fr 2fr;
    gap: 3rem;
  }
}

@media (min-width: 1024px) {
  .footer__main {
    grid-template-columns: 1.16fr 2fr;
    gap: 5rem;
  }
}

/* ==========================================================================
   Brand Section (Logo, Contact, Newsletter)
   ========================================================================== */

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Logo */
.footer__logo {
  display: inline-flex;
  align-items: center;
  color: var(--color-white);
  text-decoration: none;
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
  max-width: fit-content;
}

.footer__logo:hover {
  transform: scale(1.02);
  opacity: 0.9;
}

.footer__logo-svg,
.footer__logo-img {
  height: 32px;
  width: auto;
}

@media (min-width: 768px) {
  .footer__logo-svg,
  .footer__logo-img {
    height: 36px;
  }
}

/* Tagline */
.footer__tagline {
  font-size: var(--text-base);
  color: #64748b;
  line-height: var(--leading-relaxed);
  max-width: 320px;
  margin: 0;
}

/* Contact Information */
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: #64748b;
}

.footer__address {
  white-space: pre-line;
}

.footer__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #94a3b8;
  margin-top: 2px;
}

.footer__contact-link {
  color: #64748b;
  text-decoration: none;
  transition:
    color var(--duration-fast) var(--ease-out);
}

.footer__contact-link:hover {
  color: var(--color-gray-dark);
}

/* ==========================================================================
   Newsletter Section
   ========================================================================== */

.footer__newsletter {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
}

.footer__newsletter-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-gray-dark);
  margin: 0;
}

.footer__newsletter-description {
  font-size: var(--text-sm);
  color: #64748b;
  margin: 0;
  line-height: var(--leading-normal);
}

.footer__newsletter-form {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.footer__newsletter-input {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  color: var(--color-gray-dark);
  font-size: var(--text-sm);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.footer__newsletter-input::placeholder {
  color: #94a3b8;
}

.footer__newsletter-input:focus {
  outline: none;
  background: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 115, 153, 0.1);
  border-radius: 9999px;
}

.footer__newsletter-arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-left: var(--space-2);
}

.footer__newsletter-form .btn {
  flex-shrink: 0;
  border-radius: 9999px;
}

@media (max-width: 767px) {
  .footer__newsletter-form .btn {
    align-self: flex-start;
  }
}

.footer__newsletter-success {
  color: var(--color-success-text);
  font-size: 0.9375rem;
  margin-top: var(--space-2);
}

.footer__newsletter-error {
  color: var(--color-error-text);
  font-size: 0.875rem;
  margin-top: var(--space-2);
}

/* Einwilligung unter dem Formular (CAS-3113) */
.footer__newsletter-consent {
  font-size: var(--text-xs);
  color: var(--color-ink-70);
  line-height: var(--leading-normal);
  margin: 0;
}

.footer__newsletter-consent a {
  color: var(--color-primary);
}

/* Honeypot gegen Bots: aus dem Fluss und unsichtbar, aber nicht display:none,
   damit einfache Bots es trotzdem ausfuellen. */
.footer__newsletter-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ==========================================================================
   Link Columns
   ========================================================================== */

.footer__links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .footer__links {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

@media (min-width: 768px) {
  .footer__links {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media (min-width: 880px) {
  .footer__links {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1180px) {
  .footer__links {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
  }
}

.footer__column {
  display: flex;
  flex-direction: column;
}

.footer__column-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gray-dark);
  margin: 0 0 var(--space-4) 0;
  letter-spacing: 0.025em;
}

.footer__column-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer__sublabel {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-gray);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: var(--space-4);
  margin-bottom: var(--space-1);
}

.footer__sublabel:first-child {
  margin-top: 0;
}

/* Sublabels that should look like column titles */
.footer__sublabel--title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gray-dark);
  letter-spacing: normal;
  text-transform: none;
}

/* Link Styles with Arrow Animation */
.footer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #64748b;
  text-decoration: none;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
  position: relative;
  padding: 2px 0;
}

.footer__link:hover {
  color: var(--color-gray-dark);
}

.footer__link-arrow {
  display: none;
}

/* ==========================================================================
   Social Media
   ========================================================================== */

.footer__social {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .footer__social {
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
  }
}

.footer__social-title {
  font-size: var(--text-sm);
  color: #64748b;
  font-weight: 500;
}

.footer__social-links {
  display: flex;
  gap: var(--space-2);
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: #64748b;
  text-decoration: none;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.footer__social-link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-secondary)
  );
  transform: translate(-50%, -50%);
  transition: width var(--duration-normal) var(--ease-out), height var(--duration-normal) var(--ease-out);
}

.footer__social-link:hover::before {
  width: 100%;
  height: 100%;
}

.footer__social-link:hover {
  color: var(--color-white);
  border-color: var(--color-primary);
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 115, 153, 0.3);
}

.footer__social-link svg {
  width: 18px;
  height: 18px;
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Language Selector
   ========================================================================== */

.footer__language {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
}

.footer__language-icon {
  width: 18px;
  height: 18px;
  color: #64748b;
  flex-shrink: 0;
  margin-right: 0.375rem;
}

.footer__language-links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.footer__language-link {
  color: #64748b;
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.footer__language-link:hover {
  color: var(--color-primary);
  background: rgba(0, 115, 153, 0.08);
}

.footer__language-link--active {
  color: var(--color-primary);
  background: rgba(0, 115, 153, 0.1);
}

.footer__language-separator {
  color: var(--color-border);
  font-size: var(--text-xs);
}

/* ==========================================================================
   Legal Links
   ========================================================================== */

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
}

.footer__legal-link {
  color: #64748b;
  text-decoration: none;
  transition:
    color var(--duration-fast) var(--ease-out);
  padding: 2px 4px;
}

.footer__legal-link:hover {
  color: var(--color-gray-dark);
}

.footer__legal-separator {
  color: var(--color-border);
  user-select: none;
}

/* ==========================================================================
   Regulatory & Copyright
   ========================================================================== */

.footer__regulatory {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-6);
}

.footer__regulatory::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-border) 20%,
    var(--color-border) 80%,
    transparent 100%
  );
}

.footer__regulatory-edob {
  font-size: var(--text-sm);
  color: #64748b;
  margin: 0 0 var(--space-6) 0;
}

.footer__confederation {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  margin-bottom: var(--space-6);
}

.footer__confederation-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.footer__swiss-shield {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.footer__confederation-names {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
}

.footer__confederation-divider {
  width: 1px;
  height: 80px;
  background: var(--color-border);
}

.footer__confederation-right {
  max-width: 280px;
}

.footer__edob-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: #64748b;
  line-height: 1.3;
}

.footer__regulatory-text {
  font-size: var(--text-xs);
  color: #64748b;
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-4) 0;
}

.footer__regulatory-link {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.footer__regulatory-link:hover {
  color: var(--color-secondary);
}

.footer__copyright {
  font-size: var(--text-2xs);
  color: #94a3b8;
  margin: 0;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 767px) {
  .footer__newsletter-form {
    flex-direction: column;
  }

  .footer__social {
    align-items: flex-start;
  }

  .footer__legal {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer__legal-separator {
    display: none;
  }

  .footer__confederation {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) 0;
  }

  .footer__confederation-left {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .footer__confederation-names {
    align-items: flex-start;
  }

  .footer__confederation-divider {
    width: 100%;
    height: 1px;
  }

  .footer__confederation-right {
    max-width: 100%;
  }

  .footer__edob-title {
    font-size: var(--text-base);
  }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .footer *,
  .footer *::before,
  .footer *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus styles for keyboard navigation */
.footer__link:focus,
.footer__contact-link:focus,
.footer__social-link:focus,
.footer__legal-link:focus,
.footer__newsletter-input:focus,
.footer__language-link:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .footer {
    background: #fff;
  }

  .footer__gradient {
    display: none;
  }

  .footer__link,
  .footer__contact-link,
  .footer__social-link,
  .footer__legal-link {
    text-decoration: underline;
  }

  .footer__newsletter,
  .footer__social-link,
  .footer__language {
    border-width: 2px;
  }
}

/* Print styles */
@media print {
  .footer {
    background: white;
    color: black;
  }

  .footer__gradient,
  .footer__newsletter,
  .footer__social {
    display: none;
  }
}

/* blocks/section.css */
/* ==========================================================================
   Section Block (Layout containers)
   ========================================================================== */

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.container--sm {
  max-width: 900px;
}

.container--lg {
  max-width: 1400px;
}

.container--full {
  max-width: none;
}

.section {
  padding: 100px 40px;
}

.section--sm {
  padding: 60px 40px;
}

.section--lg {
  padding: 120px 40px;
}

.section--light {
  background: var(--color-white);
}

.section--gray {
  background: linear-gradient(
    180deg,
    #fff 0%,
    #fafafa 15%,
    #f5f5f5 50%,
    #fafafa 85%,
    #fff 100%
  );
}

/* Flächenverlauf in der Weltfarbe der Seite; ohne theme-* bleibt es Petrol */
.section--gradient {
  background: linear-gradient(
    180deg,
    #fff 0%,
    var(--world-tint, var(--color-tint-primary)) 45%,
    var(--world-tint, var(--color-tint-primary)) 60%,
    #fff 100%
  );
}

.section--gradient-investing {
  background: linear-gradient(
    180deg,
    #fff 0%,
    color-mix(in srgb, var(--color-investing) 5%, white) 15%,
    color-mix(in srgb, var(--color-investing) 8%, white) 50%,
    color-mix(in srgb, var(--color-investing) 5%, white) 85%,
    #fff 100%
  );
}

.section--dark {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  color: var(--color-white);
}

@media (max-width: 768px) {
  .section {
    padding: 60px 1rem;
  }

  .section--sm {
    padding: 40px 1rem;
  }

  .section--lg {
    padding: 80px 1rem;
  }
}

@media (max-width: 575px) {
  .section {
    padding: 3rem 1rem;
  }

  .container {
    padding: 0;
  }
}

@media print {
  .section {
    padding: 1rem 0;
  }
}

.section__header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.section__title {
  font-size: var(--text-3xl);
  font-weight: 800;
  margin-bottom: var(--space-4);
}

.section__subtitle {
  font-size: var(--text-base);
  color: var(--color-gray);
  max-width: 600px;
  margin: 0 auto;
}

.section--dark .section__subtitle {
  color: var(--color-silver);
}

/* Legal notes below a product section (KKG / Art. 3 UWG) */
.section__legal-example,
.section__legal-note {
  font-size: var(--text-2xs);
  color: var(--color-gray);
  line-height: 1.6;
  max-width: 900px;
  margin: var(--space-6) auto 0;
  text-align: center;
}

.section__legal-note {
  margin-top: var(--space-2);
  font-style: italic;
}

/* Grid layouts */
.grid {
  display: grid;
  gap: var(--space-6);
}

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

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

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

.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ==========================================================================
   Features Grid & Cards
   ========================================================================== */

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Weniger Leerraum zwischen den Sektionen (Sichttest Filipe 25.09.2026:
   zwei gestapelte 100px-Polster ergaben 200-300px Luft). Nur Desktop —
   mobil gelten die eigenen, kleineren Werte der Blöcke. */
@media (min-width: 769px) {
  main .section,
  main .benefits,
  main .faq,
  main .projects,
  main .requirements {
    padding-top: 72px;
    padding-bottom: 80px;
  }

  main .borrowers,
  main .investors {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

/* blocks/logo-bar.css */
/* ==========================================================================
   Logo Bar - Presse-Laufband (NL-A3, CAS-3118)
   Zwei gleiche Reihen nebeneinander; der Track wandert um eine Reihenbreite
   (-50 %) und beginnt nahtlos von vorn. Abstand zwischen den Logos und am
   Reihenende gleich gross, sonst ruckelt der Übergang.
   ========================================================================== */

.logo-bar {
  --logo-gap: 72px;
  padding: 72px 0;
  background: linear-gradient(180deg, #fafafa 0%, #fff 100%);
}

.logo-bar__label {
  margin: 0 auto var(--space-6);
  padding: 0 40px;
  max-width: 1200px;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-60);
}

.logo-bar__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
}

.logo-bar__track {
  display: flex;
  width: max-content;
  animation: logo-marquee 36s linear infinite;
}

.logo-bar__viewport:hover .logo-bar__track,
.logo-bar__viewport:focus-within .logo-bar__track {
  animation-play-state: paused;
}

.logo-bar__group {
  display: flex;
  align-items: center;
  gap: var(--logo-gap);
  padding: 0 var(--logo-gap) 0 0;
  margin: 0;
  list-style: none;
}

.logo-bar__item {
  display: flex;
  align-items: center;
  height: 44px;
}

.logo-bar__link {
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
}

.logo-bar__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 6px;
}

.logo-bar__logo {
  display: block;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.6;
  transition:
    filter var(--duration-normal) var(--ease-out),
    opacity var(--duration-normal) var(--ease-out);
}

.logo-bar__link:hover .logo-bar__logo,
.logo-bar__link:focus-visible .logo-bar__logo {
  filter: none;
  opacity: 1;
}

@keyframes logo-marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  .logo-bar {
    --logo-gap: 48px;
    padding: 40px 0;
  }

  .logo-bar__label {
    padding: 0 20px;
  }
}

/* Ohne Bewegung: Reihe 1 bricht um, das Duplikat entfällt */
@media (prefers-reduced-motion: reduce) {
  .logo-bar__track {
    animation: none;
    width: auto;
    justify-content: center;
  }

  .logo-bar__group {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--space-6);
    padding: 0 20px;
  }

  .logo-bar__group--clone {
    display: none;
  }

  .logo-bar__viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* blocks/borrowers.css */
/* ==========================================================================
   Borrowers Section - Für Kreditnehmer
   ========================================================================== */

.borrowers {
  position: relative;
  padding: 100px 40px 120px;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #f8fdfe 100%);
}

/* Subtle gradient accent - contained within section */
.borrowers__background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(
      ellipse at 20% 80%,
      rgba(34, 211, 238, 0.15) 0%,
      transparent 50%
    ),
    radial-gradient(
    ellipse at 80% 20%,
    rgba(34, 211, 238, 0.1) 0%,
    transparent 45%
  );
  z-index: 0;
  pointer-events: none;
}

.borrowers__container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

/* Header */
.borrowers__header {
  text-align: center;
  margin-bottom: 60px;
}

.borrowers__label {
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.borrowers__title {
  font-size: 3rem;
  font-weight: 800;
  color: var(--color-gray-dark);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.borrowers__subtitle {
  font-size: 1.125rem;
  color: var(--color-gray);
  max-width: 600px;
  margin: 0 auto 32px;
  line-height: 1.6;
}

/* Product Cards */
.borrowers__products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto auto; /* icon, title, description, link */
  gap: 24px;
}

.borrowers__card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  background: var(--color-white);
  border-radius: 16px;
  gap: 0.5rem;
  padding: 40px 32px;
  text-align: left;
  text-decoration: none;
  transition:
    transform var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out);
  border: 1px solid transparent;
  position: relative;
}

.borrowers__card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-border);
  transform: translateX(-50%);
  display: none;
}

/* Dividers between cards */
.borrowers__card:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: var(--color-border);
}

.borrowers__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 181, 206, 0.2);
}

.borrowers__icon {
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    rgba(0, 181, 206, 0.12),
    rgba(0, 115, 153, 0.12)
  );
  color: var(--color-primary);
  transition: transform var(--duration-fast) var(--ease-out);
}

.borrowers__card:hover .borrowers__icon {
  transform: scale(1.05);
}

.borrowers__card-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-gray-dark);
  margin-bottom: 12px;
}

.borrowers__card-description {
  font-size: 1rem;
  color: var(--color-gray);
  line-height: 1.6;
  margin: 0;
}

.borrowers__card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: end;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-gray);
  transition: color var(--duration-fast) var(--ease-out);
}

.borrowers__card-link svg {
  transition: transform var(--duration-fast) var(--ease-out);
}

.borrowers__card:hover .borrowers__card-link {
  color: var(--color-primary);
}

.borrowers__card:hover .borrowers__card-link svg {
  transform: translateX(3px);
}

/* Responsive */
@media (max-width: 1024px) {
  .borrowers {
    padding: 80px 30px 100px;
  }

  .borrowers__title {
    font-size: 2.5rem;
  }

  .borrowers__products {
    gap: 20px;
  }

  .borrowers__card {
    padding: 32px 24px;
  }

  .borrowers__card:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 768px) {
  .borrowers {
    padding: 60px 20px 80px;
  }

  .borrowers__header {
    margin-bottom: 40px;
  }

  .borrowers__title {
    font-size: 2rem;
  }

  .borrowers__subtitle {
    font-size: 1rem;
  }

  .borrowers__products {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 16px;
  }

  .borrowers__card {
    display: block;
    grid-row: auto;
    padding: 32px 24px;
  }

  .borrowers__card-link {
    margin-top: 16px;
  }

  .borrowers__icon {
    width: 64px;
    height: 64px;
  }

  .borrowers__card-title {
    font-size: 1.25rem;
  }
}

/* blocks/investors.css */
/* ==========================================================================
   Investors Section - Für Anleger
   ========================================================================== */

.investors {
  position: relative;
  padding: 100px 40px 120px;
  overflow: hidden;
  background: #fafafa;
}

/* Subtle gradient accent - contained within section */
.investors__background {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: radial-gradient(
    ellipse at 70% 50%,
    color-mix(in srgb, var(--color-investing) 15%, transparent) 0%,
    transparent 60%
  );
  z-index: 0;
  pointer-events: none;
}

.investors__container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

/* Header */
.investors__header {
  text-align: center;
  margin-bottom: 80px;
}

.investors__label {
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-investing);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.investors__title {
  font-size: 3rem;
  font-weight: 800;
  color: var(--color-gray-dark);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.investors__subtitle {
  font-size: 1.125rem;
  color: var(--color-gray);
  max-width: 700px;
  margin: 0 auto 32px;
  line-height: 1.6;
}

/* Product Cards - 2 columns */
.investors__products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto auto auto; /* icon, title, description, link */
  gap: 0.5rem;
  max-width: 900px;
  margin: 0 auto;
}

.investors__card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  background: transparent;
  padding: 40px 32px;
  text-align: left;
  text-decoration: none;
  transition:
    border-color var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
  position: relative;
}

/* Divider between cards */
.investors__card:first-child::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    var(--color-border),
    transparent
  );
}

.investors__card:hover {
  transform: translateY(-4px);
}

.investors__icon {
  width: 64px;
  height: 64px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-investing) 8%, white) 0%,
    color-mix(in srgb, var(--color-investing) 12%, white) 100%
  );
  color: var(--color-investing);
  transition: transform var(--duration-fast) var(--ease-out);
}

.investors__card:hover .investors__icon {
  transform: scale(1.05);
}

.investors__card-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-gray-dark);
  margin-bottom: 16px;
}

.investors__card-description {
  font-size: 1rem;
  color: var(--color-gray);
  line-height: 1.7;
  margin: 0;
}

.investors__card-description strong {
  color: var(--color-gray-dark);
  font-weight: 600;
}

.investors__card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: end;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-gray);
  transition: color var(--duration-fast) var(--ease-out);
}

.investors__card-link svg {
  transition: transform var(--duration-fast) var(--ease-out);
}

.investors__card:hover .investors__card-link {
  color: var(--color-investing);
}

.investors__card:hover .investors__card-link svg {
  transform: translateX(3px);
}

/* Responsive */
@media (max-width: 1024px) {
  .investors {
    padding: 80px 30px 100px;
  }

  .investors__title {
    font-size: 2.5rem;
  }

  .investors__header {
    margin-bottom: 60px;
  }

  .investors__products {
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .investors {
    padding: 60px 20px 80px;
  }

  .investors__header {
    margin-bottom: 40px;
  }

  .investors__title {
    font-size: 2rem;
  }

  .investors__subtitle {
    font-size: 1rem;
  }

  .investors__products {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 40px;
  }

  .investors__card:first-child::after {
    display: none;
  }

  .investors__card {
    display: block;
    grid-row: auto;
    padding: 32px 24px;
  }

  .investors__card-link {
    margin-top: 16px;
  }

  .investors__icon {
    width: 64px;
    height: 64px;
  }

  .investors__card-title {
    font-size: 1.25rem;
  }
}

/* blocks/projects.css */
/* ==========================================================================
   Projects Section - Aktuelle Projekte
   Premium card design with attention to detail
   ========================================================================== */

.projects {
  position: relative;
  padding: 100px 40px 120px;
  background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
}

.projects__container {
  max-width: 1400px;
  margin: 0 auto;
}

/* Header */
.projects__header {
  text-align: center;
  margin-bottom: 60px;
}

.projects__label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-accent-investing);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  background: var(--color-tint-investing);
  padding: 6px 16px;
  border-radius: 20px;
}

.projects__title {
  font-size: 3rem;
  font-weight: 800;
  color: var(--color-gray-dark);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.projects__subtitle {
  font-size: 1.125rem;
  color: var(--color-gray);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Responsive Grid */
.projects__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 60px;
}

.projects__grid > * {
  width: calc((100% - 100px) / 6);
  min-width: 180px;
}

/* ==========================================================================
   Project Card - Premium Design
   ========================================================================== */

.project-card__link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.project-card {
  position: relative;
  background: var(--color-white);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition:
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
  cursor: pointer;
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 20px 40px rgba(0, 0, 0, 0.12);
  border-color: transparent;
}

/* Card Header */
.project-card__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}

/* Rating badge alignment */
.project-card__header .rating-badge {
  flex-shrink: 0;
}

.project-card__amount-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.project-card__amount {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--color-gray-dark);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.project-card__currency {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gray);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Key Metrics */
.project-card__metrics {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.project-card__metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.project-card__metric-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-gray-dark);
  line-height: 1.2;
}

.project-card__metric-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-gray);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Divider */
.project-card__divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-border),
    transparent
  );
  margin-bottom: 16px;
}

/* Details Section */
.project-card__details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.project-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
}

.project-card__label {
  color: var(--color-gray);
  font-weight: 400;
}

.project-card__value {
  color: var(--color-gray-dark);
  font-weight: 600;
}

.project-card__value--mono {
  font-family: "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", monospace;
  font-size: 0.75rem;
  background: var(--color-bg-light);
  padding: 2px 8px;
  border-radius: 4px;
}

.project-card__value--time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  white-space: nowrap;
}

.project-card__time-icon {
  width: 14px;
  height: 14px;
}

/* Badges */
.project-card__badge {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.project-card__badge--kmu {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.project-card__badge--privat {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}

/* Progress Section */
.project-card__progress-section {
  margin-bottom: 0;
}

.project-card__progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.project-card__progress-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-gray);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.project-card__progress-value {
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--color-gray-dark);
}

.project-card__progress {
  height: 8px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.project-card__progress-bar {
  height: 100%;
  border-radius: 4px;
  transition: width var(--duration-slow) var(--ease-out);
  position: relative;
  /* Fortschritt ist Information, braucht 3:1 gegen die Spur */
  background-color: var(--color-accent-investing);
}

.project-card__progress-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.3) 0%,
    transparent 100%
  );
  border-radius: 4px 4px 0 0;
}

/* Hover CTA */
.project-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
}

.project-card:hover .project-card__cta {
  opacity: 1;
  transform: translateY(0);
}

.project-card__cta-arrow {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-fast) var(--ease-out);
}

.project-card:hover .project-card__cta-arrow {
  transform: translateX(4px);
}

/* Footer CTA */
.projects__footer {
  text-align: center;
}

/* ==========================================================================
   Responsive Grid Breakpoints - Airbnb style columns
   ========================================================================== */

/* 3 columns */
@media (max-width: 899px) and (min-width: 700px) {
  .projects {
    padding: 80px 30px 100px;
  }

  .projects__grid {
    gap: 16px;
  }

  .projects__title {
    font-size: 2.5rem;
  }
}

/* 2 columns */
@media (max-width: 699px) and (min-width: 500px) {
  .projects {
    padding: 60px 20px 80px;
  }

  .projects__grid {
    gap: 16px;
  }

  .projects__title {
    font-size: 2rem;
  }

  .projects__subtitle {
    font-size: 1rem;
  }

  .project-card {
    padding: 20px;
  }

  .project-card__amount {
    font-size: 1.25rem;
  }

  .project-card__metrics {
    gap: 12px;
  }

  .project-card__metric-value {
    font-size: 1.125rem;
  }
}

/* 1 column - mobile */
@media (max-width: 499px) {
  .projects {
    padding: 50px 16px 60px;
  }

  .projects__header {
    margin-bottom: 40px;
  }

  .projects__title {
    font-size: 1.75rem;
  }

  .projects__subtitle {
    font-size: 0.9375rem;
  }

  .projects__grid {
    gap: 16px;
    margin-bottom: 40px;
  }

  .projects__grid > * {
    width: 100%;
  }

  .project-card {
    padding: 20px;
  }

  .project-card__header {
    gap: 10px;
    margin-bottom: 16px;
  }

  .project-card__rating {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    border-radius: 10px;
  }

  .project-card__amount {
    font-size: 1.375rem;
  }

  .project-card__metrics {
    gap: 20px;
    margin-bottom: 14px;
  }

  .project-card__metric-value {
    font-size: 1.25rem;
  }

  .project-card__divider {
    margin-bottom: 14px;
  }

  .project-card__details {
    gap: 8px;
    margin-bottom: 16px;
  }

  .project-card__row {
    font-size: 0.8125rem;
  }

  .project-card__cta {
    margin-top: 14px;
    padding-top: 14px;
    font-size: 0.8125rem;
  }

  /* On mobile, always show CTA */
  .project-card__cta {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Accessibility - Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .project-card {
    transition: none;
  }

  .project-card::before {
    transition: none;
  }

  .project-card__progress-bar {
    transition: none;
  }

  .project-card__cta {
    transition: none;
  }

  .project-card__cta-arrow {
    transition: none;
  }
}

/* blocks/benefits.css */
/* ==========================================================================
   Benefits Section - Erfahrung – Sicherheit – Effizienz – Technologie
   ========================================================================== */

.benefits {
  position: relative;
  padding: 100px 40px 120px;
  background: linear-gradient(
    180deg,
    #fff 0%,
    #fafafa 8%,
    #f5f5f5 50%,
    #fafafa 92%,
    #fff 100%
  );
}

.benefits__container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Header */
.benefits__header {
  text-align: center;
  margin-bottom: 60px;
}

.benefits__label {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(0, 115, 153, 0.08);
  padding: 8px 16px;
  border-radius: 9999px;
}

.benefits__title {
  font-size: 3rem;
  font-weight: 800;
  color: var(--color-gray-dark);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
  white-space: pre-line;
  line-height: 1.2;
}

.benefits__subtitle {
  font-size: 1.125rem;
  color: var(--color-gray);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

.benefits__subtitle strong {
  color: var(--color-gray-dark);
  font-weight: 600;
}

/* Grid - 3 columns, 2 rows */
.benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Card */
.benefits__card {
  background: var(--color-white);
  border-radius: 16px;
  padding: 40px 28px;
  text-align: left;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.benefits__icon {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(0, 181, 206, 0.12),
    rgba(0, 115, 153, 0.12)
  );
  color: var(--color-primary);
  transition: transform var(--duration-fast) var(--ease-out);
}

.benefits__card:hover .benefits__icon {
  transform: scale(1.05);
}

.benefits__card-title {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--color-gray-dark);
  margin-bottom: 16px;
  line-height: 1.4;
}

.benefits__card-description {
  font-size: 0.9375rem;
  color: var(--color-gray);
  line-height: 1.7;
  margin: 0;
}

.benefits__card-description strong {
  color: var(--color-gray-dark);
  font-weight: 600;
}

/* Responsive */
@media (max-width: 1024px) {
  .benefits {
    padding: 80px 30px 100px;
  }

  .benefits__title {
    font-size: 2.5rem;
  }

  .benefits__grid {
    gap: 20px;
  }

  .benefits__card {
    padding: 32px 24px;
  }
}

@media (max-width: 768px) {
  .benefits {
    padding: 60px 20px 80px;
  }

  .benefits__header {
    margin-bottom: 40px;
  }

  .benefits__title {
    font-size: 1.875rem;
  }

  .benefits__subtitle {
    font-size: 1rem;
  }

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

  .benefits__card {
    padding: 32px 24px;
  }

  .benefits__icon {
    width: 44px;
    height: 44px;
  }

  .benefits__card-title {
    font-size: 1.0625rem;
  }

  .benefits__card-description {
    font-size: 0.875rem;
  }
}

/* ==========================================================================
   NL-C6 (CAS-3120): Bento-Raster über den Langtexten (nur Startseite)
   ========================================================================== */

.benefits__bento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  grid-auto-rows: minmax(200px, auto);
  gap: 16px;
  margin-bottom: 48px;
}

.benefits__tile {
  container-type: inline-size;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 32px;
  border-radius: 24px;
  background: var(--color-white);
  border: 1px solid var(--color-light-3);
  color: var(--color-text);
  text-decoration: none;
}

.benefits__tile--hero {
  grid-column: span 2;
  grid-row: span 2;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-text);
  border: 0;
  color: var(--color-white);
}

/* ruhiger Lichtfleck, kein Bewegungsmoment */
.benefits__tile--hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 420px;
  height: 420px;
  right: -140px;
  bottom: -160px;
  border-radius: 50%;
  background: var(--color-primary);
  filter: blur(120px);
  opacity: 0.45;
  pointer-events: none;
}

.benefits__tile--return {
  background: var(--gradient-investor-private);
  border: 0;
}

/* Bis die Bildkachel (NL-C10) kommt, schliesst die Gebühren-Kachel die
   Zeile — sonst bleibt unten rechts eine leere Zelle. */
.benefits__tile--link {
  grid-column: span 2;
  transition:
    transform var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    opacity var(--duration-slower) var(--ease-out);
}

@media (hover: hover) {
  .benefits__tile--link:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
    box-shadow: 0 20px 40px -12px rgba(0, 60, 90, 0.16);
  }
}

.benefits__tile-eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-mesh-neutral);
}

.benefits__tile-title {
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: inherit;
  text-wrap: balance;
}

.benefits__tile--hero .benefits__tile-title {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
}

.benefits__tile-text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-ink-60);
}

.benefits__tile--hero .benefits__tile-text {
  color: var(--color-light-1);
  max-width: 46ch;
}

.benefits__tile-value {
  font-size: clamp(2.25rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
  white-space: nowrap;
}

.benefits__tile--return .benefits__tile-value {
  color: var(--color-text);
}

/* einzeilig, Schrift folgt der Kachelbreite (keine Umbrüche in Zahlenboxen) */
.benefits__tile-label {
  white-space: nowrap;
  font-size: min(var(--text-sm), 6.4cqi);
  line-height: 1.4;
  color: var(--color-ink-80);
}

.benefits__tile-note {
  display: block;
  font-size: 0.9em;
  opacity: 0.85;
}

.benefits__tile-more {
  margin-top: 8px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
}

@media (max-width: 599px) {
  .benefits__tile--hero {
    grid-column: auto;
    grid-row: auto;
  }

  .benefits__tile--link {
    grid-column: auto;
  }

  .benefits__tile {
    padding: 24px;
  }
}

/* blocks/requirements.css */
/* ==========================================================================
   Requirements Section - Voraussetzungen
   ========================================================================== */

.requirements {
  position: relative;
  padding: 100px 40px 120px;
  background: var(--color-white);
}

.requirements__container {
  max-width: 900px;
  margin: 0 auto;
}

/* Section */
.requirements__section {
  margin-bottom: 100px;
}

.requirements__section:last-child {
  margin-bottom: 0;
}

/* Title */
.requirements__title {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--color-gray-dark);
  text-align: center;
  margin-bottom: 48px;
  letter-spacing: -0.02em;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

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

/* Item (card) */
.requirements__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  background: var(--color-white);
  border-radius: 12px;
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.requirements__item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* Icon */
.requirements__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--world-tint, var(--color-tint-primary));
  color: var(--world-accent, var(--color-primary));
}

/* Text */
.requirements__item-text {
  font-size: 0.9375rem;
  color: var(--color-gray-dark);
  line-height: 1.5;
  padding-top: 8px;
}

/* CTA */
.requirements__cta-wrapper {
  text-align: center;
  margin-top: 40px;
}

/* Responsive */
@media (max-width: 768px) {
  .requirements {
    padding: 60px 20px 80px;
  }

  .requirements__section {
    margin-bottom: 80px;
  }

  .requirements__title {
    font-size: 1.75rem;
    margin-bottom: 32px;
  }

  .requirements__grid {
    grid-template-columns: 1fr;
  }

  .requirements__item {
    padding: 16px 20px;
  }

  .requirements__icon {
    width: 36px;
    height: 36px;
  }

  .requirements__item-text {
    font-size: 0.875rem;
  }
}

/* ==========================================================================
   Investor Section - Green Accent Theme
   ========================================================================== */

.requirements__section--investor .requirements__icon {
  background: var(--color-tint-investing);
  color: var(--color-accent-investing);
}


/* blocks/faq.css */
/* ==========================================================================
   FAQ Section - Noch Fragen?
   ========================================================================== */

.faq {
  position: relative;
  padding: 100px 40px 120px;
  background: var(--color-white);
}

.faq__container {
  max-width: 900px;
  margin: 0 auto;
}

/* Header */
.faq__header {
  text-align: center;
  margin-bottom: 60px;
}

.faq__title {
  font-size: 3rem;
  font-weight: 800;
  color: var(--color-gray-dark);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.faq__subtitle {
  font-size: 1.125rem;
  color: var(--color-gray);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* FAQ List */
.faq__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* FAQ Item */
.faq__item {
  background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow var(--duration-normal) var(--ease-out);
  &:hover {
    box-shadow: var(--shadow-card);
  }
}

.faq__item[open] {
  box-shadow: var(--shadow-card);
}

/* Question (Summary) */
.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px;
  cursor: pointer;
  list-style: none;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-gray-dark);
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::marker {
  display: none;
}

/* Chevron */
.faq__chevron {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-gray);
  transition: transform var(--duration-normal) var(--ease-out);
}

.faq__item[open] .faq__chevron {
  transform: rotate(180deg);
}

/* Answer */
.faq__answer {
  padding: 0 32px 28px;
  animation: faqSlideDown var(--duration-normal) var(--ease-out);
}

.faq__answer p {
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 600;
  margin: 0;
}

@keyframes faqSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .faq {
    padding: 60px 20px 80px;
  }

  .faq__header {
    margin-bottom: 40px;
  }

  .faq__title {
    font-size: 2rem;
  }

  .faq__subtitle {
    font-size: 1rem;
  }

  .faq__list {
    gap: 12px;
  }

  .faq__question {
    padding: 20px 24px;
    font-size: 1.0625rem;
  }

  .faq__chevron {
    width: 20px;
    height: 20px;
  }

  .faq__answer {
    padding: 0 24px 20px;
  }

  .faq__answer p {
    font-size: 0.9375rem;
  }
}

.faq__link {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  transition: text-decoration-color var(--duration-fast) var(--ease-out);
}

.faq__link:hover {
  text-decoration-color: var(--color-primary);
}

/* Gleiche Inhaltskante wie alle Sektionen (1200 px, 27.09.2026) */
.faq__container {
  max-width: 1200px;
}

/* blocks/glossary.css */
/* ==========================================================================
   Glossar (CAS-2983 §7.1)

   Definitionsliste statt Akkordeon: der Text steht offen da — für
   Leserinnen, für Suchmaschinen und für Sprachmodelle. Dazu eine klebende
   A–Z-Leiste; leere Buchstaben bleiben still stehen und sind aria-hidden.
   ========================================================================== */

.glossary {
  padding: 120px 0 88px;
  background: var(--color-white);
}

.glossary__container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}

.glossary__header {
  max-width: 760px;
  margin-bottom: var(--space-6);
}

.glossary__title {
  font-size: 2.625rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

.glossary__subtitle {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-ink-60);
  margin: 0 0 var(--space-3);
}

/* Zahl wird aus den Abschnitten gezählt, nicht getippt */
.glossary__count {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   A–Z-Leiste
   ========================================================================== */

.glossary__nav {
  position: sticky;
  top: 72px;
  z-index: 20;
  margin: var(--space-6) 0 var(--space-10);
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-light-3);
  border-bottom: 1px solid var(--color-light-3);
}

.glossary__nav-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.glossary__nav-letter {
  min-width: 34px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

.glossary__nav-letter:hover {
  background: var(--color-tint-primary);
}

.glossary__nav-letter--inactive {
  color: #c3cbd8;
  pointer-events: none;
}

/* ==========================================================================
   Abschnitt je Buchstabe
   ========================================================================== */

.glossary__section {
  margin-bottom: var(--space-12);
}

.glossary__section-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-light-3);
  margin-bottom: var(--space-4);
}

.glossary__section-title {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-primary);
  margin: 0;
  scroll-margin-top: 140px;
}

.glossary__section-count {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-ink-60);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Begriffe als <dl>, zwei Spalten
   ========================================================================== */

.glossary__list {
  display: grid;
  /* min(100%, …): auf dem Handy ist die Spalte schmaler als 440px (sonst +140px Ueberlauf) */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 0 40px;
  margin: 0;
}

.glossary__entry {
  padding: 16px 0;
  border-top: 1px solid var(--color-light-3);
  /* Sprungziel der Glossar-Links (CAS-3073): nicht unter der Kopfzeile */
  scroll-margin-top: 140px;
}

/* Angesprungener Begriff kurz sichtbar machen */
.glossary__entry:target {
  background: var(--color-tint-primary);
  box-shadow: 0 0 0 12px var(--color-tint-primary);
  border-radius: var(--radius-sm);
}

/* Glossarbegriff im Fliesstext der SEO-Seiten (components/GlossaryText.tsx):
   dezent, damit der Lesefluss bleibt */
.glossary-link {
  color: inherit;
  text-decoration: underline dotted;
  text-decoration-color: var(--color-primary);
  text-underline-offset: 3px;
}

.glossary-link:hover,
.glossary-link:focus-visible {
  color: var(--color-primary);
  text-decoration-style: solid;
}

.glossary__term {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
}

.glossary__term-text {
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--color-text);
}

.glossary__term-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: 600;
  background: var(--color-light-3);
  color: #3d4a61;
}

/* Kreditnehmer in ihren Zielgruppenfarben (Kredit = privat, Hypothek =
   Hypo), Anleger gruen - wie Navigation und Produktseiten. Akzent auf Tint
   >= 4.5:1 (privat 4.67, Hypo 5.99). */
.glossary__term-badge--credit {
  background: var(--color-tint-private);
  color: var(--color-accent-private);
}

.glossary__term-badge--hypo {
  background: var(--color-tint-hypo);
  color: var(--color-accent-hypo);
}

.glossary__term-badge--investing {
  background: var(--color-tint-investing);
  color: #046b22;
}

.glossary__term-badge--legal {
  background: var(--color-light-3);
  color: #3d4a61;
}

.glossary__definition {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-ink-70);
}

/* «Mehr dazu» (CAS-2987): Link auf die Seite, die den Begriff ausführt */
.glossary__see-also {
  display: block;
  margin-top: 6px;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-ink-60);
}

.glossary__see-also a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.glossary__see-also a:hover {
  text-decoration: underline;
}

.glossary__definition-note {
  display: block;
  margin-top: 6px;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-ink-60);
}

@media (max-width: 768px) {
  .glossary {
    padding: 100px 0 60px;
  }

  .glossary__title {
    font-size: 2rem;
  }

  .glossary__section-title {
    font-size: 3rem;
  }

  .glossary__nav-inner {
    padding: 8px 16px;
    gap: 0;
  }

  .glossary__nav-letter {
    min-width: 30px;
    min-height: 30px;
  }
}

/* Gleiche Kante wie Logo-Raster und Abschnitte der uebrigen Seiten:
   Inhalt beginnt bei (Viewport - 1200) / 2, mindestens 40px vom Rand */
.glossary__container,
.glossary__nav-inner {
  max-width: calc(1200px + 80px);
  padding-left: 40px;
  padding-right: 40px;
}

@media (max-width: 768px) {
  .glossary__container,
  .glossary__nav-inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* blocks/blog.css */
/* ==========================================================================
   Blog Block
   ========================================================================== */

/* Blog Hero */
.blog-hero {
  padding: 120px 1rem 80px;
  background: var(--color-white);
  position: relative;
}

.blog-hero__container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.blog-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-gray);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: 32px;
  transition: color var(--duration-fast) var(--ease-out);
}

.blog-hero__back:hover {
  color: var(--color-primary);
}

.blog-hero__back-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.blog-hero__content {
  text-align: center;
}

.blog-hero__title {
  font-size: var(--text-5xl);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.blog-hero__subtitle {
  font-size: var(--text-xl);
  color: var(--color-primary);
  margin-bottom: 8px;
  font-weight: 500;
}

.blog-hero__description {
  font-size: var(--text-base);
  color: var(--color-text-light);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Blog Filter */
.blog-filter {
  margin-bottom: 40px;
}

.blog-filter__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.blog-filter__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 100px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-gray);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
  position: relative;
}

.blog-filter__item:hover {
  color: var(--color-primary);
  background: rgba(0, 115, 153, 0.04);
}

.blog-filter__item--active {
  color: var(--color-primary);
  background: rgba(0, 115, 153, 0.08);
  border-color: rgba(0, 115, 153, 0.15);
}

.blog-filter__item--active .blog-filter__icon {
  color: var(--color-primary);
}

.blog-filter__icon {
  width: 16px;
  height: 16px;
  color: var(--color-gray-light);
  flex-shrink: 0;
  transition: color var(--duration-fast) var(--ease-out);
}

.blog-filter__item:hover .blog-filter__icon {
  color: var(--color-secondary);
}

.blog-filter__label {
  white-space: nowrap;
}

/* Blog Empty State */
.blog-empty {
  text-align: center;
  padding: 80px 40px;
  color: var(--color-text-light);
  font-size: var(--text-lg);
}

/* Blog Section */
.blog-section {
  padding: 80px 40px;
  background: var(--color-white);
}

.blog-section__container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Featured Post */
.blog-featured {
  margin-bottom: 48px;
}

.blog-featured__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.blog-featured__card {
  background: var(--color-white);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}

.blog-featured__link:hover .blog-featured__card {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  transform: translateY(-2px);
}

.blog-featured__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 320px;
}

.blog-featured__image-wrapper {
  object-fit: cover;
  overflow: hidden;
  /* Default gradient placeholder - successful images will cover this */
  background: linear-gradient(135deg, #007399 0%, #00b5ce 50%, #00d4a8 100%);
  position: relative;
}

.blog-featured__image-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(255, 255, 255, 0.2) 0%,
      transparent 40%
    ),
    radial-gradient(
    circle at 70% 80%,
    rgba(255, 255, 255, 0.15) 0%,
    transparent 35%
  );
  z-index: 1;
  pointer-events: none;
}

.blog-featured__image-placeholder,
.blog-featured__image-wrapper.blog-featured__image-placeholder {
  background: linear-gradient(135deg, #007399 0%, #00b5ce 50%, #00d4a8 100%);
  position: relative;
}

.blog-featured__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
  position: relative;
  z-index: 2;
  /* Hide alt text for broken images */
  color: transparent;
  font-size: 0;
}

.blog-featured__link:hover .blog-featured__image {
  transform: scale(1.05);
}

.blog-featured__link:hover .blog-featured__image-wrapper::before {
  opacity: 1;
}

.blog-featured__content {
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blog-featured__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.blog-featured__category {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(0, 115, 153, 0.1);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
}

.blog-featured__date {
  font-size: var(--text-xs);
  color: var(--color-gray);
}

.blog-featured__title {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 16px;
  line-height: 1.3;
  transition: color var(--duration-fast) var(--ease-out);
}

.blog-featured__link:hover .blog-featured__title {
  color: var(--color-primary);
}

.blog-featured__excerpt {
  font-size: var(--text-base);
  color: var(--color-text-light);
  line-height: 1.6;
  margin-bottom: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-featured__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.blog-featured__author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  color: var(--color-gray);
}

.blog-featured__read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  transition: gap var(--duration-fast) var(--ease-out);
}

.blog-featured__link:hover .blog-featured__read-more {
  gap: 10px;
}

.blog-featured__read-more-icon {
  width: 16px;
  height: 16px;
}

/* Blog Grid */
/* Kartenraster (CAS-2983 §6) */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

/* Blog Card */
.blog-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.blog-card__inner {
  background: var(--color-white);
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}

.blog-card:hover .blog-card__inner {
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.blog-card__image-wrapper {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  /* Default gradient placeholder - successful images will cover this */
  background: linear-gradient(135deg, #007399 0%, #00b5ce 60%, #00d4a8 100%);
  position: relative;
}

.blog-card__image-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 25% 25%,
      rgba(255, 255, 255, 0.2) 0%,
      transparent 35%
    ),
    radial-gradient(
    circle at 75% 75%,
    rgba(255, 255, 255, 0.12) 0%,
    transparent 30%
  );
  z-index: 1;
  pointer-events: none;
}

.blog-card__image-placeholder,
.blog-card__image-wrapper.blog-card__image-placeholder {
  background: linear-gradient(135deg, #007399 0%, #00b5ce 60%, #00d4a8 100%);
  position: relative;
}

.blog-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
  position: relative;
  z-index: 2;
  /* Hide alt text for broken images */
  color: transparent;
  font-size: 0;
}

.blog-card:hover .blog-card__image {
  transform: scale(1.05);
}

.blog-card__content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Kategorie-Pille, Datum und Lesezeit in einer Zeile */
.blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: var(--text-2xs);
  color: var(--color-ink-60);
}

.blog-card__category {
  display: inline-block;
  padding: 3px 10px;
  background: var(--color-tint-primary);
  color: var(--color-primary);
  font-size: var(--text-2xs);
  font-weight: 600;
  border-radius: var(--radius-full);
}

.blog-card__date,
.blog-card__readtime {
  font-size: var(--text-2xs);
  color: var(--color-ink-60);
  font-variant-numeric: tabular-nums;
}

.blog-card__readtime::before {
  content: "·";
  margin-right: 8px;
}

.blog-card__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--duration-fast) var(--ease-out);
}

.blog-card:hover .blog-card__title {
  color: var(--color-primary);
}

.blog-card__excerpt {
  font-size: 0.9375rem;
  color: var(--color-ink-60);
  line-height: 1.6;
  margin-bottom: 16px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.blog-card__author {
  font-size: var(--text-2xs);
  color: var(--color-ink-60);
}

.blog-card__read-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
  transition: gap var(--duration-fast) var(--ease-out);
}

.blog-card:hover .blog-card__read-more {
  gap: 6px;
}

.blog-card__read-more-icon {
  width: 12px;
  height: 12px;
}

/* Responsive */
@media (max-width: 1024px) {
  .blog-filter__list {
    gap: 4px;
  }

  .blog-filter__item {
    padding: 8px 12px;
  }


  .blog-featured__inner {
    grid-template-columns: 1fr;
  }

  .blog-featured__image-wrapper {
    aspect-ratio: 16 / 9;
  }

  .blog-featured__content {
    padding: 32px;
  }
}

@media (max-width: 768px) {
  .blog-filter {
    margin-bottom: 32px;
  }

  .blog-filter__list {
    gap: 4px;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .blog-filter__list::-webkit-scrollbar {
    display: none;
  }

  .blog-filter__item {
    padding: 8px 12px;
    font-size: var(--text-xs);
  }

  .blog-filter__icon {
    width: 16px;
    height: 16px;
  }

  .blog-hero {
    padding: 100px 20px 60px;
  }

  .blog-hero__title {
    font-size: var(--text-3xl);
  }

  .blog-hero__subtitle {
    font-size: var(--text-lg);
  }

  .blog-section {
    padding: 60px 20px;
  }


  .blog-featured {
    margin-bottom: 48px;
  }

  .blog-featured__content {
    padding: 24px;
  }

  .blog-featured__title {
    font-size: var(--text-xl);
  }
}

/* ==========================================================================
   Blog Article Page
   ========================================================================== */

/* Article Hero */
.article-hero {
  padding: 120px 1rem 80px;
  background: var(--color-white);
  position: relative;
  overflow: hidden;
}

.article-hero::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(
    circle,
    rgba(0, 181, 206, 0.06) 0%,
    transparent 70%
  );
  border-radius: 50%;
}

.article-hero::after {
  content: "";
  position: absolute;
  bottom: -20%;
  left: -5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle,
    rgba(0, 115, 153, 0.04) 0%,
    transparent 70%
  );
  border-radius: 50%;
}

.article-hero__container {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.article-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-ink-60);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: 24px;
  transition: color var(--duration-fast) var(--ease-out);
}

.article-hero__back:hover {
  color: var(--color-primary);
}

.article-hero__back-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 24px;
}

.article-hero__category {
  display: inline-block;
  padding: 6px 16px;
  background: var(--color-tint-primary);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-full);
}

.article-hero__date {
  font-size: var(--text-sm);
  color: var(--color-ink-60);
}

.article-hero__title {
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.article-hero__author {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-ink-60);
  font-size: var(--text-sm);
}

.article-hero__author-avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-secondary) 100%
  );
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--color-white);
}

.article-hero__author-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Article Image */
.article-image {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px 0;
  position: relative;
  z-index: 2;
  background: var(--color-white);
}

.article-image__wrapper {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.article-image__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* Article Content */
.article-content {
  padding: 64px 40px;
  background: var(--color-white);
}

/* Lesespalte 760px (CAS-2983 §6) */
.article-content__container {
  max-width: 760px;
  margin: 0 auto;
  /* lange URLs im Fliesstext brechen, statt die Seite zu verbreitern */
  overflow-wrap: break-word;
}

/* Article Prose - Typography for article body */
.article-prose {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-ink-80);
}

/* Lead: erster Absatz */
.article-prose > p:first-of-type {
  font-size: 1.1875rem;
  line-height: 1.7;
  color: var(--color-text);
}

.article-prose p {
  margin-bottom: 24px;
}

.article-prose h2 {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-text);
  margin-top: 48px;
  margin-bottom: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.article-prose h3 {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
  margin-top: 32px;
  margin-bottom: 16px;
  line-height: 1.4;
}

.article-prose h4 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-top: 24px;
  margin-bottom: 12px;
  line-height: 1.4;
}

/* Markdown-Tabellen im Beitrag (.data-table aus subpage.css) */
.article-prose .data-table-wrap {
  margin: 8px 0 32px;
}

.article-prose .data-table th,
.article-prose .data-table td {
  padding: 12px 16px;
  text-align: left;
  line-height: 1.5;
}

.article-prose ul,
.article-prose ol {
  margin-bottom: 24px;
  padding-left: 24px;
}

.article-prose ul {
  list-style-type: disc;
}

.article-prose ol {
  list-style-type: decimal;
}

.article-prose li {
  margin-bottom: 12px;
  line-height: 1.7;
}

.article-prose strong {
  font-weight: 600;
  color: var(--color-text);
}

.article-prose a {
  color: var(--color-primary);
  text-decoration: underline;
  transition: color var(--duration-fast) var(--ease-out);
}

.article-prose a:hover {
  color: var(--color-primary-dark);
}

/* Zitat als getönte Fläche statt Randlinie */
.article-prose blockquote {
  margin: 32px 0;
  padding: 24px 28px;
  background: var(--color-tint-primary);
  border-radius: var(--radius-lg);
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--color-text);
}

.article-prose blockquote p:last-child {
  margin-bottom: 0;
}

/* Article Share */
/* Teilen-Leiste über der Trennlinie */
.article-share {
  margin-top: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-light-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.article-share__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.article-share__buttons {
  display: flex;
  gap: 12px;
}

.article-share__button {
  width: 44px;
  height: 44px;
  background: var(--color-tint-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast) var(--ease-out);
}

.article-share__button:hover {
  background: color-mix(in srgb, var(--color-primary) 16%, var(--color-tint-primary));
}

.article-share__icon {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}

/* Related Posts */
.article-related {
  padding: 80px 40px;
  background: var(--color-bg-section);
}

.article-related__container {
  max-width: 1200px;
  margin: 0 auto;
}

.article-related__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
}

.article-related__title {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin-bottom: 0;
}

.article-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.article-related__card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.article-related__card-inner {
  background: var(--color-white);
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  height: 100%;
  transition: box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}

.article-related__card:hover .article-related__card-inner {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

.article-related__card-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.article-related__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.article-related__card:hover .article-related__card-img {
  transform: scale(1.05);
}

.article-related__card-content {
  padding: 20px;
}

.article-related__card-date {
  font-size: var(--text-2xs);
  color: var(--color-ink-60);
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

.article-related__card-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
  transition: color var(--duration-fast) var(--ease-out);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-related__card:hover .article-related__card-title {
  color: var(--color-primary);
}

/* Not Found */
.article-not-found {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  background: var(--color-bg-section);
}

.article-not-found__content {
  text-align: center;
}

.article-not-found__title {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 16px;
}

.article-not-found__text {
  font-size: var(--text-lg);
  color: var(--color-text-light);
  margin-bottom: 32px;
}

.article-not-found__link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.article-not-found__link:hover {
  color: var(--color-primary-dark);
}

/* Responsive - Article Page */
@media (max-width: 1024px) {
  .article-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .article-hero {
    padding: 100px 20px 60px;
  }

  .article-hero__title {
    font-size: var(--text-2xl);
  }

  .article-image {
    padding: 0 20px;
    margin-top: -24px;
  }

  .article-image__img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    height: auto;
  }

  .article-content {
    padding: 48px 20px;
  }

  .article-prose {
    font-size: var(--text-base);
  }

  .article-prose h2 {
    font-size: var(--text-xl);
    margin-top: 32px;
  }

  .article-related {
    padding: 60px 20px;
  }

  .article-related__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Load More */
.blog-load-more {
  display: flex;
  justify-content: center;
  padding: 48px 0;
}

.blog-load-more__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid rgba(9, 17, 36, 0.16);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.blog-load-more__button:hover:not(:disabled) {
  background: var(--color-light-4);
  border-color: rgba(9, 17, 36, 0.28);
}

.blog-load-more__button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.blog-load-more__icon {
  width: 20px;
  height: 20px;
  transition: transform var(--duration-fast) var(--ease-out);
}

.blog-load-more__button:hover:not(:disabled) .blog-load-more__icon {
  transform: translateY(2px);
}

.blog-load-more__spinner {
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: blog-spinner var(--duration-slower) linear infinite;
}

@keyframes blog-spinner {
  to {
    transform: rotate(360deg);
  }
}

/* blocks/about.css */
/* ==========================================================================
   About Page Block (Stripe-inspired)
   ========================================================================== */

/* ==========================================================================
   About Hero
   ========================================================================== */

.about-hero {
  padding: 120px 1rem 80px;
  background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 50%, #e0f2fe 100%);
  position: relative;
  overflow: hidden;
}

.about-hero__container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  text-align: center;
}

.about-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(0, 115, 153, 0.08);
  border: 1px solid rgba(0, 115, 153, 0.15);
  border-radius: 100px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 24px;
}

.about-hero__title {
  font-size: var(--text-5xl);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 20px;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.about-hero__subtitle {
  font-size: var(--text-xl);
  color: var(--color-text-light);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Decorative shapes */
.about-hero__shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.5;
  pointer-events: none;
}

.about-hero__shape--1 {
  width: 400px;
  height: 400px;
  top: -150px;
  right: -100px;
  background: linear-gradient(
    135deg,
    rgba(0, 181, 206, 0.15),
    rgba(0, 115, 153, 0.1)
  );
}

.about-hero__shape--2 {
  width: 300px;
  height: 300px;
  bottom: -100px;
  left: -100px;
  background: linear-gradient(
    135deg,
    rgba(0, 115, 153, 0.1),
    rgba(0, 181, 206, 0.15)
  );
}

/* ==========================================================================
   Stats Banner
   ========================================================================== */

.about-stats {
  padding: 60px 40px;
  background: var(--color-primary);
  position: relative;
}

.about-stats__container {
  max-width: 1200px;
  margin: 0 auto;
}

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

.about-stats__item {
  text-align: center;
  color: var(--color-white);
}

.about-stats__value {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.about-stats__label {
  font-size: var(--text-sm);
  opacity: 0.85;
  font-weight: 500;
}

/* ==========================================================================
   Mission Section
   ========================================================================== */

.about-mission {
  padding: 100px 40px;
  background: var(--color-white);
}

.about-mission__container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.about-mission__content {
  max-width: 500px;
}

.about-mission__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.about-mission__title {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 24px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.about-mission__text {
  font-size: var(--text-base);
  color: var(--color-text-light);
  line-height: 1.7;
  margin-bottom: 24px;
}

.about-mission__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-mission__image {
  width: 100%;
  max-width: 480px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

/* Mission visual placeholder with gradient */
.about-mission__graphic {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4/3;
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-secondary)
  );
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.about-mission__graphic::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.about-mission__graphic-icon {
  width: 80px;
  height: 80px;
  color: var(--color-white);
  opacity: 0.9;
}

/* ==========================================================================
   Timeline / History - Premium Design
   ========================================================================== */

.about-timeline {
  padding: 100px 40px;
  background: var(--color-bg-section);
  position: relative;
  overflow: hidden;
}

/* Subtle background pattern */
.about-timeline::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(0, 115, 153, 0.03) 1px,
    transparent 0
  );
  background-size: 40px 40px;
  pointer-events: none;
}

.about-timeline__container {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

.about-timeline__header {
  text-align: center;
  margin-bottom: 80px;
}

.about-timeline__title {
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 16px;
  letter-spacing: -0.03em;
}

.about-timeline__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-light);
  max-width: 550px;
  margin: 0 auto;
  line-height: 1.6;
}

.about-timeline__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Central vertical line */
.about-timeline__list::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--color-primary) 10%,
    var(--color-secondary) 50%,
    var(--color-primary) 90%,
    transparent 100%
  );
  border-radius: 3px;
  opacity: 0.2;
}

/* Glowing overlay on the line */
.about-timeline__list::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--color-primary) 20%,
    var(--color-secondary) 50%,
    var(--color-primary) 80%,
    transparent 100%
  );
  border-radius: 3px;
  opacity: 0.6;
  filter: blur(1px);
}

.about-timeline__item {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  min-height: 120px;
}

/* Zigzag layout - even items have content on left */
.about-timeline__item:nth-child(odd) .about-timeline__year {
  order: 3;
  text-align: left;
  padding-left: 20px;
  justify-self: start;
}

.about-timeline__item:nth-child(odd) .about-timeline__dot {
  order: 2;
}

.about-timeline__item:nth-child(odd) .about-timeline__content {
  order: 1;
  justify-self: end;
}

.about-timeline__item:nth-child(even) .about-timeline__year {
  order: 1;
  text-align: right;
  padding-right: 20px;
  justify-self: end;
}

.about-timeline__item:nth-child(even) .about-timeline__dot {
  order: 2;
}

.about-timeline__item:nth-child(even) .about-timeline__content {
  order: 3;
  justify-self: start;
}

.about-timeline__year {
  font-size: 1.75rem;
  font-weight: 800;
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-secondary) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
  transition: transform var(--duration-normal) var(--ease-out);
}

.about-timeline__dot {
  position: relative;
  width: 20px;
  height: 20px;
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-secondary) 100%
  );
  border-radius: 50%;
  flex-shrink: 0;
  z-index: 2;
  box-shadow:
    0 0 0 4px var(--color-bg-section-solid),
    0 0 0 6px rgba(0, 115, 153, 0.15);
  transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

/* Inner dot */
.about-timeline__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: var(--color-white);
  border-radius: 50%;
}

.about-timeline__content {
  max-width: 400px;
  background: var(--color-white);
  padding: 24px 28px;
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out);
  position: relative;
}

/* Card arrow pointing to timeline */
.about-timeline__item:nth-child(odd) .about-timeline__content::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 16px;
  height: 16px;
  background: var(--color-white);
  border-right: 1px solid rgba(0, 0, 0, 0.04);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.about-timeline__item:nth-child(even) .about-timeline__content::after {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%) rotate(-135deg);
  width: 16px;
  height: 16px;
  background: var(--color-white);
  border-right: 1px solid rgba(0, 0, 0, 0.04);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.about-timeline__event {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.6;
  font-weight: 500;
}

/* Left-aligned variant */
.about-timeline--left .about-timeline__list::before,
.about-timeline--left .about-timeline__list::after {
  left: 10px;
  transform: none;
}

.about-timeline--left .about-timeline__item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  padding-left: 40px;
}

.about-timeline--left
  .about-timeline__item:nth-child(odd)
  .about-timeline__year,
.about-timeline--left
  .about-timeline__item:nth-child(even)
  .about-timeline__year {
  order: 1;
  text-align: left;
  padding: 0;
  min-width: 70px;
  padding-top: 20px;
}

.about-timeline--left .about-timeline__item:nth-child(odd) .about-timeline__dot,
.about-timeline--left
  .about-timeline__item:nth-child(even)
  .about-timeline__dot {
  order: 0;
  position: absolute;
  left: 0;
  top: 24px;
}

.about-timeline--left
  .about-timeline__item:nth-child(odd)
  .about-timeline__content,
.about-timeline--left
  .about-timeline__item:nth-child(even)
  .about-timeline__content {
  order: 2;
  justify-self: auto;
  max-width: none;
  flex: 1;
}

.about-timeline--left
  .about-timeline__item:nth-child(odd)
  .about-timeline__content::after,
.about-timeline--left
  .about-timeline__item:nth-child(even)
  .about-timeline__content::after {
  display: none;
}

/* ==========================================================================
   Values Section
   ========================================================================== */

.about-values {
  padding: 100px 40px;
  background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
  position: relative;
}

.about-values__container {
  max-width: 1200px;
  margin: 0 auto;
}

.about-values__header {
  text-align: center;
  margin-bottom: 60px;
}

.about-values__title {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

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

.about-values__card {
  text-align: center;
  padding: 40px 28px;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

.about-values__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(0, 181, 206, 0.15),
    rgba(0, 115, 153, 0.1)
  );
  border-radius: var(--radius-full);
  color: var(--color-primary);
  transition: transform var(--duration-normal) var(--ease-out), background var(--duration-normal) var(--ease-out);
}

.about-values__icon svg {
  width: 28px;
  height: 28px;
}

.about-values__card-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 12px;
}

.about-values__card-text {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: 1.6;
}

/* ==========================================================================
   Team Section
   ========================================================================== */

.about-team {
  padding: 100px 40px;
  background: var(--color-bg-section);
  position: relative;
  /* clip statt hidden: hidden macht den Abschnitt zum Scroll-Container, und
     die view-timeline der Team-Reihe stand dann still (S4, 02.10.2026) */
  overflow: clip;
}

.about-team::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(
      ellipse 50% 80% at 0% 50%,
      rgba(0, 181, 206, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
    ellipse 50% 80% at 100% 50%,
    rgba(0, 115, 153, 0.06) 0%,
    transparent 50%
  );
  pointer-events: none;
}

.about-team__container {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.about-team__title {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.about-team__text {
  font-size: 1.125rem;
  color: var(--color-text-light);
  line-height: 1.8;
  max-width: 700px;
  margin: 0 auto;
}

.about-team__scroller {
  max-width: 1200px;
  margin: 48px auto 0;
  position: relative;
  z-index: 1;
}

.about-team__avatar {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--color-white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ohne Foto: Initialen wie auf «Wer sind wir» */
.about-team__initials {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--color-tint-primary);
  color: var(--color-primary);
  font-size: 1.75rem;
  font-weight: 700;
}

.about-team__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-team__cta {
  margin-top: 40px;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Regulation Section
   ========================================================================== */

.about-regulation {
  padding: 80px 40px;
  background: linear-gradient(135deg, var(--color-gray-dark) 0%, #2d3436 100%);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.about-regulation__swiss-map {
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-50%);
  width: 80%;
  max-width: 800px;
  pointer-events: none;
  mask-image: linear-gradient(to left, transparent 5%, black 50%);
}

.about-regulation__swiss-map svg {
  width: 100%;
  height: auto;
}

.about-regulation__swiss-map svg path {
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 40;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.about-regulation__container {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.about-regulation__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
}

.about-regulation__icon svg {
  width: 32px;
  height: 32px;
  color: var(--color-secondary);
}

.about-regulation__title {
  font-size: var(--text-2xl);
  font-weight: 800;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.about-regulation__text {
  font-size: var(--text-base);
  opacity: 0.85;
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto 32px;
}

.about-regulation__badges {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.about-regulation__badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  font-size: 0.9375rem;
  font-weight: 600;
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.about-regulation__badge:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.about-regulation__badge svg {
  width: 20px;
  height: 20px;
  color: #22c55e;
}

/* ==========================================================================
   Quick Links Section
   ========================================================================== */

.about-links {
  padding: 80px 40px;
  background: var(--color-white);
}

.about-links__container {
  max-width: 1200px;
  margin: 0 auto;
}

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

.about-links__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 28px;
  background: var(--color-bg-section);
  border-radius: var(--radius-xl);
  text-decoration: none;
  transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), background var(--duration-normal) var(--ease-out);
  border: 1px solid transparent;
}

.about-links__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 115, 153, 0.12);
  background: var(--color-white);
  border-color: rgba(0, 181, 206, 0.2);
}

.about-links__card-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(0, 181, 206, 0.12),
    rgba(0, 115, 153, 0.08)
  );
  border-radius: var(--radius-lg);
  color: var(--color-primary);
  transition: transform var(--duration-normal) var(--ease-out), background var(--duration-normal) var(--ease-out);
}

.about-links__card:hover .about-links__card-icon {
  transform: scale(1.1);
  background: linear-gradient(
    135deg,
    rgba(0, 181, 206, 0.2),
    rgba(0, 115, 153, 0.12)
  );
}

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

.about-links__card-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color var(--duration-fast) var(--ease-out);
}

.about-links__card-title::after {
  content: "→";
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.about-links__card:hover .about-links__card-title {
  color: var(--color-primary);
}

.about-links__card:hover .about-links__card-title::after {
  opacity: 1;
  transform: translateX(0);
}

/* ==========================================================================
   Contact Section
   ========================================================================== */

.about-contact {
  padding: 100px 40px;
  background: var(--color-bg-section);
}

.about-contact__container {
  max-width: 800px;
  margin: 0 auto;
}

.about-contact__header {
  text-align: center;
  margin-bottom: 48px;
}

.about-contact__title {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.about-contact__card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: 48px;
  text-align: center;
}

.about-contact__address {
  font-size: var(--text-base);
  color: var(--color-text-light);
  line-height: 1.8;
  margin-bottom: 32px;
  white-space: pre-line;
}

.about-contact__links {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}

.about-contact__link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.about-contact__link:hover {
  color: var(--color-secondary);
}

.about-contact__link svg {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 1024px) {
  .about-stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .about-mission__container {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .about-mission__content {
    max-width: 100%;
    text-align: center;
  }

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

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

@media (max-width: 768px) {
  .about-hero {
    padding: 100px 20px 60px;
  }

  .about-hero__title {
    font-size: 2.5rem;
  }

  .about-hero__subtitle {
    font-size: var(--text-base);
  }

  .about-stats {
    padding: 48px 20px;
  }

  .about-stats__grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .about-stats__value {
    font-size: 2.25rem;
  }

  .about-mission,
  .about-timeline,
  .about-values,
  .about-team,
  .about-contact {
    padding: 60px 20px;
  }

  .about-values__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .about-links__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Timeline: Switch to left-aligned layout on tablet */
  .about-timeline__list::before,
  .about-timeline__list::after {
    left: 10px;
    transform: none;
  }

  .about-timeline__item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    min-height: auto;
    padding-left: 40px;
  }

  .about-timeline__item:nth-child(odd) .about-timeline__year,
  .about-timeline__item:nth-child(even) .about-timeline__year {
    order: 1;
    text-align: left;
    padding: 20px 0 0 0;
    justify-self: auto;
    font-size: 1.25rem;
    min-width: 60px;
  }

  .about-timeline__item:nth-child(odd) .about-timeline__dot,
  .about-timeline__item:nth-child(even) .about-timeline__dot {
    order: 0;
    position: absolute;
    left: 0;
    top: 24px;
    width: 20px;
    height: 20px;
  }

  .about-timeline__item:nth-child(odd) .about-timeline__content,
  .about-timeline__item:nth-child(even) .about-timeline__content {
    order: 2;
    justify-self: auto;
    max-width: none;
    flex: 1;
  }

  .about-timeline__item:nth-child(odd) .about-timeline__content::after,
  .about-timeline__item:nth-child(even) .about-timeline__content::after {
    display: none;
  }

  .about-regulation {
    padding: 60px 20px;
  }

  .about-regulation__badges {
    flex-direction: column;
    align-items: center;
  }

  .about-contact__card {
    padding: 32px 24px;
  }

  .about-contact__links {
    flex-direction: column;
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .about-hero__title {
    font-size: 2rem;
  }

  .about-stats__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .about-stats__value {
    font-size: 2rem;
  }

  /* Timeline: Stack vertically on mobile */
  .about-timeline__header {
    margin-bottom: 48px;
  }

  .about-timeline__title {
    font-size: var(--text-2xl);
  }

  .about-timeline__subtitle {
    font-size: var(--text-base);
  }

  .about-timeline__item {
    flex-direction: column;
    gap: 12px;
    padding-left: 32px;
    margin-bottom: 32px;
  }

  .about-timeline__item:last-child {
    margin-bottom: 0;
  }

  .about-timeline__list::before,
  .about-timeline__list::after {
    left: 6px;
  }

  .about-timeline__item:nth-child(odd) .about-timeline__year,
  .about-timeline__item:nth-child(even) .about-timeline__year {
    font-size: 1.125rem;
    min-width: auto;
    order: 0;
    text-align: left;
    line-height: 16px;
    padding-top: 4px;
  }

  .about-timeline__item:nth-child(odd) .about-timeline__dot,
  .about-timeline__item:nth-child(even) .about-timeline__dot {
    left: 0;
    top: 4px;
    width: 16px;
    height: 16px;
    box-shadow:
      0 0 0 3px var(--color-bg-section-solid),
      0 0 0 5px rgba(0, 115, 153, 0.15);
  }

  .about-timeline__item:nth-child(odd) .about-timeline__dot::before,
  .about-timeline__item:nth-child(even) .about-timeline__dot::before {
    width: 6px;
    height: 6px;
  }

  .about-timeline__item:nth-child(odd) .about-timeline__content,
  .about-timeline__item:nth-child(even) .about-timeline__content {
    padding: 18px 20px;
    order: 1;
  }

  .about-timeline__event {
    font-size: var(--text-sm);
  }
}

/* ==========================================================================
   Zeitleiste als Trennlinien-Liste (CAS-2983 §6)

   Ersetzt die Verlaufsschiene mit Punkten und Pfeilkarten: Jahr links,
   Ereignis rechts, eine Linie je Zeile. Steht am Dateiende und nutzt
   :nth-child(n), damit es die Zickzack- und --left-Regeln sicher schlägt.
   ========================================================================== */

.about-timeline--ruled::before,
.about-timeline--ruled .about-timeline__list::before,
.about-timeline--ruled .about-timeline__list::after {
  display: none;
}

.about-timeline--ruled {
  padding: 88px 40px;
}

.about-timeline--ruled .about-timeline__container {
  max-width: 880px;
}

.about-timeline--ruled .about-timeline__header {
  text-align: left;
  margin-bottom: 32px;
}

.about-timeline--ruled .about-timeline__title {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.about-timeline--ruled .about-timeline__list {
  gap: 0;
  border-bottom: 1px solid var(--color-light-3);
}

.about-timeline--ruled .about-timeline__item:nth-child(n) {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  min-height: 0;
  padding: 18px 0;
  border-top: 1px solid var(--color-light-3);
}

.about-timeline--ruled .about-timeline__item:nth-child(n) .about-timeline__year {
  order: 0;
  padding: 0;
  text-align: left;
  justify-self: start;
  font-size: 1.125rem;
  font-weight: 700;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.about-timeline--ruled .about-timeline__item:nth-child(n) .about-timeline__dot {
  display: none;
}

.about-timeline--ruled .about-timeline__item:nth-child(n) .about-timeline__content {
  order: 0;
  justify-self: stretch;
  max-width: none;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.about-timeline--ruled .about-timeline__item:nth-child(n) .about-timeline__content::after {
  display: none;
}

.about-timeline--ruled .about-timeline__event {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-80);
}

/* Die Gegenwart getönt */
.about-timeline--ruled .about-timeline__item--today:nth-child(n) {
  margin: 0 -16px;
  padding: 18px 16px;
  border-radius: var(--radius-md);
  background: var(--color-tint-primary);
}

@media (max-width: 768px) {
  .about-timeline--ruled {
    padding: 60px 20px;
  }

  .about-timeline--ruled .about-timeline__item:nth-child(n) {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 16px;
  }
}

/* Team: eine Reihe, blätterbar (CAS-3120, Wunsch PO 06.10.2026). Wischen,
   Trackpad und Tastatur (fokussierbar) scrollen die Reihe; Pfeile kommen von
   islands/ScrollerArrows. safe center: passt alles hinein, steht die Reihe
   mittig, sonst beginnt sie links und bleibt ganz erreichbar. */
.about-team__row {
  list-style: none;
  /* Luft für Schatten und Rand der Kreise: overflow-x: auto beschneidet
     auch senkrecht (8px schnitten den Schatten oben gerade ab, Abnahme
     06.10.2026); der negative Rand hält die Abstände wie vorher */
  margin: -16px 0 -12px;
  padding: 24px 20px 24px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: safe center;
  gap: 32px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 20px;
  scrollbar-width: none;
}

.about-team__row::-webkit-scrollbar {
  display: none;
}

/* Einblenden in der Reihe nur über Deckkraft: die Verschiebung (32px)
   machte die Reihe während des Einblendens senkrecht scrollbar */
.about-team__row .about-team__member[data-reveal][data-reveal-pending] {
  transform: none;
}

.about-team__row:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: var(--radius-lg);
}

.scroller-arrows {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.scroller-arrows[hidden] {
  display: none;
}

/* ab Tablet: Pfeile links und rechts neben der Reihe, auf Höhe der Bilder
   (Wunsch PO); mobil mittig darunter, sonst bliebe kaum Platz für Personen */
@media (min-width: 768px) {
  .about-team__scroller:has(.scroller-arrows:not([hidden])) {
    padding-inline: 56px;
  }

  .about-team__scroller .scroller-arrows {
    position: absolute;
    inset: 0;
    margin: 0;
    /* Mitte der Kreise: 24px Luft in der Reihe + 50px − halbe Pfeilhöhe */
    padding-top: 52px;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
  }

  .about-team__scroller .scroller-arrows__btn {
    pointer-events: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
}

.scroller-arrows__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-light-3);
  background: var(--color-white);
  color: var(--color-primary);
  cursor: pointer;
  transition: var(--transition-colors);
}

.scroller-arrows__btn:hover:not(:disabled) {
  background: var(--color-tint-primary);
  border-color: var(--color-primary);
}

.scroller-arrows__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.scroller-arrows__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.about-team__member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 120px;
  flex-shrink: 0;
  scroll-snap-align: start;
}

.about-team__name {
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  color: var(--color-text);
}

/* Regulierung: Badges gut lesbar auf dunklem Grund */
.about-regulation__badge {
  background: rgba(255, 255, 255, 0.95);
  border-color: transparent;
  color: var(--color-text);
}

.about-regulation__badge:hover {
  background: #fff;
}

/* Verweis-Kacheln: erkennbar klickbar */
.about-links__card {
  gap: 12px;
  background: var(--color-white);
  border-color: rgba(9, 17, 36, 0.08);
}

.about-links__card-more {
  color: var(--color-primary);
  font-weight: 700;
  transition: transform var(--duration-fast) var(--ease-out);
}

.about-links__card:hover .about-links__card-more {
  transform: translateX(4px);
}

/* Zeitleiste: Untertitel linksbuendig auf der Titelkante */
.about-timeline--ruled .about-timeline__subtitle {
  margin: 0;
  max-width: 78ch;
  text-align: left;
}

/* Zeitstrahl mit Titel je Ereignis (Crowdlending, 27.09.2026) */
.about-timeline__event-title {
  display: block;
  margin-bottom: 2px;
  font-weight: 700;
  color: var(--color-text);
}

.about-timeline--ruled .about-timeline__item:nth-child(n) {
  grid-template-columns: 140px minmax(0, 1fr);
}

/* ==========================================================================
   NL-C2 (CAS-3120): Zeitleiste mit Scroll-Kopplung (--scroll, auf --ruled)
   Zeilen bleiben, wie abgenommen (Jahr links, Ereignis rechts). Dazu: eine
   Linie am linken Rand füllt sich beim Scrollen, der Meilenstein in der
   Bildschirmmitte ist hervorgehoben, kommende sind gedimmt (nie unter .35,
   nie ausgeblendet), ab 1024 px läuft das grosse Jahr in der Titelspalte mit.
   Ohne Unterstützung, ohne JavaScript oder bei «Bewegung reduzieren» ist
   alles voll sichtbar (Dimmen erst mit [data-enhanced]).
   ========================================================================== */

.about-timeline--scroll .about-timeline__list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 28px;
}

/* Schiene grau, darüber die Füllung (überschreibt das Ausblenden von --ruled) */
.about-timeline--scroll .about-timeline__list::before,
.about-timeline--scroll .about-timeline__list::after {
  display: block;
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 2px;
  opacity: 1;
  filter: none;
  transform: none;
}

.about-timeline--scroll .about-timeline__list::before {
  background: var(--color-light-3);
}

.about-timeline--scroll .about-timeline__list::after {
  background: linear-gradient(
    180deg,
    var(--color-secondary),
    var(--color-primary)
  );
  transform-origin: top;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .about-timeline--scroll .about-timeline__list {
      view-timeline-name: --about-timeline;
    }

    .about-timeline--scroll .about-timeline__list::after {
      animation: timeline-fill linear both;
      animation-timeline: --about-timeline;
      animation-range: cover 20% cover 70%;
    }
  }
}

@keyframes timeline-fill {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

/* Punkt auf der Schiene je Zeile */
.about-timeline--scroll .about-timeline__item:nth-child(n) {
  position: relative;
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

.about-timeline--scroll .about-timeline__item::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 24px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  background: var(--color-white);
  transition:
    background-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out);
}

.about-timeline--scroll .about-timeline__item.is-active::before {
  background: var(--color-primary);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.about-timeline--scroll [data-enhanced]
  .about-timeline__item:not(.is-active):not(.is-past) {
  opacity: 0.35;
  transform: translateX(8px);
}

.about-timeline--scroll [data-enhanced]
  .about-timeline__item:not(.is-active):not(.is-past)::before {
  border-color: var(--color-light-1);
}

/* Grosses, mitlaufendes Jahr — nur ab 1024 px, nur mit Enhancer */
.about-timeline__sticky-year {
  display: none;
}

@media (min-width: 1024px) {
  .about-timeline--scroll .about-timeline__container--wide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 56px;
    align-items: start;
  }

  .about-timeline--scroll .about-timeline__header {
    position: sticky;
    top: 110px;
    margin-bottom: 0;
  }

  .about-timeline--scroll [data-enhanced] .about-timeline__sticky-year {
    display: block;
    margin: 8px 0 16px;
    font-size: clamp(4.5rem, 8vw, 8rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-timeline--scroll .about-timeline__item:nth-child(n) {
    transition: none;
  }
}

/* Gegenwart: Zeile ist 16 px nach links gezogen (getönt) — Punkt bleibt auf der Schiene */
.about-timeline--scroll .about-timeline__item--today::before {
  left: -12px;
}


/* components/world-theme.css */
/* ==========================================================================
   Weltfarbe je Seite (CAS-2983)

   Layout setzt eine Klasse theme-<welt> auf den Seitenrahmen; die Bausteine
   lesen --world-accent und --world-tint mit Petrol als Rückfall. So trägt
   eine Produktseite ihre Zielgruppenfarbe bis in Icons, Listen und Flächen,
   ohne dass jede Sektion einen eigenen Modifier braucht.

   Verbindliche Zuordnung: siehe /styleguide und handbook colors.md.
   ========================================================================== */

.theme-private,
.theme-privateloan {
  --world-accent: var(--color-accent-private);
  --world-tint: var(--color-tint-private);
  --world-mesh-1: var(--color-mesh-private);
  --world-mesh-2: var(--color-mesh-private-soft);
}

.theme-sme {
  --world-accent: var(--color-accent-sme);
  --world-tint: var(--color-tint-sme);
  --world-mesh-1: var(--color-mesh-sme);
  --world-mesh-2: var(--color-mesh-sme-soft);
}

.theme-hypo {
  --world-accent: var(--color-accent-hypo);
  --world-tint: var(--color-tint-hypo);
  --world-mesh-1: var(--color-mesh-hypo);
  --world-mesh-2: var(--color-mesh-hypo-soft);
}

.theme-investing {
  --world-accent: var(--color-accent-investing);
  --world-tint: var(--color-tint-investing);
  --world-mesh-1: var(--color-mesh-investing);
  --world-mesh-2: var(--color-mesh-investing-soft);
}

.theme-embedded {
  --world-accent: var(--color-accent-embedded);
  --world-tint: var(--color-tint-embedded);
}

/* theme-borrowing bleibt neutral (Übersichtsseiten ohne einzelne
   Zielgruppe) — dort greift überall der Petrol-Rückfall. */

/* blocks/subpage.css */
/* ==========================================================================
   Subpage Block - Simple layouts for content pages
   ========================================================================== */

/* ==========================================================================
   Subpage Hero
   ========================================================================== */

.subpage-hero {
  position: relative;
  padding: 120px 1rem 80px;
  background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 50%, #e0f2fe 100%);
  overflow: hidden;
}

.subpage-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, #ffffff);
  pointer-events: none;
}

/* Investing theme - Green */
.subpage-hero--investing {
  background: #fafafa;
}

.subpage-hero--investing::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  background: radial-gradient(
    ellipse at 80% 50%,
    rgba(0, 217, 36, 0.12) 0%,
    transparent 60%
  );
  z-index: 0;
  pointer-events: none;
}

.subpage-hero--investing .subpage-hero__container {
  position: relative;
  z-index: 1;
}

.subpage-hero--investing .subpage-hero__label {
  color: var(--color-accent-investing);
}

.subpage-hero__container {
  /* gleiche Kante wie Logo, Zahlenfelder und Abschnitte darunter */
  max-width: 1200px;
  margin: 0 auto;
}

.subpage-hero__title {
  font-size: var(--text-5xl);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 16px;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.subpage-hero__label {
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--world-accent, var(--color-primary));
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.subpage-hero__subtitle {
  font-size: var(--text-xl);
  color: var(--color-text-light);
  max-width: 700px;
  line-height: 1.6;
}

.subpage-hero__text {
  font-size: var(--text-base);
  color: var(--color-text-light);
  line-height: 1.7;
  max-width: 600px;
  margin-top: 20px;
}

.subpage-hero__text a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.subpage-hero__text a:hover {
  text-decoration: underline;
}

.subpage-hero .btn {
  margin-top: 28px;
}

/* ==========================================================================
   Mesh-Hero (Level 2) — animierter Verlauf wie auf der Startseite, in der
   Farbe der Zielgruppe (lib/config/heroMesh.ts). Über dem Verlauf steht
   nur dunkle Schrift: Navy und ink-80 halten auf jeder Farbe der Paletten
   AA, farbige Schrift nicht.
   ========================================================================== */

.subpage-hero--mesh,
.security-hero--mesh,
.article-hero--mesh {
  background: var(--color-white);
  isolation: isolate;
  padding: 150px 1rem 110px;
}

/* Scroll-Kopplung nur mit Browser-Unterstützung — sonst springt die Animation
   in den Endzustand (Firefox: Verlauf unsichtbar). CAS-3118 */
@supports (animation-timeline: scroll()) {
  .subpage-hero--mesh .mesh-gradient,
  .security-hero--mesh .mesh-gradient,
  .article-hero--mesh .mesh-gradient {
    animation: hero-fade-out linear both;
    animation-timeline: scroll();
    animation-range: 150px 450px;
  }
}

/* Kontrastebene: oben deckend für Logo und Navigation, unten in Weiss */
/* Die zwei neuen Bloecke haben keine ::after-Grundlage aus ihrem Basis-
   Baustein — Position und Ausdehnung deshalb hier. */
.security-hero--mesh::after,
.article-hero--mesh::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.security-hero--mesh,
.article-hero--mesh {
  position: relative;
}

.subpage-hero--mesh::after,
.security-hero--mesh::after,
.article-hero--mesh::after {
  top: 0;
  height: auto;
  z-index: 1;
  /* Kürzer als auf der Startseite: der Hero ist nur ~420px hoch, sonst
     bliebe vom Verlauf nichts übrig. Oben deckt es nur die Navigation. */
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.97) 0px,
      rgba(255, 255, 255, 0.85) 72px,
      rgba(255, 255, 255, 0) 170px
    ),
    linear-gradient(
    to bottom,
    transparent 78%,
    rgba(255, 255, 255, 0.75) 94%,
    #fff 100%
  );
}

.subpage-hero--mesh .subpage-hero__container,
.security-hero--mesh > .container,
.article-hero--mesh > .container {
  position: relative;
  z-index: 2;
}

.subpage-hero--mesh .subpage-hero__label {
  color: var(--color-text);
}

.subpage-hero--mesh .subpage-hero__subtitle,
.subpage-hero--mesh .subpage-hero__text {
  color: var(--color-ink-80);
}

.subpage-hero--mesh .subpage-hero__text a {
  color: var(--color-text);
  text-decoration: underline;
}

/* Zahlen im Seitenkopf (/ueber-uns): weisse Felder auf dem Verlauf. Die
   Karten sind die LiveStats-Karten; hier nur Lage und Tiefe. Der Weiss-
   Auslauf unten setzt später ein, sonst stünden die Felder auf Weiss statt
   auf dem Verlauf. */
.subpage-hero--with-stats {
  padding-bottom: 96px;
}

.subpage-hero--with-stats::after {
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.97) 0px,
      rgba(255, 255, 255, 0.85) 72px,
      rgba(255, 255, 255, 0) 170px
    ),
    linear-gradient(
    to bottom,
    transparent 90%,
    rgba(255, 255, 255, 0.75) 97%,
    #fff 100%
  );
}

.subpage-hero__stats {
  position: relative;
  z-index: 2;
  margin-top: 56px;
}

.subpage-hero__stats .stats-grid--cards .stats-grid__item {
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 2px rgba(9, 17, 36, 0.06), 0 12px 32px rgba(9, 17, 36, 0.1);
}

/* ==========================================================================
   Content Sections
   ========================================================================== */

.subpage-section {
  padding: 80px 40px;
}

.subpage-section--white {
  background: var(--color-white);
}

.subpage-section--gray {
  background: var(--color-bg-section);
  position: relative;
  overflow: hidden;
}

.subpage-section--gray::before,
.subpage-section--gray::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 80px;
  pointer-events: none;
  z-index: 0;
}

.subpage-section--gray::before {
  top: 0;
  background: linear-gradient(to bottom, #ffffff, transparent);
}

.subpage-section--gray::after {
  bottom: 0;
  background: linear-gradient(to top, #ffffff, transparent);
}

.subpage-section--gray > * {
  position: relative;
  z-index: 1;
}

.subpage-section--dark {
  background: var(--color-text);
  color: var(--color-white);
  max-width: 1360px;
  margin: 80px 40px;
  margin-inline: max(40px, calc((100% - 1420px) / 2));
  padding: 80px 60px;
  border-radius: var(--radius-lg);
}

@media (max-width: 768px) {
  .subpage-section--dark {
    margin: 40px 1rem;
    margin-inline: 1rem;
    padding: 48px 24px;
  }
}

.subpage-section--with-map {
  position: relative;
  overflow: hidden;
}

.subpage-section--with-map .subpage-section__container {
  position: relative;
  z-index: 1;
}

.swiss-map-bg {
  position: absolute;
  right: -5%;
  top: 50%;
  transform: translateY(-50%);
  width: 60%;
  max-width: 600px;
  height: auto;
  pointer-events: none;
  mask-image: linear-gradient(to left, transparent 5%, black 50%);
}

.swiss-map-bg path {
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Regulation Badges */
.regulation-badges {
  display: flex;
  justify-content: flex-start;
  gap: 24px;
  margin-top: 48px;
  flex-wrap: wrap;
}

.regulation-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.regulation-badge:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.regulation-badge__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  opacity: 0.9;
}

.regulation-badge__icon svg {
  width: 32px;
  height: 32px;
}

.regulation-badge__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.regulation-badge__label {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.2;
}

.regulation-badge__sublabel {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.2;
}

@media (max-width: 768px) {
  .regulation-badges {
    gap: 16px;
    margin-top: 32px;
  }

  .regulation-badge {
    padding: 14px 18px;
    gap: 12px;
  }

  .regulation-badge__icon {
    width: 32px;
    height: 32px;
  }

  .regulation-badge__icon svg {
    width: 26px;
    height: 26px;
  }

  .regulation-badge__label {
    font-size: var(--text-sm);
  }

  .regulation-badge__sublabel {
    font-size: var(--text-xs);
  }
}

/* Investing theme section with green fade */
.subpage-section--investing {
  position: relative;
  background: #fafafa;
  overflow: hidden;
}

.subpage-section--investing::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: radial-gradient(
    ellipse at 70% 50%,
    rgba(0, 217, 36, 0.1) 0%,
    transparent 60%
  );
  z-index: 0;
  pointer-events: none;
}

.subpage-section--investing .subpage-section__container {
  position: relative;
  z-index: 1;
}

.subpage-section__container {
  /* eine Kante mit Logo, Seitenkopf und Kacheln (Entscheid 27.09.2026) */
  max-width: 1200px;
  margin: 0 auto;
}

/* Fliesstext behaelt seine Lesebreite, Tabellen und Raster nutzen die Flaeche */
.subpage-section__container > p,
.subpage-section__container .subpage-section__subtitle,
.subpage-section__container .content-block__text {
  max-width: 78ch;
}

.subpage-section__container--wide {
  max-width: 1200px;
}

.subpage-section__header {
  margin-bottom: 48px;
}

/* Sektionskopf wie auf der Startseite (CAS-2983 §0): 600 statt 800 */
.subpage-section__title {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: 16px;
  letter-spacing: -0.015em;
}

.subpage-section--dark .subpage-section__title,
.subpage-section--dark .subpage-section__title {
  color: var(--color-white);
}

.subpage-section__subtitle {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-ink-60);
  max-width: 58ch;
}

/* wie .borrowers__title auf der Startseite */
@media (max-width: 1024px) {
  .subpage-section__title {
    font-size: 2rem;
  }
}

.subpage-section--dark .subpage-section__subtitle,
.subpage-section--dark .subpage-section__subtitle {
  color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   Content Block (Text content)
   ========================================================================== */

.content-block {
  margin-bottom: 48px;
}

.content-block:last-child {
  margin-bottom: 0;
}

.content-block__title {
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.content-block__text {
  font-size: var(--text-base);
  color: var(--color-ink-60);
  line-height: 1.7;
}

.content-block__text + .content-block__text {
  margin-top: 16px;
}

/* Definitionskarte unter dem Kopf (Crowdlending) */
.content-block--card {
  padding: 40px;
  background: var(--color-white);
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* ==========================================================================
   Two Column Grid
   ========================================================================== */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.two-col__item {
  padding: 32px 0;
  border-radius: var(--radius-xl);
}

.two-col__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 20px;
}

/* Zwei gleichwertige Karten (Ablauf Kreditnehmer / Anleger) */
.two-col--cards {
  gap: 24px;
}

.two-col--cards .two-col__item {
  padding: 32px;
  background: var(--color-white);
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* ==========================================================================
   Steps List
   ========================================================================== */

.steps-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.steps-list__item {
  display: flex;
  gap: 16px;
}

/* Nummer auf getöntem Tile wie in ProcessSteps (§2.4). Kreditnehmer
   Teal (neutral), --alt = Anleger Grün (Zielgruppenfarbe). */
.steps-list__number {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--world-tint, var(--color-tint-primary));
  color: var(--world-accent, var(--color-primary));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.steps-list__number--alt {
  background: var(--color-tint-investing);
  color: var(--color-accent-investing);
}

.steps-list__content {
  flex: 1;
}

.steps-list__title {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}

.steps-list__desc {
  font-size: var(--text-sm);
  color: var(--color-ink-60);
  line-height: 1.5;
  text-wrap: pretty;
}

/* ==========================================================================
   Check List
   ========================================================================== */

.check-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.check-list__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.check-list__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: var(--color-success);
  color: white;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.check-list__icon svg {
  width: 14px;
  height: 14px;
  color: var(--color-white);
  stroke-width: 3;
}

.check-list__text {
  color: var(--color-text);
  line-height: 1.5;
}

/* Trennlinien-Liste (Rating-Seite, CAS-2983 §6): Strich-Häkchen in Petrol
   statt gefülltem Kreis — Aufzählung, kein bestätigter Zustand. */
.check-list--ruled {
  gap: 0;
}

.check-list--ruled .check-list__item {
  padding: 12px 0;
  border-top: 1px solid var(--color-light-3);
}

.check-list--ruled .check-list__icon {
  width: 18px;
  height: 18px;
  background: none;
  color: var(--world-accent, var(--color-primary));
  border-radius: 0;
}

.check-list--ruled .check-list__text {
  font-size: 0.9375rem;
  color: var(--color-ink-70);
}

/* ==========================================================================
   Data Table
   ========================================================================== */

/* Breite Tabellen scrollen auf dem Handy statt abgeschnitten zu werden */
.data-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table-wrap .data-table {
  min-width: 520px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.data-table th,
.data-table td {
  font-size: var(--text-sm);
  color: var(--color-ink-60);
}

.data-table thead {
  background: var(--color-light-4);
}

.data-table th {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.data-table tbody tr {
  border-top: 1px solid var(--color-light-3);
}

.data-table td {
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

.data-table td:first-child {
  font-weight: 500;
  color: var(--color-text);
}

/* Rechenbeispiel der Vergleichsseiten (Bank vs. Cashare): drei Karten.
   Die Klassen hatten bis 24.09.2026 kein CSS — die Beispiele standen als
   nackte Ueberschriften untereinander. Cashare-Karten tragen wie die
   hervorgehobene Tabellenspalte die Weltfarbe. */
.three-col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.three-col__item {
  padding: 24px;
  background: var(--color-white);
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.three-col__item + .three-col__item {
  background: var(--world-tint, var(--color-tint-primary));
}

.three-col__title {
  margin: 0 0 12px;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}

.three-col__item p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--color-text-light);
  font-variant-numeric: tabular-nums;
}

.three-col__item strong {
  color: var(--color-text);
}

@media (max-width: 768px) {
  .three-col {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Hervorgehobene Spalte (Crowdlending im Vergleich): nur der Inhalt traegt
   die Farbe, die Titelzeile bleibt neutral (Entscheid 24.09.2026). */
.data-table--highlight-2 td:nth-child(2) {
  background: var(--world-tint, var(--color-tint-primary));
  color: var(--color-text);
  font-weight: 600;
}

/* ==========================================================================
   Info Box
   ========================================================================== */

.info-box {
  display: flex;
  gap: 16px;
  padding: 24px;
  background: #fffbeb;
  border-radius: var(--radius-lg);
  border-left: 4px solid #f59e0b;
}

.info-box--success {
  background: #f0fdf4;
  border-left-color: var(--color-success);
}

.info-box__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: #f59e0b;
}

.info-box--success .info-box__icon {
  color: var(--color-success);
}

.info-box__content {
  flex: 1;
}

.info-box__title {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}

.info-box__text {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: 1.6;
}

/* ==========================================================================
   Stats Grid
   ========================================================================== */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

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

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

.stats-grid__item {
  text-align: left;
  padding: 32px 24px;
  background: var(--color-white);
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02), 0 8px 24px rgba(0, 0, 0, 0.04);
  transition:
    background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

.stats-grid__value {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--world-accent, var(--color-primary));
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.stats-grid__label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-light);
  line-height: 1.4;
}

/* Cards variant - clean styling (label on top, value below) */
/* LiveStats (Vorgabe variant="cards") — Karte wie überall auf den
   Unterseiten; der Wert steht in Ink, nicht mehr in Primary (CAS-2983 §2.6) */
.stats-grid--cards .stats-grid__item {
  display: flex;
  flex-direction: column;
  padding: 32px;
  background: var(--color-white);
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.stats-grid--cards .stats-grid__label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-ink-60);
  margin-bottom: 8px;
  line-height: 1.3;
}

/* Grosszuegige Karten (Statistik 2×2): mehr Luft, groessere Zahl */
.stats-grid--roomy {
  gap: 24px;
}

.stats-grid--roomy.stats-grid--cards .stats-grid__item {
  padding: clamp(24px, 4vw, 40px);
  gap: 8px;
}

.stats-grid--roomy.stats-grid--cards .stats-grid__value {
  font-size: clamp(1.75rem, 4.5vw, 3rem);
}

.stats-grid--cards .stats-grid__value {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 0.5em von 40px = 20px */
.stats-grid__unit {
  font-size: 0.5em;
  font-weight: 600;
  color: var(--color-ink-50);
  margin: 0 0.3em;
}

/* Mit Titel und drei Karten: Kopf links, Karten rechts. Das Markup der Insel
   bleibt unverändert, deshalb greift die Regel über :has(). */
.subpage-section__container:has(> .subpage-section__header + .stats-grid--3) {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.subpage-section__container:has(> .subpage-section__header + .stats-grid--3)
  > .subpage-section__header {
  margin-bottom: 0;
  text-align: left;
}

/* Unter 1200px reicht die Kartenbreite nicht mehr für einen 40px-Wert wie
   «Seit 2008» — dann steht der Kopf über den Karten. */
@media (max-width: 1199px) {
  .subpage-section__container:has(> .subpage-section__header + .stats-grid--3) {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

.stats-grid--minimal .stats-grid__item {
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 20px;
}

/* ==========================================================================
   Partner Grid
   ========================================================================== */

.partner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.partner-card {
  padding: 24px;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.partner-card__name {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}

.partner-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: 1.5;
}

/* ==========================================================================
   Timeline
   ========================================================================== */

.timeline {
  position: relative;
  padding-left: 100px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 80px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    180deg,
    var(--color-primary),
    var(--color-secondary)
  );
  opacity: 0.3;
}

.timeline__item {
  position: relative;
  padding-bottom: 32px;
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__year {
  position: absolute;
  left: -100px;
  width: 70px;
  font-weight: 800;
  color: var(--world-accent, var(--color-primary));
  text-align: right;
}

.timeline__dot {
  position: absolute;
  left: -24px;
  top: 4px;
  width: 10px;
  height: 10px;
  background: var(--world-accent, var(--color-primary));
  border-radius: var(--radius-full);
}

.timeline__content {
  background: var(--color-white);
  padding: 20px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.timeline__text {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.5;
}

/* ==========================================================================
   CTA Section
   ========================================================================== */

/* Dunkler Abschluss, ruhig: eine Fläche, ein Radial, kein Rand (CAS-2983 §2.8) */
.subpage-cta {
  max-width: 1360px;
  margin: 80px 40px;
  margin-inline: max(40px, calc((100% - 1420px) / 2));
  padding: 80px 60px;
  background: var(--color-text);
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.subpage-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Schein wie das Band «18 Jahre» (.wwa-years::before, Entscheid Michael
     06.10.2026): Marken-Cyan 28 %, Kreis um 160px links auf halber Höhe,
     Radius 452px = Ecke des dortigen 640px-Quadrats. Vorher eine flache
     Ellipse unten links (22 %), die kaum zu sehen war. */
  background: radial-gradient(
    452px circle at 160px 50%,
    rgba(0, 181, 206, 0.28) 0%,
    rgba(0, 181, 206, 0) 65%
  );
  pointer-events: none;
}

.subpage-cta__container {
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.subpage-cta__title {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 24px;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.subpage-cta__buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* .btn--cta setzt 16px, .btn--ghost-white 14px — nebeneinander gleich gross */
.subpage-cta__buttons .btn {
  font-size: var(--text-sm);
}

/* CTA Cards Layout */
.subpage-cta__cards {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}

.subpage-cta__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 28px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  text-decoration: none;
  text-align: left;
  min-width: 220px;
  position: relative;
  transition:
    background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
}

.subpage-cta__card:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.24);
  transform: translateY(-4px);
}

.subpage-cta__card-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 4px;
}

.subpage-cta__card-desc {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.4;
}

.subpage-cta__card-arrow {
  position: absolute;
  top: 24px;
  right: 20px;
  color: rgba(255, 255, 255, 0.4);
  transition:
    color var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
}

.subpage-cta__card:hover .subpage-cta__card-arrow {
  color: #fff;
  transform: translateX(4px);
}

.subpage-cta__card:hover .subpage-cta__card-arrow .arrow-line {
  transform: scaleX(1);
}

@media (max-width: 768px) {
  .subpage-cta__cards {
    flex-direction: column;
    align-items: stretch;
  }

  .subpage-cta__card {
    min-width: auto;
  }
}

/* ==========================================================================
   Team Grid
   ========================================================================== */

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.team-card {
  text-align: center;
  padding: 24px;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.team-card__avatar {
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-secondary)
  );
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 1.5rem;
  font-weight: 800;
}

.team-card__name {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}

.team-card__role {
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

/* ==========================================================================
   Job Card
   ========================================================================== */

.job-card {
  padding: 24px;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
}

.job-card:last-child {
  margin-bottom: 0;
}

.job-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}

.job-card__meta {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.job-card__tag {
  font-size: var(--text-xs);
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  gap: 6px;
}

.job-card__tag-icon {
  width: 16px;
  height: 16px;
}

.job-card__link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

.job-card__link:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Rating Table
   ========================================================================== */

/* Kartenmuster §0; Kopf hell statt Petrol-Balken */
.rating-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.rating-table th,
.rating-table td {
  font-size: var(--text-sm);
  color: var(--color-ink-80);
  font-variant-numeric: tabular-nums;
}

.rating-table th:first-child,
.rating-table td:first-child {
  text-align: center;
}

.rating-table thead {
  background: var(--color-light-4);
  color: var(--color-ink-80);
}

.rating-table th {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rating-table tbody tr {
  border-top: 1px solid var(--color-light-3);
}

.rating-table td {
  font-size: var(--text-sm);
  color: var(--color-text);
}

/* Nur die Statistik-Tabelle — global gesetzt machte die Regel auch die
   Badges der Anleger-Tabelle rund. Form wie die Badges der Projektkarten
   (abgerundetes Quadrat), Farbe und weisse Schrift aus RATING_GRADE_COLORS. */
.rating-table td .rating-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  font-weight: 800;
  /* gross und fett: Weiss auf den hellen Notenfarben braucht >= 18.66px */
  font-size: 1.25rem;
}

/* ==========================================================================
   Press Grid
   ========================================================================== */

.press-card {
  padding: 24px;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-fast) var(--ease-out);
}

.press-card:hover {
  transform: translateY(-4px);
}

.press-card__source {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.press-card__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
  line-height: 1.4;
}

.press-card__date {
  font-size: var(--text-xs);
  color: var(--color-text-light);
}

/* ==========================================================================
   Partner Cards
   ========================================================================== */

.partner-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Referenzkarten (CAS-2983 §6): Kartenmuster §0, Logos entsättigt —
   Referenz, kein Akquise-Pfad; Farbe erst beim Überfahren. */
.partner-card {
  background: var(--color-white);
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--duration-fast) var(--ease-out);
}

.partner-card:hover {
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
}

.partner-card__header {
  /* Logo links, Kategorie immer oben rechts — auch beim langen FR-Etikett
     «Fournisseur de données», das früher unter breite Logos rutschte
     (Creditreform, Bisnode; CAS-3088, Nr. 106) */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  margin-bottom: 16px;
}

.partner-card__logo {
  height: 48px;
  min-width: 0;
  display: flex;
  align-items: center;
}

/* Nie breiter als die Logospalte — sonst schiebt sich das Etikett über
   breite Logos (Creditreform ab ~1100 px, CAS-3088 Nr. 111) */
.partner-card__logo img {
  max-height: 48px;
  max-width: min(140px, 100%);
  min-width: 0;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}

.partner-card:hover .partner-card__logo img {
  filter: none;
  opacity: 1;
}

.partner-card__logo-text {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
}

.partner-card__category {
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-tint-primary);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  justify-self: end;
  max-width: 11em;
  text-align: center;
}

.partner-card__description {
  font-size: 0.9375rem;
  color: var(--color-ink-60);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 16px;
}

.partner-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

.partner-card__link:hover {
  color: var(--color-primary-dark);
}

.partner-card__link svg {
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .partner-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  /* minmax(0, …): 1fr allein wuchs auf die Mindestbreite der Karte (FR 320px: +39px) */
  .partner-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .partner-card {
    padding: 20px;
  }
}

/* ==========================================================================
   Jobs Intro
   ========================================================================== */

.jobs-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.jobs-intro__content {
  max-width: 560px;
}

.jobs-intro__image {
  border-radius: 16px;
  overflow: hidden;
}

.jobs-intro__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Intro als Karte im Kopf (CAS-2983 §6) */
.jobs-intro--card {
  padding: 40px;
  background: var(--color-white);
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.jobs-intro--card .jobs-intro__image {
  border-radius: var(--radius-md);
}

@media (max-width: 900px) {
  .jobs-intro {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .jobs-intro__content {
    max-width: none;
  }

  .jobs-intro__image {
    order: -1;
  }
}

/* ==========================================================================
   Jobs Contact Section
   ========================================================================== */

/* Initiativbewerbung und Kontakt, zwei gleichwertige Karten */
.jobs-contact {
  padding: 0 40px 88px;
}

.jobs-contact__grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.jobs-contact__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 32px;
  background: var(--color-white);
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.jobs-contact__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--color-tint-primary);
  color: var(--color-primary);
  margin-bottom: 8px;
}

.jobs-contact__title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0;
}

.jobs-contact__text {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-ink-60);
  margin: 0 0 8px;
}

.jobs-contact__card .btn {
  margin-top: auto;
}

.jobs-contact__map {
  position: relative;
  width: 100%;
  height: 180px;
  margin-bottom: 8px;
  border-radius: var(--radius-md);
  overflow: hidden;
  filter: grayscale(100%);
}

.jobs-contact__map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 768px) {
  .jobs-contact {
    padding: 0 20px 60px;
  }

  .jobs-contact__grid {
    grid-template-columns: 1fr;
  }

  .jobs-intro--card {
    padding: 24px;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

@media (max-width: 768px) {
  .subpage-hero__title {
    font-size: 2.5rem;
  }

  .subpage-section {
    padding: 60px 1rem;
  }

  .two-col {
    grid-template-columns: 1fr;
    gap: 24px;
  }

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

  .stats-grid__value {
    font-size: 1.5rem;
  }

  .stats-grid--cards .stats-grid__item {
    padding: 24px 20px;
    border-radius: 10px;
  }

  .stats-grid--cards .stats-grid__label {
    font-size: 0.8125rem;
    margin-bottom: 6px;
  }

  .stats-grid--cards .stats-grid__value {
    font-size: 1.875rem;
  }

  .partner-grid {
    grid-template-columns: 1fr;
  }

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

  .press-grid {
    grid-template-columns: 1fr;
  }

  .timeline {
    padding-left: 32px;
  }

  .timeline::before {
    left: 4px;
  }

  .timeline__year {
    position: static;
    width: auto;
    text-align: left;
    margin-bottom: 8px;
  }

  .timeline__dot {
    left: 0;
  }

  .subpage-cta {
    margin: 0 1rem 60px;
    padding: 60px 1rem;
  }

  .subpage-cta__buttons {
    flex-direction: column;
    align-items: center;
  }

  .subpage-cta__button {
    padding: 16px 32px;
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }

  /* Die Tabelle ist hier selbst der Scroll-Container; das globale
     table { min-width: 500px } (components/table.css) machte ihn breiter
     als die Seite (Marketplace Lending: +196px). */
  .data-table {
    display: block;
    overflow-x: auto;
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .stats-grid--cards .stats-grid__item {
    padding: 20px 16px;
    border-radius: 8px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .stats-grid--cards .stats-grid__label {
    font-size: 0.875rem;
    margin-bottom: 0;
    order: 1;
  }

  .stats-grid--cards .stats-grid__value {
    font-size: 1.75rem;
    order: 2;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .subpage-hero__title {
    font-size: 2rem;
  }

  .stats-grid--cards .stats-grid__item {
    padding: 18px 14px;
  }

  .stats-grid--cards .stats-grid__label {
    font-size: 0.8125rem;
  }

  .stats-grid--cards .stats-grid__value {
    font-size: 1.5rem;
  }

  .team-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Additional Components
   ========================================================================== */

/* Stats Grid Icon */
.stats-grid__icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-secondary)
  );
  color: var(--color-white);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.stats-grid__icon svg {
  width: 24px;
  height: 24px;
  color: var(--color-white);
}

/* Partner Grid Card */
.partner-grid__card {
  padding: 32px;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.partner-grid__title {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 12px;
}

.partner-grid__desc {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Press Grid Items (media outlets) */
.press-grid__item {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text-light);
  text-align: center;
  padding: 16px;
}

/* Press Releases */
.press-releases {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.press-releases__item {
  background: var(--color-white);
  padding: 24px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.press-releases__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.press-releases__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.press-releases__date {
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

.press-releases__type {
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 4px 10px;
  background: var(--color-bg-section);
  color: var(--color-text-light);
  border-radius: var(--radius-sm);
}

.press-releases__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
}

/* Contact Links */
.contact-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.contact-links__item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-ink-80);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--duration-fast) var(--ease-out);
}

.contact-links__item:hover {
  color: var(--color-primary);
}

.contact-links__item--address {
  align-items: flex-start;
}

.contact-links__icon {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}

.contact-links--centered {
  align-items: center;
}

.contact-links--centered .contact-links__item {
  justify-content: center;
}

/* Info Box Button */
.info-box__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 20px;
  background: var(--color-text);
  color: var(--color-white);
  font-weight: 600;
  font-size: var(--text-sm);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.info-box__button:hover {
  background: var(--color-gray-dark);
  transform: translateY(-1px);
}

.info-box__button svg {
  width: 18px;
  height: 18px;
}

/* CTA Text and Button */
.subpage-cta__text {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

.subpage-cta__button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: #0f172a;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 8px;
  text-decoration: none;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.subpage-cta__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  background: #1e293b;
}

/* Eyebrow statt Pille */
.subpage-cta__label {
  display: inline-block;
  color: var(--color-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

/* Dark Section Stats Grid */
.subpage-section--dark .stats-grid__item {
  background: rgba(255, 255, 255, 0.1);
}

.subpage-section--dark .stats-grid__value {
  color: var(--color-white);
}

.subpage-section--dark .stats-grid__label {
  color: rgba(255, 255, 255, 0.7);
}

/* Two Col Left/Right */
.two-col__left,
.two-col__right {
  display: flex;
  flex-direction: column;
}

/* Benefits Grid (4 columns) */
/* Vorteile ohne Kartenrahmen: getöntes Tile, Titel, Text (CAS-2983 §2.5) */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 40px 32px;
}

.benefits-grid__icon-wrapper {
  margin-bottom: 20px;
}

.benefits-grid__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--world-tint, var(--color-tint-primary));
  color: var(--world-accent, var(--color-primary));
}

.benefits-grid__icon .icon {
  width: 30px;
  height: 30px;
}

/* Das grüne Check-Badge über dem Icon entfällt */
.benefits-grid__check {
  display: none;
}

.benefits-grid__title {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text);
  margin: 0 0 8px;
}

.benefits-grid__desc {
  font-size: 0.9375rem;
  color: var(--color-ink-60);
  line-height: 1.6;
  margin: 0;
}

/* Job List */
.job-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.job-list__item {
  background: var(--color-bg-section);
  padding: 24px;
  border-radius: var(--radius-xl);
  transition: background var(--duration-fast) var(--ease-out);
  cursor: pointer;
}

.job-list__item:hover {
  background: #e5e7eb;
}

.job-list__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.job-list__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}

.job-list__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.job-list__tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

.job-list__tag svg {
  width: 16px;
  height: 16px;
}

.job-list__arrow {
  width: 20px;
  height: 20px;
  color: var(--color-text-light);
  flex-shrink: 0;
}

/* Job Empty State */
.job-empty {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  padding: 64px 40px;
  border-radius: 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.job-empty::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(
      ellipse 60% 50% at 20% 80%,
      rgba(20, 184, 166, 0.12) 0%,
      transparent 50%
    ),
    radial-gradient(
    ellipse 50% 40% at 80% 20%,
    rgba(99, 102, 241, 0.1) 0%,
    transparent 50%
  );
  pointer-events: none;
}

.job-empty__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5eead4;
  position: relative;
  z-index: 1;
}

.job-empty__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.job-empty__text {
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: 480px;
  margin: 0 auto 28px;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.job-empty .btn {
  position: relative;
  z-index: 1;
  background: #fff;
  color: #0f172a;
}

.job-empty .btn:hover {
  background: #f1f5f9;
}

@media (max-width: 640px) {
  .job-empty {
    padding: 48px 24px;
  }

  .job-empty__icon {
    width: 64px;
    height: 64px;
  }

  .job-empty__icon svg {
    width: 32px;
    height: 32px;
  }

  .job-empty__title {
    font-size: 1.25rem;
  }
}

/* Stat Highlights (Statistics page performance section) */
.stat-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.stat-highlight {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--color-white);
  padding: 24px;
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.stat-highlight__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--world-tint, var(--color-tint-primary));
  border-radius: var(--radius-md);
  color: var(--world-accent, var(--color-primary));
}

.stat-highlight__body {
  container-type: inline-size;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-highlight__label {
  white-space: nowrap;
  font-size: clamp(0.6875rem, 4.8cqi, var(--text-base));
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
}

.stat-highlight__desc {
  white-space: nowrap;
  font-size: clamp(0.6875rem, 4.8cqi, var(--text-sm));
  color: var(--color-ink-60);
}

@media (max-width: 768px) {
  .stat-highlights {
    grid-template-columns: 1fr;
  }
}

/* Values Grid */
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Kultur-Vierer wie der Vertrauens-Vierer (Wer sind wir) */
.values-grid__item {
  background: var(--color-white);
  padding: 32px;
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.values-grid__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--world-tint, var(--color-tint-primary));
  border-radius: var(--radius-lg);
  color: var(--world-accent, var(--color-primary));
  margin-bottom: 20px;
}

.values-grid__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}

.values-grid__desc {
  font-size: 0.9375rem;
  color: var(--color-ink-60);
  line-height: 1.6;
}

/* History Timeline Simple */
.history-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.history-list__item {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.history-list__year {
  flex-shrink: 0;
  width: 80px;
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--world-accent, var(--color-primary));
}

.history-list__content {
  flex: 1;
  background: var(--color-bg-section);
  padding: 20px;
  border-radius: var(--radius-lg);
}

.history-list__text {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.5;
}

/* Featured Section (big stat) */
/* Rendite-Kennzahl auf /ueber-uns/rating — vorher weiss auf dunklem
   Verlauf, jetzt Karte auf hellem Grund (CAS-2983 §3) */
.featured-stat {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: 48px 32px;
  background: var(--color-white);
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.featured-stat__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-investing);
  margin-bottom: 16px;
}

.featured-stat__value {
  font-size: clamp(3rem, 8vw, 4.5rem);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
  line-height: 1;
}

.featured-stat__desc {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-ink-60);
}

/* Scale Items (Rating Scale) */
.scale-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.scale-list__item {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--color-white);
  padding: 20px 24px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.scale-list__badge {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-white);
}

.scale-list__content {
  flex: 1;
}

.scale-list__risk {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}

.scale-list__range {
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

/* Two CTA buttons */
.cta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.cta-grid__item {
  text-align: center;
}

.cta-grid__title {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 16px;
}

.cta-grid__btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 32px;
  font-weight: 600;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.cta-grid__btn--primary {
  background: var(--color-text);
  color: var(--color-white);
}

.cta-grid__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: var(--color-gray-dark);
}

.cta-grid__btn--ghost {
  background: transparent;
  color: var(--color-text);
  border: 2px solid var(--color-text);
}

.cta-grid__btn--ghost:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Additional Responsive */
@media (max-width: 1024px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cta-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .press-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .press-grid__item {
    font-size: var(--text-sm);
    padding: 12px;
  }

  .values-grid {
    grid-template-columns: 1fr;
  }

  .history-list__item {
    flex-direction: column;
    gap: 8px;
  }

  .history-list__year {
    width: auto;
  }

  .featured-stat__value {
    font-size: 3.5rem;
  }

  .scale-list__item {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .press-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   FAQ List
   ========================================================================== */

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

.faq-list__item {
  background: var(--color-white);
  padding: 24px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.faq-list__question {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 12px;
}

.faq-list__answer {
  font-size: var(--text-base);
  color: var(--color-text-light);
  line-height: 1.6;
}

/* ==========================================================================
   Solution Cards (for institutional investors)
   ========================================================================== */

.solution-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.solution-card {
  background: var(--color-white);
  padding: 32px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.solution-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.solution-card__tagline {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.solution-card__title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 12px;
}

/* Vorher Anleger-Grün auf Kreditprodukt-Karten (Privatkredit/KMU/Hypothek).
   Jetzt Zielgruppenfarbe je Karte bzw. je Seite, sonst neutral Petrol. */
.solution-card__icon {
  width: 56px;
  height: 56px;
  background: var(--card-tint, var(--color-tint-primary));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--card-accent, var(--color-primary));
}

.solution-card--user,
.solution-grid--private .solution-card {
  --card-accent: var(--color-accent-private);
  --card-tint: var(--color-tint-private);
}

.solution-card--building,
.solution-grid--sme .solution-card {
  --card-accent: var(--color-accent-sme);
  --card-tint: var(--color-tint-sme);
}

.solution-card--home,
.solution-grid--hypo .solution-card {
  --card-accent: var(--color-accent-hypo);
  --card-tint: var(--color-tint-hypo);
}

.solution-card__desc {
  font-size: var(--text-base);
  color: var(--color-text-light);
  line-height: 1.6;
  margin-bottom: 20px;
}

.solution-card__link {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.solution-card:hover .solution-card__link {
  color: var(--color-secondary);
}

/* Compliance Badges */
.compliance-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.compliance-list__item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-white);
  padding: 12px 20px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-card);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.compliance-list__icon {
  width: 20px;
  height: 20px;
  color: var(--color-success);
}

/* Benefit Row (horizontal card with icon) */
.benefit-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.benefit-row__item {
  display: flex;
  gap: 16px;
  background: var(--color-bg-section);
  padding: 24px;
  border-radius: var(--radius-xl);
}

.benefit-row__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--color-text);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.benefit-row__icon svg {
  width: 24px;
  height: 24px;
  color: var(--color-white);
}

.benefit-row__content {
  flex: 1;
}

.benefit-row__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}

.benefit-row__desc {
  font-size: var(--text-base);
  color: var(--color-text-light);
  line-height: 1.5;
}

/* Contact Section */
.contact-section {
  text-align: center;
}

.contact-section__title {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 16px;
}

.contact-section__text {
  font-size: var(--text-lg);
  color: var(--color-text-light);
  margin-bottom: 32px;
}

.contact-section__buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.contact-section__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  font-weight: 600;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.contact-section__btn--primary {
  background: var(--color-text);
  color: var(--color-white);
}

.contact-section__btn--primary:hover {
  background: var(--color-gray-dark);
  transform: translateY(-2px);
}

.contact-section__btn--secondary {
  background: transparent;
  color: var(--color-text);
  border: 2px solid var(--color-text);
}

.contact-section__btn--secondary:hover {
  background: var(--color-bg-section);
}

.contact-section__btn svg {
  width: 20px;
  height: 20px;
}

/* Additional Responsive */
@media (max-width: 900px) {
  .solution-grid {
    grid-template-columns: 1fr;
  }

  .benefit-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .contact-section__buttons {
    flex-direction: column;
    align-items: center;
  }
}

/* ==========================================================================
   Loan Requirements — Kopf links wie im FAQ der Startseite, rechts je
   Kreditart eine Spalte. Keine Kartenflächen, keine Schatten.
   (.requirements ist schon vergeben: components/Requirements.tsx)
   ========================================================================== */

.loan-requirements {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.loan-requirements__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.loan-requirements__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--world-accent, var(--color-primary));
}

.loan-requirements__heading {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin: 0;
}

.loan-requirements__lead {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-ink-60);
  margin: 0;
}

.loan-requirements__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.loan-requirements__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
}

.loan-requirements__column {
  --column-accent: var(--color-primary);
  --column-tint: var(--color-tint-primary);
}

.loan-requirements__column--private {
  --column-accent: var(--color-accent-private);
  --column-tint: var(--color-tint-private);
}

.loan-requirements__column--sme {
  --column-accent: var(--color-accent-sme);
  --column-tint: var(--color-tint-sme);
}

.loan-requirements__column--hypo {
  --column-accent: var(--color-accent-hypo);
  --column-tint: var(--color-tint-hypo);
}

.loan-requirements__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--column-tint);
  color: var(--column-accent);
  margin-bottom: var(--space-4);
}

.loan-requirements__title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

.loan-requirements__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.loan-requirements__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--color-light-3);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-ink-70);
}

/* Icon size="sm" rendert 16px, das Muster will 18 */
.loan-requirements__item .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--color-primary);
}

@media (max-width: 1024px) {
  .loan-requirements {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .loan-requirements__heading {
    font-size: 2rem;
  }
}

/* ==========================================================================
   Regulation Item (Security page)
   ========================================================================== */

.regulation-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(255, 255, 255, 0.1);
  padding: 20px 24px;
  border-radius: var(--radius-lg);
}

.regulation-item__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.regulation-item__value {
  font-size: var(--text-base);
  color: var(--color-white);
  font-weight: 500;
}

/* Benefits Grid 3 columns */
.benefits-grid--3 {
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(max(230px, calc((100% - 64px) / 3)), 1fr)
    );
}

/* How It Works Timeline */
.hiw-timeline {
  text-align: center;
  margin-top: 48px;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-primary);
}

/* ==========================================================================
   Loan Cards - Action-oriented credit type cards
   ========================================================================== */

.loan-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* icon, tagline, title, description, link — eine Reihe mehr als auf der
     Startseite, weil die Karten hier noch die Tagline tragen */
  grid-template-rows: repeat(5, auto);
  gap: 24px;
}

/* Wie .borrowers__card der Startseite. Unterschied: je Welt ein eigener
   Tint und Glyph — hier sind die drei Karten die Wahl der Kreditart, auf der
   Startseite sind sie eine Reihe. */
.loan-card {
  --card-accent: var(--color-primary);
  --card-tint: var(--color-tint-primary);
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  gap: 0.5rem;
  padding: 32px;
  background: var(--color-white);
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-align: left;
  text-decoration: none;
  transition:
    color var(--duration-normal) var(--ease-out),
    background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out),
    opacity var(--duration-normal) var(--ease-out);
}

/* Der einzige Ort, an dem der Akzent die Fläche berührt */
.loan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
  border-color: color-mix(in srgb, var(--card-accent) 28%, transparent);
}

.loan-card--personal {
  --card-accent: var(--color-accent-private);
  --card-tint: var(--color-tint-private);
}

.loan-card--business {
  --card-accent: var(--color-accent-sme);
  --card-tint: var(--color-tint-sme);
}

.loan-card--property {
  --card-accent: var(--color-accent-hypo);
  --card-tint: var(--color-tint-hypo);
}

.loan-card__icon {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--card-tint);
  color: var(--card-accent);
  transition: transform var(--duration-fast) var(--ease-out);
}

/* 36 wie auf der Startseite — Lucides 24er Raster wirkt sonst verloren */
.loan-card__icon .icon {
  width: 36px;
  height: 36px;
}

.loan-card:hover .loan-card__icon {
  transform: scale(1.05);
}

.loan-card__tagline {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--card-accent);
}

.loan-card__title {
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0 0 4px;
}

.loan-card__desc {
  font-size: var(--text-sm);
  color: var(--color-ink-60);
  line-height: 1.6;
  margin: 0 0 16px;
}

.loan-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: end;
  justify-self: start;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
}

.loan-card__cta svg {
  transition: transform var(--duration-fast) var(--ease-out);
}

.loan-card:hover .loan-card__cta svg {
  transform: translateX(3px);
}

@media (max-width: 1024px) {
  .loan-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .loan-card {
    padding: 32px 24px;
  }
}

@media (max-width: 640px) {
  .loan-card__title {
    font-size: 1.5rem;
  }
}

/* ==========================================================================
   Hypotheken Apply Form
   ========================================================================== */

.hypotheken-apply {
  min-height: 100vh;
}

.hypotheken-apply__hero {
  background: linear-gradient(135deg, #0891b2 0%, #06b6d4 50%, #22d3ee 100%);
  padding: 80px 24px 120px;
  text-align: center;
  color: var(--color-white);
}

.hypotheken-apply__container {
  max-width: 720px;
  margin: 0 auto;
}

.hypotheken-apply__badge {
  display: inline-block;
  padding: 8px 20px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 24px;
}

.hypotheken-apply__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 16px;
}

.hypotheken-apply__subtitle {
  font-size: 1rem;
  opacity: 0.9;
}

.hypotheken-apply__form-wrapper {
  padding: 0 24px 80px;
  margin-top: -60px;
}

.hypotheken-apply__form {
  background: var(--color-white);
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  padding: 40px;
}

.hypotheken-apply__instruction {
  text-align: center;
  color: var(--color-text-light);
  margin-bottom: 32px;
  font-size: 0.9375rem;
}

.hypotheken-apply__row {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
}

.hypotheken-apply__row--purpose,
.hypotheken-apply__row--usage {
  justify-content: space-between;
}

.hypotheken-apply__checkbox-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 0.9375rem;
  color: var(--color-text);
}

.hypotheken-apply__checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.hypotheken-apply__checkbox-custom {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}

.hypotheken-apply__checkbox:checked + .hypotheken-apply__checkbox-custom {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.hypotheken-apply__checkbox:checked
  + .hypotheken-apply__checkbox-custom::after {
  content: "";
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-bottom: 2px;
}

.hypotheken-apply__field {
  margin-bottom: 20px;
}

.hypotheken-apply__label {
  display: block;
  font-size: 0.9375rem;
  color: var(--color-text);
  margin-bottom: 8px;
}

.hypotheken-apply__input,
.hypotheken-apply__select {
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-white);
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  appearance: none;
}

.hypotheken-apply__input::placeholder {
  color: var(--color-text-light);
}

.hypotheken-apply__input:focus,
.hypotheken-apply__select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

.hypotheken-apply__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 48px;
  cursor: pointer;
}

.hypotheken-apply__submit-wrapper {
  margin-top: 32px;
  text-align: center;
}

.hypotheken-apply__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 48px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-white);
  background: linear-gradient(135deg, #0891b2, #06b6d4);
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.hypotheken-apply__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.3);
}

.hypotheken-apply__submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.hypotheken-apply__footer {
  text-align: center;
  margin-top: 24px;
  font-size: 0.875rem;
  color: var(--color-text-light);
}

.hypotheken-apply__footer a {
  color: var(--color-primary);
  text-decoration: none;
  margin-left: 4px;
}

.hypotheken-apply__footer a:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .hypotheken-apply__hero {
    padding: 60px 16px 100px;
  }

  .hypotheken-apply__form-wrapper {
    padding: 0 16px 60px;
  }

  .hypotheken-apply__form {
    padding: 24px;
  }

  .hypotheken-apply__row {
    flex-direction: column;
    gap: 16px;
  }

  .hypotheken-apply__submit {
    width: 100%;
  }
}

/* Eine Kante: Titel, Inhalte, Tabellen und Zeitleiste auf der 1200er Flaeche,
   Fliesstext behaelt seine Lesebreite */
.subpage-section__container--wide .content-block--card .content-block__text {
  max-width: 78ch;
}

.about-timeline__container--wide {
  max-width: 1200px;
}

.about-timeline__container--wide .about-timeline__header {
  text-align: left;
}

/* Tabelle mit dunkler Kopfzeile, Aspekte fett */
.data-table--dark-head thead {
  background: var(--color-text);
}

.data-table--dark-head th,
.data-table--dark-head thead tr {
  background: var(--color-text);
  color: var(--color-white);
}

.data-table--dark-head td:first-child {
  font-weight: 700;
}

.about-timeline--ruled .about-timeline__container--wide {
  max-width: 1200px;
}

/* Vergleichstabelle: Aspekte fett, Crowdlending-Spalte normal, aber in der
   Titelzeile voll gefuellt, damit sie sich von "Bank" abhebt */
.data-table--dark-head.data-table--highlight-2 td:nth-child(2) {
  font-weight: 400;
}

.data-table--dark-head.data-table--highlight-2 th:nth-child(2) {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Vier Vorteile: 4 in einer Reihe oder 2×2 — nie 3 + 1 (Sichttest Filipe) */
.benefits-grid:has(> :nth-child(4):last-child) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .benefits-grid:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .benefits-grid:has(> :nth-child(4):last-child) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Einheitlicher Seitenaufbau (Durchgang SEO-Seiten, 27.09.2026)
   ========================================================================== */

/* Hero-Untertitel ueber die ganze Breite des Seitenkopfs */
.subpage-hero__subtitle {
  max-width: none;
}

/* Fliesstext ueber die ganze Inhaltsbreite wie auf den uebrigen Seiten */
.subpage-section__container > p,
.subpage-section__container .subpage-section__subtitle,
.subpage-section__container .content-block__text,
.subpage-section__container--wide .content-block--card .content-block__text {
  max-width: none;
}

/* Zweispaltige Textbloecke stehen als Karten — gleiche Hoehe je Reihe */
.two-col .two-col__item {
  padding: 32px;
  background: var(--color-white);
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.two-col {
  gap: 24px;
  align-items: stretch;
}

/* Eine Tabellen-Gestaltung fuer alle Tabellen: dunkle Kopfzeile, erste
   Spalte fett, hervorgehobene Spalte mit Petrol-Kopf (Entscheid 27.09.2026) */
.data-table thead,
.data-table thead tr,
.data-table th,
.rating-table thead,
.rating-table thead tr,
.rating-table th {
  background: var(--color-text);
  color: var(--color-white);
}

.data-table td:first-child {
  font-weight: 700;
  color: var(--color-text);
}

.data-table--highlight-2 td:nth-child(2) {
  font-weight: 400;
}

.data-table--highlight-2 th:nth-child(2) {
  background: var(--color-primary);
}

/* FAQ-Sektionen der Ratgeberseiten: gleicher Rahmen wie die uebrigen
   Sektionen (vorher ohne CSS — die Liste lief bis an den Bildschirmrand) */
.faq-section {
  padding: 72px 40px 80px;
}

.faq-section__container {
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .faq-section {
    padding: 48px 16px;
  }

  .two-col .two-col__item {
    padding: 24px;
  }
}

/* Hinweis unter Karten: ueber die ganze Breite (Rechenbeispiel u. a.) */
.subpage-section__note {
  margin: 24px 0 0;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-light);
}

.subpage-section--dark .subpage-section__note {
  color: rgba(255, 255, 255, 0.85);
}

.subpage-section--dark .three-col__item,
.subpage-section--dark .three-col__item + .three-col__item {
  background: var(--color-white);
  border-color: transparent;
}

/* Aufzaehlung mit Punkten in einer Karte */
.bullet-list {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: disc;
}

.bullet-list li {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-light);
}

.bullet-list li::marker {
  color: var(--color-primary);
}

/* Einleitender Textabsatz direkt unter dem Titel als Karte (SEO-Seiten) */
.subpage-section__container > .subpage-section__header + p {
  margin: 0;
  padding: 32px;
  background: var(--color-white);
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-light);
}

.subpage-section__container > .subpage-section__header + p + * {
  margin-top: 24px;
}

/* Ungerade Anzahl Karten im Zweierraster: die letzte ueber die ganze Breite
   statt allein links (2 + 2 + 1) */
@media (min-width: 769px) {
  .two-col > .two-col__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .subpage-section__container > .subpage-section__header + p {
    padding: 24px;
  }
}

/* Zeitleiste: Ereignistexte laufen ueber die ganze Spalte. Das globale
   text-wrap: balance teilte jeden Text in zwei halb so breite Zeilen. */
.about-timeline--ruled .about-timeline__event {
  text-wrap: pretty;
}

/* Hero-Kante = Abschnittskante: die Abschnitte haben 40px Seitenabstand,
   der Hero hatte 1rem - unter ~1280px stand der Titel weiter am Rand als
   der Text darunter */
@media (min-width: 769px) {
  .subpage-hero,
  .subpage-hero--mesh {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* Rechner im Abschnitt (/kreditrechner): Füllung bis zum Schieber in
   Petrol wie auf der Startseite, Rest hellgrau. Die Spur (Pseudo-Element)
   ist deckend und lag über der Füllung - hier transparent; die Farbe trägt
   das Input selbst (überschreibt den Inline-Verlauf der Insel, dessen
   Resteton auf Weiss kaum sichtbar ist). */
.subpage-section .loan-calculator .slider {
  --track-color: var(--color-primary);
  --track-color-bg: var(--color-light-3);
  background: linear-gradient(
    to right,
    var(--track-color) 0%,
    var(--track-color) var(--slider-fill, 50%),
    var(--track-color-bg) var(--slider-fill, 50%),
    var(--track-color-bg) 100%
  ) !important;
}

.subpage-section .loan-calculator .slider::-webkit-slider-runnable-track {
  background: transparent;
}

.subpage-section .loan-calculator .slider::-moz-range-track {
  background: transparent;
}

/* «Auf einen Blick» (CAS-2981 Punkt 6): Antwortsatz, Faktentabelle, Stand */
.fact-sheet {
  padding: 56px 40px 24px;
  background: var(--color-white);
}

.fact-sheet__container {
  max-width: 1200px;
  margin: 0 auto;
}

.fact-sheet__lead {
  max-width: none;
  margin: 0 0 24px;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-text);
}

.fact-sheet__caption {
  caption-side: top;
  padding: 0 0 12px;
  text-align: left;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
}

.fact-sheet__table td:first-child {
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

.fact-sheet__meta {
  margin: 12px 0 0;
  font-size: var(--text-xs);
  color: var(--color-gray);
}

@media (max-width: 768px) {
  .fact-sheet {
    padding: 40px 1rem 16px;
  }

  .fact-sheet__table td:first-child {
    white-space: normal;
  }

  /* «Auf einen Blick»: vier kurze Spalten passen umgebrochen auf das
     Telefon — Seitwärtsscrollen war dort nicht erkennbar (CAS-3088) */
  .data-table-wrap .fact-sheet__table {
    min-width: 0;
    font-size: var(--text-sm);
  }

  /* components/table.css setzt auf dem Handy alle Zellen auf nowrap; ohne
     diese Gegenregel wird der Text in der schmalen Tabelle abgeschnitten
     (.data-table hat overflow: hidden) — CAS-3088 Nr. 113 */
  .fact-sheet__table th,
  .fact-sheet__table td {
    white-space: normal;
  }
}

/* «Auch interessant» (CAS-2987): ruhige Linkkarten zu Wissensseiten */
.related-links {
  padding: 48px 40px;
  background: var(--color-white);
}

.related-links__container {
  max-width: 1200px;
  margin: 0 auto;
}

.related-links__title {
  margin: 0 0 20px;
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
}

.related-links__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.related-links__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 20px 24px;
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  text-decoration: none;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.related-links__link:hover,
.related-links__link:focus-visible {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-card);
}

.related-links__name {
  font-weight: 600;
  color: var(--color-primary);
}

.related-links__name::after {
  content: " →";
}

.related-links__text {
  font-size: var(--text-sm);
  color: var(--color-ink-60);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .related-links {
    padding: 40px 1rem;
  }
}

/* ==========================================================================
   NL-C4 (CAS-3120): Schritt-Listen mit Aktiv-Zustand (Ratgeber-Seiten)
   Die Nummer füllt sich, sobald der Schritt die Bildschirmmitte erreicht;
   kommende Schritte leicht gedimmt (erst mit [data-enhanced]).
   ========================================================================== */

.steps-list[data-enhanced] .steps-list__item {
  transition: opacity var(--duration-normal) var(--ease-out);
}

.steps-list[data-enhanced] .steps-list__item:not(.is-active):not(.is-past) {
  opacity: 0.45;
}

.steps-list__number {
  transition:
    background-color var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out);
}

.steps-list__item:is(.is-active, .is-past) .steps-list__number {
  background: var(--world-accent, var(--color-primary));
  color: var(--color-white);
}

.steps-list__item:is(.is-active, .is-past) .steps-list__number--alt {
  background: var(--color-accent-investing);
  color: var(--color-white);
}

/* blocks/login.css */
/* ==========================================================================
   Login Page Styles
   ========================================================================== */

.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .login-page {
    flex-direction: row;
  }
}

/* ==========================================================================
   Left Panel - Form
   ========================================================================== */

.login-form-panel {
  flex: 7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px;
  background: var(--color-bg-section);
}

.login-form-panel__inner {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

.login-form-panel__logo {
  display: block;
  margin-bottom: 32px;
  text-align: center;
}

.login-form-panel__logo-text {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.login-form-panel__logo-img {
  height: 32px;
  width: auto;
  display: block;
  margin: 0 auto;
}

.login-form-panel__header {
  text-align: center;
  margin-bottom: 32px;
}

.login-form-panel__title {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 8px;
}

.login-form-panel__subtitle {
  font-size: var(--text-base);
  color: var(--color-text-light);
}

/* ==========================================================================
   Login Form
   ========================================================================== */

.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login-form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.login-form__checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.login-form__checkbox input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
}

.login-form__checkbox-label {
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

.login-form__link {
  font-size: var(--text-sm);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.login-form__link:hover {
  text-decoration: underline;
}

.login-form__footer {
  text-align: center;
  margin-top: 24px;
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

.login-form__footer-label {
  margin-bottom: 12px;
}

.login-form__register-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-form__register-link {
  display: block;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}

.login-form__register-link:hover {
  background: var(--color-bg-section);
  border-color: var(--color-primary);
}

.login-form__register-link--invest {
  color: var(--color-invest);
}

.login-form__register-link--invest:hover {
  border-color: var(--color-invest);
}

/* Success state */
.login-success {
  text-align: center;
  padding: 32px 0;
}

.login-success__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #f0fdf4;
  color: var(--color-invest);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.login-success__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 12px;
}

.login-success__text {
  font-size: var(--text-base);
  color: var(--color-text-light);
  line-height: 1.6;
}

/* ==========================================================================
   Right Panel - Info
   ========================================================================== */

.login-info-panel {
  flex: 5;
  display: flex;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, #ffffff 0%, transparent 80px),
    linear-gradient(135deg, #f3eeff 0%, #e8fffe 40%, #f3eeff 100%);
}

@media (min-width: 1024px) {
  .login-info-panel {
    background: linear-gradient(135deg, #f3eeff 0%, #e8fffe 40%, #f3eeff 100%);
  }
}

/* Canvas-based gradient background */
.login-info-panel--canvas {
  background: transparent;
}

.login-info-panel--canvas .mesh-gradient {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Hide CSS pseudo-element gradients when using canvas */
.login-info-panel--canvas::before,
.login-info-panel--canvas::after {
  display: none;
}

/* Hide CSS orbs when using canvas */
.login-info-panel--canvas .login-info-panel__orb {
  display: none;
}

/* Ensure content is above canvas */
.login-info-panel--canvas .login-info-panel__content {
  z-index: 2;
}

/* Hero-style gradient animation background - Private Borrower theme (purple → cyan) */
.login-info-panel::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 130%;
  height: 160%;
  background: radial-gradient(
      ellipse 70% 60% at 10% 15%,
      rgba(153, 102, 255, 0.9) 0%,
      rgba(153, 102, 255, 0.5) 30%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 55% 50% at 85% 10%,
      rgba(17, 239, 227, 0.9) 0%,
      rgba(17, 239, 227, 0.4) 35%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 60% 55% at 55% 35%,
      rgba(153, 102, 255, 0.6) 0%,
      rgba(153, 102, 255, 0.25) 40%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 65% 55% at 80% 70%,
      rgba(17, 239, 227, 0.85) 0%,
      rgba(17, 239, 227, 0.35) 35%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 55% 50% at 15% 75%,
      rgba(17, 239, 227, 0.7) 0%,
      rgba(17, 239, 227, 0.3) 40%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 40% 45% at 95% 45%,
      rgba(153, 102, 255, 0.6) 0%,
      transparent 50%
    );
  transform: rotate(-5deg);
  animation: heroGradientMove 25s ease-in-out infinite;
  z-index: 0;
  filter: blur(50px);
}

.login-info-panel::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to bottom, transparent, #ffffff);
  z-index: 2;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .login-info-panel::after {
    display: none;
  }
}

.login-info-panel__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  z-index: 0;
  pointer-events: none;
}

.login-info-panel__orb--1 {
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle,
    rgba(153, 102, 255, 0.6) 0%,
    rgba(153, 102, 255, 0.3) 35%,
    transparent 65%
  );
  top: -100px;
  right: -100px;
  animation: heroOrbFloat1 30s ease-in-out infinite;
}

.login-info-panel__orb--2 {
  width: 300px;
  height: 300px;
  background: radial-gradient(
    circle,
    rgba(17, 239, 227, 0.6) 0%,
    rgba(17, 239, 227, 0.3) 40%,
    transparent 65%
  );
  bottom: -100px;
  left: -100px;
  animation: heroOrbFloat2 35s ease-in-out infinite;
}

.login-info-panel__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 32px 24px 48px;
  z-index: 1;
  /* Glassmorphism effect */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

@media (min-width: 1024px) {
  .login-info-panel__content {
    height: auto;
    padding: 48px;
    margin: auto;
  }
}

.login-info-panel__header {
  text-align: center;
  margin-bottom: 32px;
  padding-top: 48px;
}

@media (min-width: 1024px) {
  .login-info-panel__header {
    padding-top: 0;
  }
}

.login-info-panel__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(153, 102, 255, 0.2) 0%, rgba(17, 239, 227, 0.2) 100%);
  border-radius: 16px;
  color: var(--color-text);
}

.login-info-panel__icon svg {
  width: 32px;
  height: 32px;
}

.login-info-panel__welcome {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.login-info-panel__title {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-text);
  margin: 0;
}

.login-benefits {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 48px;
}

.login-benefits__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.login-benefits__icon {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.login-benefits__text {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.5;
  white-space: pre-line;
}

/* Support Section */
.login-support {
  padding-top: 32px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.login-support__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}

.login-support__text {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  margin-bottom: 16px;
}

.login-support__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login-support__link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--duration-fast) var(--ease-out);
}

.login-support__link:hover {
  color: var(--color-primary);
}

.login-support__link svg {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   Password Reset Step Numbers
   ========================================================================== */

.password-reset__step-number {
  width: 24px;
  height: 24px;
  min-width: 24px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-white);
}

/* ==========================================================================
   Agent Registration — Password Toggle
   ========================================================================== */

.agent-reg__password-wrapper {
  position: relative;
}

.agent-reg__password-wrapper .form-input {
  padding-right: 48px;
}

.agent-reg__toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--color-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--duration-fast) var(--ease-out);
}

.agent-reg__toggle-password:hover {
  color: var(--color-text);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1023px) {
  .login-info-panel__content {
    margin: 48px auto;
  }
}

@media (max-width: 640px) {
  .login-form-panel {
    padding: 24px;
  }

  .login-types {
    grid-template-columns: 1fr;
  }

  .login-form__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* blocks/onboarding.css */
/* ==========================================================================
   Investor Onboarding Page Styles
   ========================================================================== */

.onboarding-page {
  min-height: 100vh;
  display: flex;
}

/* ==========================================================================
   Left Panel - Form
   ========================================================================== */

.onboarding-form-panel {
  flex: 7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px;
  background: var(--color-bg-section);
}

.onboarding-form-panel__inner {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}

.onboarding-form-panel__logo {
  display: block;
  margin-bottom: 32px;
  text-align: center;
}

.onboarding-form-panel__logo-img {
  height: 32px;
  width: auto;
  display: block;
  margin: 0 auto;
}

.onboarding-form-panel__header {
  text-align: center;
  margin-bottom: 32px;
}

.onboarding-form-panel__title {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 8px;
  line-height: 1.3;
}

.onboarding-form-panel__subtitle {
  font-size: var(--text-base);
  color: var(--color-text-light);
}

/* ==========================================================================
   Investor Type Cards
   ========================================================================== */

.onboarding-types {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.onboarding-type-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  text-align: left;
  width: 100%;
}

.onboarding-type-card:hover {
  border-color: #00d924;
  box-shadow: var(--shadow-card);
}

.onboarding-type-card--selected {
  border-color: #00d924;
  background: rgba(0, 217, 36, 0.03);
  box-shadow: 0 0 0 3px rgba(0, 217, 36, 0.1);
}

/* Private Investor icon - Light yellow/green */
.onboarding-type-card__icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: linear-gradient(135deg, #fef9c3 0%, #bbf7d0 100%);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
}

.onboarding-type-card__icon svg {
  width: 24px;
  height: 24px;
}

/* Institutional Investor icon - Light orange/green */
.onboarding-type-card__icon--institutional {
  background: linear-gradient(135deg, #fed7aa 0%, #bbf7d0 100%);
  color: var(--color-text);
}

.onboarding-type-card__content {
  flex: 1;
}

.onboarding-type-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 6px;
}

.onboarding-type-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  line-height: 1.5;
  margin: 0;
}

.onboarding-type-card__check {
  width: 24px;
  height: 24px;
  min-width: 24px;
  color: var(--color-border);
  transition: color var(--duration-fast) var(--ease-out);
}

.onboarding-type-card__check svg {
  width: 24px;
  height: 24px;
}

.onboarding-type-card--selected .onboarding-type-card__check {
  color: #00d924;
}

/* ==========================================================================
   Registration Form
   ========================================================================== */

.onboarding-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
}

.onboarding-form__checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.onboarding-form__checkbox input {
  width: 18px;
  height: 18px;
  accent-color: #00d924;
  cursor: pointer;
}

.onboarding-form__checkbox-label {
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

/* ==========================================================================
   Note and Footer
   ========================================================================== */

.onboarding-note {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  text-align: center;
  margin-bottom: 24px;
  margin-top: 24px;
}

.onboarding-terms {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  text-align: center;
  margin-top: 24px;
}

.onboarding-terms a {
  color: #00a31d;
  text-decoration: none;
  font-weight: 500;
}

.onboarding-terms a:hover {
  text-decoration: underline;
}

.onboarding-login {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  text-align: center;
  margin-top: 16px;
}

.onboarding-login a {
  color: #00a31d;
  font-weight: 600;
  text-decoration: none;
}

.onboarding-login a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Right Panel - Info
   ========================================================================== */

.onboarding-info-panel {
  flex: 5;
  display: none;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #fffde8 0%, #e8fff0 50%, #fffde8 100%);
}

/* Hero-style gradient animation background - Investor theme (yellow/orange → green) */
.onboarding-info-panel::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 130%;
  height: 160%;
  background:
    radial-gradient(
      ellipse 80% 70% at 20% 20%,
      rgba(255, 216, 73, 0.95) 0%,
      rgba(255, 216, 73, 0.5) 35%,
      transparent 65%
    ),
    radial-gradient(
      ellipse 70% 60% at 80% 80%,
      rgba(0, 217, 36, 0.95) 0%,
      rgba(0, 217, 36, 0.5) 35%,
      transparent 65%
    ),
    radial-gradient(
      ellipse 60% 55% at 50% 50%,
      rgba(254, 149, 3, 0.5) 0%,
      rgba(0, 217, 36, 0.3) 50%,
      transparent 75%
    );
  transform: rotate(-5deg);
  animation: heroGradientMove 20s ease-in-out infinite;
  z-index: 0;
  filter: blur(45px);
}

.onboarding-info-panel__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}

.onboarding-info-panel__orb--1 {
  width: 450px;
  height: 450px;
  background: radial-gradient(
    circle,
    rgba(255, 216, 73, 0.8) 0%,
    rgba(255, 216, 73, 0.4) 35%,
    transparent 60%
  );
  top: -120px;
  right: -120px;
  animation: heroOrbFloat1 25s ease-in-out infinite;
}

.onboarding-info-panel__orb--2 {
  width: 350px;
  height: 350px;
  background: radial-gradient(
    circle,
    rgba(0, 217, 36, 0.8) 0%,
    rgba(0, 217, 36, 0.4) 40%,
    transparent 60%
  );
  bottom: -120px;
  left: -120px;
  animation: heroOrbFloat2 30s ease-in-out infinite;
}

.onboarding-info-panel__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 440px;
  margin: auto;
  padding: 48px;
  z-index: 1;
  /* Premium Glassmorphism */
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.5) 100%
  );
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.02),
    0 12px 24px rgba(0, 0, 0, 0.04),
    0 24px 48px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

/* Top shine/gloss effect */
.onboarding-info-panel__content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.15) 40%,
    transparent 100%
  );
  border-radius: 28px 28px 0 0;
  pointer-events: none;
}

/* Subtle inner border highlight */
.onboarding-info-panel__content::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border-radius: 27px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

/* Decorative icon */
.onboarding-info-panel__content .onboarding-info-panel__icon {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(0, 217, 36, 0.15) 0%, rgba(255, 216, 73, 0.15) 100%);
  border-radius: 18px;
  color: #00a31d;
  box-shadow:
    0 4px 12px rgba(0, 217, 36, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.onboarding-info-panel__icon svg {
  width: 32px;
  height: 32px;
}

.onboarding-info-panel__title {
  position: relative;
  z-index: 1;
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 16px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.onboarding-info-panel__subtitle {
  position: relative;
  z-index: 1;
  font-size: var(--text-xl);
  color: var(--color-text-light);
  margin-bottom: 48px;
  line-height: 1.5;
}

/* Support Section */
.onboarding-support {
  position: relative;
  z-index: 1;
  padding-top: 32px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.onboarding-support__text {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.6;
}

.onboarding-support__text a {
  color: #00a31d;
  font-weight: 700;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.onboarding-support__text a:hover {
  color: #00d924;
  text-decoration: underline;
}

/* Subtle floating animation */
@keyframes glassFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 1024px) {
  .onboarding-info-panel {
    display: flex;
  }

  .onboarding-info-panel__content {
    animation: glassFloat 6s ease-in-out infinite;
  }
}

@media (max-width: 640px) {
  .onboarding-form-panel {
    padding: 24px;
  }

  .onboarding-form-panel__title {
    font-size: var(--text-xl);
  }

  .onboarding-type-card {
    flex-direction: column;
    text-align: center;
  }

  .onboarding-type-card__icon {
    margin: 0 auto;
  }

  .onboarding-type-card__check {
    position: absolute;
    top: 12px;
    right: 12px;
  }

  .onboarding-type-card {
    position: relative;
  }
}

/* blocks/loan-apply.css */
/* ==========================================================================
   Loan Application Page Styles
   ========================================================================== */

.loan-apply {
  position: relative;
  min-height: 100vh;
  padding: 120px 20px 80px;
  isolation: isolate;
}

.loan-apply__container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/* Ensure all content is above the animated background */
.loan-apply > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Form Card - Frosted Glass Effect
   ========================================================================== */

.loan-apply__form-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(32px) saturate(1.3);
  -webkit-backdrop-filter: blur(32px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border-radius: 24px;
  padding: var(--space-8);
  text-align: center;
}

/* ==========================================================================
   Badge
   ========================================================================== */

.loan-apply__badge {
  display: inline-block;
  padding: var(--space-2) var(--space-5);
  background: transparent;
  border: 1px solid var(--color-gray-dark);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

/* ==========================================================================
   Title
   ========================================================================== */

.loan-apply__title {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--space-8);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* When subtitle follows title, reduce title margin */
.loan-apply__title:has(+ .loan-apply__subtitle) {
  margin-bottom: var(--space-4);
}

.loan-apply__subtitle {
  font-size: var(--text-base);
  color: var(--color-gray-dark);
  line-height: 1.6;
  margin-bottom: var(--space-8);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   Form
   ========================================================================== */

.loan-apply__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: left;
}

/* ==========================================================================
   Two Column Layout
   ========================================================================== */

.loan-apply__columns {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.loan-apply__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.loan-apply__column--right {
  display: flex;
  flex-direction: column;
}

.loan-apply__column--right .loan-apply__rates {
  margin-top: 0;
}

@media (min-width: 800px) {
  .loan-apply__columns {
    flex-direction: row;
    gap: var(--space-8);
  }

  .loan-apply__column {
    flex: 1;
  }

  .loan-apply__column--left {
    flex: 1.1;
  }

  .loan-apply__column--right {
    flex: 0.9;
    justify-content: space-between;
  }
}

.loan-apply__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.loan-apply__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.01em;
  padding-left: var(--space-1);
}

.loan-apply__required {
  color: var(--color-error);
  font-weight: 800;
}

.loan-apply__input {
  width: 100%;
  padding: var(--space-2) var(--space-5);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  color: var(--color-text);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.02),
    inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

.loan-apply__input::placeholder {
  color: var(--color-gray-light);
  font-weight: 400;
}

.loan-apply__input:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 181, 206, 0.3);
}

.loan-apply__input:focus {
  outline: none;
  background: var(--color-white);
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(0, 181, 206, 0.15), 0 2px 8px rgba(0, 0, 0, 0.04);
}

.loan-apply__hint {
  font-size: var(--text-xs);
  color: var(--color-gray-dark);
  line-height: 1.5;
  margin: var(--space-2) 0;
}

/* ==========================================================================
   Rates Table
   ========================================================================== */

.loan-apply__rates {
  margin-top: var(--space-6);
  margin-bottom: var(--space-4);
}

.loan-apply__rates-header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: var(--space-3);
}

.loan-apply__rates-col {
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: center;
  min-width: 80px;
}

.loan-apply__rates-col--from {
  color: var(--color-text);
}

.loan-apply__rates-col--to {
  color: var(--color-text);
}

.loan-apply__rates-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  align-items: center;
}

.loan-apply__rates-label {
  font-size: var(--text-sm);
  color: var(--color-gray-dark);
}

.loan-apply__rates-value {
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  min-width: 80px;
}

.loan-apply__rates-value--from {
  color: var(--color-text);
}

.loan-apply__rates-value--to {
  color: var(--color-text);
}

.loan-apply__rates-value--center {
  text-align: center;
  grid-column: 2 / -1;
}

/* Single-value layout (fixed rate — no from/to columns) */
.loan-apply__rates-row--single-value {
  grid-template-columns: 1fr auto;
}

/* Effective rate row — highlighted */
.loan-apply__rates-row--effective {
  font-weight: 600;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: var(--space-3);
  margin-top: var(--space-2);
}

.loan-apply__rates-row--effective .loan-apply__rates-label {
  font-weight: 600;
  color: var(--color-text);
}

/* KKG warning */
.loan-apply__rates-warning {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: rgba(214, 54, 111, 0.08);
  border: 1px solid rgba(214, 54, 111, 0.2);
  border-radius: var(--radius-md);
  color: var(--color-borrow);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.5;
}

/* ==========================================================================
   Disclaimer
   ========================================================================== */

.loan-apply__disclaimer {
  font-size: var(--text-2xs);
  color: var(--color-gray-dark);
  line-height: 1.6;
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-md);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 1px 3px rgba(0, 0, 0, 0.03);
}

.loan-apply__kkg-disclaimer {
  font-size: var(--text-2xs);
  color: var(--color-gray);
  line-height: 1.6;
  margin: calc(var(--space-4) * -0.5) 0 var(--space-4);
  font-style: italic;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.loan-apply__footer {
  margin-top: var(--space-3);
}

.loan-apply__footer-text {
  font-size: var(--text-sm);
  color: var(--color-gray-dark);
  margin-bottom: var(--space-2);
  line-height: 1.5;
}

.loan-apply__footer-text:last-child {
  margin-bottom: 0;
}

.loan-apply__footer-link {
  color: var(--color-secondary);
  text-decoration: none;
  font-weight: 500;
  transition:
    color var(--duration-fast) var(--ease-out);
}

.loan-apply__footer-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ==========================================================================
   Phone Number
   ========================================================================== */

.loan-apply__phone {
  font-size: var(--text-sm);
  color: var(--color-gray-dark);
  margin-bottom: var(--space-6);
}

/* ==========================================================================
   Toggle Group (for Purpose/Usage selection)
   ========================================================================== */

.loan-apply__toggle-group {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.loan-apply__toggle {
  flex: 1;
  min-width: 140px;
  padding: var(--space-2) var(--space-4);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-gray-dark);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.loan-apply__toggle--active {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Radio indicator inside toggle */
.loan-apply__radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid currentColor;
  flex-shrink: 0;
  position: relative;
  opacity: 0.5;
}

.loan-apply__toggle--active .loan-apply__radio {
  opacity: 1;
}

.loan-apply__toggle--active .loan-apply__radio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* ==========================================================================
   Select Dropdown
   ========================================================================== */

.loan-apply__select {
  width: 100%;
  padding: var(--space-2) var(--space-5);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  color: var(--color-text);
  cursor: pointer;
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.02),
    inset 0 1px 2px rgba(255, 255, 255, 0.8);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.loan-apply__select:hover {
  background-color: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 181, 206, 0.3);
}

.loan-apply__select:focus {
  outline: none;
  background-color: var(--color-white);
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(0, 181, 206, 0.15), 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   Form Validation
   ========================================================================== */

.loan-apply__input--error,
.loan-apply__select.loan-apply__input--error {
  border-color: var(--color-error);
  background: rgba(255, 245, 245, 0.9);
}

.loan-apply__input--error:focus,
.loan-apply__select.loan-apply__input--error:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.loan-apply__field-error {
  font-size: var(--text-xs);
  color: var(--color-error);
  margin-top: var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* ==========================================================================
   Warning Box
   ========================================================================== */

.loan-apply__warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: var(--radius-md);
  margin: var(--space-4) 0;
}

.loan-apply__warning svg {
  flex-shrink: 0;
  color: var(--color-warning);
}

.loan-apply__warning span {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.5;
}

/* ==========================================================================
   Mortgage-specific Rates Styling
   ========================================================================== */

.loan-apply__rates--mortgage {
  background: rgba(255, 255, 255, 0.5);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.loan-apply__rates--mortgage .loan-apply__rates-row {
  grid-template-columns: 1fr auto;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  padding: var(--space-3) 0;
}

.loan-apply__rates--mortgage .loan-apply__rates-row:last-child {
  border-bottom: none;
}

.loan-apply__rates-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.loan-apply__rates-row--highlight {
  background: rgba(0, 181, 206, 0.05);
  border-radius: var(--radius-md);
}

.loan-apply__rates-value--large {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-primary);
}

.loan-apply__rates-value--warning {
  color: var(--color-error);
}

.loan-apply__rates-value--caution {
  color: var(--color-warning);
}

/* ==========================================================================
   Requirements Section
   ========================================================================== */

.loan-apply__requirements {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.loan-apply__requirements-title {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.loan-apply__requirements-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.loan-apply__requirements-list li {
  font-size: var(--text-xs);
  color: var(--color-gray-dark);
  padding-left: var(--space-4);
  position: relative;
  line-height: 1.5;
}

.loan-apply__requirements-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}

/* ==========================================================================
   Success State
   ========================================================================== */

.loan-apply__form-card--success {
  text-align: center;
  padding: var(--space-12) var(--space-8);
}

.loan-apply__success-icon {
  color: var(--color-success);
  margin-bottom: var(--space-6);
}

.loan-apply__success-icon svg {
  width: 80px;
  height: 80px;
}

.loan-apply__success-title {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.loan-apply__success-text {
  font-size: var(--text-base);
  color: var(--color-gray-dark);
  margin-bottom: var(--space-8);
  line-height: 1.6;
}

/* ==========================================================================
   Private Loan Theme (Privatdarlehen) - Purple #a78bfa → Cyan #22d3ee
   ========================================================================== */

.gradient-hero--privateloan {
  background: linear-gradient(135deg, #f3e8ff 0%, #e0f7fa 40%, #f3e8ff 100%);
}

.gradient-hero--privateloan::before {
  background:
    radial-gradient(
      ellipse 70% 60% at 10% 15%,
      rgba(167, 139, 250, 0.9) 0%,
      rgba(167, 139, 250, 0.5) 30%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 55% 50% at 85% 10%,
      rgba(34, 211, 238, 0.9) 0%,
      rgba(34, 211, 238, 0.4) 35%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 60% 55% at 55% 35%,
      rgba(139, 92, 246, 0.6) 0%,
      rgba(139, 92, 246, 0.25) 40%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 65% 55% at 80% 70%,
      rgba(34, 211, 238, 0.85) 0%,
      rgba(34, 211, 238, 0.35) 35%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 55% 50% at 15% 75%,
      rgba(34, 211, 238, 0.7) 0%,
      rgba(34, 211, 238, 0.3) 40%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 40% 45% at 95% 45%,
      rgba(167, 139, 250, 0.6) 0%,
      transparent 50%
    );
}

.gradient-hero--privateloan .hero__orb--1 {
  background: radial-gradient(
    circle,
    rgba(167, 139, 250, 0.95) 0%,
    rgba(167, 139, 250, 0.5) 35%,
    transparent 65%
  );
}

.gradient-hero--privateloan .hero__orb--2 {
  background: radial-gradient(
    circle,
    rgba(34, 211, 238, 0.9) 0%,
    rgba(34, 211, 238, 0.45) 40%,
    transparent 65%
  );
}

.gradient-hero--privateloan .hero__orb--3 {
  background: radial-gradient(
    circle,
    rgba(139, 92, 246, 0.8) 0%,
    rgba(139, 92, 246, 0.4) 35%,
    transparent 65%
  );
}

.gradient-hero--privateloan .hero__orb--4 {
  background: radial-gradient(
    circle,
    rgba(34, 211, 238, 0.75) 0%,
    rgba(34, 211, 238, 0.35) 40%,
    transparent 65%
  );
}

.gradient-hero--privateloan .loan-apply__label {
  color: var(--color-accent-private);
}

/* ==========================================================================
   SME Theme (KMU-Kredit) - #FA4B8C → #11EFE3
   ========================================================================== */

.gradient-hero--sme {
  background: linear-gradient(135deg, #fff0f5 0%, #e8fffe 40%, #fff0f5 100%);
}

.gradient-hero--sme::before {
  background:
    radial-gradient(
      ellipse 70% 60% at 10% 15%,
      rgba(250, 75, 140, 0.9) 0%,
      rgba(250, 75, 140, 0.5) 30%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 55% 50% at 85% 10%,
      rgba(17, 239, 227, 0.9) 0%,
      rgba(17, 239, 227, 0.4) 35%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 60% 55% at 55% 35%,
      rgba(250, 75, 140, 0.6) 0%,
      rgba(250, 75, 140, 0.25) 40%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 65% 55% at 80% 70%,
      rgba(17, 239, 227, 0.85) 0%,
      rgba(17, 239, 227, 0.35) 35%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 55% 50% at 15% 75%,
      rgba(17, 239, 227, 0.7) 0%,
      rgba(17, 239, 227, 0.3) 40%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 40% 45% at 95% 45%,
      rgba(250, 75, 140, 0.6) 0%,
      transparent 50%
    );
}

.gradient-hero--sme .hero__orb--1 {
  background: radial-gradient(
    circle,
    rgba(250, 75, 140, 0.95) 0%,
    rgba(250, 75, 140, 0.5) 35%,
    transparent 65%
  );
}

.gradient-hero--sme .hero__orb--2 {
  background: radial-gradient(
    circle,
    rgba(17, 239, 227, 0.9) 0%,
    rgba(17, 239, 227, 0.45) 40%,
    transparent 65%
  );
}

.gradient-hero--sme .hero__orb--3 {
  background: radial-gradient(
    circle,
    rgba(250, 75, 140, 0.8) 0%,
    rgba(250, 75, 140, 0.4) 35%,
    transparent 65%
  );
}

.gradient-hero--sme .hero__orb--4 {
  background: radial-gradient(
    circle,
    rgba(17, 239, 227, 0.75) 0%,
    rgba(17, 239, 227, 0.35) 40%,
    transparent 65%
  );
}

/* ==========================================================================
   Property Theme (Hypothek) - #0153C6 → #11EFE3
   ========================================================================== */

.gradient-hero--property {
  background: linear-gradient(135deg, #e8f4ff 0%, #e8fffe 40%, #e8f4ff 100%);
}

.gradient-hero--property::before {
  background:
    radial-gradient(
      ellipse 70% 60% at 10% 15%,
      rgba(1, 83, 198, 0.9) 0%,
      rgba(1, 83, 198, 0.5) 30%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 55% 50% at 85% 10%,
      rgba(17, 239, 227, 0.9) 0%,
      rgba(17, 239, 227, 0.4) 35%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 60% 55% at 55% 35%,
      rgba(1, 83, 198, 0.6) 0%,
      rgba(1, 83, 198, 0.25) 40%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 65% 55% at 80% 70%,
      rgba(17, 239, 227, 0.85) 0%,
      rgba(17, 239, 227, 0.35) 35%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 55% 50% at 15% 75%,
      rgba(17, 239, 227, 0.7) 0%,
      rgba(17, 239, 227, 0.3) 40%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 40% 45% at 95% 45%,
      rgba(1, 83, 198, 0.6) 0%,
      transparent 50%
    );
}

.gradient-hero--property .hero__orb--1 {
  background: radial-gradient(
    circle,
    rgba(1, 83, 198, 0.95) 0%,
    rgba(1, 83, 198, 0.5) 35%,
    transparent 65%
  );
}

.gradient-hero--property .hero__orb--2 {
  background: radial-gradient(
    circle,
    rgba(17, 239, 227, 0.9) 0%,
    rgba(17, 239, 227, 0.45) 40%,
    transparent 65%
  );
}

.gradient-hero--property .hero__orb--3 {
  background: radial-gradient(
    circle,
    rgba(1, 83, 198, 0.8) 0%,
    rgba(1, 83, 198, 0.4) 35%,
    transparent 65%
  );
}

.gradient-hero--property .hero__orb--4 {
  background: radial-gradient(
    circle,
    rgba(17, 239, 227, 0.75) 0%,
    rgba(17, 239, 227, 0.35) 40%,
    transparent 65%
  );
}

/* ==========================================================================
   Themed Label Colors (matching loan-card colors)
   ========================================================================== */

.gradient-hero--sme .loan-apply__label {
  color: var(--color-accent-sme);
}

.gradient-hero--property .loan-apply__label {
  color: var(--color-accent-hypo);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .loan-apply {
    padding: 100px 16px 60px;
    min-height: auto;
  }

  .loan-apply__form-card {
    padding: var(--space-6);
    border-radius: 20px;
  }

  .loan-apply__title {
    margin-bottom: var(--space-6);
  }

  .loan-apply__rates-header,
  .loan-apply__rates-row {
    gap: var(--space-2);
  }

  .loan-apply__rates-col,
  .loan-apply__rates-value {
    min-width: 60px;
    font-size: var(--text-xs);
  }
}

@media (max-width: 480px) {
  .loan-apply {
    padding: 80px 12px 40px;
  }

  .loan-apply__form-card {
    padding: var(--space-5);
    border-radius: 16px;
  }

  .loan-apply__badge {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-4);
  }

  .loan-apply__input {
    padding: var(--space-3) var(--space-4);
  }

  .loan-apply__submit {
    padding: var(--space-4) var(--space-6);
  }
}

/* Sichttest Filipe 25.09.2026: der KKG-Hinweis (hellgrau, kursiv) und die
   cyanfarbenen Links waren auf dem tuerkisen Verlauf kaum lesbar. */
.loan-apply__kkg-disclaimer {
  color: var(--color-ink-80);
  font-style: normal;
  font-size: var(--text-xs);
}

.loan-apply__footer-text {
  color: var(--color-ink-80);
}

.loan-apply__footer-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

/* blocks/partner-landing.css */
/* ==========================================================================
   Partnerseite — White-Label-Kreditantrag
   ==========================================================================

   Die Seite trägt das Logo des Partners, nicht unseres. Sie bleibt deshalb
   bewusst neutral: Flächen, Linien und Schrift kommen aus den Tokens, nicht
   aus einer Zielgruppenfarbe (CAS-2983 §7.4).

   KEIN PARTNER-CD. Die Insel setzt --partner-primary, --partner-secondary
   und --partner-accent weiterhin per Inline-Style aus `p.colors` der
   API-Antwort. Diese Werte bleiben absichtlich ungenutzt — so steht es in
   CAS-2983. Das Partnerlogo in der Kopfzeile trägt die Wiedererkennung,
   das Aussehen der Seite bleibt Cashare.

   Zwei Gründe, es dabei zu belassen:

   - Eine Farbe aus einer fremden API kann jeden Kontrastwert annehmen.
     Sobald sie eine Fläche oder eine Linie färbt, hängt die Lesbarkeit an
     einem Wert, den wir nicht kontrollieren.
   - Der Kreditvertrag läuft über Cashare, die Kopfzeile sagt das mit
     "Powered by". Eine durchgefärbte Seite würde etwas anderes behaupten.

   Der Absende-Button trägt aus demselben Grund die Cashare-CTA-Farbe.
   ========================================================================== */

.partner-branded {
  /*
   * Die Insel überschreibt diese drei per Inline-Style. Sie stehen hier nur
   * als Rückfall, damit sie definiert sind — gelesen werden sie nicht.
   */
  --partner-primary: var(--color-primary);
  --partner-secondary: var(--color-secondary);
  --partner-accent: var(--color-secondary);
}

/* ==========================================================================
   Seitenfläche — flach, ohne Glas und ohne Orbs
   ========================================================================== */

.partner-branded.loan-apply {
  padding-top: 0;
  background: var(--color-light-4);
  min-height: 100vh;
}

.partner-branded.gradient-hero--partner {
  background: var(--color-light-4);
}

.partner-branded.gradient-hero--partner::before,
.partner-branded.gradient-hero::before {
  display: none;
}

.partner-branded .hero__orb,
.partner-branded .hero__grid-lines,
.partner-branded .hero__shine {
  display: none;
}

/* ==========================================================================
   Kopfzeile — weisse Leiste über die volle Breite
   ========================================================================== */

.partner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.partner-header--top {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-light-3);
  padding: var(--space-4) var(--space-6);
  margin-bottom: 0;
  /* Volle Breite, aus dem Container ausgebrochen */
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  position: relative;
  z-index: 10;
  box-sizing: border-box;
}

.partner-header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.partner-header__logo img {
  height: 40px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

.partner-header--top .partner-header__logo img {
  height: 48px;
  max-width: 220px;
}

.partner-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.partner-header__powered-by {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-ink-60);
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.partner-header__powered-by:hover {
  opacity: 0.8;
}

.partner-header__powered-by img {
  height: 20px;
  width: auto;
}

.partner-header__powered-by span {
  white-space: nowrap;
}

.partner-header--top .partner-header__powered-by {
  background: var(--color-white);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-light-3);
}

.partner-header--top .partner-header__powered-by img {
  height: 22px;
}

/* ==========================================================================
   Karte
   ========================================================================== */

.partner-branded .loan-apply__form-card {
  position: relative;
  overflow: hidden;
  background: var(--color-white);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
  text-align: center;
}

/* Akzentlinie über der Karte — Markenfarbe, nicht Partnerfarbe. */
.partner-branded .loan-apply__form-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--color-secondary);
}

/* ==========================================================================
   Badge — helle Markenfläche mit Navy-Schrift
   ========================================================================== */

.partner-branded .loan-apply__badge {
  display: inline-block;
  background: var(--color-tint-primary);
  border: 1px solid var(--color-light-2);
  border-radius: var(--radius-full);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: var(--space-2) var(--space-5);
  margin-bottom: var(--space-5);
}

/* ==========================================================================
   Titel
   ========================================================================== */

.partner-branded .loan-apply__title {
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-6);
  letter-spacing: -0.02em;
}

/* ==========================================================================
   Formular
   ========================================================================== */

.partner-branded .loan-apply__label {
  color: var(--color-ink-80);
  font-weight: 600;
}

.partner-branded .loan-apply__input {
  background: var(--color-white);
  border: 1px solid var(--color-light-2);
  border-radius: var(--radius-input);
  box-shadow: none;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.partner-branded .loan-apply__input:hover {
  background: var(--color-white);
  border-color: var(--color-light-1);
}

/* Der Fokusring bleibt beim Token: er muss 3:1 zur Fläche halten, was eine
   beliebige Partnerfarbe nicht garantieren kann. */
.partner-branded .loan-apply__input:focus {
  background: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 115, 153, 0.18);
}

.partner-branded .loan-apply__input--error {
  border-color: var(--color-error);
  background: var(--color-white);
}

.partner-branded .loan-apply__input--error:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(250, 137, 107, 0.25);
}

/* ==========================================================================
   Zinstabelle
   ========================================================================== */

.partner-branded .loan-apply__rates {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.partner-branded .loan-apply__rates-header {
  border-bottom: 1px solid var(--color-light-2);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-2);
}

.partner-branded .loan-apply__rates-row {
  border-bottom: 1px solid var(--color-light-3);
  padding: var(--space-2) 0;
}

.partner-branded .loan-apply__rates-row:last-child {
  border-bottom: none;
}

.partner-branded .loan-apply__rates-value {
  text-align: right;
}

/* ==========================================================================
   Hinweisfläche
   ========================================================================== */

.partner-branded .loan-apply__disclaimer {
  background: var(--color-light-4);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: none;
  font-size: var(--text-2xs);
  color: var(--color-ink-60);
  line-height: 1.6;
}

.partner-legal-notice {
  font-size: var(--text-2xs);
  color: var(--color-ink-70);
  font-weight: 600;
  line-height: 1.6;
  margin-top: var(--space-3);
}

/* ==========================================================================
   Absende-Button — Cashare-CTA, siehe Kopfkommentar
   ========================================================================== */

.partner-branded .btn--partner {
  width: 100%;
  height: 52px;
  background: var(--color-secondary);
  color: var(--color-text);
  border: none;
  border-radius: var(--radius-full);
  padding-inline: var(--space-6);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.partner-branded .btn--partner:hover {
  background: #00a3ba;
}

.partner-branded .btn--partner:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.partner-branded .btn--partner:active {
  transform: scale(0.99);
}

.partner-branded .btn--partner:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ==========================================================================
   Fussbereich der Karte
   ========================================================================== */

.partner-branded .loan-apply__footer {
  text-align: center;
  margin-top: var(--space-5);
}

.partner-branded .loan-apply__footer-text {
  font-size: var(--text-sm);
  color: var(--color-ink-60);
}

/* Der Login ist ein gewöhnlicher Link, kein Fehler — deshalb nicht rot. */
.partner-branded .loan-apply__footer-link--login,
.partner-branded .loan-apply__footer-link--terms {
  color: var(--color-primary);
  font-weight: 600;
}

.partner-branded .loan-apply__footer-link--login:hover,
.partner-branded .loan-apply__footer-link--terms:hover {
  color: var(--color-text);
}

/* ==========================================================================
   Datenweitergabe — rechtlicher Hinweis am Formularende
   ========================================================================== */

.loan-apply__data-disclaimer {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-light-3);
}

.loan-apply__data-disclaimer p {
  font-size: var(--text-xs);
  color: var(--color-ink-60);
  line-height: 1.6;
}

.loan-apply__data-disclaimer a {
  color: var(--color-primary);
  text-decoration: underline;
  font-weight: 500;
}

.loan-apply__data-disclaimer a:hover {
  color: var(--color-text);
}

/* ==========================================================================
   Partner-Hinweis mit Pflichtbestätigung (CAS-2110)
   ========================================================================== */

.partner-disclaimer {
  background: var(--color-tint-warning);
  border: 1px solid var(--color-border-warning);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  text-align: left;
}

.partner-disclaimer__title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent-warning);
  margin: 0 0 var(--space-2);
}

.partner-disclaimer__text {
  font-size: var(--text-xs);
  color: var(--color-ink-80);
  line-height: 1.6;
  margin: 0;
}

.partner-disclaimer__contact {
  font-size: var(--text-xs);
  color: var(--color-ink-80);
  margin: var(--space-2) 0 0;
}

.partner-disclaimer__contact a {
  color: var(--color-primary);
  text-decoration: underline;
  font-weight: 500;
}

.partner-disclaimer__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-ink-80);
  line-height: 1.5;
  cursor: pointer;
}

.partner-disclaimer__check input {
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--color-primary);
}

/* ==========================================================================
   Beschreibung
   ========================================================================== */

.partner-description {
  font-size: var(--text-base);
  color: var(--color-ink-70);
  text-align: center;
  max-width: 34rem;
  margin: 0 auto var(--space-6);
  line-height: 1.6;
}

/* ==========================================================================
   Fussnote
   ========================================================================== */

.partner-attribution {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-light-3);
  font-size: var(--text-xs);
  color: var(--color-ink-60);
}

.partner-attribution img {
  height: 16px;
  width: auto;
  opacity: 0.7;
}

.partner-attribution a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.partner-attribution a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Abstände
   ========================================================================== */

.partner-branded .loan-apply__container {
  padding-top: 0;
}

.partner-page__content {
  padding: var(--space-8) 0;
}

/* ==========================================================================
   Produktkatalog (CAS-2054)
   ========================================================================== */

.partner-catalog {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.partner-catalog__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-light-2);
  border-radius: var(--radius-input);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
  background-color: var(--color-white);
  text-align: left;
}

.partner-catalog__item:hover {
  border-color: var(--color-light-1);
}

.partner-catalog__item--selected {
  border-color: var(--color-primary);
  background-color: var(--color-tint-primary);
}

.partner-catalog__radio {
  margin: 0;
  accent-color: var(--color-primary);
}

.partner-catalog__name {
  flex: 1;
  font-weight: 500;
}

/* Preis in Textfarbe: eine beliebige Partnerfarbe als Schrift auf Weiss
   kann jeden Kontrastwert annehmen. */
.partner-catalog__price {
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-text);
}

.partner-catalog__amount {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink-60);
}

.partner-catalog__amount strong {
  color: var(--color-text);
}

.partner-catalog__empty {
  padding: var(--space-4);
  border: 1px dashed var(--color-light-2);
  border-radius: var(--radius-sm);
  color: var(--color-ink-60);
  text-align: center;
}

.partner-catalog__item--custom {
  border-style: dashed;
  color: var(--color-ink-60);
}

.partner-catalog__item--custom .partner-catalog__name {
  font-weight: 400;
  font-style: italic;
}

.partner-catalog__amount--editable {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ==========================================================================
   Schmale Fenster
   ========================================================================== */

@media (max-width: 800px) {
  .partner-branded .loan-apply__form-card {
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius-lg);
  }

  .partner-branded .loan-apply__title {
    font-size: 1.625rem;
  }
}

@media (max-width: 600px) {
  .partner-header--top {
    padding: var(--space-3) var(--space-4);
  }

  .partner-header {
    flex-direction: row;
    align-items: center;
  }

  .partner-header__logo img {
    height: 32px;
    max-width: 150px;
  }

  .partner-header__powered-by {
    font-size: var(--text-2xs);
  }

  .partner-header__powered-by img {
    height: 16px;
  }

  .partner-branded .loan-apply__form-card {
    padding: var(--space-5) var(--space-4);
  }

  .partner-branded .loan-apply__title {
    font-size: 1.5rem;
  }
}

/* blocks/process-steps.css */
/* ==========================================================================
   ProcessSteps Component
   Unified component for "How It Works" sections across loan & invest pages

   Karten wie überall auf den Unterseiten, Nummer auf getöntem Tile.
   Verbindungslinien und dunkle Kreisziffern sind entfallen (CAS-2983 §2.4);
   die Klasse --with-line bleibt im Markup gültig, malt aber nichts mehr.
   ========================================================================== */

.process-steps {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.process-steps__header {
  text-align: left;
  margin-bottom: 48px;
  width: 100%;
}

.process-steps__title {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin: 0;
}

.process-steps__grid {
  display: grid;
  gap: 24px;
  width: 100%;
}

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

.process-steps--4 .process-steps__grid {
  grid-template-columns: repeat(4, 1fr);
}

/* Kein Hover: die Schritte sind keine Links */
.process-steps__item {
  background: var(--color-white);
  border: 1px solid var(--color-light-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 32px;
}

.process-steps__number {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--world-tint, var(--color-tint-primary));
  color: var(--world-accent, var(--color-primary));
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-bottom: 20px;
}

.process-steps__item-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0 0 8px;
}

.process-steps__item-desc {
  font-size: 0.9375rem;
  color: var(--color-ink-60);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 1024px) {
  .process-steps__title {
    font-size: 2rem;
  }

  .process-steps--4 .process-steps__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .process-steps__header {
    margin-bottom: 32px;
  }

  .process-steps--3 .process-steps__grid,
  .process-steps--4 .process-steps__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .process-steps__item {
    padding: 24px;
  }
}

.process-step__link {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  transition: text-decoration-color var(--duration-fast) var(--ease-out);
}

.process-step__link:hover {
  text-decoration-color: var(--color-primary);
}

/* Schritte als echte Liste (NL-C3): Aufzählungszeichen und Einzug zurücksetzen */
.process-steps__grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   S2 (CAS-3120): Sticky-Story ab 1024 px — Vorlage docs/next-level/
   fix-s2-s3-s4/s2-process-story.css, angepasst an «Bewegung und Scroll»:
   Zeiten nur als Tokens, nur transform/opacity animiert (Vorlage: Breite,
   left und Schatten). Höhe bleibt kompakt. Bühne = Verlauf + Orbs in den
   Mesh-Tönen der Welt + Punktraster + Glaskarte. Unter 1024 px, ohne
   JavaScript und bei «Bewegung reduzieren» bleibt die gewohnte Liste;
   inaktive Schritte nie unter .3.
   ========================================================================== */

.process-steps__visual {
  display: none;
}

@media (min-width: 1024px) {
  .process-steps--story .process-steps__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }

  .process-steps--story .process-steps__grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* Schrittliste: aktiver Schritt mit Rahmen und Schatten in der Weltfarbe */
  .process-steps--story .process-steps__item {
    padding: 28px 32px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 20px;
    align-items: start;
    transition:
      opacity var(--duration-normal) var(--ease-out),
      border-color var(--duration-normal) var(--ease-out),
      box-shadow var(--duration-normal) var(--ease-out);
  }

  .process-steps--story .process-steps__number {
    grid-row: span 2;
    margin: 0;
    transition: var(--transition-colors);
  }

  .process-steps--story[data-enhanced] .process-steps__item:not(.is-active) {
    opacity: 0.35;
  }

  .process-steps--story .process-steps__item.is-active {
    border-color: color-mix(
      in srgb,
      var(--world-accent, var(--color-primary)) 25%,
      white
    );
    box-shadow: 0 16px 40px -18px
      color-mix(
        in srgb,
        var(--world-accent, var(--color-primary)) 45%,
        transparent
      );
  }

  .process-steps--story .process-steps__item.is-active .process-steps__number {
    background: var(--world-accent, var(--color-primary));
    color: var(--color-white);
  }

  /* Bühne */
  .process-steps--story .process-steps__visual {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 430px;
    padding: 28px;
    border-radius: 24px;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(
      135deg,
      var(--world-tint, var(--color-tint-primary)) 0%,
      var(--color-light-4) 60%,
      var(--world-mesh-2, var(--color-mesh-neutral-soft)) 100%
    );
  }

  .process-steps__orb {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
  }

  .process-steps__orb--1 {
    width: 300px;
    height: 300px;
    top: -110px;
    right: -80px;
    opacity: 0.45;
    background: var(--world-mesh-1, var(--color-mesh-neutral));
  }

  .process-steps__orb--2 {
    width: 240px;
    height: 240px;
    bottom: -90px;
    left: -60px;
    opacity: 0.5;
    background: var(--world-mesh-2, var(--color-mesh-neutral-soft));
  }

  .process-steps__dots-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(
      rgba(9, 17, 36, 0.07) 1px,
      transparent 1px
    );
    background-size: 18px 18px;
    mask-image: radial-gradient(
      ellipse 70% 70% at 60% 40%,
      #000,
      transparent 75%
    );
  }

  /* Kopf: «Schritt n von N» und Fortschrittspunkte */
  .process-steps__stage-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }

  .process-steps__stage-count {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ink-80);
  }

  .process-steps__progress {
    display: flex;
    gap: 6px;
  }

  /* Breite springt ohne Animation (nur Farbe blendet über) */
  .process-steps__progress > span {
    width: 10px;
    height: 6px;
    border-radius: 6px;
    background: rgba(9, 17, 36, 0.15);
    transition: background-color var(--duration-normal) var(--ease-out);
  }

  .process-steps__progress > span.is-past,
  .process-steps__progress > span.is-active {
    background: var(--world-accent, var(--color-primary));
  }

  .process-steps__progress > span.is-active {
    width: 28px;
  }

  .process-steps__cards {
    flex: 1;
    display: grid;
    place-items: center;
  }

  /* Glaskarte und Wechsel */
  .process-steps__card {
    grid-area: 1 / 1;
    width: min(360px, 100%);
    padding: 26px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow:
      0 30px 70px -24px
      color-mix(
        in srgb,
        var(--world-accent, var(--color-primary)) 40%,
        transparent
      ),
      0 2px 6px rgba(9, 17, 36, 0.04);
    display: flex;
    flex-direction: column;
    gap: 16px;
    opacity: 0;
    transform: translateY(28px) scale(0.97);
    transition:
      opacity var(--duration-slow) var(--ease-out),
      transform var(--duration-slower) var(--ease-out);
  }

  .process-steps__card.is-past {
    transform: translateY(-28px) scale(0.94);
  }

  .process-steps__card.is-active,
  .process-steps--story:not([data-enhanced]) .process-steps__card:first-child {
    opacity: 1;
    transform: none;
  }

  .process-steps__card-title {
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-text);
  }

  /* Grafik spielt mit, ausgelöst über .process-steps__card.is-active */
  .process-steps__card .pv {
    border-top: 0;
    padding-top: 0;
    gap: 12px;
  }

  /* Antrag: Schieberegler füllt sich (scaleX), Knopf wandert auf einer
     Schiene in Spurbreite (translateX) */
  .pv__track--slider {
    position: relative;
    overflow: visible;
  }

  .pv__track--slider > .pv__fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--world-accent, var(--color-primary));
    transform-origin: left;
    transform: scaleX(0.04);
    transition: transform var(--duration-slowest) var(--ease-out);
  }

  .pv__thumb-rail {
    position: absolute;
    inset: 0;
    transform: translateX(4%);
    transition: transform var(--duration-slowest) var(--ease-out);
  }

  .pv__thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    background: var(--color-white);
    box-shadow:
      0 0 0 2px var(--world-accent, var(--color-primary)),
      0 4px 10px rgba(0, 0, 0, 0.15);
  }

  .is-active .pv__track--slider > .pv__fill {
    transform: scaleX(0.42);
  }

  .is-active .pv__thumb-rail {
    transform: translateX(42%);
  }

  .pv__chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .pv__chips > span {
    padding: 9px 0;
    text-align: center;
    border-radius: 10px;
    font-weight: 700;
    border: 1px solid var(--color-light-2);
    transition: var(--transition-colors);
    transition-delay: var(--stagger-5);
  }

  .is-active .pv__chips > span:nth-child(2) {
    background: var(--world-accent, var(--color-primary));
    border-color: transparent;
    color: var(--color-white);
  }

  /* Prüfung: Rating-Box federt ein, Prüfzeilen fahren gestaffelt ein */
  .process-steps__card .pv__rating {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    font-size: 1.5rem;
    transform: scale(0.4);
    transition: transform var(--duration-slow) var(--ease-spring);
    transition-delay: var(--stagger-5);
  }

  .process-steps__card.is-active .pv__rating {
    transform: scale(1);
  }

  .process-steps__card .pv__row:not(.pv__row--head) {
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--color-light-4);
    opacity: 0;
    transform: translateX(-12px);
    transition:
      opacity var(--duration-normal) var(--ease-out),
      transform var(--duration-normal) var(--ease-out);
    transition-delay: calc(var(--stagger-2) + var(--i, 0) * var(--stagger-2));
  }

  .process-steps__card.is-active .pv__row {
    opacity: 1;
    transform: none;
  }

  /* Investieren: Balken füllt sich (scaleX), Anleger ploppen gestaffelt auf */
  .pv__fund {
    height: 10px;
    border-radius: 10px;
    background: var(--color-light-3);
    overflow: hidden;
  }

  .pv__fund > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
      90deg,
      var(--world-accent, var(--color-primary)),
      var(--color-secondary)
    );
    transform-origin: left;
    transform: scaleX(0);
    transition: transform var(--duration-slowest) var(--ease-out);
    transition-delay: var(--stagger-3);
  }

  .is-active .pv__fund > span {
    transform: scaleX(1);
  }

  .pv__avatars {
    display: flex;
    padding-left: 8px;
  }

  .pv__avatars > span {
    width: 32px;
    height: 32px;
    margin-left: -8px;
    border-radius: 50%;
    border: 2px solid var(--color-white);
    opacity: 0;
    transform: scale(0.4);
    transition:
      opacity var(--duration-normal) var(--ease-out),
      transform var(--duration-normal) var(--ease-spring);
    transition-delay: calc(var(--stagger-5) + var(--i, 0) * var(--stagger-2));
  }

  .pv__avatars > span:nth-child(1) {
    background: var(--color-accent-private);
  }

  .pv__avatars > span:nth-child(2) {
    background: var(--color-accent-sme);
  }

  .pv__avatars > span:nth-child(3) {
    background: var(--color-accent-hypo);
  }

  .pv__avatars > span:nth-child(4) {
    background: var(--color-accent-investing);
  }

  .pv__avatars > span:nth-child(5) {
    background: var(--color-primary);
  }

  .is-active .pv__avatars > span {
    opacity: 1;
    transform: none;
  }

  /* Auszahlung: Haken federt ein, Ring wächst (scale statt Schatten) */
  .process-steps__card .pv__done {
    position: relative;
    width: 72px;
    height: 72px;
    transform: scale(0.5);
    transition: transform var(--duration-slower) var(--ease-spring);
    transition-delay: var(--stagger-3);
  }

  .process-steps__card .pv__done::after {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    background: rgba(0, 217, 36, 0.18);
    z-index: -1;
    opacity: 0;
    transform: scale(0.7);
    transition:
      opacity var(--duration-slower) var(--ease-out),
      transform var(--duration-slower) var(--ease-out);
    transition-delay: var(--stagger-4);
  }

  .process-steps__card.is-active .pv__done {
    transform: none;
  }

  .process-steps__card.is-active .pv__done::after {
    opacity: 1;
    transform: none;
  }
}

/* Reduced motion: keine Übergänge, nur die aktive Karte ist sichtbar */
@media (prefers-reduced-motion: reduce) {
  .process-steps--story .process-steps__item,
  .process-steps__card,
  .process-steps__progress > span,
  .process-steps__card .pv *,
  .process-steps__card .pv__done::after {
    transition: none;
  }

  .process-steps__card.is-past {
    transform: none;
  }
}

/* Bild je Schritt (components/ProcessVisual.tsx): gezeichnete Oberfläche,
   Platzhalter-Balken statt Werten. Nur auf der Bühne ab 1024 px sichtbar. */
.pv {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--color-light-3);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.pv--center {
  align-items: center;
  text-align: center;
}

.pv__label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-ink-60);
}

.pv__skel {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: var(--color-light-3);
}

.pv__track {
  display: block;
  flex: 1;
  height: 6px;
  border-radius: 6px;
  background: var(--color-light-3);
  overflow: hidden;
}

/* in der Spalte nicht strecken (sonst Höhe 0), nur in Zeilen */
.pv > .pv__track {
  flex: none;
}

.pv__track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--world-accent, var(--color-primary));
}

.pv__button {
  margin-top: 4px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--color-text);
  color: var(--color-white);
  font-weight: 600;
  text-align: center;
}

.pv__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pv__row--head {
  justify-content: flex-start;
}

.pv__row--head .pv__rating,
.pv__row--head .pv__badge:last-child {
  margin-left: auto;
}

.pv__ok {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-accent-investing);
}

.pv__rating {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-accent-investing);
  color: var(--color-white);
  font-size: 1.25rem;
  font-weight: 800;
}

.pv__rating--sm {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  /* gross und fett wie jedes Rating (>= 18.66px) */
  font-size: 1.2rem;
}

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

.pv__done {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-investing);
  color: var(--color-text);
}

.pv__headline {
  font-size: 1.25rem;
  font-weight: 800;
}

.pv__muted {
  font-size: var(--text-xs);
  color: var(--color-ink-60);
}

.pv__badge {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--world-tint, var(--color-tint-primary));
  color: var(--world-accent, var(--color-primary));
}

.pv__badge--accent {
  background: var(--world-accent, var(--color-primary));
  color: var(--color-white);
}

.pv__bubble {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 4px 14px 14px 14px;
  background: var(--color-light-4);
}

.pv__dots {
  letter-spacing: 0.2em;
  color: var(--color-ink-60);
}

.pv__transfer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
}

.pv__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.pv__arrow {
  color: var(--world-accent, var(--color-primary));
}

.pv__bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 120px;
}

.pv__bars > span {
  flex: 1;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(
    180deg,
    var(--color-investing),
    var(--color-accent-investing)
  );
}

.pv__bars--schedule {
  height: 72px;
}

.pv__bars--schedule > span {
  height: 100%;
  background: var(--color-light-3);
}

.pv__bars--schedule > span.is-paid {
  background: linear-gradient(
    180deg,
    var(--color-investing),
    var(--color-accent-investing)
  );
}

.pv__bars--line > span {
  background: var(--color-tint-primary);
  border-top: 3px solid var(--color-primary);
}

.pv__split {
  display: flex;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
}

.pv__split-private,
.pv__legend-private::before {
  background: var(--color-accent-private);
}

.pv__split-sme,
.pv__legend-sme::before {
  background: var(--color-accent-sme);
}

.pv__split-hypo,
.pv__legend-hypo::before {
  background: var(--color-accent-hypo);
}

.pv__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: var(--text-xs);
  color: var(--color-ink-80);
}

.pv__legend > span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
}

/* blocks/figures-band.css */
/* ==========================================================================
   Zahlen-Band (NL-B3, CAS-3119) — dunkles Band, höchstens einmal je Seite.
   Vier Kennzahlen; die Werte zählen beim Eintritt hoch (data-countup).
   ========================================================================== */

.figures-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 96px 24px;
  background: var(--color-text);
  color: var(--color-white);
}

/* zwei ruhende Lichtflecken: Marken-Petrol und Anleger-Grün */
.figures-band::before,
.figures-band::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.figures-band::before {
  width: 600px;
  height: 600px;
  top: -250px;
  left: -150px;
  background: var(--color-primary);
  filter: blur(140px);
  opacity: 0.5;
}

.figures-band::after {
  width: 500px;
  height: 500px;
  bottom: -260px;
  right: -100px;
  background: var(--color-mesh-investing);
  filter: blur(160px);
  opacity: 0.18;
}

.figures-band__grid-lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(
    ellipse 70% 60% at 50% 40%,
    #000 20%,
    transparent 75%
  );
  mask-image: radial-gradient(
    ellipse 70% 60% at 50% 40%,
    #000 20%,
    transparent 75%
  );
}

.figures-band__container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.figures-band__title {
  max-width: 720px;
  margin: 0;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--color-white);
  text-wrap: balance;
}

.figures-band__list {
  display: grid;
  /* vier Spalten erst ab 1180px, darunter zwei, mobil eine — sonst brechen
     die Beschriftungen um */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  overflow: hidden;
}

.figures-band__item {
  /* Wertgrösse nach Kachelbreite: «CHF 3.0 Mrd.» passt auch in schmale Kacheln */
  container-type: inline-size;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  padding: 40px 32px;
  background: #0d1830;
}

.figures-band__value {
  margin: 0;
  font-size: clamp(2.25rem, 22cqi, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Präfix und Einheit klein, die Zahl gross (wie .stats-grid__unit) */
.figures-band__unit {
  font-size: 0.45em;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--color-light-1);
}

.figures-band__label {
  margin: 0;
  white-space: nowrap;
  font-size: min(var(--text-base), 6.2cqi);
  line-height: 1.5;
  color: var(--color-light-1);
}

@media (max-width: 1179px) {
  .figures-band__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 559px) {
  .figures-band__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .figures-band {
    padding: 64px 20px;
  }

  .figures-band__item {
    padding: 28px 24px;
  }
}

/* blocks/money-flow.css */
/* ==========================================================================
   Geldfluss (S3, CAS-3120) — Vorlage docs/next-level/fix-s2-s3-s4/
   s3-money-flow.css, angepasst an «Bewegung und Scroll» (CLAUDE.md): nur
   transform und opacity. Die Leuchtpunkte laufen per translate auf einem
   Träger in Linienlänge (Vorlage: left/top), die Legende hellt nur über
   opacity auf (Vorlage: Hintergrund und Rahmen animiert).
   Zeichnen beim Scrollen nur mit view-timeline (@supports); ohne Support
   sofort voll gezeichnet. Punkte in allen Browsern ab .is-revealed.
   ========================================================================== */
.money-flow {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 44px;
  margin: 0 0 40px;
  padding: 64px clamp(20px, 4vw, 56px) 48px;
  border-radius: 28px;
  background: var(--color-text);
  color: var(--color-white);
}

.money-flow__orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.money-flow__orb--1 {
  width: 520px;
  height: 520px;
  top: -260px;
  left: -120px;
  background: var(--color-primary);
  filter: blur(130px);
  opacity: 0.55;
}

.money-flow__orb--2 {
  width: 420px;
  height: 420px;
  bottom: -240px;
  right: -80px;
  background: var(--color-mesh-investing);
  filter: blur(140px);
  opacity: 0.16;
}

.money-flow__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(
    ellipse 70% 60% at 50% 45%,
    #000 20%,
    transparent 75%
  );
}

.money-flow__diagram {
  display: grid;
  grid-template-columns: auto minmax(60px, 1fr) auto minmax(60px, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.money-flow__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: center;
}

.money-flow__icon {
  width: 84px;
  height: 84px;
  border-radius: 24px;
  display: grid;
  place-items: center;
}

.money-flow__node--investor .money-flow__icon {
  background: var(--color-tint-investing);
  color: var(--color-accent-investing);
}

.money-flow__node--borrower .money-flow__icon {
  background: var(--color-tint-private);
  color: var(--color-accent-private);
}

.money-flow__node--cashare .money-flow__icon {
  width: 104px;
  height: 104px;
  border-radius: 28px;
  background: var(--color-white);
  box-shadow: 0 20px 50px -10px
    color-mix(in srgb, var(--color-secondary) 55%, transparent);
}

.money-flow__node--cashare img {
  width: 76px;
  height: auto;
}

.money-flow__link {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.money-flow__lane {
  display: flex;
  flex-direction: column;
  gap: 8px;
  --c: var(--color-mesh-investing);
}

.money-flow__lane--return {
  --c: var(--color-mesh-neutral);
}

.money-flow__lane-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-white);
}

.money-flow__lane--return .money-flow__lane-label {
  align-self: flex-end;
}

.money-flow__n {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  background: var(--c);
  color: var(--color-text);
}

.money-flow__line {
  position: relative;
  display: block;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
}

.money-flow__line > .money-flow__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--c);
  box-shadow: 0 0 12px var(--c);
  transform-origin: left;
}

.money-flow__lane--return .money-flow__fill {
  transform-origin: right;
}

/* Träger in Linienlänge, der Punkt sitzt an seinem Anfang: translateX(100%)
   des Trägers entspricht der Linienlänge. */
.money-flow__pulse {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.money-flow__pulse::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 0 12px 3px var(--c);
}

.money-flow__legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.money-flow__step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-light-2);
  --c: var(--color-mesh-investing);
}

.money-flow__step:nth-child(n+3) {
  --c: var(--color-mesh-neutral);
}

.money-flow__step .money-flow__n {
  width: 24px;
  height: 24px;
  font-size: 12px;
  font-weight: 800;
  flex: none;
}

/* Zeichnen beim Scrollen: nur mit Support. Ohne Support bleibt alles voll. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .money-flow {
      view-timeline-name: --mf;
    }

    .money-flow__fill {
      animation: mf-draw linear both;
      animation-timeline: --mf;
    }

    .money-flow__step {
      animation: mf-step linear both;
      animation-timeline: --mf;
    }

    .money-flow [data-n="1"] {
      animation-range: cover 15% cover 26%;
    }

    .money-flow [data-n="2"] {
      animation-range: cover 26% cover 37%;
    }

    .money-flow [data-n="3"] {
      animation-range: cover 37% cover 48%;
    }

    .money-flow [data-n="4"] {
      animation-range: cover 48% cover 60%;
    }
  }
}

@keyframes mf-draw {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes mf-draw-v {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

@keyframes mf-step {
  from {
    opacity: 0.45;
  }

  to {
    opacity: 1;
  }
}

/* Leuchtpunkte: alle Browser, sobald sichtbar (RevealEnhancer setzt
   .is-revealed). Endlosschleife mit gestalteter Dauer (Ausnahme der
   Token-Regel), Kurve als Token. */
@media (prefers-reduced-motion: no-preference) {
  .money-flow.is-revealed .money-flow__pulse {
    animation: mf-pulse 2.8s var(--ease-in-out) infinite;
    animation-delay: var(--d, 0s);
  }

  .money-flow.is-revealed .money-flow__lane--return .money-flow__pulse {
    animation-name: mf-pulse-back;
  }
}

@keyframes mf-pulse {
  0% {
    transform: translateX(0);
    opacity: 0;
  }

  12%,
  88% {
    opacity: 1;
  }

  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes mf-pulse-back {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }

  12%,
  88% {
    opacity: 1;
  }

  100% {
    transform: translateX(0);
    opacity: 0;
  }
}

@keyframes mf-pulse-v {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  12%,
  88% {
    opacity: 1;
  }

  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes mf-pulse-v-back {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }

  12%,
  88% {
    opacity: 1;
  }

  100% {
    transform: translateY(0);
    opacity: 0;
  }
}

/* Mobil: senkrecht, Beschriftung neben der Linie */
@media (max-width: 767px) {
  .money-flow {
    padding: 44px 20px 32px;
  }

  .money-flow__diagram {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .money-flow__link {
    flex-direction: row;
    gap: 40px;
    height: 96px;
  }

  .money-flow__lane {
    flex-direction: row-reverse;
    align-items: stretch;
    gap: 10px;
  }

  .money-flow__lane-label,
  .money-flow__lane--return .money-flow__lane-label {
    align-self: center;
  }

  .money-flow__line {
    width: 4px;
    height: 100%;
  }

  .money-flow__line > .money-flow__fill {
    transform-origin: top;
    animation-name: mf-draw-v;
  }

  .money-flow__lane--return .money-flow__line > .money-flow__fill {
    transform-origin: bottom;
  }

  .money-flow__pulse::before {
    top: 0;
    left: 50%;
  }

  .money-flow.is-revealed .money-flow__pulse {
    animation-name: mf-pulse-v;
  }

  .money-flow.is-revealed .money-flow__lane--return .money-flow__pulse {
    animation-name: mf-pulse-v-back;
  }
}


/* Responsive */
/* responsive.css */
/* ==========================================================================
   Responsive Styles
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .yield-calculator {
    flex-direction: column;
    gap: var(--space-8);
  }

  .yield-calculator__panel {
    max-width: 100%;
  }
}

/* Mobile landscape / small tablet */
@media (max-width: 768px) {
  :root {
    --text-5xl: 2.5rem;
    --text-3xl: 1.75rem;
    --text-2xl: 1.5rem;
  }

  .header__nav {
    display: none;
  }

  .header__menu-toggle {
    display: flex;
  }

  .header__mobile-menu {
    display: block;
  }

  .calculator {
    padding: 1.25rem;
  }

  .calculator__title {
    font-size: 1.5rem;
  }

  .calculator__results-header,
  .calculator__results-row {
    flex-wrap: wrap;
  }

  .u-w--1\/5,
  .u-w--2\/5 {
    width: 50%;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
}

/* Mobile portrait */
@media (max-width: 575px) {
  .calculator__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .calculator__input-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .calculator__input-group {
    width: 100%;
  }

  .u-w--1\/5,
  .u-w--2\/5,
  .u-w--1\/3 {
    width: 100%;
  }

  .calculator__results {
    overflow-x: auto;
  }

  .calculator__results-header,
  .calculator__results-row {
    min-width: 400px;
  }

  .footer__grid {
    grid-template-columns: 1fr;
  }

  .yield-calculator__glass {
    padding: 2rem 1.5rem;
  }
}

/* Very small screens */
@media (max-width: 375px) {
  .u-hide--xs {
    display: none !important;
  }

  .btn {
    width: 100%;
  }

  .header__actions {
    gap: var(--space-2);
  }

  .header__lang {
    padding: var(--space-1);
    font-size: 0.7rem;
  }
}

/* Print styles */
@media print {
  .header,
  .footer,
  .btn,
  .modal {
    display: none !important;
  }

  body {
    font-size: 12pt;
  }
}

/* Next Level (CAS-3119): nach den Blöcken, damit der Spotlight-Rand gewinnt */
/* components/spotlight.css */
/* ==========================================================================
   Spotlight-Karten (NL-B2, CAS-3119)
   Ein Lichtpunkt folgt dem Zeiger: Rand und Schein in der Kennfarbe der
   Karte (--card-accent, wie es die Modifier der Karten schon setzen).
   Auf jeder Karte (Weisung 01.10.2026, Wächter tests/spotlight_cards_test.ts),
   sobald ein feiner Zeiger da ist (any-pointer, auch Touch-Laptops).
   Farbe: --card-accent bzw. Wert, sonst Weltfarbe, sonst Petrol. Anheben beim Hover bleibt Sache der Link-Karten selbst.
   `glow` / `glow-primary` = nur Schein, kein Verlaufsrand (für
   halbtransparente Karten auf dunklem Grund).
   Position --mx/--my setzt islands/SpotlightEnhancer.tsx.
   ========================================================================== */

[data-spotlight] {
  --mx: 50%;
  --my: -260px;
  position: relative;
  isolation: isolate;
}

[data-spotlight]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    var(--spotlight-glow-size) circle at var(--mx) var(--my),
    color-mix(
      in srgb,
      var(--card-accent, var(--world-accent, var(--color-primary))) var(
        --spotlight-strength,
        var(--spotlight-strength-light)
      ),
      transparent
    ),
    transparent 60%
  );
  transition: opacity var(--duration-normal) var(--ease-out);
}

@media (any-hover: hover) and (any-pointer: fine) {
  [data-spotlight]:not([data-spotlight^="glow"]) {
    border: 1px solid transparent;
    background:
      linear-gradient(
        var(--card-bg, var(--color-white)),
        var(--card-bg, var(--color-white))
      ) padding-box,
      radial-gradient(
      var(--spotlight-border-size) circle at var(--mx) var(--my),
      var(--card-accent, var(--world-accent, var(--color-primary))),
      color-mix(
        in srgb,
        var(--card-accent, var(--world-accent, var(--color-primary))) 45%,
        transparent
      ) 30%,
      var(--color-light-3) 75%
    ) border-box;
  }

  [data-spotlight]:hover::after {
    opacity: 1;
  }

  /* Das Icon der Karte leuchtet mit («Rand und Icon leuchten in der
     Kartenfarbe», Spezifikation 03). Nicht bei Logos und Fotos (:has(img)):
     dort zeichnete der Schatten einen Kasten um das Bild. */
  [data-spotlight]
    :is(
      [class$="__icon"],
      [class*="__icon "],
      [class$="-icon"],
      [class*="-icon "]
    ):not(:has(img)) {
    transition: box-shadow var(--duration-normal) var(--ease-out);
  }

  [data-spotlight]:hover
    :is(
      [class$="__icon"],
      [class*="__icon "],
      [class$="-icon"],
      [class*="-icon "]
    ):not(:has(img)) {
    box-shadow:
      0 0 0 1px
      color-mix(
        in srgb,
        var(--card-accent, var(--world-accent, var(--color-primary))) 30%,
        transparent
      ),
      0 8px 24px -6px
      color-mix(
        in srgb,
        var(--card-accent, var(--world-accent, var(--color-primary))) 55%,
        transparent
      );
  }

  [data-spotlight]:not([data-spotlight^="glow"]):hover {
    border-color: transparent;
  }
}

/* Akzent für Karten ohne eigenen Modifier */
[data-spotlight="private"] {
  --card-accent: var(--color-accent-private);
}

[data-spotlight="sme"] {
  --card-accent: var(--color-accent-sme);
}

[data-spotlight="primary"] {
  --card-accent: var(--color-primary);
}

[data-spotlight="hypo"] {
  --card-accent: var(--color-accent-hypo);
}

[data-spotlight="investing"],
[data-spotlight="glow"] {
  --card-accent: var(--color-accent-investing);
}

[data-spotlight^="glow"] {
  --spotlight-strength: var(--spotlight-strength-glow);
}

/* nur Schein, neutral: Karten auf dunklem Grund ohne eigene Zielgruppe */
[data-spotlight="glow-primary"] {
  --card-accent: var(--color-primary);
}

/* Logos mit weissem Grund: multiply lässt das Licht durch das Weiss scheinen,
   statt ein weisses Rechteck darüber zu legen */
[data-spotlight]
  :is([class*="logo"] img, img[class*="logo"], .wwa-credentials__img) {
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
  [data-spotlight]::after,
  [data-spotlight] [class*="icon"] {
    transition: none;
  }
}

/* components/reveal.css */
/* ==========================================================================
   Einmaliges Einblenden (CAS-3120) — gesteuert von islands/RevealEnhancer.
   Startzustand nur mit [data-reveal-pending] (unter dem Falz, mit JS, ohne
   «Bewegung reduzieren»); sonst ist alles sofort sichtbar.
   ========================================================================== */

[data-reveal] {
  transition:
    opacity var(--duration-slower) var(--ease-out),
    transform var(--duration-slower) var(--ease-out);
}

[data-reveal][data-reveal-pending] {
  opacity: 0;
  transform: translateY(32px) scale(0.98);
}

/* Kacheln eines Rasters leicht versetzt */
[data-reveal]:nth-child(2) {
  transition-delay: var(--stagger-2);
}

[data-reveal]:nth-child(3) {
  transition-delay: var(--stagger-3);
}

[data-reveal]:nth-child(4) {
  transition-delay: var(--stagger-4);
}

/* Charts (NL-C8): Balken wachsen beim Eintritt einmal auf */
[data-reveal="bars"] {
  transition: none;
}

[data-reveal="bars"][data-reveal-pending] {
  opacity: 1;
  transform: none;
}

[data-reveal="bars"] [data-bar] {
  transform-origin: bottom;
  transition: transform var(--duration-slower) var(--ease-out);
}

[data-reveal="bars-x"] [data-bar] {
  transform-origin: left;
  transition: transform var(--duration-slower) var(--ease-out);
}

[data-reveal="bars"][data-reveal-pending] [data-bar] {
  transform: scaleY(0);
}

[data-reveal="bars-x"][data-reveal-pending] [data-bar] {
  transform: scaleX(0);
}

[data-reveal="bars-x"] {
  transition: none;
}

[data-reveal="bars-x"][data-reveal-pending] {
  opacity: 1;
  transform: none;
}

/* SVG-Balken wachsen von ihrer eigenen Grundlinie aus */
[data-bar] {
  transform-box: fill-box;
}

/* Team-Reihe (NL-C9): gestaffelt bis zur sechsten Person */
.about-team__member[data-reveal]:nth-child(5) {
  transition-delay: var(--stagger-5);
}

.about-team__member[data-reveal]:nth-child(n+6) {
  transition-delay: var(--stagger-6);
}

/* components/reading-progress.css */
/* ==========================================================================
   Lesefortschritt (NL-C7, CAS-3120) — 3px am oberen Fensterrand, nur auf
   Langtext-Seiten (Layout readingProgress). Reine CSS-Scroll-Kopplung; ohne
   Unterstützung oder bei «Bewegung reduzieren» erscheint er nicht.
   ========================================================================== */

.reading-progress {
  display: none;
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .reading-progress {
      display: block;
      position: fixed;
      top: env(safe-area-inset-top, 0px);
      left: 0;
      right: 0;
      z-index: 1100;
      height: 3px;
      background: linear-gradient(
        90deg,
        var(--color-primary),
        var(--color-secondary)
      );
      transform-origin: left;
      pointer-events: none;
      animation: reading-progress linear both;
      animation-timeline: scroll(root block);
    }
  }
}

@keyframes reading-progress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* components/dark-moment.css */
/* ==========================================================================
   Dunkle Kontrastmomente (Wunsch 01.10.2026)
   Jede dunkle Fläche trägt denselben Verlauf wie das Band «18 Jahre» auf
   «Wer sind wir»: Navy mit einem Schein in Marken-Cyan links und Petrol
   rechts oben. Titel und grosse Zahlen auf dunklem Grund laufen von Weiss ins
   Marken-Cyan (wie die Zahl 18). Fliesstext bleibt weiss.
   Bänder mit eigenem Schein (Zahlen-Band, Unterseiten-CTA, Institutionelle,
   «18 Jahre») behalten ihn; hier kommen nur die ohne dazu. Die Unterseiten-
   CTA trägt seit 06.10.2026 denselben Schein wie «18 Jahre» (subpage.css).
   :not(.u-flat) hebt die Spezifität über die Blockregeln, die teils als
   eigene Seiten-CSS nach global.css geladen werden.
   ========================================================================== */

/* .investors (home page) stays light until the new home page (CAS-2945) */
:is(.subpage-section--dark, .security-regulation):not(.u-flat) {
  background-image:
    radial-gradient(
      640px circle at 0% 55%,
      color-mix(in srgb, var(--color-secondary) 28%, transparent),
      transparent 65%
    ),
    radial-gradient(
    560px circle at 100% 0%,
    color-mix(in srgb, var(--color-primary) 38%, transparent),
    transparent 70%
  );
}

:is(
  .figures-band__title,
  .figures-band__value,
  .cta-block__title,
  .security-regulation__title,
  .subpage-cta__title,
  .inst-compliance__title,
  .wwa-years__title,
  .benefits__tile--hero .benefits__tile-title
):not(.u-flat) {
  color: var(--color-white);
  background-image: linear-gradient(
    160deg,
    var(--color-white) 20%,
    var(--color-secondary) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* letzte Glyphe nicht abschneiden (negativer Zeichenabstand) */
  padding-inline-end: 0.06em;
}