/* ==========================================================================
   SalesLevelZ – Design System v2 (nach Referenz "Revenue Architects")
   Deep Green · Charcoal · Greige-Paper · Sage · Playfair Display + Inter
   ========================================================================== */

@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Metrisch angepasste Ersatzschriften. Ohne sie springt der Text um, sobald die
   echten Schriften ankommen, und alles darunter verrutscht: gemessen 0,143 auf der
   Startseite und 0,148 auf der Gruenderseite, Googles Grenze fuer "gut" ist 0,1.
   Die Werte stammen aus einer Messung am 06.10. gegen Arial bei 200 px. */
@font-face { font-family: "Bricolage Fallback"; src: local("Arial"); size-adjust: 105.4%;
  ascent-override: 92%; descent-override: 23%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 105.7%;
  ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }

:root {
  --bg: #EEEEE8;
  --bg-2: #F5F5F0;
  --paper: #FAFAF8;
  --ink: #15201B;
  --ink-2: #4A534D;
  --ink-3: #5F6761;
  --green: #0F3D2E;
  --green-2: #1F5A44;
  --dark: #0C1E17;
  --dark-2: #11281F;
  --sage: #C9D6CB;
  --sage-2: #DDE5DC;
  --sage-3: #93AE9C;
  --greige: #C9BDAE;
  --line: rgba(21, 32, 27, 0.14);
  --line-2: rgba(21, 32, 27, 0.26);
  --line-light: rgba(238, 238, 232, 0.16);

  --serif: "Bricolage Grotesque", "Bricolage Fallback", "Inter", system-ui, sans-serif;
  --sans: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --max: 1320px;
  --gutter: clamp(20px, 4vw, 60px);
  --nav-h: 76px;
  --r: 18px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --section-y: clamp(80px, 8.4vw, 124px);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--green); color: var(--paper); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

.container { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--dark); color: var(--paper); padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--green-2); outline-offset: 3px; border-radius: 6px; }
.on-dark :focus-visible { outline-color: var(--sage); }

/* ---------------- Typografie ---------------- */
.display, .h2, .h3, .h4 { font-family: var(--serif); font-weight: 500; margin: 0; color: var(--ink); letter-spacing: -0.035em; font-variation-settings: "opsz" 96; }
.display { font-size: clamp(2.6rem, 5.4vw, 5.6rem); line-height: 1.02; }
.h2 { font-size: clamp(2.2rem, 4.2vw, 4.1rem); line-height: 1.04; text-wrap: balance; }
.h3 { font-size: clamp(1.65rem, 2.5vw, 2.4rem); line-height: 1.1; }
.h4 { font-size: clamp(1.3rem, 1.6vw, 1.55rem); line-height: 1.2; letter-spacing: -0.01em; }
.display em, .h2 em, .h3 em, .h4 em { font-style: normal; color: var(--green); }
.on-dark .display, .on-dark .h2, .on-dark .h3, .on-dark .h4 { color: var(--bg); }
.on-dark .display em, .on-dark .h2 em, .on-dark .h3 em { color: var(--sage); }
.label { display: block; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.19em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 22px; }
.on-dark .label { color: rgba(238, 238, 232, 0.62); }
.lead { font-size: clamp(1.05rem, 1.25vw, 1.2rem); line-height: 1.55; color: var(--ink-2); max-width: 36em; margin: 0; }
.body { color: var(--ink-2); max-width: 60ch; margin: 0; }
.body + .body { margin-top: 1em; }
.on-dark .lead, .on-dark .body { color: rgba(238, 238, 232, 0.72); }
.small-caps { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.19em; text-transform: uppercase; line-height: 1.7; color: var(--ink-2); }

/* Wort-Reveal */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.w > .wi { display: inline-block; will-change: transform; }

/* ---------------- Buttons ---------------- */
.pill {
  --pill-bg: var(--dark); --pill-fg: var(--bg);
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  height: 50px; padding: 0 8px 0 24px; border-radius: 999px; border: 0;
  background: var(--pill-bg); color: var(--pill-fg);
  font-size: 0.92rem; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
  will-change: transform;
}
.pill__icon { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(238, 238, 232, 0.12); overflow: hidden; position: relative; }
.pill__icon .icon { width: 16px; height: 16px; transition: transform .45s var(--ease-out); }
.pill__icon .icon + .icon { position: absolute; transform: translateX(-160%); }
.pill:active { transform: scale(0.97); }
.pill--light { --pill-bg: var(--bg); --pill-fg: var(--dark); }
.pill--light .pill__icon { background: rgba(12, 30, 23, 0.08); }
.pill--sm { height: 42px; padding-left: 18px; font-size: 0.86rem; gap: 10px; }
.pill--sm .pill__icon { width: 28px; height: 28px; }
.pill--ghost { --pill-bg: transparent; --pill-fg: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.pill--ghost .pill__icon { background: rgba(12, 30, 23, 0.06); }
.pill[aria-busy="true"] { opacity: .7; cursor: progress; }
@media (hover: hover) and (pointer: fine) {
  .pill:hover { --pill-bg: var(--green); }
  .pill--light:hover { --pill-bg: #fff; }
  .pill--ghost:hover { --pill-bg: var(--dark); --pill-fg: var(--bg); }
  .pill:hover .pill__icon .icon:first-child { transform: translateX(160%); }
  .pill:hover .pill__icon .icon + .icon { transform: translateX(0); }
}

.link-u {
  display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none;
  font-size: 0.92rem; font-weight: 500; padding: 6px 0;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .45s var(--ease-out);
}
.link-u .icon { width: 16px; height: 16px; transition: transform .35s var(--ease-out); }
.on-dark .link-u { color: var(--bg); }
@media (hover: hover) and (pointer: fine) {
  .link-u:hover { background-size: 0 1px; background-position: 100% 100%; }
  .link-u:hover .icon { transform: translateX(4px); }
}

.round-btn {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .2s var(--ease-out);
  text-decoration: none; flex: none;
}
.round-btn .icon { width: 18px; height: 18px; }
.round-btn:active { transform: scale(0.94); }
.on-dark .round-btn { border-color: rgba(238, 238, 232, 0.3); color: var(--bg); }
@media (hover: hover) { .round-btn:hover { background: var(--dark); border-color: var(--dark); color: var(--bg); }
  .on-dark .round-btn:hover { background: var(--bg); border-color: var(--bg); color: var(--dark); } }
.icon { flex: none; }

/* ---------------- Navigation ---------------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h); transition: transform .5s var(--ease-out), background-color .35s ease, box-shadow .35s ease; }
.nav.is-scrolled { background: rgba(238, 238, 232, 0.86); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); box-shadow: 0 1px 0 var(--line); }
.nav.is-hidden { transform: translateY(-100%); }
.nav__inner { height: 100%; display: flex; align-items: center; gap: 40px; }
/* Das Logo darf im Flex-Kopf nicht schrumpfen. Ohne flex:none quetscht es auf schmalen
   Geraeten zusammen: bei 360px auf 196x22, bei 320px sogar auf 156x22 statt 208x22,
   das Seitenverhaeltnis bricht von 9,45 auf 7,09. Am 12.10. gemessen. */
.nav__logo { flex: none; }
.nav__logo img { height: 24px; width: auto; }
.nav__links { display: flex; gap: 30px; list-style: none; margin: 0 0 0 28px; padding: 0; }
.nav__links a { position: relative; font-size: 0.86rem; color: var(--ink-2); text-decoration: none; transition: color .2s ease; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out); }
.nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) { .nav__links a:hover { color: var(--ink); } .nav__links a:hover::after { transform: scaleX(1); transform-origin: left; } }
.nav__right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.nav__menu { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
.nav__menu .icon { width: 18px; height: 18px; }
@media (hover: hover) { .nav__menu:hover { background: var(--dark); color: var(--bg); border-color: var(--dark); } }
@media (max-width: 1024px) { .nav__links { display: none; } }
@media (max-width: 560px) { .nav .pill { display: none; } }

/* Vollbild-Menü */
.menu { position: fixed; inset: 0; z-index: 90; background: var(--dark); color: var(--bg); visibility: hidden; overflow: hidden; clip-path: circle(0% at calc(100% - 60px) 38px); }
.menu.is-open { visibility: visible; }
.menu__inner { position: relative; z-index: 1; height: 100%; display: grid; grid-template-rows: var(--nav-h) 1fr auto; }
.menu__top { display: flex; align-items: center; justify-content: space-between; }
.menu__top img { height: 24px; width: auto; }
.menu__close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(238,238,232,.3); background: transparent; color: var(--bg); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.menu__close .icon { width: 18px; height: 18px; }
.menu__list { list-style: none; margin: 0; padding: clamp(24px, 6vh, 80px) 0 0; align-self: center; }
.menu__list a { display: inline-flex; align-items: baseline; gap: 18px; font-family: var(--serif); font-size: clamp(2.4rem, 6.5vw, 5.2rem); line-height: 1.12; color: var(--bg); text-decoration: none; letter-spacing: -0.02em; transition: color .3s ease; }
.menu__list a span { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.12em; color: rgba(238,238,232,.6); }
.menu__list li { overflow: hidden; }
@media (hover: hover) { .menu__list a:hover { color: var(--sage); font-style: normal; } }
.menu__foot { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; padding: 28px 0 36px; border-top: 1px solid var(--line-light); color: rgba(238,238,232,.6); font-size: 0.9rem; }
.menu__orb { position: absolute; width: 60vw; aspect-ratio: 1; right: -18vw; bottom: -26vw; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(147,174,156,.45), rgba(31,90,68,.25) 55%, rgba(12,30,23,0) 72%); z-index: 0; pointer-events: none; }

/* Loader / Seitenübergang */
.curtain { position: fixed; inset: 0; z-index: 150; background: var(--dark); display: none; align-items: center; justify-content: center; pointer-events: none; }
.js-motion .curtain { display: flex; animation: curtain-failsafe .01s linear 3.2s forwards; }
.curtain__mark { width: 52px; height: auto; overflow: visible; }
.curtain__mark rect, .curtain__mark path { transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes curtain-failsafe { to { visibility: hidden; opacity: 0; } }
/* Ladeanimation erst ab Tablet. Auf dem Handy kostete der Vorhang gemessen rund 2 s
   bis zum ersten Blick und 0,8 s pro Klick. Muss auch im CSS stehen, sonst blitzt die
   dunkle Flaeche auf, bevor das Skript ueberhaupt laeuft. */
@media (max-width: 767px) { .curtain, .js-motion .curtain { display: none; animation: none; } }

/* ---------------- Kreise (Orbs) ---------------- */
.orb { position: absolute; border-radius: 50%; aspect-ratio: 1; will-change: transform; }
.orb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: var(--grain); background-size: 220px; mix-blend-mode: overlay; opacity: .5; pointer-events: none; }
.orb--dark { background: radial-gradient(circle at 32% 34%, #2E5E4A 0%, #164634 30%, #0E3024 58%, #0A2019 100%); box-shadow: inset -30px -40px 80px rgba(0,0,0,.25); }
.orb--dark-soft { background: radial-gradient(circle at 70% 30%, #3D6B57 0%, #1A4636 40%, #0E2A20 100%); }
.orb--glass {
  background: radial-gradient(circle at 60% 30%, rgba(255,255,255,.75) 0%, rgba(240,244,239,.45) 38%, rgba(201,214,203,.28) 70%, rgba(147,174,156,.22) 100%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: inset 0 0 60px rgba(255,255,255,.35), 0 30px 80px -30px rgba(12,30,23,.25);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.orb--sage { background: radial-gradient(circle at 40% 35%, rgba(221,229,220,.95) 0%, rgba(176,197,181,.8) 45%, rgba(126,156,136,.55) 100%); }
.orb--mist { background: radial-gradient(circle, rgba(147,174,156,.55) 0%, rgba(147,174,156,0) 70%); filter: blur(30px); }
.orb--ring { border: 1px solid rgba(21,32,27,.18); background: transparent; }
.orb--ring::after { display: none; }
.orb-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--dark); }
.orb-label { position: absolute; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.orb-center { position: absolute; margin: 0; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.orb-center span { font-family: var(--serif); font-style: normal; font-size: max(15px, calc(var(--s, 1) * 1.45vw)); line-height: 1.3; color: var(--ink); letter-spacing: -0.01em; }
/* Orbit: vier feste Säulen, ein Lichtpunkt läuft im Takt von Säule zu Säule */
.orbit { position: absolute; aspect-ratio: 1; pointer-events: none; }
.orbit__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(120, 146, 131, 0.55); }
.orbit__spin { position: absolute; inset: -1px; border-radius: 50%; animation: orbit-spin 16s linear infinite; }
.orbit__dot { position: absolute; left: 50%; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(147,174,156,.35), 0 0 18px 4px rgba(147,174,156,.55); }
.orbit__node { position: absolute; width: 0; height: 0; }
.orbit__node.n-1 { left: 14.64%; top: 14.64%; } .orbit__node.n-2 { left: 85.36%; top: 14.64%; }
.orbit__node.n-3 { left: 85.36%; top: 85.36%; } .orbit__node.n-4 { left: 14.64%; top: 85.36%; }
.orbit__chip { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 10px; border-radius: 999px; white-space: nowrap;
  font-size: 0.64rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink);
  background: rgba(250, 250, 248, 0.86); border: 1px solid rgba(21, 32, 27, 0.1); box-shadow: 0 10px 30px -18px rgba(12,30,23,.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: chip-on 16s linear infinite; }
.orbit__chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; animation: chip-dot 16s linear infinite; }
.n-2 .orbit__chip, .n-2 .orbit__chip i { animation-delay: -14.48s; }
.n-3 .orbit__chip, .n-3 .orbit__chip i { animation-delay: -10.48s; }
.n-4 .orbit__chip, .n-4 .orbit__chip i { animation-delay: -6.48s; }
.n-1 .orbit__chip, .n-1 .orbit__chip i { animation-delay: -2.48s; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes chip-on { 0%, 26%, 100% { background: rgba(250,250,248,.86); color: var(--ink); } 3%, 18% { background: var(--dark); color: var(--bg); } }
@keyframes chip-dot { 0%, 26%, 100% { background: var(--green); transform: scale(1); } 3%, 18% { background: var(--sage); transform: scale(1.35); } }

/* ---------------- Hero ---------------- */
.hero { position: relative; min-height: max(760px, 100svh); padding-top: var(--nav-h); overflow: hidden; display: flex; flex-direction: column; isolation: isolate; }
.hero__art { position: absolute; top: 0; right: 0; width: 62vw; height: 100%; z-index: -1; --s: 1; --x: 3vw; --y: 0vw; }
.hero__art > * { --l: 0; --t: 0; left: calc(var(--x) + var(--s) * var(--l) * 1vw); top: calc(var(--y) + var(--s) * var(--t) * 1vw); }
.hero__art .orb--dark { width: calc(var(--s) * 30vw); --l: 30; --t: 6.5; }
.hero__art .orb--glass { width: calc(var(--s) * 26vw); --l: 11.5; --t: 14.5; z-index: 2; }
.hero__art .orb--sage { width: calc(var(--s) * 18vw); --l: 46; --t: 30; z-index: 1; }
.hero__art .orb--mist { width: calc(var(--s) * 32vw); --l: 8; --t: 18; }
.hero__art .orbit { width: calc(var(--s) * 33vw); --l: 8; --t: 11; z-index: 3; }
.hero__art .orb-center { width: calc(var(--s) * 26vw); --l: 11.5; --t: 14.5; z-index: 4; }
.hero__inner { flex: 1; display: flex; align-items: center; }
.hero__content { max-width: 620px; padding-block: clamp(40px, 6vh, 80px); }
.hero .display { margin-top: 4px; font-size: clamp(2.2rem, 4.3vw, 4.6rem); hyphens: manual; }
.hero__content { max-width: 720px; }
.hero__lead { margin-top: 26px; max-width: 30em; }
.hero__actions { display: flex; align-items: center; gap: 28px; margin-top: 38px; flex-wrap: wrap; }
.scroll-cue { display: flex; align-items: center; gap: 14px; margin-top: 56px; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); }
.scroll-cue__line { position: relative; width: 1px; height: 48px; background: var(--line); overflow: hidden; }
.scroll-cue__line::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 45%; background: var(--ink); animation: cue 2.2s var(--ease-io) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 100% { transform: translateY(230%); } }

/* Erfahrungs-Laufband */
.proof { position: relative; z-index: 2; border-top: 1px solid var(--line); padding: 26px 0 30px; }
.proof__row { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; }
.proof__label { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); line-height: 1.6; margin: 0; max-width: 13em; }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__group { display: flex; align-items: center; gap: 56px; padding-right: 56px; }
.marquee__item { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; font-family: var(--serif); font-style: normal; font-size: 1.3rem; color: var(--ink); }
.marquee__item b { font-family: var(--sans); font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; }
.marquee__sep { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--sage-3); }

/* ---------------- Herausforderung (dunkel) ---------------- */
.challenge { background: var(--dark); color: var(--bg); padding-block: var(--section-y); position: relative; overflow: hidden; }
.challenge__head { display: grid; grid-template-columns: minmax(0, 1.15fr) 1px minmax(0, 0.85fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.challenge__rule { align-self: stretch; background: var(--line-light); }
.challenge__side .body { font-size: 1.05rem; }
.challenge__side .link-u { margin-top: 22px; }
.brakes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(64px, 7vw, 104px); border-top: 1px solid var(--line-light); scroll-margin-top: 120px; }
.brake { padding: 32px 28px 8px 0; }
.brake + .brake { padding-left: 28px; border-left: 1px solid var(--line-light); }
.brake__no { display: block; font-size: 0.72rem; letter-spacing: 0.16em; color: var(--sage-3); margin-bottom: 22px; font-variant-numeric: tabular-nums; }
.challenge { padding-bottom: 0 !important; }
.bridge { position: relative; margin: clamp(72px, 8vw, 120px) 0 0; height: clamp(380px, 44vw, 640px); overflow: hidden; isolation: isolate; }
.bridge__media { position: absolute; inset: -9% 0; z-index: -2; }
.bridge__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; }
.bridge::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--dark) 0%, rgba(12,30,23,.55) 30%, rgba(12,30,23,.2) 60%, rgba(12,30,23,.55) 100%); }
.bridge__text { position: absolute; left: 0; right: 0; bottom: clamp(36px, 5vw, 72px); }
.bridge__text .label { color: var(--sage); }
.bridge__claim { display: block; font-family: var(--serif); font-size: clamp(1.9rem, 3.4vw, 3.3rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--bg); max-width: 17em; }
.bridge__claim em { color: var(--sage); }
.brake .h4 { color: var(--bg); }
.brake p { margin: 14px 0 0; font-size: 0.93rem; color: rgba(238,238,232,.64); }
.challenge__orb { position: absolute; width: 38vw; right: -14vw; bottom: -22vw; opacity: .55; }

/* ---------------- System (Kreis-Stufen) ---------------- */
.system { padding-block: var(--section-y); overflow: hidden; }
.system__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) auto; gap: clamp(24px, 4vw, 64px); align-items: end; }
.system__intro { border-left: 1px solid var(--line-2); padding-left: 28px; }
.system__ctrl { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; text-align: right; }
.system__ctrl .small-caps { max-width: 14em; }
.system__btns { display: flex; gap: 10px; }
.stages { --ov: clamp(40px, 5vw, 72px); display: flex; margin-top: clamp(56px, 6vw, 88px); padding-right: var(--ov); }
.stage {
  position: relative; flex: 1 1 0; min-width: 0; aspect-ratio: 1; border-radius: 50%;
  margin-right: calc(var(--ov) * -1);
  display: flex; flex-direction: column; justify-content: center; padding: 0; container-type: inline-size;
  color: var(--ink); text-decoration: none; isolation: isolate;
  transition: transform .6s var(--ease-out);
}
.stage { font: inherit; border: 0; background: none; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.stage:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; }
.stage::before { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -2; transition: box-shadow .6s var(--ease-out); }
.stages .stage > .stage__glow { position: absolute; inset: 0; margin: 0; border-radius: 50%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.55), rgba(255,255,255,0) 45%); mix-blend-mode: soft-light; }
.stage.is-active > .stage__glow { background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(147,174,156,.45), rgba(147,174,156,0) 48%); mix-blend-mode: normal; }
.stage::after { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -1; background: radial-gradient(circle at 35% 30%, #2B5A47 0%, #12382A 45%, #0C241B 100%); opacity: 0; transition: opacity .6s var(--ease-out); }
.stage:nth-child(1)::before { background: radial-gradient(circle at 40% 30%, #FBFBF8, #EEF0EA 70%); box-shadow: inset 0 0 0 1px rgba(21,32,27,.08), 0 30px 60px -40px rgba(12,30,23,.35); }
.stage:nth-child(2)::before { background: radial-gradient(circle at 40% 30%, #E7EDE6, #CFDBD1 75%); box-shadow: 0 30px 60px -40px rgba(12,30,23,.35); }
.stage:nth-child(3)::before { background: radial-gradient(circle at 40% 30%, #DCE5DD, #B8CBBD 75%); box-shadow: 0 30px 60px -40px rgba(12,30,23,.35); }
.stage:nth-child(4)::before { background: radial-gradient(circle at 40% 30%, #C9D6CB, #9FB6A6 80%); box-shadow: 0 30px 60px -40px rgba(12,30,23,.35); }
.stage:nth-child(1) { z-index: 1; } .stage:nth-child(2) { z-index: 2; } .stage:nth-child(3) { z-index: 3; } .stage:nth-child(4) { z-index: 4; }
.stage.is-active { color: var(--bg); }
.stage.is-active::after { opacity: 1; }
.stages .stage > * { margin-left: 22cqw; margin-right: 24cqw; }
.stage .round-btn { align-self: flex-start; }
.stage__no { font-size: 0.72rem; letter-spacing: 0.14em; opacity: .7; margin: 0 0 18px; font-variant-numeric: tabular-nums; }
.stage .h4 { color: inherit; font-size: clamp(1.4rem, 2vw, 2rem); }
.stage__text { margin-top: 10px; font-size: 0.9rem; line-height: 1.5; opacity: .82; max-width: 15em; }
.stage .round-btn .icon { transition: transform .5s var(--ease-out); }
.stage.is-active .round-btn .icon { transform: rotate(45deg); }
.stage .round-btn { margin-top: 22px; width: 40px; height: 40px; color: inherit; border-color: currentColor; opacity: .75; }
.stage.is-active .round-btn { background: rgba(238,238,232,.12); border-color: rgba(238,238,232,.3); opacity: 1; }
@media (hover: hover) and (min-width: 1025px) {
  .stage { transition: transform .7s var(--ease-out), filter .5s ease; }
  .stage:hover { transform: translateY(-16px) scale(1.025); }
  .stage:hover::before { box-shadow: 0 50px 80px -40px rgba(12,30,23,.45); }
  .stage:hover > .stage__glow { opacity: 1; }
  .stage:hover ~ .stage { transform: translateX(18px); }
  .stage:has(~ .stage:hover) { transform: translateX(-18px); }
  .stages:hover .stage:not(:hover):not(.is-active) { filter: saturate(.7) brightness(.98); }
  .stage:hover .round-btn { opacity: 1; }
}
/* Detailbereich unter den Kreisen */
.stage-panels { position: relative; margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line-2); }
.stage-panels__progress { position: absolute; left: 0; right: 0; top: -1px; height: 1px; overflow: hidden; }
.stage-panels__progress i { position: absolute; inset: 0; background: var(--green); transform-origin: 0 50%; transform: scaleX(0); }
.js .stage-panels { display: grid; }
.js .stage-panel { grid-area: 1 / 1; }
.js .stage-panel:not(.is-active) { visibility: hidden; opacity: 0; pointer-events: none; }
.stage-panel + .stage-panel { margin-top: 40px; }
.js .stage-panel + .stage-panel { margin-top: 0; }
.stage-panel { display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(0, 4.4fr) minmax(0, 4.4fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.stage-panel__head .h3 { font-size: clamp(1.8rem, 2.6vw, 2.5rem); margin-top: 10px; }
.stage-panel__no { font-size: 0.72rem; letter-spacing: 0.16em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.stage-panel__text { margin: 0; color: var(--ink-2); font-size: 1.02rem; line-height: 1.6; }
.stage-panel__link { grid-column: 1; margin-top: -8px; justify-self: start; }
.stage-panel .checklist { grid-column: 3; grid-row: 1 / span 2; }

/* ---------------- Kennzahlen ---------------- */
.impact { padding-bottom: var(--section-y); }
.impact__row { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-2); padding-top: clamp(40px, 5vw, 64px); }
.impact__head .h3 { font-size: clamp(1.8rem, 2.6vw, 2.5rem); }
.metric { padding: 0 clamp(20px, 3vw, 44px); border-left: 1px solid var(--line); }
.metric__num { font-family: var(--serif); font-size: clamp(3rem, 5.6vw, 5.4rem); line-height: 1; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: lining-nums; }
.metric__label { margin: 14px 0 0; font-size: 0.9rem; color: var(--ink-2); max-width: 16em; }

/* ---------------- Gründer-Slider ---------------- */
.founders { position: relative; background: var(--bg-2); overflow: hidden; }
.founders__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); min-height: clamp(560px, 48vw, 720px); }
.founders__text { padding: clamp(72px, 8vw, 120px) clamp(24px, 4vw, 64px) clamp(56px, 6vw, 96px) 0; display: flex; flex-direction: column; }
.founders__count { font-variant-numeric: tabular-nums; }
.founders__text .h2 { font-size: clamp(2.2rem, 3.1vw, 3.3rem); }
.founders__text .lead { margin-top: 24px; }
.founders__text .pill { margin-top: 36px; align-self: flex-start; }
.founders__stage { position: relative; margin-right: calc(var(--gutter) * -1 - max(0px, (100vw - var(--max) - var(--gutter) * 2) / 2)); }
.slides { position: absolute; inset: 0 26% 0 0; overflow: hidden; }
.slide { position: absolute; inset: 0; }
.slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.slide:not(.is-active) { visibility: hidden; }
.slides__arc { position: absolute; width: 70%; aspect-ratio: 1; left: -30%; top: -30%; border-radius: 50%; border: 1px solid rgba(250,250,248,.5); pointer-events: none; z-index: 2; }
.quote-orb {
  position: absolute; right: 4%; top: 50%; width: min(46%, 470px); aspect-ratio: 1; border-radius: 50%;
  transform: translateY(-50%); z-index: 3;
  background: radial-gradient(circle at 30% 25%, #234F3F 0%, #12352A 45%, #0B2019 100%);
  color: var(--bg); display: flex; flex-direction: column; justify-content: center; padding: 0; container-type: inline-size;
  box-shadow: 0 40px 80px -30px rgba(12,30,23,.5);
}
.quote-orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background-image: var(--grain); background-size: 220px; mix-blend-mode: overlay; opacity: .35; pointer-events: none; }
.quote-orb > .quote-orb__text, .quote-orb > .quote-orb__ctrl { margin-left: 16cqw; margin-right: 14cqw; }
.quote-orb__text { position: relative; display: grid; }
.q { grid-area: 1 / 1; margin: 0; }
.q:not(.is-active) { visibility: hidden; }
.q blockquote { margin: 0; font-family: var(--serif); font-style: normal; font-size: clamp(1.05rem, 4.8cqw, 1.45rem); line-height: 1.35; }
.q figcaption { margin-top: 20px; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(238,238,232,.64); line-height: 1.7; }
.q figcaption strong { display: block; color: var(--bg); font-weight: 500; }
.quote-orb__ctrl { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.quote-orb__ctrl .dots { display: flex; gap: 14px; margin-right: auto; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.quote-orb__ctrl .dots button { background: none; border: 0; padding: 4px 0; color: rgba(238,238,232,.6); cursor: pointer; border-bottom: 1px solid transparent; }
.quote-orb__ctrl .dots button[aria-current="true"] { color: var(--bg); border-bottom-color: var(--bg); }
.quote-orb__ctrl .round-btn { width: 42px; height: 42px; }

/* ---------------- Karten ---------------- */
.cards { padding-block: var(--section-y); }
.cards__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.cards__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(360px, 30vw, 440px); padding: 28px; border-radius: var(--r); overflow: hidden; text-decoration: none; isolation: isolate; color: var(--bg); background: var(--dark); transition: transform .6s var(--ease-out); }
.card--sage { background: var(--sage-2); color: var(--ink); }
.card__art { position: absolute; inset: -8% 0 0 0; z-index: -1; transition: transform 1.2s var(--ease-out); }
.card__art svg { width: 100%; height: 100%; }
.card__tag { position: absolute; top: 24px; left: 24px; font-size: 0.72rem; padding: 7px 12px; border-radius: 999px; background: rgba(238,238,232,.12); border: 1px solid rgba(238,238,232,.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.card--sage .card__tag { background: rgba(250,250,248,.55); border-color: rgba(21,32,27,.12); }
.card .h4 { font-size: clamp(1.5rem, 2vw, 1.9rem); color: inherit; max-width: 11em; }
.card__more { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 0.86rem; font-weight: 500; }
.card__more .icon { width: 16px; height: 16px; transition: transform .35s var(--ease-out); }
@media (hover: hover) { .card:hover .card__art { transform: scale(1.06); } .card:hover .card__more .icon { transform: translateX(5px); } }
.waves path { fill: none; stroke: rgba(201,214,203,.28); stroke-width: 1.2; }
.card--sage .waves path { stroke: rgba(15,61,46,.2); }

/* ---------------- CTA ---------------- */
.cta { position: relative; overflow: hidden; padding-block: clamp(110px, 12vw, 190px); isolation: isolate; }
.cta__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr); gap: 48px; align-items: end; }
.cta .display { font-size: clamp(2.6rem, 5vw, 5rem); }
.cta__side { border-left: 1px solid var(--line-2); padding-left: 28px; }
.cta__side p { margin: 0 0 26px; color: var(--ink-2); font-size: 0.95rem; line-height: 1.7; }
.cta .orb--sage { width: 46vw; left: 34%; bottom: -34vw; z-index: -1; opacity: .8; }
.cta .orb--ring { width: 28vw; right: -15vw; top: -12vw; z-index: -1; }
.cta { padding-block: calc(var(--section-y) * 1.15); }
.cta__ring .ring-spin { position: absolute; inset: -1px; border-radius: 50%; animation: orbit-spin 26s linear infinite; }
.cta__ring .ring-dot { position: absolute; left: 50%; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px rgba(147,174,156,.28); }
.cta .orb--sage::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 1px solid rgba(250,250,248,.55); animation: breathe 7s var(--ease-io) infinite; }
@keyframes breathe { 0%, 100% { transform: scale(.94); opacity: .5; } 50% { transform: scale(1.04); opacity: 1; } }

/* ---------------- Footer ---------------- */
.footer { background: var(--dark); color: rgba(238,238,232,.72); padding: clamp(56px, 6vw, 80px) 0 28px; }
.footer__top { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.footer__top img { height: 24px; width: auto; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 28px; list-style: none; margin: 0 0 0 20px; padding: 0; }
.footer a { color: rgba(238,238,232,.82); text-decoration: none; font-size: 0.88rem; transition: color .2s ease; }
@media (hover: hover) { .footer a:hover { color: #fff; } }
.footer__contact { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-style: normal; font-size: 0.84rem; line-height: 1.5; color: rgba(238,238,232,.62); }
.footer__contact a { color: var(--bg); text-decoration: none; }
.footer__contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: clamp(48px, 6vw, 72px); padding-top: 24px; border-top: 1px solid var(--line-light); font-size: 0.8rem; color: rgba(238,238,232,.5); }
.footer__legal { display: flex; gap: 24px; }
.footer__legal a { font-size: 0.8rem; color: rgba(238,238,232,.6); }

/* ---------------- Unterseiten ---------------- */
.page-hero { position: relative; overflow: hidden; padding-top: calc(var(--nav-h) + clamp(56px, 8vw, 120px)); padding-bottom: clamp(56px, 7vw, 104px); isolation: isolate; }
.page-hero .display { font-size: clamp(2.5rem, 5vw, 5rem); max-width: 12em; }
.page-hero .lead { margin-top: 26px; }
.page-hero__art { position: absolute; right: -4vw; top: calc(var(--nav-h) + 1.5vw); width: 36vw; height: 36vw; z-index: -1; }
.page-hero__art .orb--dark { width: 60%; right: 0; top: 0; }
.page-hero__art .orb--glass { width: 48%; left: 8%; top: 30%; }
.page-hero__art .orb--ring { width: 40%; left: 30%; top: 4%; }

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 110px); }
.path { border-radius: var(--r); padding: clamp(32px, 4.5vw, 64px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); position: relative; overflow: hidden; isolation: isolate; scroll-margin-top: 110px; }
.path + .path { margin-top: 16px; }
.path--dark { background: var(--dark); color: var(--bg); }
.path--sage { background: var(--sage-2); }
.path .h2 { font-size: clamp(2rem, 3.4vw, 3.2rem); }
.path .body { margin-top: 20px; }
.path__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; align-content: start; }
.path__cols h3 { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 16px; opacity: .7; }
.path__note { grid-column: 1 / -1; font-size: 0.92rem; opacity: .7; margin: 0; padding-top: 22px; border-top: 1px solid currentColor; border-top-color: rgba(128,128,128,.25); }
.path .orb { width: 30%; right: -10%; bottom: -38%; z-index: -1; }
.path--dark .orb { opacity: .55; }
.path--sage .orb { opacity: .9; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checklist li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; font-size: 0.97rem; line-height: 1.5; }
.checklist .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--green-2); }
.on-dark .checklist .icon, .path--dark .checklist .icon { color: var(--sage-3); }

.comp { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 100px); align-items: center; margin-top: clamp(48px, 6vw, 80px); }
.comp-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.comp-list li { border-bottom: 1px solid var(--line); }
.comp-tab { width: 100%; display: grid; grid-template-columns: 44px 1fr 20px; gap: 14px; align-items: center; padding: 20px 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--ink-3); transition: color .3s ease, padding .5s var(--ease-out); }
.comp-tab__no { font-size: 0.76rem; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.comp-tab__name { font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 2.1rem); line-height: 1.15; letter-spacing: -0.015em; }
.comp-tab .icon { width: 18px; height: 18px; opacity: 0; transform: translateX(-8px); transition: opacity .3s ease, transform .4s var(--ease-out); }
.comp-tab[aria-selected="true"] { color: var(--ink); padding-left: 10px; }
.comp-tab[aria-selected="true"] .comp-tab__name { color: var(--green); }
.comp-tab[aria-selected="true"] .icon { opacity: 1; transform: none; }
@media (hover: hover) { .comp-tab:hover { color: var(--ink); } }
.comp-orb { position: relative; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #234F3F 0%, #12352A 45%, #0B2019 100%); color: var(--bg); display: flex; align-items: center; padding: 0 15%; }
.comp-orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background-image: var(--grain); background-size: 220px; mix-blend-mode: overlay; opacity: .35; pointer-events: none; }
.comp-panel[hidden] { display: none; }
/* Ohne JS schaltet nichts die Tabs um. Dann alle sechs Beschreibungen zeigen und
   den Kreis zu einer wachsenden Karte machen: Im Kreis wuerden sie sich ueberlappen,
   weil .comp-orb ein Flex-Container mit festem Seitenverhaeltnis ist. */
html:not(.js) .comp { align-items: start; }
html:not(.js) .comp-orb { aspect-ratio: auto; border-radius: var(--r); display: block;
  padding: clamp(28px, 3.4vw, 44px); }
html:not(.js) .comp-orb::after { border-radius: var(--r); }
html:not(.js) .comp-panel[hidden] { display: block; }
html:not(.js) .comp-panel + .comp-panel { margin-top: 32px; padding-top: 32px; border-top: 1px solid rgba(201,214,203,.18); }
.comp-panel__kicker { font-size: 0.7rem; letter-spacing: 0.19em; text-transform: uppercase; color: var(--sage); margin: 0 0 16px; }
.comp-panel__claim { font-family: var(--serif); font-size: clamp(1.5rem, 2.3vw, 2.2rem); line-height: 1.15; margin: 0; }
.comp-panel__text { margin: 18px 0 0; color: rgba(238,238,232,.74); font-size: 0.97rem; }
.comp-mobile-desc { display: none; }

.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 110px); }
.faq__intro .body { margin-top: 20px; }
.faq__intro .link-u { margin-top: 22px; }
.accordion { border-top: 1px solid var(--line-2); }
.acc { border-bottom: 1px solid var(--line); }
.acc h3 { margin: 0; }
.acc__btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; border: 0; background: none; cursor: pointer; text-align: left; font-family: var(--serif); font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.3; color: var(--ink); }
.acc__icon { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; transition: transform .45s var(--ease-out), background-color .25s ease, color .25s ease, border-color .25s ease; }
.acc__icon .icon { width: 16px; height: 16px; }
.acc__btn[aria-expanded="true"] .acc__icon { transform: rotate(45deg); background: var(--dark); color: var(--bg); border-color: var(--dark); }
.acc__panel { display: grid; transition: grid-template-rows .45s var(--ease-out); }
.acc__panel > div { overflow: hidden; }
/* Zuklappen nur mit JS, sonst waeren die Antworten ohne JS unerreichbar.
   visibility nimmt den Text zusaetzlich aus dem Vorlese-Baum: mit blosser
   Hoehe 0 liest ein Screenreader alle Antworten am Stueck. */
.js .acc__panel { grid-template-rows: 0fr; }
.js .acc__panel > div { visibility: hidden; transition: visibility 0s linear .45s; }
.acc__panel p { margin: 0 0 26px; color: var(--ink-2); max-width: 60ch; padding-right: 60px; }
.acc.is-open .acc__panel, .acc__btn[aria-expanded="true"] + .acc__panel { grid-template-rows: 1fr; }
.acc.is-open .acc__panel > div, .acc__btn[aria-expanded="true"] + .acc__panel > div { visibility: visible; transition-delay: 0s; }

.profile { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 110px); padding-block: clamp(56px, 7vw, 110px); border-top: 1px solid var(--line-2); align-items: start; }
.profile--rev .profile__media { order: 2; }
.profile__media { position: relative; }
.profile__photo { aspect-ratio: 4 / 5; border-radius: 999px 999px var(--r) var(--r); overflow: hidden; background: var(--sage); }
.profile__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.profile__media .orb { width: 34%; right: -8%; bottom: -6%; z-index: 2; }
.profile__role { margin: 12px 0 0; font-size: 0.72rem; letter-spacing: 0.19em; text-transform: uppercase; color: var(--ink-2); }
.profile .metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 36px 0 0; border-top: 1px solid var(--line-2); }
.profile .metric { padding: 22px 16px 0 0; border-left: 0; }
.profile .metric + .metric { padding-left: 18px; border-left: 1px solid var(--line); }
.profile .metric__num { font-size: clamp(2.2rem, 3.4vw, 3.2rem); }
.profile .metric__label { font-size: 0.84rem; }
.profile .body { margin-top: 30px; }
.profile__why { margin: 36px 0 0; padding-left: 24px; border-left: 2px solid var(--green); }
.profile__why p { margin: 0; font-family: var(--serif); font-style: normal; font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.35; color: var(--ink); }
.profile__why span { display: block; margin-top: 14px; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }

.manifest { background: var(--dark); color: var(--bg); padding-block: clamp(100px, 12vw, 180px); position: relative; overflow: hidden; }
.manifest .display { font-size: clamp(2.4rem, 5vw, 4.8rem); max-width: 16em; }
.manifest .orb { width: 44vw; right: -14vw; top: -10vw; opacity: .5; }

.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line-2); }
.value { padding: 32px 32px 0 0; }
.value + .value { padding-left: 32px; border-left: 1px solid var(--line); }
.value .h3 { font-size: clamp(1.6rem, 2.3vw, 2.2rem); }
.value p { margin: 16px 0 0; color: var(--ink-2); font-size: 0.97rem; }

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tile { border-radius: var(--r); padding: clamp(28px, 3.6vw, 48px); background: var(--bg-2); position: relative; overflow: hidden; isolation: isolate; }
.tile--dark { background: var(--dark); color: var(--bg); }
.tile .h3 { font-size: clamp(1.6rem, 2.3vw, 2.2rem); margin-bottom: 26px; }
.tile .orb { width: 40%; right: -14%; top: -18%; opacity: .45; z-index: -1; }

/* Kontakt */
.contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 110px); }
.aside { background: var(--dark); color: var(--bg); border-radius: var(--r); padding: clamp(28px, 3.4vw, 44px); align-self: start; position: relative; overflow: hidden; isolation: isolate; }
.aside .orb { width: 70%; right: -30%; bottom: -34%; opacity: .5; z-index: -1; }
.steps-list { list-style: none; margin: 26px 0 0; padding: 0; counter-reset: s; }
.steps-list li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 20px 0; border-top: 1px solid var(--line-light); }
.steps-list li::before { content: counter(s, decimal-leading-zero); font-size: 0.78rem; letter-spacing: .08em; color: var(--sage); padding-top: 4px; }
.steps-list strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.25rem; line-height: 1.25; }
.steps-list span { display: block; margin-top: 6px; font-size: 0.92rem; color: rgba(238,238,232,.66); }

.legal { max-width: 760px; padding-bottom: var(--section-y); }
.legal h2 { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; margin: 52px 0 12px; }
.legal p { color: var(--ink-2); }
.legal .todo { background: #EFE3BD; color: #54470F; padding: 1px 6px; border-radius: 4px; }

.section { padding-block: var(--section-y); }
.section--flush-top { padding-top: 0; }
.bg-2 { background: var(--bg-2); }

/* ---------------- Motion-Grundzustände ---------------- */
.js-motion [data-fade] { opacity: 0; transform: translateY(26px); }
.js-motion [data-split] .wi { transform: translateY(110%); }
.js-motion .hero [data-hero] { opacity: 0; transform: translateY(18px); }
.js-motion .hero__art .orb, .js-motion .hero__art .orbit, .js-motion .hero__art .orb-center { opacity: 0; }
.js-motion .stage { opacity: 0; }

/* ---------------- Responsiv ---------------- */
@media (max-width: 1024px) {
  .hero { min-height: 0; }
  .hero .scroll-cue { display: none; }
  .hero__content { padding-bottom: 8px; }
  .hero__art { position: relative; width: 100%; height: 92vw; order: 2; --s: 1.8; --x: 6vw; --y: -4vw; margin-top: 8px; }
  .br-lg { display: none; }
  .stage-panel { grid-template-columns: 1fr; gap: 18px; }
  .stage-panel .checklist { grid-column: auto; grid-row: auto; }
  .stage-panel__link { grid-column: auto; margin-top: 0; order: 9; }
  .bridge { height: 108vw; }
  .bridge__media img { object-position: 50% 62%; }
  .hero__inner { order: 1; }
  .proof { order: 3; }
  .proof__row { grid-template-columns: 1fr; gap: 16px; }
  .challenge__head { grid-template-columns: 1fr; }
  .challenge__rule { display: none; }
  .brakes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brake:nth-child(3) { padding-left: 0; border-left: 0; }
  .brake:nth-child(n+3) { border-top: 1px solid var(--line-light); }
  .system__head { grid-template-columns: 1fr; }
  .system__ctrl { align-items: flex-start; text-align: left; flex-direction: row; justify-content: space-between; }
  .stages { --ov: 0px; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 0 var(--gutter) 12px; margin-inline: calc(var(--gutter) * -1); scrollbar-width: none; }
  .stages::-webkit-scrollbar { display: none; }
  .stage { flex: 0 0 78vw; max-width: 380px; scroll-snap-align: center; margin-right: 0; }
  .impact__row { grid-template-columns: 1fr 1fr 1fr; row-gap: 40px; }
  .impact__head { grid-column: 1 / -1; }
  .metric:first-of-type { border-left: 0; padding-left: 0; }
  .founders__grid { grid-template-columns: 1fr; }
  .founders__text { padding-right: 0; padding-bottom: 32px; }
  .founders__stage { margin-inline: calc(var(--gutter) * -1); min-height: 150vw; }
  .slides { inset: 0 0 34% 0; }
  .quote-orb { width: 88vw; right: 50%; top: auto; bottom: -6vw; transform: translateX(50%); }
  .cards__grid { grid-template-columns: 1fr; }
  .cta__grid { grid-template-columns: 1fr; }
  .cta .orb--sage { width: 90vw; left: 20%; bottom: -60vw; }
  .split, .path, .comp, .faq, .profile, .contact { grid-template-columns: 1fr; }
  .profile--rev .profile__media { order: 0; }
  .profile__media { max-width: 460px; }
  .comp-orb { display: none; }
  .comp-tab { pointer-events: none; color: var(--ink); padding: 18px 0 6px; grid-template-columns: 40px 1fr; }
  .comp-tab .icon { display: none; }
  .comp-tab[aria-selected="true"] { padding-left: 0; }
  .comp-tab[aria-selected="true"] .comp-tab__name { font-style: normal; color: var(--ink); }
  .comp-mobile-desc { display: block; margin: 0 0 20px 54px; color: var(--ink-2); font-size: 0.95rem; }
  .values { grid-template-columns: 1fr; }
  .value, .value + .value { padding: 28px 0; border-left: 0; }
  .value + .value { border-top: 1px solid var(--line); }
  .tiles { grid-template-columns: 1fr; }
  .page-hero__art { width: 70vw; height: 70vw; right: -22vw; top: 4vw; opacity: .7; }
}
@media (max-width: 640px) {
  .brakes { grid-template-columns: 1fr; }
  .brake, .brake + .brake { padding: 28px 0 8px; border-left: 0; }
  .brake + .brake { border-top: 1px solid var(--line-light); }
  .impact__row { grid-template-columns: 1fr; }
  .metric { border-left: 0; padding: 0 0 28px; border-bottom: 1px solid var(--line); }
  .path__cols, .form { grid-template-columns: 1fr; }
  .profile .metrics { grid-template-columns: 1fr 1fr 1fr; }
  .acc__panel p { padding-right: 0; }
  .comp-mobile-desc { margin-left: 0; }
  .hero__actions { gap: 20px; }
  .footer__nav { margin-left: 0; gap: 18px; }
  .footer__contact { margin-left: 0; align-items: flex-start; }
}

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

/* ---------- Ergänzungen Unterseiten ---------- */
.page-hero--short { min-height: 88vh; display: flex; align-items: center; }
.page-hero--short .container { width: 100%; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.page-hero--legal { padding-bottom: clamp(24px, 3vw, 40px); }
.page-hero--legal .display { font-size: clamp(2.4rem, 4.4vw, 4.2rem); }
.legal h2:first-child { margin-top: 12px; }
.acc h3 { font: inherit; }
.split + .comp { margin-top: clamp(40px, 5vw, 72px); }
.profile__why { margin-inline: 0; }
.tile .h3 em { font-style: normal; }
.aside .h3 { font-size: clamp(1.6rem, 2.2vw, 2.1rem); }
/* Ohne Bewegung: Laufband als ruhige, umbrechende Zeile */
html:not(.js-motion) .marquee { mask-image: none; -webkit-mask-image: none; }
html:not(.js-motion) .marquee__track { width: auto; }
html:not(.js-motion) .marquee__group { flex-wrap: wrap; justify-content: flex-start; gap: 12px 36px; padding-right: 0; }
html:not(.js-motion) .marquee__item { white-space: normal; display: block; }
html:not(.js-motion) .marquee__item b { margin-right: 8px; }
html:not(.js-motion) .marquee__sep { display: none; }
html:not(.js-motion) .marquee__group[aria-hidden="true"] { display: none; }
main { overflow-x: clip; }
@media (max-width: 1024px) {
  .stages .stage > * { margin-left: 20cqw; margin-right: 18cqw; }
}

/* Abstände: gleiche Taktung zwischen den Sektionen */
.impact { padding-bottom: calc(var(--section-y) * 0.8); }
.cards + .cta { padding-top: calc(var(--section-y) * 0.45); }
@media (max-width: 1024px) { .cta .orb--ring { width: 60vw; right: -26vw; top: -30vw; } }
@media (max-width: 640px) {
  .bridge::before { background: linear-gradient(180deg, var(--dark) 0%, rgba(12,30,23,.45) 28%, rgba(12,30,23,.55) 55%, rgba(12,30,23,.9) 100%); }
  .bridge__claim { font-size: 1.75rem; }
}

/* ---------- Grotesk-Feinschliff ---------- */
.display { line-height: 1; }
.menu__list a, .comp-tab__name, .comp-panel__claim, .acc__btn, .metric__num, .marquee__item, .q blockquote, .profile__why p, .orb-center span { font-weight: 450; letter-spacing: -0.02em; }
.metric__num { font-weight: 400; letter-spacing: -0.04em; }
.marquee__item { font-size: 1.2rem; color: var(--ink-2); }
.q blockquote { line-height: 1.4; }

/* ---------- Akzentwort: Varianten (Klasse auf <html>) ---------- */
.display em, .h2 em, .h3 em, .h4 em, .bridge__claim em { background-repeat: no-repeat; }
.acc-line .display em, .acc-line .h2 em, .acc-line .h3 em { background-image: linear-gradient(currentColor, currentColor); background-position: 0 92%; background-size: 100% 0.07em; transition: background-size 1s var(--ease-out); }
.acc-mark .display em, .acc-mark .h2 em, .acc-mark .h3 em { background-image: linear-gradient(var(--sage), var(--sage)); background-position: 0 88%; background-size: 100% 0.36em; transition: background-size 1s var(--ease-out); }
.acc-light .display em, .acc-light .h2 em, .acc-light .h3 em, .acc-light .h4 em { font-weight: 250; letter-spacing: -0.02em; }
.on-dark.acc-mark em, .acc-mark .on-dark em { background-image: linear-gradient(rgba(147,174,156,.35), rgba(147,174,156,.35)); }
.acc-ring .display em, .acc-ring .h2 em { position: relative; display: inline-block; }
.acc-ring .display em::after, .acc-ring .h2 em::after { content: ""; position: absolute; left: -0.18em; right: -0.22em; top: 0.02em; bottom: -0.06em; border: 0.045em solid var(--green); border-radius: 50%; transform: rotate(-3deg); pointer-events: none; }
.js-motion.acc-line [data-split] em:not(.is-in), .js-motion.acc-mark [data-split] em:not(.is-in) { background-size: 0% 0.07em; }
.js-motion.acc-mark [data-split] em:not(.is-in) { background-size: 0% 0.36em; }

/* ---------- Herausforderung: Hamburg-Bild blendet rechts ein ---------- */
.challenge__img { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%), linear-gradient(180deg, #000 0%, #000 45%, transparent 88%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 55%), linear-gradient(180deg, #000 0%, #000 45%, transparent 88%); mask-composite: intersect; }
.challenge__img img { width: 100%; height: 118%; object-fit: cover; object-position: 55% 60%; opacity: .42; }
.challenge > .container { position: relative; z-index: 1; }
.challenge { padding-bottom: var(--section-y) !important; }
@media (max-width: 1024px) {
  .challenge__img { width: 100%; bottom: auto; height: 70vw; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, transparent 100%); }
  .challenge__img img { opacity: .32; height: 100%; }
}
/* Laufband ohne Bewegung: nur die ersten sechs Fragen */
html:not(.js-motion) .marquee__group > :nth-child(n+13) { display: none; }

/* ---------- Herausforderung: Bremsen mit Motion ---------- */
.challenge__rule { visibility: hidden; }
.brake { position: relative; transition: background-color .5s ease; }
.brake::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--sage); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--ease-out); }
.brake + .brake::before { left: 0; }
.brake__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.brake__top .brake__no { margin: 0; transition: color .4s ease; }
.brake p { transition: color .5s ease; }
.brake.is-on::before { transform: scaleX(1); }
.brake.is-on .brake__no { color: var(--sage); }
.brake.is-on p { color: rgba(238,238,232,.84); }
@media (hover: hover) and (min-width: 1025px) { .brake { cursor: default; } }
.glyph { width: 64px; height: 64px; flex: none; overflow: visible; }
.glyph * { transition: transform 1s var(--ease-out), stroke-dashoffset 1.1s var(--ease-out), opacity .6s ease, fill .5s ease, stroke .5s ease; }
.glyph circle, .glyph rect { transform-box: fill-box; transform-origin: center; }
.g1 .g-ring { fill: none; stroke: var(--sage); stroke-width: 1.4; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); }
.g1 .g-lines line { stroke: rgba(147,174,156,.75); stroke-width: 1.2; }
.g1 .g-core { fill: var(--sage-3); animation: g-pulse 2.4s var(--ease-io) infinite; }
.g1 .g-node { fill: rgba(147,174,156,.55); }
.is-on .g1 .g-ring { stroke-dashoffset: 0; }
.is-on .g1 .g-lines { opacity: 0; }
.is-on .g1 .g-core { animation: none; transform: scale(.55); fill: var(--sage); }
.is-on .g1 .g-node { fill: var(--sage); }
.g2 .g-trend { fill: none; stroke: var(--sage); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.g2 .g-dot { fill: var(--sage-3); transform: translateY(var(--p)); }
.g2 .g-dot:nth-of-type(2) { transition-delay: .05s; } .g2 .g-dot:nth-of-type(3) { transition-delay: .1s; } .g2 .g-dot:nth-of-type(4) { transition-delay: .15s; } .g2 .g-dot:nth-of-type(5) { transition-delay: .2s; }
.is-on .g2 .g-dot { transform: translateY(var(--s)); fill: var(--sage); }
.is-on .g2 .g-trend { stroke-dashoffset: 0; transition-delay: .35s; }
.g3 .g-base { fill: none; stroke: rgba(147,174,156,.28); stroke-width: 1.4; }
.g3 .g-arc { fill: none; stroke: var(--sage); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 74; transform: rotate(-90deg); }
.g3 .g-core { fill: var(--sage-3); }
.is-on .g3 .g-arc { stroke-dashoffset: 0; }
.is-on .g3 .g-core { transform: scale(1.5); fill: var(--sage); }
.g4 .g-bar { fill: var(--sage-3); transform-origin: 50% 100%; transform: scaleY(var(--p)); }
.g4 .g-bar:nth-of-type(2) { transition-delay: .08s; } .g4 .g-bar:nth-of-type(3) { transition-delay: .16s; }
.is-on .g4 .g-bar { transform: scaleY(var(--s)); fill: var(--sage); }
@keyframes g-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }

/* Glasscheibe hinter dem Text rechts */
.challenge__side { position: relative; isolation: isolate; }
.challenge__disc { position: absolute; z-index: -1; left: -36px; top: 50%; width: calc(100% + 72px); aspect-ratio: 1; margin-top: calc(-50% - 36px); border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(52,102,80,.55) 0%, rgba(18,48,37,.72) 45%, rgba(10,26,20,.82) 100%);
  border: 1px solid rgba(201,214,203,.16); box-shadow: inset 0 1px 40px rgba(201,214,203,.06), 0 40px 90px -30px rgba(0,0,0,.6);
  backdrop-filter: blur(14px) saturate(115%); -webkit-backdrop-filter: blur(14px) saturate(115%); animation: disc-float 9s var(--ease-io) infinite; }
.challenge__disc::after { content: ""; position: absolute; inset: -22px; border-radius: 50%; border: 1px solid rgba(201,214,203,.18); }
.challenge__disc .ring-spin { position: absolute; inset: -22px; border-radius: 50%; animation: orbit-spin 30s linear infinite; }
.challenge__disc .ring-dot { position: absolute; left: 50%; top: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 5px rgba(147,174,156,.18), 0 0 16px rgba(147,174,156,.6); }
.challenge__side .body { position: relative; padding-inline: 8px; }
@keyframes disc-float { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(8px); } }
@media (max-width: 1024px) {
  .challenge__disc { display: none; }
  .challenge__side { padding: 26px 24px; border-radius: var(--r); background: rgba(12,30,23,.62); border: 1px solid rgba(201,214,203,.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .challenge__side .body { padding-inline: 0; }
}

/* Link im Einleitungssatz */
.inline-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--green); font-weight: 500; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size .45s var(--ease-out), gap .3s var(--ease-out); }
.inline-link .icon { width: 15px; height: 15px; transition: transform .35s var(--ease-out); }
@media (hover: hover) { .inline-link:hover { background-size: 0% 1px; background-position: 100% 100%; } .inline-link:hover .icon { transform: translateX(4px); } }
.system__intro .inline-link { display: flex; width: max-content; margin-top: 14px; }

/* Karten: drei Wege */
.cards__head .h3 { margin-top: 2px; max-width: 16em; }
.card__text { margin: 10px 0 0; font-size: 0.93rem; line-height: 1.5; opacity: .78; max-width: 22em; }
.arc { animation: arc-wave 5.5s var(--ease-io) infinite; animation-delay: calc(var(--i) * 0.28s); }
@keyframes arc-wave { 0%, 100% { opacity: .55; } 40% { opacity: 1; stroke: rgba(201,214,203,.55); } }
@media (min-width: 1025px) { .challenge .brakes { margin-top: clamp(120px, 12vw, 180px); } .challenge__head { align-items: center; } .challenge { padding-top: calc(var(--section-y) + 56px) !important; } }

/* ---------- Detailbereich: mehr Text pro Punkt ---------- */
.stage-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(24px, 3vw, 36px); }
.stage-panel__head { grid-column: 1; }
.stage-panel__text { grid-column: 2 / 4; max-width: 46em; align-self: end; }
.stage-points { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stage-points li { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; row-gap: 6px; padding: 22px 22px 24px; border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--line); transition: translate .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s ease; }
.stage-points__i { grid-row: 1 / 3; color: var(--green-2); padding-top: 1px; }
.stage-points__i .icon { width: 18px; height: 18px; }
.stage-points__t { font-weight: 600; font-size: 0.98rem; color: var(--ink); line-height: 1.35; }
.stage-points__d { font-size: 0.92rem; line-height: 1.55; color: var(--ink-2); }
@media (hover: hover) { .stage-points li:hover { translate: 0 -4px; box-shadow: 0 24px 40px -28px rgba(12,30,23,.35); border-color: var(--line-2); } }
@media (max-width: 1024px) {
  .stage-panel__text { grid-column: auto; }
  .stage-points { grid-column: auto; grid-template-columns: 1fr; }
}

/* ---------- Gründer: messbare Erfahrung im Slider ---------- */
.f-metrics { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line-2); display: grid; }
.f-metrics__label { grid-area: 1 / 1; margin: 0 0 18px; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.19em; text-transform: uppercase; color: var(--ink-3); }
.f-metrics__set { grid-area: 2 / 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; transition: opacity .5s ease, translate .6s var(--ease-out); }
.f-metrics__set:not(.is-active) { opacity: 0; visibility: hidden; translate: 0 10px; }
.f-metric { display: flex; flex-direction: column; gap: 6px; }
.f-metric + .f-metric { padding-left: 16px; border-left: 1px solid var(--line); }
.f-metric__num { font-family: var(--serif); font-weight: 450; font-size: clamp(1.9rem, 2.6vw, 2.6rem); line-height: 1; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.f-metric__lbl { font-size: 0.82rem; line-height: 1.35; color: var(--ink-2); hyphens: manual; }
.founders__text .pill { margin-top: 32px; }

/* ---------- Karten: nach vorne ziehen beim Hover ---------- */
.card { transition: translate .7s var(--ease-out), scale .7s var(--ease-out), box-shadow .7s var(--ease-out), filter .5s ease; }
.card::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(201,214,203,.22), rgba(201,214,203,0) 42%); }
.card--sage::after { background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.55), rgba(255,255,255,0) 45%); }
.card > * { position: relative; z-index: 1; }
.card > .card__art { position: absolute; z-index: -1; }
@media (hover: hover) and (min-width: 1025px) {
  .card:hover { translate: 0 -12px; scale: 1.02; box-shadow: 0 50px 80px -40px rgba(12,30,23,.5); }
  .card:hover::after { opacity: 1; }
  .card:hover ~ .card { translate: 14px 0; }
  .card:has(~ .card:hover) { translate: -14px 0; }
  .cards__grid:hover .card:not(:hover) { filter: saturate(.75) brightness(.97); }
}
.card > .card__tag { position: absolute; }
@media (max-width: 1024px) {
  .stage-panel { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .stage-panel__head, .stage-panel__text, .stage-points { grid-column: 1; }
  .stage-points { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- System: alles auf einen Bildschirm ---------- */
.system { padding-top: calc(var(--section-y) * 0.75); }
.system__head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.stage__text { display: none; }
@media (min-width: 1025px) {
  .stages { max-width: 960px; margin: clamp(28px, 3vw, 44px) auto 0; }
  .stage .h4 { font-size: clamp(1.3rem, 1.7vw, 1.7rem); }
  .stage__no { margin-bottom: 12px; }
  .stage .round-btn { margin-top: 16px; }
}
.stage-panels { margin-top: clamp(28px, 3vw, 40px); padding-top: 26px; }
.stage-panels__ctrl { position: absolute; right: 0; top: 26px; display: flex; gap: 10px; z-index: 2; }
.stage-panel { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 2.2fr); row-gap: 20px; }
.stage-panel__head { grid-column: 1; }
.stage-panel__text { grid-column: 2; align-self: center; }
.stage-points { grid-column: 1 / -1; gap: 0; border-top: 1px solid var(--line); padding-top: 24px; }
.stage-points li { padding: 0 28px 0 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.stage-points li + li { padding-left: 28px; border-left: 1px solid var(--line); }
@media (hover: hover) { .stage-points li:hover { translate: none; box-shadow: none; } }
@media (max-width: 1024px) {
  .stage-panels__ctrl { position: static; justify-content: flex-end; margin-bottom: 18px; }
  .stage-panel { grid-template-columns: minmax(0, 1fr); }
  .stage-panel__head, .stage-panel__text, .stage-points { grid-column: 1; }
  .stage-points li, .stage-points li + li { padding: 18px 0; border-left: 0; }
  .stage-points li + li { border-top: 1px solid var(--line); }
  .stage-points { padding-top: 0; }
}

/* ---------- Gründerbild: kleiner Ring oben rechts statt großem Bogen ---------- */
.slides__arc { display: none; }
.slides__ring { position: absolute; top: 26px; right: 26px; width: clamp(48px, 5vw, 72px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(250,250,248,.6); z-index: 2; pointer-events: none; }
.slides__ring .ring-spin { position: absolute; inset: -1px; border-radius: 50%; animation: orbit-spin 14s linear infinite; }
.slides__ring .ring-dot { position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 4px rgba(250,250,248,.2); }
/* Ring greift in den Zitat-Kreis */
.quote-orb .slides__ring { top: 9%; right: auto; left: 21.3%; width: clamp(64px, 6vw, 92px); margin: calc(clamp(64px, 6vw, 92px) / -2) 0 0 calc(clamp(64px, 6vw, 92px) / -2); border-color: rgba(250,250,248,.7); z-index: 3; }
.quote-orb .slides__ring .ring-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
@media (max-width: 1024px) { .quote-orb .slides__ring { width: 64px; margin: -32px 0 0 -32px; } }

/* ---------- Einheitliches Hover-Gefühl: heller, nach vorne, Schatten ----------
   Gilt gleich für Kreise (System), Kästen (Herausforderung) und Karten (Zusammenarbeit). */
:root { --lift-y: -16px; --lift-s: 1.025; --lift-spread: 18px; --lift-ease: cubic-bezier(.16, 1, .3, 1); }

/* Herausforderung als Kästen */
.challenge .brakes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; border-top: 0; }
.challenge .brake, .challenge .brake + .brake { padding: 26px 26px 30px; border: 1px solid rgba(201,214,203,.13); border-left: 1px solid rgba(201,214,203,.13); border-radius: var(--r);
  background: rgba(238,238,232,.035); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); overflow: hidden; isolation: isolate;
  transition: translate .7s var(--lift-ease), scale .7s var(--lift-ease), box-shadow .7s var(--lift-ease), background-color .5s ease, border-color .5s ease, filter .5s ease; }
.challenge .brake::before { left: 26px; right: 26px; top: 0; }
.challenge .brake::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(201,214,203,.16), rgba(201,214,203,0) 55%); }
.challenge .brake.is-on { background: rgba(238,238,232,.06); border-color: rgba(201,214,203,.22); }
@media (hover: hover) and (min-width: 1025px) {
  .challenge .brake:hover { translate: 0 var(--lift-y); scale: var(--lift-s); background: rgba(238,238,232,.08); border-color: rgba(201,214,203,.3); box-shadow: 0 50px 80px -40px rgba(0,0,0,.7); }
  .challenge .brake:hover::after { opacity: 1; }
  .challenge .brake:hover ~ .brake { translate: var(--lift-spread) 0; }
  .challenge .brake:has(~ .brake:hover) { translate: calc(var(--lift-spread) * -1) 0; }
  .challenge .brakes:hover .brake:not(:hover) { filter: brightness(.82); }
}
@media (max-width: 1024px) { .challenge .brakes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .challenge .brakes { grid-template-columns: minmax(0, 1fr); gap: 12px; } .challenge .brake, .challenge .brake + .brake { padding: 22px; } }

/* Karten und Kreise auf dieselben Werte bringen */
.card { transition: translate .7s var(--lift-ease), scale .7s var(--lift-ease), box-shadow .7s var(--lift-ease), filter .5s ease; }
@media (hover: hover) and (min-width: 1025px) {
  .card:hover { translate: 0 var(--lift-y); scale: var(--lift-s); }
  .card:hover ~ .card { translate: var(--lift-spread) 0; }
  .card:has(~ .card:hover) { translate: calc(var(--lift-spread) * -1) 0; }
  .cards__grid:hover .card:not(:hover) { filter: saturate(.8) brightness(.9); }
  .stage { transition: transform .7s var(--lift-ease), filter .5s ease; }
  .stage:hover { transform: translateY(var(--lift-y)) scale(var(--lift-s)); }
  .stage:hover ~ .stage { transform: translateX(var(--lift-spread)); }
  .stage:has(~ .stage:hover) { transform: translateX(calc(var(--lift-spread) * -1)); }
  .stages:hover .stage:not(:hover):not(.is-active) { filter: saturate(.8) brightness(.95); }
}

/* ---------- Hover minimalistischer: dieselbe Bewegung, nur dezenter ---------- */
:root { --lift-y: -7px; --lift-s: 1.008; --lift-spread: 6px; }
@media (hover: hover) and (min-width: 1025px) {
  .card:hover { box-shadow: 0 26px 44px -30px rgba(12,30,23,.38); }
  .cards__grid:hover .card:not(:hover) { filter: saturate(.92) brightness(.97); }
  .challenge .brake:hover { box-shadow: 0 26px 44px -30px rgba(0,0,0,.55); background: rgba(238,238,232,.065); }
  .challenge .brakes:hover .brake:not(:hover) { filter: brightness(.93); }
  .stage:hover::before { box-shadow: 0 34px 56px -36px rgba(12,30,23,.4); }
  .stages:hover .stage:not(:hover):not(.is-active) { filter: saturate(.92) brightness(.98); }
}

/* ---------- Rechtstexte: Lesbarkeit ---------- */
.legal { max-width: 800px; }
.legal__lead { font-size: 1.12rem; line-height: 1.6; color: var(--ink); padding: 22px 26px; border-left: 2px solid var(--green); background: var(--bg-2); border-radius: 0 var(--r) var(--r) 0; }
.legal__toc { margin: 36px 0 8px; padding: 22px 26px; border: 1px solid var(--line); border-radius: var(--r); }
.legal__toc ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 32px; font-size: 0.92rem; line-height: 1.5; }
.legal__toc li { break-inside: avoid; padding: 3px 0; }
.legal__toc a { color: var(--ink-2); text-decoration: none; }
.legal__toc a:hover { color: var(--green); text-decoration: underline; }
.legal h2 { scroll-margin-top: 100px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; color: var(--ink-2); }
.legal li { margin: 6px 0; line-height: 1.55; }
.legal li strong, .legal p strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--green); }
.legal__box { margin: 8px 0 0; padding: 24px 28px; border-radius: var(--r); background: var(--dark); color: var(--bg); }
.legal__box p { color: rgba(238,238,232,.82); }
.legal__box p:last-child { margin-bottom: 0; }
.legal .legal__box strong, .legal .legal__box p strong { color: var(--bg); }
.legal__box a { color: var(--sage); }
@media (max-width: 640px) { .legal__toc ol { columns: 1; } }

/* ---------- Terminbuchung ---------- */
.booking { align-items: start; }
.bk { position: relative; min-height: 600px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); overflow: hidden; isolation: isolate; box-shadow: 0 40px 80px -60px rgba(12,30,23,.45); }
.bk__preview { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); min-height: 600px; filter: blur(1.5px); opacity: .85; transform: scale(1.01); pointer-events: none; user-select: none; }
.bk__cal { background: var(--dark); color: var(--bg); padding: 36px 32px; }
.bk__who { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.bk__who img { width: 40px; height: auto; filter: brightness(2.2); }
.bk__who p { margin: 0; font-size: 0.9rem; line-height: 1.4; color: rgba(238,238,232,.75); }
.bk__who strong { color: var(--bg); font-weight: 600; }
.bk__month { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; font-size: 1.05rem; }
.bk__month span { opacity: .6; }
.bk__days, .bk__grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; gap: 6px; }
.bk__days span { font-size: 0.7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(238,238,232,.55); padding-bottom: 8px; }
.bk__grid span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; font-size: 0.9rem; color: rgba(238,238,232,.3); }
.bk__grid .is-free { color: var(--bg); background: rgba(238,238,232,.08); }
.bk__grid .is-sel { background: var(--sage); color: var(--dark); font-weight: 600; }
.bk__times { padding: 36px 28px; }
.bk__meta { margin: 0 0 24px; font-size: 0.88rem; color: var(--ink-2); line-height: 1.5; }
.bk__meta strong, .bk__date { color: var(--ink); font-weight: 600; }
.bk__date { margin: 0 0 14px; font-size: 0.95rem; }
.bk__slots { display: grid; gap: 10px; }
.bk-slot { display: block; padding: 13px; text-align: center; border: 1px solid var(--line-2); border-radius: 12px; font-size: 0.95rem; color: var(--green); }
.bk-slot.is-sel { background: var(--dark); color: var(--bg); border-color: var(--dark); }
.bk__gate, .bk__soon { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px clamp(24px, 6vw, 72px);
  background: radial-gradient(ellipse 62% 55% at 50% 50%, rgba(250,250,248,.96) 0%, rgba(250,250,248,.88) 55%, rgba(250,250,248,.25) 100%); }
.bk__soon[hidden], .bk__gate[hidden], .bk__frame[hidden] { display: none; }
.bk__icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--dark); color: var(--sage); margin-bottom: 22px; box-shadow: 0 0 0 10px rgba(15,61,46,.08); }
.bk__icon .icon { width: 28px; height: 28px; }
.bk__gate .h3, .bk__soon .h3 { max-width: 14em; }
.bk__gate p, .bk__soon p { max-width: 30em; margin: 16px 0 26px; font-size: 0.95rem; line-height: 1.6; color: var(--ink-2); }
.bk__gate a, .bk__soon p a { color: var(--green); }
.bk__gate .bk__alt { margin: 20px 0 0; font-size: 0.88rem; }
.bk__frame { position: absolute; inset: 0; z-index: 3; background: #fff; }
.bk__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.bk.is-loaded { min-height: 720px; }
.bk__facts { list-style: none; margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line-light); display: grid; gap: 10px; }
.bk__facts li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 0.92rem; color: rgba(238,238,232,.82); }
.bk__facts .icon { width: 18px; height: 18px; color: var(--sage); margin-top: 1px; }
@media (max-width: 640px) {
  .bk, .bk__preview { min-height: 560px; }
  .bk__preview { grid-template-columns: 1fr; }
  .bk__times { display: none; }
  .bk.is-loaded { min-height: 860px; }
}
.msg-aside a { color: var(--bg); text-decoration: none; }
.msg-aside a:hover { text-decoration: underline; }
#nachricht { scroll-margin-top: 20px; }
#nachricht .contact { align-items: start; }
#nachricht .lead a { color: var(--green); }
.legal__toc li { margin: 0; }

/* ---------- Analyse-Runde 28.09.: Beweiszeile, Passt-zu-dir, Mobile-Fix ---------- */
.hero__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 26px 0 0; font-size: 0.86rem; color: var(--ink-2); }
.hero__proof a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.hero__proof a:hover { text-decoration-color: currentColor; }
/* Unter rund 1400px laeuft die Beweiszeile in die Kugelgrafik rechts hinein.
   Am 11.10. gemessen: 61px Ueberlappung bei 1280px, 18px bei 1366px, ab 1440px keine.
   Die Grafik liegt zwar hinter dem Text (.hero__art hat z-index -1), aber Text auf
   Grafik ist trotzdem unruhig. Mit der Begrenzung bricht die Zeile dort auf zwei
   Zeilen um; ab 1400px bleibt sie einzeilig wie bisher.
   ACHTUNG: Der Wert haengt an der Laenge der drei Angaben. Wer sie aendert, misst neu. */
@media (max-width: 1400px) {
  .hero__proof { max-width: 560px; }
}
.hero__proof > *::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 9px; border-radius: 50%; background: var(--sage-3); vertical-align: middle; }
.hero__proof + .scroll-cue { margin-top: 40px; }
.cta__side .cta__fit-label { margin: 0 0 14px; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.cta__fit { margin-bottom: 28px; gap: 10px; }
.cta__fit li { font-size: 0.95rem; color: var(--ink-2); }
@media (max-width: 1024px) {
  .system__head { grid-template-columns: 1fr; }
  .system__intro { border-left: 0; padding-left: 0; }
}
@media (max-width: 640px) { .hero__proof { font-size: 0.8rem; margin-top: 22px; } }
@media (min-width: 1025px) { .system__head { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr); } }
.profile__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 0.86rem; font-weight: 500; color: var(--green); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.profile__link:hover { text-decoration-color: currentColor; }
.profile__link .icon { width: 18px; height: 18px; }
.bk__alt a { white-space: nowrap; }

/* ---------- Prinzipien: ruhige Linien-Icons ---------- */
.vglyph { display: block; box-sizing: border-box; width: 76px; height: 76px; padding: 16px; margin-bottom: 28px; overflow: visible; color: var(--green-2); background: var(--sage-2); border-radius: 50%; }
.vglyph * { transform-box: fill-box; transform-origin: center; }
.vg-track { fill: none; stroke: rgba(21,32,27,.18); stroke-width: 1.2; }
.vg-ring { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transform: rotate(-90deg); }
.vg-core, .vg-sat { fill: currentColor; }
.vg-dot { fill: var(--green-2); opacity: 0; }
.vg-links line { stroke: var(--green-2); stroke-opacity: .55; stroke-width: 1.4; stroke-dasharray: 100; stroke-dashoffset: 0; }
.vg-node { fill: var(--bg); stroke: currentColor; stroke-width: 1.4; }
.vg-orbit { transform-origin: 32px 32px; transform-box: view-box; }
.value .vglyph { transition: transform .6s var(--ease-out), background-color .45s ease, color .45s ease; }
.vglyph .vg-node, .vglyph .vg-track, .vglyph .vg-links line { transition: fill .45s ease, stroke .45s ease, stroke-opacity .45s ease, stroke-dashoffset 1.4s var(--ease-out), transform .8s var(--ease-out); }
/* Hover: Kontrast umkehren, dunkelgrüner Kreis mit hellgrünem Icon */
.value:hover .vglyph { transform: translateY(-3px); background: var(--green); color: var(--sage); }
.value:hover .vg-node { fill: var(--green); }
.value:hover .vg-links line { stroke: var(--sage); stroke-opacity: 1; }
.value:hover .vg-track { stroke: rgba(238,238,232,.22); }

/* Einblenden: erst beim Hereinscrollen zeichnen sich die Linien */
.js-motion .vglyph .vg-ring, .js-motion .vglyph .vg-links line { stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s var(--ease-out); }
.js-motion .vglyph .vg-links line:nth-child(2) { transition-delay: .15s; }
.js-motion .vglyph .vg-links line:nth-child(3) { transition-delay: .3s; }
.js-motion .vglyph .vg-node, .js-motion .vglyph .vg-core, .js-motion .vglyph .vg-sat { transform: scale(0); transition: transform .8s var(--ease-out); }
.js-motion .vg2 .n2 { transition-delay: .2s; } .js-motion .vg2 .n3 { transition-delay: .35s; }
.js-motion .vg1 .vg-dot { opacity: .9; transform: translate(var(--x), var(--y)); transition: transform 1.6s var(--ease-out), opacity 1.6s ease; }
.js-motion .vglyph.is-in .vg-ring, .js-motion .vglyph.is-in .vg-links line { stroke-dashoffset: 0; }
.js-motion .vglyph.is-in .vg-node, .js-motion .vglyph.is-in .vg-core, .js-motion .vglyph.is-in .vg-sat { transform: scale(1); }
/* Viele Punkte ziehen sich auf einen Fokus zusammen */
.js-motion .vg1.is-in .vg-dot { opacity: 0; transform: translate(0, 0); }
.js-motion .vg1.is-in .s2 { transition-delay: .1s; } .js-motion .vg1.is-in .s3 { transition-delay: .2s; } .js-motion .vg1.is-in .s4 { transition-delay: .3s; }
/* Danach nur noch leise: Fokus atmet, Team atmet versetzt, ein Punkt läuft von allein im Kreis */
@keyframes vg-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes vg-spin { to { transform: rotate(360deg); } }
.js-motion .vg1.is-in .vg-core { animation: vg-breathe 4s ease-in-out 1.8s infinite; }
.js-motion .vg2.is-in .vg-node { animation: vg-breathe 5s ease-in-out infinite; }
.js-motion .vg2.is-in .n1 { animation-delay: 1.2s; } .js-motion .vg2.is-in .n2 { animation-delay: 2.9s; } .js-motion .vg2.is-in .n3 { animation-delay: 4.6s; }
.js-motion .vg3.is-in .vg-orbit { animation: vg-spin 14s linear 1.2s infinite; }
@media (max-width: 1024px) { .vglyph { width: 64px; height: 64px; padding: 13px; margin-bottom: 20px; } }
.cta__side .cta__note { margin: 14px 0 0; font-size: 0.86rem; color: var(--ink-3); }
.cta__note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.profile__link[hidden] { display: none; }

/* Kennzahlen: Spalten nach Inhalt, Labels höchstens zwei Zeilen */
.f-metrics__set { grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px; }
.f-metric + .f-metric { padding-left: 12px; }
.f-metric__lbl, .metric__label { white-space: nowrap; }
.f-metric__lbl { font-size: 0.76rem; }
@media (max-width: 400px) { .f-metric__lbl { font-size: 0.72rem; } .f-metric__num { font-size: 1.75rem; } }
.f-metric__num .unit, .metric__num .unit { font-size: 0.5em; letter-spacing: -0.01em; }
.profile .metrics { grid-template-columns: repeat(3, auto); justify-content: start; }
@media (max-width: 640px) {
  .profile .metric { padding-right: 12px; }
  .profile .metric + .metric { padding-left: 12px; }
  .profile .metric__label { font-size: 0.78rem; }
}


/* ---------- Calendly-Inline-Widget (05.10.): Lade-Zustand, Höhen, Notfall ---------- */
.bk__frame { min-width: 320px; background: var(--paper); overflow: hidden; }
.bk__frame iframe,
.bk__frame .calendly-inline-widget { width: 100% !important; height: 100% !important; min-width: 320px; border: 0; display: block; }
.bk.is-loaded { min-height: 700px; }

.bk__loading { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: var(--paper); }
.bk__loading[hidden] { display: none; }
.bk__loading p { margin: 0; font-size: 0.92rem; color: var(--ink-2); }
.bk__spinner { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--green); }
.js-motion .bk__spinner { animation: bk-spin 0.9s linear infinite; }
@keyframes bk-spin { to { transform: rotate(360deg); } }

[data-booking-fail] { z-index: 5; }
[data-booking-loading]:focus, [data-booking-fail]:focus, [data-booking-frame]:focus { outline: none; }
/* Ohne JavaScript ist der Lade-Button wirkungslos: dann den Direktlink zeigen. */
html:not(.js) [data-booking-load] { display: none; }
/* Widget sanft einblenden, sobald es wirklich steht. */
.js-motion .bk__frame { opacity: 0; transition: opacity .45s ease; }
.js-motion .bk.is-ready .bk__frame { opacity: 1; }
.bk__soon .bk__alt { margin: 20px 0 0; font-size: 0.88rem; }

@media (max-width: 640px) {
  .bk.is-loaded { min-height: 1000px; }
}

/* Geduld-Hinweis und Widerruf (06.10.) */
.bk-col { min-width: 0; }
.bk__hint { margin: 10px 0 0; font-size: 0.84rem; color: var(--ink-3); }
.bk__hint[hidden] { display: none; }
.bk__revoke { margin: 14px 0 0; text-align: right; }
.bk__revoke button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-size: 0.82rem; color: var(--ink-3); text-decoration: underline;
  text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.bk__revoke button:hover { color: var(--ink); text-decoration-color: currentColor; }
.bk__revoke button[hidden] { display: none; }

/* Bestaetigungs-Kasten nach der Buchung (06.10.). Erbt Farben, Rundung und
   Innenabstand von .aside, damit er wie die Box "So laeuft es ab" aussieht. */
.bk__done { margin-top: 20px; }
.bk__done[hidden] { display: none; }
.bk__done .label { margin-bottom: 10px; }
.bk__done p { margin: 14px 0 0; font-size: 0.95rem; line-height: 1.6; color: rgba(238,238,232,.82); }
.bk__done .bk__done-note { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-light); font-size: 0.88rem; color: rgba(238,238,232,.68); }
.js-motion .bk__done { opacity: 0; }
.js-motion .bk__done.is-in { opacity: 1; }

/* ---------- Danke-Seite ---------- */
.danke__note { max-width: 46em; margin: 22px 0 0; font-size: 0.95rem; line-height: 1.6; color: var(--ink-2); }

/* ---------------- Stimmen (Kundenzitate) ----------------
   Der Kreis traegt die Person, nicht den Text: Portraet im Kreis, darum der
   duenne Ring mit dem laufenden Punkt, dahinter ein weicher Orb. Alle drei gibt
   es auf dieser Seite schon (Hero, Gruenderzitat, Abschluss), benutzt werden
   dieselben Klassen und dieselbe Drehung orbit-spin. Text in einen Kreis zu
   setzen waere das Naheliegende und das Falsche: Die Zeilen wuerden oben und
   unten kurz, in der Mitte lang, 150 Woerter waeren darin unlesbar.

   Links steht der Beweis (Gesicht, Name, Ergebnis), rechts die Stimme. Wer
   ueberfliegt, liest nur die linke Spalte und hat vier Gesichter und vier
   Ergebnisse; wer liest, bekommt jedes Wort. Die linke Spalte bleibt bei allen
   vier auf derselben Seite, sonst zerfaellt genau dieses Ueberfliegen.

   Kein eigenes JavaScript: Das Einblenden macht data-fade aus site.js, die
   Bewegung des Orbs data-parallax. Ohne Bewegung steht alles sofort da.

   Eine Haarlinie durch die Kreise war hier und ist wieder raus. Sie laeuft
   durch Name und Ergebnis, und verdecken liess sie sich nur mit
   undurchsichtigen Flaechen dahinter, die als Kaesten im Bild stehen.
   Nicht erneut versuchen, ohne die linke Spalte umzubauen. */
/* Der Abschnitt steht enger als der Rest der Seite und mittig. Gemessen bei
   1440 px: Die Textspalte war 945 px breit, das Zitat aber auf 606 px begrenzt,
   also blieben rechts 339 px leer und alles klebte links. 1000 px fassen die
   linke Spalte (300), den Abstand (65) und das Zitat (606) genau. Kopf und
   Zeilen teilen dieselbe Begrenzung, sonst stehen sie nicht auf einer Flucht. */
.voices { padding-block: var(--section-y); background: var(--bg-2); }
.voices__head, .voice { max-width: 1000px; margin-inline: auto; }
.voices__head { margin-bottom: 20px; }
.voices__head .lead { margin-top: 18px; }

/* Die linke Spalte ist breiter als der Kreis, damit lange Namen und Rollen
   nicht umbrechen. Gemessen: "Director Business Development, Part Trading GmbH"
   braucht in Versalien mit Sperrung sonst zwei Zeilen. */
.voice { --k: clamp(160px, 19vw, 240px); position: relative; isolation: isolate;
  margin-block: 0; display: grid; grid-template-columns: clamp(200px, 23vw, 300px) minmax(0, 1fr);
  grid-template-areas: "kreis text" "wer text"; align-items: start; align-content: start;
  column-gap: clamp(30px, 4.5vw, 72px); row-gap: 34px;
  padding-block: clamp(52px, 6.5vw, 96px); border-top: 1px solid var(--line); }
.voice:first-of-type { border-top: 0; }
.voice__wolke { width: clamp(300px, 36vw, 560px); z-index: -1; opacity: .55; }
.voice__wolke--l { left: -16%; top: 6%; }
.voice__wolke--r { right: -16%; top: 10%; }

/* Das Bild liegt absolut im Kreis, damit es nie die Hoehe bestimmt. Sonst zieht
   eine hochformatige Vorlage den Kreis zum Oval: height 100 % kann sich nicht
   aufloesen, das Bild faellt auf seine Eigenhoehe zurueck, und min-height auto
   beim Flex- oder Grid-Element laesst den Kreis mitwachsen. */
.voice__kreis { grid-area: kreis; position: relative; display: block; width: var(--k); aspect-ratio: 1; }
.voice__ava { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 50%;
  overflow: hidden; background: var(--sage-2);
  box-shadow: 0 0 0 1px var(--bg-2), 0 0 0 2px var(--sage-2); }
/* Ausschnitt je Foto ueber --pos und --zoom im HTML, damit er sich nachziehen
   laesst, ohne die Bilddatei neu zu rechnen. Alle vier Vorlagen sind so
   zugeschnitten, dass --zoom 1 genuegt und nichts hochskaliert wird. */
.voice__ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--pos, 50% 50%); transform: scale(var(--zoom, 1)); }
.voice__ring { position: absolute; inset: -19px; border-radius: 50%;
  border: 1px solid var(--sage-3); pointer-events: none; }
.voice__ring .ring-spin { position: absolute; inset: -1px; border-radius: 50%;
  animation: orbit-spin 22s linear infinite; }
.voice__ring .ring-dot { position: absolute; left: 50%; top: 0; width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 5px rgba(147,174,156,.28); }

.voice__wer { grid-area: wer; }
.voice__name { margin: 0; font-size: 0.95rem; font-weight: 500; }
.voice__name span { display: block; margin-top: 5px; font-size: 0.7rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 400; line-height: 1.7; }
/* Das Ergebnis steht links beim Gesicht, nicht im Fliesstext. Part Trading nennt
   lange keine Zahl; dort stand ein woertlicher Auszug („eine ganz neue
   Klarheit"). Seit 30.10. traegt die Spalte bei allen vier eine Zahl.
   .voice__erg-wort bleibt deshalb unbenutzt, aber stehen: Faellt eine Zahl
   wieder weg, weil ein Kunde sie nicht bestaetigt, ist die Darstellung sofort
   wieder da. */
.voice__erg { margin: 22px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.voice__erg-pre { display: block; margin-bottom: 2px; font-size: 0.95rem; color: var(--ink-2); }
.voice__erg-zahl { display: block; font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.2rem, 3.8vw, 3.2rem); line-height: 1; letter-spacing: -0.025em;
  color: var(--green); white-space: nowrap; }
.voice__erg-wort { display: block; font-family: var(--serif); font-weight: 450;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.25; letter-spacing: -0.02em;
  color: var(--green); }
.voice__erg-was { display: block; margin-top: 10px; font-size: 0.7rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3); line-height: 1.7; }

/* Die Hoehen sind je Zeichen verschieden: Ein reines Wortbild wirkt bei gleicher
   Hoehe doppelt so gross wie ein quadratisches Zeichen, und ein Zeichen ueber
   zweizeiligem Text braucht am meisten. Ausgeglichen nach Augenmass. */
.voice__text { grid-area: text; }
/* Das Logo ist der Verweis auf die Website des Kunden, nicht das Portraet:
   Ein Gesicht, das eine Firmenseite oeffnet, ueberrascht, und zwei Verweise
   nebeneinander auf dasselbe Ziel sind fuer Screenreader nur Laerm. Der kleine
   Pfeil sagt sehenden Nutzern, dass sich ein neuer Tab oeffnet; fuer alle
   anderen steht es im unsichtbaren Text. */
/* Die Polsterung ist Trefferflaeche, keine Optik: Ein breiter Schriftzug ist nur
   26 px hoch, empfohlen sind 44 px fuer den Finger. Der negative Aussenabstand
   nimmt die Polsterung optisch wieder zurueck, damit das Logo dort steht, wo es
   ohne sie staende. */
.voice__firma { display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 8px; margin: -9px -8px 21px; min-height: 44px;
  text-decoration: none; border-radius: 6px; }
.voice__firma:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; }
.voice__extern { display: inline-flex; color: var(--ink-3); opacity: .45;
  transition: opacity .3s, transform .3s var(--ease-out); }
.voice__extern .icon { width: 15px; height: 15px; }
.voice__firma:hover .voice__extern, .voice__firma:focus-visible .voice__extern {
  opacity: 1; transform: translate(2px, -2px); }
.voice__firma:hover .voice__logo { opacity: .75; }
.voice__logo { width: auto; height: auto; object-fit: contain; transition: opacity .3s;
  object-position: left center; max-height: 34px; max-width: 230px; }
.voice__logo.is-square { max-height: 52px; max-width: 110px; }
.voice__logo.is-stack { max-height: 66px; max-width: 140px; }
.voice__logo.is-wide { max-height: 26px; max-width: 240px; }
/* Gemessen statt geschaetzt: Bei 66ch standen 79 Zeichen in der Zeile, das ist
   ueber dem angenehmen Bereich von etwa 75. Bei 60ch sind es 72. */
.voice__zitat { margin: 0; max-width: 60ch; }
.voice__claim { margin: 0 0 30px; font-family: var(--serif); font-weight: 450;
  letter-spacing: -0.026em; font-size: clamp(1.5rem, 2.8vw, 2.4rem); line-height: 1.14;
  text-wrap: balance; color: var(--ink); }
.voice__zitat p:not(.voice__claim) { margin: 0; color: var(--ink-2); font-size: 1rem; line-height: 1.72; }
.voice__zitat p:not(.voice__claim) + p { margin-top: 18px; }
/* Der erste Absatz traegt etwas staerker, damit das Auge eine Rampe hat. */
.voice__claim + p { font-size: 1.1rem; line-height: 1.64; color: var(--ink); }

@media (max-width: 900px) {
  .voice { grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "kreis" "wer" "text"; row-gap: 26px; }
  .voice__kreis { width: clamp(132px, 38vw, 170px); }
  .voice__ring { inset: -13px; }
  .voice__wolke { opacity: .4; }
}