/* optimumfinanz.com, helles System, v2
   Gemeinsames Stylesheet für die neuen Seiten. Farben und Schriften kommen
   aus tokens.css, hier stehen nur Komponenten.

   Bewegung: Alles, was sich bewegt, hat einen sichtbaren Ruhezustand. Ohne
   JavaScript oder mit prefers-reduced-motion ist die Seite komplett lesbar,
   nur eben still. Reveal-Elemente werden erst per html.js versteckt. */

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

html {
  scroll-behavior: smooth;
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; }
a, button { touch-action: manipulation; }
button { font: inherit; }

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--gold-tint); color: var(--ink); }

section[id] { scroll-margin-top: 108px; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 60;
  background: var(--gold);
  color: #fff;
  padding: 0.7rem 1.2rem;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ------------------------------------------------------------------ */
/* Typografie */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  text-wrap: balance;
}

h1 { font-size: var(--size-hero); line-height: 1.08; }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); font-weight: 600; letter-spacing: -0.005em; }

.kicker {
  margin: 0 0 1rem;
  font-size: var(--size-kicker);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.lede {
  font-size: 1.0625rem;
  color: var(--ink-muted);
  margin: 0 0 2rem;
}

.section-head {
  max-width: var(--measure);
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
  text-align: center;
}
.section-head .lede { margin-bottom: 0; }
.section-head.is-left { margin-inline: 0; text-align: left; }

.note {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

.disclaimer {
  max-width: var(--measure);
  margin: 1.75rem auto 0;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  padding: 1rem 1.35rem;
  font-size: var(--size-small);
  line-height: 1.55;
  color: var(--ink-muted);
  text-align: left;
}

.conclusion {
  max-width: var(--measure);
  margin: 1.75rem auto 0;
  text-align: center;
  color: var(--ink-muted);
}

sup.fn {
  font-size: 0.55em;
  line-height: 0;
  vertical-align: baseline;
  position: relative;
  top: -0.6em;
  color: var(--gold-deep);
  font-weight: 600;
  margin-left: 0.15em;
}

/* ------------------------------------------------------------------ */
/* Kopfzeile, schwebende Pille. Nachbau der 21st.dev Navbar ohne motion
   und lucide. Der Wrapper bleibt transparent und klebt oben, die Pille
   traegt Weiss und Schatten. Beim Laden blenden Loewe, Links und CTA
   gestaffelt ein, mit prefers-reduced-motion steht alles sofort. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  padding: 1.25rem var(--gutter);
  pointer-events: none; /* nur die Pille faengt Klicks, nicht der Rand */
  transition: padding 350ms var(--ease);
}

/* Die Pille ist so breit wie ihr Inhalt, immer zentriert. Beim Scrollen
   (body.is-scrolled, gesetzt in site.js ab 40px) schrumpfen Abstaende,
   Loewe und Button, die Pille zieht sich sichtbar zusammen. */
.navbar {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2.25rem;
  padding: 0.55rem 0.6rem 0.55rem 1rem;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 15px -3px rgba(17, 21, 26, 0.10), 0 4px 6px -4px rgba(17, 21, 26, 0.10);
  transition: gap 350ms var(--ease), padding 350ms var(--ease), box-shadow 350ms var(--ease);
}

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand-logo {
  width: 38px; height: 38px; flex: none;
  transition: transform 300ms var(--ease), width 350ms var(--ease), height 350ms var(--ease);
}
.brand:hover .brand-logo { transform: rotate(10deg); }
.brand-wordmark { height: 30px; width: auto; }
.brand-wordmark.is-small { height: 28px; }

.is-scrolled .site-header { padding-top: 0.6rem; }
.is-scrolled .navbar {
  gap: 1.25rem;
  padding: 0.35rem 0.4rem 0.35rem 0.7rem;
  box-shadow: 0 14px 30px -8px rgba(17, 21, 26, 0.18), 0 4px 8px -4px rgba(17, 21, 26, 0.10);
}
.is-scrolled .brand-logo { width: 30px; height: 30px; }
.is-scrolled .nav-links { gap: 1.25rem; }
.is-scrolled .nav-links a { font-size: 0.875rem; }
.is-scrolled .nav-cta { min-height: 36px; padding-block: 0.3rem; font-size: 0.8125rem; }
.is-scrolled .btn-sm.btn-primary { padding-inline: 1.6rem; }

.nav-links { display: flex; align-items: center; gap: 2rem; transition: gap 350ms var(--ease); }
.nav-links a {
  display: inline-block;
  text-decoration: none;
  font-size: var(--size-small);
  font-weight: 500;
  color: var(--ink);
  transition: color 200ms var(--ease), transform 200ms var(--ease), font-size 350ms var(--ease);
}
.nav-links a:hover { color: var(--ink-muted); transform: scale(1.05); }

.btn-sm { min-height: 40px; padding-block: 0.5rem; font-size: 0.875rem; transition-property: border-radius, border-color, background-size, color, transform, min-height, padding, font-size; }
.btn-sm.btn-primary { padding-inline: 1.5rem; }

.nav-toggle {
  display: none;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  transition: transform 120ms var(--ease);
}
.nav-toggle:active { transform: scale(0.9); }

/* Ladeanimation, kurz und nur einmal */
@keyframes nav-logo-in { from { transform: scale(0.8); } to { transform: scale(1); } }
@keyframes nav-link-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes nav-cta-in  { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
.js .brand-logo { animation: nav-logo-in 300ms var(--ease) both; }
.js .nav-links a { animation: nav-link-in 300ms var(--ease) both; }
.js .nav-links a:nth-child(2) { animation-delay: 60ms; }
.js .nav-links a:nth-child(3) { animation-delay: 120ms; }
.js .nav-cta { animation: nav-cta-in 300ms var(--ease) 200ms both; }

/* Vollbildmenue auf dem Handy, federt von rechts herein */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #fff;
  padding: 6rem var(--gutter) 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 450ms cubic-bezier(0.2, 0.9, 0.3, 1.05), opacity 300ms var(--ease), visibility 0s linear 450ms;
}
.mobile-menu.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mobile-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%;
  color: var(--ink); cursor: pointer;
  opacity: 0; transition: opacity 200ms var(--ease) 200ms, transform 120ms var(--ease);
}
.mobile-menu.open .mobile-close { opacity: 1; }
.mobile-close:active { transform: scale(0.9); }
.mobile-links { display: flex; flex-direction: column; gap: 1.5rem; }
.mobile-links a {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  opacity: 0; transform: translateX(20px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.mobile-menu.open .mobile-links a { opacity: 1; transform: none; }
.mobile-menu.open .mobile-links a:nth-child(1) { transition-delay: 100ms; }
.mobile-menu.open .mobile-links a:nth-child(2) { transition-delay: 200ms; }
.mobile-menu.open .mobile-links a:nth-child(3) { transition-delay: 300ms; }
.mobile-cta {
  margin-top: 1.5rem;
  width: 100%;
  opacity: 0; transform: translateY(20px);
  transition: opacity 300ms var(--ease) 500ms, transform 300ms var(--ease) 500ms;
}
.mobile-menu.open .mobile-cta { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ */
/* Schaltflächen */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.75rem 1.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: var(--size-small);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease), transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.btn .arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* Goldene Buttons, Flow-Effekt. Nachbau des 21st.dev Flow Button in CSS.
   Ruhe: goldene Pille, Text leicht links, Pfeil rechts.
   Hover: Radius auf 12px, ein Kreis in Schwarzblau waechst aus der Mitte
   (als radialer Verlauf, dessen background-size animiert wird), der rechte
   Pfeil verlaesst den Button, ein linker kommt mit Ueberschwingen herein,
   der Text rutscht nach rechts. Pfeile sind Pseudo-Elemente mit Maske,
   deshalb folgen sie automatisch der Textfarbe. */
.btn-primary {
  position: relative;
  overflow: hidden;
  padding-inline: 2rem;
  color: #fff;
  border-color: var(--gold);
  background-color: var(--gold);
  background-image: radial-gradient(circle, var(--ink) 49.5%, transparent 50.5%);
  background-size: 0 0;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 1px 2px rgba(17, 21, 26, 0.08);
  transition:
    border-radius 600ms cubic-bezier(0.23, 1, 0.32, 1),
    border-color 600ms cubic-bezier(0.23, 1, 0.32, 1),
    background-size 800ms cubic-bezier(0.19, 1, 0.22, 1),
    color 500ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 150ms var(--ease);
}
.btn-primary > span {
  position: relative;
  z-index: 1;
  display: inline-block;
  transform: translateX(-10px);
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-primary::before,
.btn-primary::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  z-index: 2;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='m12 5 7 7-7 7'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='m12 5 7 7-7 7'/></svg>") center / contain no-repeat;
  transition: left 800ms cubic-bezier(0.34, 1.56, 0.64, 1), right 800ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-primary::before { left: -25%; }
.btn-primary::after  { right: 1rem; }

.btn-primary:hover {
  border-radius: 12px;
  border-color: transparent;
  background-size: 300% 300%; /* deckt jeden Button, egal wie breit */
}
.btn-primary:hover > span { transform: translateX(10px); }
.btn-primary:hover::before { left: 1rem; }
.btn-primary:hover::after  { right: -25%; }
.btn-primary:active { transform: scale(0.95); }

/* Auf dunklem Grund fuellt der Kreis weiss und der Text wird schwarzblau */
.section-dark .btn-primary { background-image: radial-gradient(circle, #fff 49.5%, transparent 50.5%); }
.section-dark .btn-primary:hover { color: var(--ink); }

.btn-secondary { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--gold); color: var(--gold-deep); }

.btn-lg { min-height: 54px; padding: 0.9rem 1.9rem; font-size: 1rem; }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* ------------------------------------------------------------------ */
/* Abschnitte und Flächen */

.section { padding-block: var(--section-y); }
.section-tint { background: var(--surface); }

.section-dark {
  background: var(--ink);
  color: var(--text-on-dark);
}
.section-dark .kicker { color: var(--gold); }
.section-dark .lede { color: var(--muted-on-dark); }
.section-dark h2, .section-dark h3 { color: #fff; }

.card {
  background: var(--surface-alt);
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 3vw, 2rem);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.section-tint .card { background: #fff; }
.card.is-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(17, 21, 26, 0.08);
}
.card h3 { margin-bottom: 0.5rem; }
.card p { margin: 0; color: var(--ink-muted); font-size: var(--size-small); }
/* Lange Komposita wie Betriebsrentenstaerkungsgesetz muessen in schmalen
   Kacheln trennen duerfen, sonst laufen sie aus der Karte. */
.card p, .card h3, .effort-list li, .cta-proof li, .law-card p {
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
          hyphens: auto;
}

.icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--gold-tint);
  color: var(--gold-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
}
.icon-badge svg { width: 22px; height: 22px; }

.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ------------------------------------------------------------------ */
/* Hero, geteilt */

.hero {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(60% 50% at 85% 10%, rgba(188, 143, 53, 0.10) 0%, rgba(188, 143, 53, 0) 70%),
    var(--paper);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero-copy h1 { max-width: 16ch; }
.hero-copy .lede { max-width: 34rem; font-size: 1.125rem; }

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 2.25rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: var(--size-small);
  color: var(--ink-muted);
}
.hero-trust b { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------ */
/* Scroll-Buehne, Nachbau des Aceternity Container-Scroll-Effekts
   Perspektive auf der Buehne, der Rahmen startet um 20 Grad nach hinten
   gekippt und leicht vergroessert, beim Scrollen richtet ihn site.js auf.
   Ohne JS und mit prefers-reduced-motion steht alles flach. */

.hero-scroll { padding-bottom: clamp(2rem, 4vw, 3.5rem); }

.scroll-stage { perspective: 1000px; }

.scroll-title {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
  will-change: transform;
}
.scroll-title h1 { max-width: 30ch; margin-inline: auto; }
.br-desk { display: none; }
@media (min-width: 768px) { .br-desk { display: inline; } }
.scroll-title .lede { max-width: 38rem; margin-inline: auto; font-size: 1.125rem; }
.scroll-title .cta-row { justify-content: center; }

.scroll-frame {
  max-width: 62rem;
  margin: 2.75rem auto 0;
  transform-origin: 50% 0;
  background: var(--ink);
  border: 4px solid #262d36;
  border-radius: 30px;
  padding: clamp(0.5rem, 1.5vw, 1.25rem);
  box-shadow:
    0 0 0 rgba(0, 0, 0, 0.30),
    0 9px 20px rgba(0, 0, 0, 0.29),
    0 37px 37px rgba(0, 0, 0, 0.26),
    0 84px 50px rgba(0, 0, 0, 0.15),
    0 149px 60px rgba(0, 0, 0, 0.04);
  will-change: transform;
}
.js .scroll-frame { transform: rotateX(20deg) scale(1.05); }

.scroll-screen {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
}
/* Der Rechner traegt im Rahmen keinen eigenen Rand und Schatten mehr */
.scroll-screen .calc { border: 0; border-radius: 20px; box-shadow: none; }

.hero-trust.is-center {
  justify-content: center;
  max-width: 52rem;
  margin-inline: auto;
  margin-top: 2.5rem;
}

@media (max-width: 768px) {
  .js .scroll-frame { transform: rotateX(12deg) scale(0.96); }
  .scroll-frame { border-width: 3px; border-radius: 22px; }
  .scroll-screen { border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .scroll-frame, .scroll-title { transform: none !important; }
}

/* ------------------------------------------------------------------ */
/* Rechner */

.calc {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 0 24px 60px rgba(17, 21, 26, 0.10), 0 2px 6px rgba(17, 21, 26, 0.04);
}

.calc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.calc-head h2 { font-size: 1.2rem; margin: 0; letter-spacing: -0.01em; }
.calc-head .tag {
  flex: none;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  background: var(--gold-tint);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.7rem;
}

.calc-field { margin-bottom: 1.25rem; }
.calc-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--size-small);
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.calc-label output {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* Schieberegler, in beiden Browserfamilien gleich gezeichnet */
.calc input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 32px;
  background: transparent;
  margin: 0;
  cursor: pointer;
}
.calc input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--gold) 0 var(--fill, 20%), var(--line) var(--fill, 20%) 100%);
}
.calc input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--line);
}
.calc input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--gold);
}
.calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -9px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--gold);
  box-shadow: 0 2px 8px rgba(17, 21, 26, 0.18);
  transition: transform var(--dur) var(--ease);
}
.calc input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--gold);
  box-shadow: 0 2px 8px rgba(17, 21, 26, 0.18);
}
.calc input[type="range"]:hover::-webkit-slider-thumb,
.calc input[type="range"]:focus-visible::-webkit-slider-thumb { transform: scale(1.1); }
.calc input[type="range"]:focus-visible { outline: none; }
.calc input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(188, 143, 53, 0.25); }

.calc-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--ink-faint);
  margin-top: -0.2rem;
}

/* Die drei Balken: Nettoaufwand, Brutto, Anlage */
.calc-bars { display: grid; gap: 0.7rem; margin: 0.5rem 0 1.4rem; }
.calc-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; align-items: baseline; }
.calc-bar .lbl { font-size: 0.8125rem; color: var(--ink-muted); }
.calc-bar .val {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.calc-bar .track {
  grid-column: 1 / -1;
  height: 10px;
  border-radius: 999px;
  background: var(--surface-alt);
  overflow: hidden;
}
.calc-bar .fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--line-strong);
  transition: width 700ms var(--ease);
}
.calc-bar.is-net .fill { background: var(--ink-faint); }
.calc-bar.is-brutto .fill { background: var(--gold-soft, #d3b271); }
.calc-bar.is-anlage .fill { background: var(--gold); }
.calc-bar.is-anlage .val { color: var(--gold-deep); }

.chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.chip {
  min-height: 36px;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chip:hover { border-color: var(--gold); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip small { opacity: 0.7; font-weight: 400; }

.calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
.calc-row .calc-label { margin-bottom: 0.45rem; }

.calc-result {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 1.25rem 1.35rem;
  display: grid;
  gap: 0.35rem;
}
.calc-result .lbl { font-size: 0.8125rem; color: var(--ink-muted); }
.calc-result .big {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap; /* "≈ 458.043 €" bleibt einzeilig */
}
.calc-result .sub {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  line-height: 1.45;
  margin-top: 0.35rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}
.calc-result .sub b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.calc-foot {
  margin: 1rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

.calc-cta { margin-top: 1.1rem; display: flex; justify-content: center; }
.calc-cta .btn { min-width: min(100%, 22rem); }

/* ------------------------------------------------------------------ */
/* Kennzahlen mit Zählwerk */

.stat-band {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.stat-hero {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3.2rem, 8vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-hero small {
  display: block;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-muted);
  margin-top: 0.75rem;
}

/* Seltenheit, mit echten Anteilsbalken */
.rarity { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rarity-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.5rem;
}
.rarity-card h3 { font-size: 0.9375rem; font-weight: 600; margin-bottom: 1.1rem; color: var(--ink-muted); }
.rarity-card h3 b { color: var(--ink); font-family: var(--font-display); font-size: 1.15rem; }
.rarity-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding-block: 0.5rem; }
.rarity-row span:first-child { font-size: 0.8125rem; color: var(--ink-muted); }
.rarity-row .track { height: 8px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.rarity-row .fill { height: 100%; width: 0; min-width: 2px; border-radius: 999px; background: var(--gold); transition: width 900ms var(--ease); }
.rarity-row b { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 4.2rem; text-align: right; }

/* ------------------------------------------------------------------ */
/* Diagramm, zeichnet sich beim Erscheinen */

.chart-figure {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.chart-figure svg { width: 100%; height: auto; display: block; }
.chart-figure figcaption { margin-top: 1rem; }
.chart-scroll { overflow-x: auto; }

.chart-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
/* Die Prognose behält ihr Strichmuster und wird stattdessen per clip-path
   von links freigelegt, sonst frisst der Zeichen-Trick die Strichelung. */
.chart-line.is-forecast { stroke-dasharray: 7 6; stroke-dashoffset: 0; clip-path: inset(0 100% 0 0); }
.js .in .chart-line.is-forecast { animation: revealx 800ms var(--ease) 1000ms forwards; }
@keyframes revealx { to { clip-path: inset(0 0 0 0); } }
.chart-dot { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.chart-txt { opacity: 0; }
.js .in .chart-line { animation: draw 1100ms var(--ease) forwards; }
.js .in .chart-dot { animation: pop 400ms var(--ease) forwards; }
.js .in .chart-dot:nth-of-type(1) { animation-delay: 150ms; }
.js .in .chart-dot:nth-of-type(2) { animation-delay: 1000ms; }
.js .in .chart-dot:nth-of-type(3) { animation-delay: 1750ms; }
.js .in .chart-txt { animation: fadein 400ms var(--ease) forwards; }
.js .in .chart-txt:nth-of-type(1) { animation-delay: 300ms; }
.js .in .chart-txt:nth-of-type(2) { animation-delay: 1150ms; }
.js .in .chart-txt:nth-of-type(3) { animation-delay: 1900ms; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { to { transform: scale(1); } }
@keyframes fadein { to { opacity: 1; } }

/* ------------------------------------------------------------------ */
/* Rechtslage */

.law-card { display: flex; flex-direction: column; gap: 0.75rem; }
.law-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--gold-tint);
  color: var(--gold-deep);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------ */
/* Aufwand, Sie gegen wir */

.effort {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(1rem, 2.2vw, 1.5rem);
  align-items: stretch;
}
.effort-col {
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.effort-col.is-you { background: #fff; border: 1px solid var(--line); }
.effort-col.is-us { background: var(--ink); color: var(--text-on-dark); }
.effort-col h3 { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 1.25rem; }
.effort-col h3 .count {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--gold-deep);
}
.effort-col.is-us h3 { color: #fff; }
.effort-col.is-us h3 .count { color: var(--gold); }
.effort-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.effort-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: var(--size-small);
  line-height: 1.5;
}
.effort-list svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--gold-deep); }
.effort-col.is-us .effort-list svg { color: var(--gold); }
.effort-col.is-us .effort-list li { color: var(--text-on-dark); }
.effort-col .foot { margin: 1.5rem 0 0; font-size: 0.8125rem; color: var(--ink-muted); }
.effort-col.is-us .foot { color: var(--muted-on-dark); }

.perks { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.perks .card h3 { font-size: 1.05rem; }

/* ------------------------------------------------------------------ */
/* Team-Carousel: Nachbau des React/21st.dev-Musters "AnimatedTestimonials"
   (Foto mit leichtem Dreh-Stapel-Effekt links, Name/Rolle/Zitat mit
   Wort-fuer-Wort-Einblenden rechts, Pfeile zum manuellen Wechseln), rein
   in CSS + der wenigen Zeilen JS in site.js (kein React/framer-motion/
   next-image, dieses Repo hat keinen Build-Schritt). Kein Autoplay per
   Default (lange Bio-Absaetze, kein aufgezwungener Wechsel waehrend des
   Lesens); ueber data-autoplay="true" am Wurzel-Element aktivierbar.

   Gemeinsam genutzt vom dunklen Gruender-Band der Startseite (#gruender,
   unten die .section-dark-Anpassungen) und der hellen Unterseite "Ueber
   uns" (pages.css bindet dieselben Klassen, keine eigene Kopie mehr).
   .sr-only fuer den Screenreader-Volltext bleibt in home.css/pages.css,
   da beide es ohnehin schon unabhaengig mitbringen. */

.team-carousel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  max-width: 62rem;
  margin: 2.5rem auto 0;
}

.team-photo-stack {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
}
.team-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  box-shadow: 0 24px 55px rgba(17, 21, 26, 0.16);
  opacity: 0;
  transform: scale(0.94) rotate(-4deg);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
/* Leicht wechselnde Drehrichtung je Foto, statt echtem Zufall (der bei
   einer statischen Seite bei jedem Laden anders und damit unruhig
   waere): fest zugewiesene, dezente Winkel je Karussell-Position. */
.team-photo-img[data-index="1"] { transform: scale(0.94) rotate(3deg); }
.team-photo-img[data-index="2"] { transform: scale(0.94) rotate(-3deg); }
.team-photo-img.is-active { opacity: 1; transform: scale(1) rotate(0deg); z-index: 2; }

.team-text { display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; min-height: 100%; }
.team-name { font-size: var(--size-h3); margin: 0; }
.team-role { margin: 0.2rem 0 0; color: var(--ink-faint); font-size: var(--size-small); }
.team-quote { margin-top: 1.25rem; }
.team-quote p { margin: 0; font-size: 1.0625rem; color: var(--ink-muted); line-height: 1.6; }

.js .team-slide .tg-word {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transition: opacity 450ms var(--ease), filter 450ms var(--ease);
  transition-delay: calc(var(--i, 0) * 16ms);
}
.js .team-slide.is-active .tg-word { opacity: 1; filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  /* Muss dieselbe Selektor-Spezifitaet wie die Basisregel oben tragen
     (.js .team-slide .tg-word), sonst gewinnt die Basisregel trotz
     Media Query (derselbe Fallstrick wie beim Text-Generate-Effekt auf
     der Startseite). */
  .js .team-slide .tg-word { opacity: 1; filter: none; transition: none; }
  .team-photo-img { transition: opacity 200ms linear; transform: none !important; }
}

.team-controls { display: flex; gap: 0.75rem; }
.team-arrow {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  border: 0;
  background: var(--surface-alt);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.team-arrow:hover { background: var(--gold-tint); }
.team-arrow svg { width: 18px; height: 18px; transition: transform 200ms var(--ease); }
.team-arrow:first-child:hover svg { transform: rotate(8deg); }
.team-arrow:last-child:hover svg { transform: rotate(-8deg); }

/* Dunkles Gruender-Band auf der Startseite (#gruender): dieselbe Struktur,
   nur Text-/Rahmenfarben ans dunkle .section-dark angepasst (Basisregeln
   oben sind fuer helle Seiten kalibriert). */
.section-dark .team-role { color: var(--muted-on-dark); }
.section-dark .team-quote p { color: var(--muted-on-dark); }
.section-dark .team-photo-img {
  border-color: rgba(232, 230, 225, 0.10);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.section-dark .team-arrow { background: rgba(255, 255, 255, 0.10); color: #fff; }
.section-dark .team-arrow:hover { background: var(--gold-tint); color: var(--ink); }

@media (max-width: 800px) {
  .team-carousel { grid-template-columns: 1fr; gap: 1.75rem; }
  .team-text { min-height: 0; }
}

/* ------------------------------------------------------------------ */
/* Prozess-Pins: Nachbau eines 21st.dev "How it works"-Steppers
   (Pinnwand-Karten, leicht gedreht, Nummern-Badge, gestrichelte
   Verbindungslinie), nativ ohne React/Tailwind/motion mit dem
   bestehenden Reveal-System umgesetzt. Hier in site.css (statt in
   pages.css), weil sowohl die Prozess-Unterseite (voller Umfang, siehe
   pages.css fuer die Chart-Visuals pro Karte) als auch der schmalere
   Prozess-Teaser auf der Startseite (siehe .process-pins--compact in
   home.css) dieselben Basis-Klassen nutzen. */

.process-pins-wrap { position: relative; margin: 3rem 0 0; }
.process-pins-line {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 27px;
  width: 2px;
  background-image: repeating-linear-gradient(to bottom, var(--gold-soft) 0 8px, transparent 8px 18px);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 1600ms var(--ease);
}
.js [data-grow].process-pins-line.in { transform: scaleY(1); }

.process-pins {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
}
.process-pin { padding-left: 4rem; position: relative; max-width: 34rem; }
.process-pin:nth-child(even) { align-self: flex-end; }
.process-pin:nth-child(odd) .pin-card { transform: rotate(-1deg); }
.process-pin:nth-child(even) .pin-card { transform: rotate(1deg); }

.pin-badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  box-shadow: 0 0 0 6px var(--surface);
}
.pin-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pin-card:hover { transform: rotate(0deg) !important; box-shadow: 0 14px 34px rgba(17, 21, 26, 0.08); }
.pin-card h3 { margin-bottom: 0.5rem; }
.pin-card p { margin: 0 0 1.1rem; color: var(--ink-muted); font-size: var(--size-small); }

@media (max-width: 700px) {
  .process-pin, .process-pin:nth-child(even) { align-self: stretch; max-width: none; padding-left: 3.25rem; }
  .process-pin .pin-card { transform: none !important; }
  .process-pins-line { left: 19px; }
  .pin-badge { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .process-pins-line { transition: none; }
  .pin-card { transition: none; }
  .process-pin:nth-child(odd) .pin-card,
  .process-pin:nth-child(even) .pin-card,
  .pin-card:hover { transform: none; }
}

/* ------------------------------------------------------------------ */
/* Schritte als Zeitleiste */

.timeline {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  height: 2px;
  background: var(--line-strong);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1200ms var(--ease);
}
.js .in .timeline::before { transform: scaleX(1); }
.timeline li { counter-increment: step; position: relative; padding-top: 3.25rem; }
.timeline li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  box-shadow: 0 0 0 6px var(--surface);
  transform: scale(0.6);
  opacity: 0;
  transition: transform 400ms var(--ease), opacity 400ms var(--ease);
}
.js .in .timeline li::before { transform: scale(1); opacity: 1; }
.js .in .timeline li:nth-child(1)::before { transition-delay: 200ms; }
.js .in .timeline li:nth-child(2)::before { transition-delay: 650ms; }
.js .in .timeline li:nth-child(3)::before { transition-delay: 1100ms; }
.timeline h3 { margin-bottom: 0.4rem; }
.timeline p { margin: 0; font-size: var(--size-small); color: var(--ink-muted); }

/* ------------------------------------------------------------------ */
/* CTA-Block, Nachbau der 21st.dev call-to-action-01
   Zentrierter Text ohne Hintergrundraster (Raster am 2026-09-23 auf allen
   Seiten entfernt). Die Partner-Reihe traegt Text statt Logos. */

.cta-block {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 9vw, 7.5rem) clamp(3rem, 6vw, 5rem);
  text-align: center;
}
.cta-inner { position: relative; }
.cta-inner h2 { max-width: 22ch; margin-inline: auto; font-size: clamp(1.9rem, 4.2vw, 2.75rem); }
.cta-inner .lede { max-width: 36rem; margin-inline: auto; font-size: 1.125rem; }
.cta-inner .cta-row { justify-content: center; }

.cta-proof {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  padding: 0;
  max-width: 60rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.cta-proof li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  text-align: left;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 1rem 1.1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-muted);
}
.cta-proof svg { flex: none; width: 22px; height: 22px; color: var(--gold-deep); margin-top: 1px; }

@media (max-width: 768px) {
  .cta-proof { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/* Kontakt */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.next-steps { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 0.9rem; }
.next-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.85rem; align-items: start; }
.next-steps .when {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--gold-deep);
  background: var(--gold-tint);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.7rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  /* feste Breite, "Danach" ist das laengste Wort, sonst rutscht die Textkante */
  min-width: 5.75rem;
  text-align: center;
}
.next-steps p { margin: 0; font-size: var(--size-small); color: var(--ink-muted); }
.next-steps p b { color: var(--ink); font-weight: 600; }

.contact-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.85rem;
  border-top: 1px solid var(--line);
  font-size: var(--size-small);
}
.contact-line svg { flex: none; color: var(--gold-deep); }
.contact-line a { text-decoration: none; font-weight: 500; }
.contact-line a:hover { color: var(--gold-deep); text-decoration: underline; }

.form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: 1.1rem;
  box-shadow: 0 24px 60px rgba(17, 21, 26, 0.06);
}
.form-head { margin-bottom: 0.25rem; }
.form-head h3 { margin-bottom: 0.25rem; }
.form-head p { margin: 0; font-size: var(--size-small); color: var(--ink-muted); }

.field { display: grid; gap: 0.4rem; }
.field label { font-size: var(--size-small); font-weight: 500; }
.field .req { color: var(--gold-deep); }
.field input,
.field textarea {
  font: inherit;
  color: var(--ink);
  background: var(--surface-soft);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  min-height: 48px;
  width: 100%;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field textarea:focus {
  background: #fff;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(188, 143, 53, 0.15);
  outline: none;
}
.field-row { display: grid; gap: 1.1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-muted);
}
.consent input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--gold); }
.consent a { color: var(--gold-deep); }

.hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.form-status { margin: 0; font-size: var(--size-small); }
.form-status[data-state="ok"] { color: #1c6b3f; }
.form-status[data-state="error"] { color: #a4262c; }

/* ------------------------------------------------------------------ */
/* Sticky-CTA auf dem Handy */

.sticky-cta {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 45;
  padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease);
  display: none;
}
.sticky-cta.is-visible { transform: none; }
.sticky-cta .btn { width: 100%; }

/* ------------------------------------------------------------------ */
/* Quellen */

.sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.sources li { font-size: 0.8125rem; color: var(--ink-faint); line-height: 1.5; }
.sources li b { color: var(--gold-deep); font-weight: 600; margin-right: 0.3rem; }

/* ------------------------------------------------------------------ */
/* Fußzeile */

.footer-logo { display: inline-block; }
.footer-logo img { height: 88px; width: auto; }
@media (max-width: 620px) { .footer-logo img { height: 68px; } }

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 3rem 2rem;
  font-size: var(--size-small);
  color: var(--ink-muted);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
.footer-heading {
  margin: 0 0 0.9rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.5rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--gold-deep); text-decoration: underline; }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------------ */
/* Bewegung */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: 90ms; }
.js .reveal[data-delay="2"] { transition-delay: 180ms; }
.js .reveal[data-delay="3"] { transition-delay: 270ms; }
.js .reveal[data-delay="4"] { transition-delay: 360ms; }
.js .reveal[data-delay="5"] { transition-delay: 450ms; }

/* Balken, die beim Erscheinen wachsen. Zielbreite steht in --to. */
.js .grow .fill { width: 0; }
.js .grow.in .fill { width: var(--to); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .grow .fill, .calc-bar .fill, .rarity-row .fill { transition: none; width: var(--to); }
  .chart-line { stroke-dasharray: none; stroke-dashoffset: 0; animation: none !important; clip-path: none; }
  .chart-line.is-forecast { stroke-dasharray: 7 6; }
  .chart-dot { transform: none; animation: none !important; }
  .chart-txt { opacity: 1; animation: none !important; }
  .timeline::before { transform: scaleX(1); transition: none; }
  .timeline li::before { transform: none; opacity: 1; transition: none; }
  .btn, .card { transition: none; }
  .js .brand-logo, .js .nav-links a, .js .nav-cta { animation: none; }
  .mobile-menu, .mobile-links a, .mobile-cta, .mobile-close { transition: none; }
  .btn:hover { transform: none; }
  .btn-primary, .btn-primary > span, .btn-primary::before, .btn-primary::after { transition: none; }
  .btn-primary:hover { background-size: 0 0; background-color: var(--gold-hover); border-radius: var(--radius-pill); }
  .btn-primary:hover > span { transform: translateX(-10px); }
  .btn-primary:hover::before { left: -25%; }
  .btn-primary:hover::after { right: 1rem; }
  .card.is-lift:hover { transform: none; }
}

/* ------------------------------------------------------------------ */
/* Responsiv */

/* Sechs Hauptnav-Punkte (seit OPT-IN-Podcast-Ergaenzung, 09.2026) brauchen
   mehr Platz als die bisherigen fuenf; Umschaltpunkt auf das Hamburger-Menue
   deshalb bei 1060px statt erst bei 768px, damit nichts umbricht. */
@media (max-width: 1060px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
}

@media (max-width: 768px) {
  .site-header { padding: 0.9rem var(--gutter); }
  .navbar { gap: 1rem; padding: 0.4rem 0.4rem 0.4rem 0.8rem; }
  .is-scrolled .navbar { padding: 0.25rem 0.25rem 0.25rem 0.6rem; }
}

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-copy h1 { max-width: 20ch; }
  .stat-band { grid-template-columns: 1fr; gap: 2rem; }
  .effort { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {

  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; gap: 1.75rem; }
  .timeline::before { top: 0; bottom: 0; left: 20px; right: auto; width: 2px; height: auto; transform-origin: top; transform: scaleY(0); }
  .js .in .timeline::before { transform: scaleY(1); }
  .timeline li { padding-top: 0; padding-left: 3.5rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .sticky-cta { display: block; }
  body.has-sticky { padding-bottom: 84px; }
}

@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .rarity { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .calc-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ------------------------------------------------------------------ */
/* Rechtstexte */

.legal { padding-block: clamp(3rem, 6vw, 5rem); }
.legal-inner { max-width: 48rem; margin-inline: auto; }
.legal h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); margin-bottom: 0.5rem; }
.legal .stand { margin: 0 0 2.5rem; font-size: var(--size-small); color: var(--ink-faint); }
.legal h2 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 2.75rem 0 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.legal h3 { font-size: 1rem; margin: 1.5rem 0 0.4rem; }
.legal p, .legal li { color: var(--ink-muted); font-size: var(--size-small); line-height: 1.65; }
.legal p { margin: 0 0 1rem; }
.legal ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.legal li { margin-bottom: 0.4rem; }
.legal a { color: var(--gold-deep); }
.legal a:hover { text-decoration: none; }
.legal dl {
  margin: 0 0 1.25rem;
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: 0.5rem 1.5rem;
  font-size: var(--size-small);
}
.legal dt { font-weight: 600; color: var(--ink); }
.legal dd { margin: 0; color: var(--ink-muted); }
@media (max-width: 620px) {
  .legal dl { grid-template-columns: 1fr; gap: 0.15rem; }
  .legal dd { margin-bottom: 0.85rem; }
}

/* ------------------------------------------------------------------ */
/* Druck */

@media print {
  .site-header, .nav-toggle, .form, .skip-link, .sticky-cta, .mobile-menu, .site-footer, .legal-download { display: none; }
  body { color: #000; }
}

/* ------------------------------------------------------------------ */
/* Soft Blur In (2026-09-23), Nachbau der React-Komponente
   "soft-blur-in" (motion/react) ohne React: jeder Buchstabe blendet
   gestaffelt aus Unschaerfe und leichtem Versatz nach oben ein, Apples
   Hero-Titel-Reveal. Werte wie im Original: 0,9 s pro Zeichen,
   25 ms Staffelung, Ease cubic-bezier(0.22, 1, 0.36, 1), 16 px Versatz,
   12 px Unschaerfe. Laeuft beim Laden (triggerOnView = false).
   Markup: h1.soft-blur-in > .sr-only (Volltext) + .soft-blur-text
   (aria-hidden) > .sb-word > .sb-char mit --i = Zeichenindex. Woerter
   sind eigene inline-blocks, damit nur zwischen Woertern umgebrochen
   wird. Ohne JS und bei reduzierter Bewegung sofort sichtbar. */

.soft-blur-text .sb-word { display: inline-block; white-space: nowrap; }
.soft-blur-text .sb-char { display: inline-block; white-space: pre; }
.js .soft-blur-in .sb-char {
  opacity: 0;
  animation: soft-blur-in 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--sb-delay, 0ms) + var(--i) * 25ms);
}
@keyframes soft-blur-in {
  from { opacity: 0; transform: translateY(16px); filter: blur(12px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .js .soft-blur-in .sb-char { animation: none; opacity: 1; }
}

/* ------------------------------------------------------------------ */
/* Blur Reveal (2026-09-23), Nachbau der React-Komponente "blur-reveal"
   (motion/react) ohne React: Elemente blenden aus 10 px Unschaerfe,
   unsichtbar und 20 % nach unten versetzt ein, Dauer 1 s, Verzoegerung
   pro Element in --d. Ausgeloest, wenn der umgebende .reveal-Container
   die Klasse .in bekommt (bestehende Logik in site.js). Der Container
   selbst blendet nicht zusaetzlich ein (.br-host), sonst wuerde sein
   Opacity-Fade den Effekt ueberdecken (gleicher Fallstrick wie beim
   Wisch-Effekt im Schluss-CTA der Startseite). */

.blur-reveal { display: inline-block; }
.js .reveal.br-host { opacity: 1; transform: none; transition: none; }
.js .br-host .blur-reveal {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(20%);
  transition: opacity 1s cubic-bezier(0, 0, 0.58, 1), filter 1s cubic-bezier(0, 0, 0.58, 1), transform 1s cubic-bezier(0, 0, 0.58, 1);
  transition-delay: var(--d, 0ms);
}
.js .br-host.in .blur-reveal { opacity: 1; filter: blur(0); transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .br-host .blur-reveal { transition: none; opacity: 1; filter: none; transform: none; }
}

/* ------------------------------------------------------------------ */
/* Einwilligung externe Inhalte (2026-09-27), Fenster aus consent.js.
   Hell, unten links am Desktop, damit es nicht mit dem Guide-Hinweis
   unten rechts kollidiert, auf dem Handy als Leiste über die ganze
   Breite. Beide Knöpfe gleich gestaltet, keiner wird hervorgehoben. */
.einw {
  position: fixed;
  left: max(1.25rem, env(safe-area-inset-left));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 70;
  width: min(26rem, calc(100vw - 2.5rem));
  padding: 1.25rem 1.25rem 1.1rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 60px -24px rgba(17, 21, 26, 0.35), 0 2px 10px rgba(17, 21, 26, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem);
  transition: opacity 200ms ease-in, transform 200ms ease-in, visibility 0s linear 200ms;
}
.einw.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 360ms var(--ease), transform 360ms var(--ease), visibility 0s;
}
.einw-titel { margin: 0 0 0.35rem; font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.einw-text { margin: 0 0 1rem; font-size: 0.875rem; line-height: 1.55; color: var(--ink-muted); }
.einw-text a { color: var(--gold-deep); }
.einw-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.einw-knopf {
  min-height: 44px;
  padding: 0.6rem 0.9rem;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.einw-knopf:hover { background: var(--gold-tint); border-color: var(--gold-soft); }
.einw-knopf:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
/* Einstellungen (2026-09-28): zwei Schalter und "Auswahl speichern",
   aufgeklappt über den unauffälligen Textknopf unter den beiden Hauptknöpfen */
.einw-einstellungen { display: grid; gap: 0.5rem; margin: 0 0 0.9rem; }
.einw-einstellungen[hidden] { display: none; }
.einw-option {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  min-height: 44px;
  padding: 0.55rem 0.7rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  cursor: pointer;
}
.einw-option strong { color: var(--ink); font-weight: 600; }
.einw-option input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--gold); }
.einw-option:focus-within { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.einw-speichern { width: 100%; }
.einw-mehr {
  display: block;
  min-height: 44px;
  margin: 0.25rem auto -0.5rem;
  padding: 0 0.75rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  cursor: pointer;
}
.einw-mehr:hover { color: var(--ink); }
.einw-mehr:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; border-radius: 4px; }
.einw-mehr[hidden] { display: none; }
@media (max-width: 620px) {
  .einw { left: 0; right: 0; bottom: 0; width: auto; border-radius: var(--radius-card) var(--radius-card) 0 0; padding-bottom: calc(1.1rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .einw, .einw.is-open { transform: none; }
}
@media print { .einw { display: none; } }

/* Knopf im Footer, der aussieht wie die Links daneben */
.footer-knopf {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: inherit;
}
.footer-knopf:hover { color: var(--gold-deep); text-decoration: underline; }
.footer-knopf:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }