/* =========================================================================
   CELESTINO CONSULTING
   Bespoke stylesheet. Built on the client's own mark: a circle of eight
   12.5% segments running cyan -> magenta, a light serif wordmark, an
   infinity glyph. Eight is the house geometry; the spectrum is an INDEX,
   never an accent. Colour appears small (arcs, rules, hovers) and never
   as a filled area.
   ========================================================================= */

/* ---------- 1. Fonts (self-hosted, CSP 'self', no CDN) ---------- */


@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat-latin.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  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: 'Montserrat';
  src: url('/assets/fonts/montserrat-latin-ext.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2. Tokens ---------- */

:root {
  /* His deck's own two-tone ground: off-white against warm greige. */
  --ground:    #F7F7F5;
  --surface:   #FFFFFF;
  --surface-2: #E9E8E2;   /* the greige panel */
  --surface-3: #DEDDD5;   /* hover / tiles */

  --ink:      #26292E;
  --ink-soft: #4E535B;
  --ink-mute: #5E6472;   /* 4,6:1 auf --ground — gemessen, nicht geschaetzt */

  --line:        rgba(38, 41, 46, .14);
  --line-strong: rgba(38, 41, 46, .30);
  /* Konturen von Bedienelementen brauchen 3:1. --line-strong zeichnet auch
     Zierstriche und bleibt deshalb ruhig; Knoepfe und Felder nehmen diese. */
  --line-control: rgba(38, 41, 46, .58);

  /* Deep navy from his own icon set; cyan is the highlight in imagery only. */
  --accent:      #1C4257;
  --accent-ink:  #F7F7F5;
  --cyan:        #3FA9C4;

  /* The eight — used ONLY inside the portfolio disc and as thin indices. */
  --s1: #7ED4DC; --s2: #57AACB; --s3: #3F84B2; --s4: #4F6592;
  --s5: #5B5289; --s6: #6F4382; --s7: #83266A; --s8: #AE3160;
  --spectrum: linear-gradient(120deg, var(--s1), var(--s3), var(--s5), var(--s7), var(--s8));

  --shadow-card: 0 1px 2px rgba(38,41,46,.04), 0 14px 34px rgba(38,41,46,.07);
  --shadow-lift: 0 2px 8px rgba(38,41,46,.06), 0 26px 56px rgba(38,41,46,.12);
  --glass:       rgba(247, 247, 245, .82);
  --logo-invert: 0;

  --ff: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.375rem, 1.2rem + 4.3vw, 5rem);
  --fs-h1:      clamp(2rem, 1.3rem + 2.9vw, 3.5rem);
  --fs-h2:      clamp(1.75rem, 1.15rem + 2.9vw, 3.5rem);
  --fs-h3:      clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  --fs-body:    clamp(1rem, .96rem + .2vw, 1.0625rem);
  --fs-small:   .875rem;
  --fs-label:   .625rem;

  --sp-1: .5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem;
  --sp-5: 3rem;  --sp-6: 4rem; --sp-7: 5.5rem; --sp-8: 7.5rem;

  --gutter: 1.25rem;
  --container: 1200px;
  --spine-pad: 0px;

  /* Die Trennlinie ist kuerzer als die Sektion: das ist dieser Abstand. */
  --rule-pad: clamp(1.25rem, 9vw, 9rem);
  --spine-label: 124px;

  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur: .55s;
  --z-nav: 60; --z-scrim: 55; --z-drawer: 58; --z-consent: 9000;
  /* Dunkel ist die Grundhaltung der Seite; hell ist die bewusste Wahl. */
  color-scheme: dark;
}

/* Dark: neutral greys so the blue-grey mush is gone and only his
   spectrum carries colour. */
html.site-dark {
  --line-control: rgba(242, 242, 243, .46);
  --ground: #0C0C0E; --surface: #141417; --surface-2: #101012; --surface-3: #1E1E22;
  --ink: #F2F2F3; --ink-soft: #B4B5BA; --ink-mute: #86878E;
  --line: rgba(242,242,243,.11); --line-strong: rgba(242,242,243,.24);
  --accent: #7ED4DC; --accent-ink: #0C0C0E;
  --shadow-card: 0 1px 2px rgba(0,0,0,.5), 0 14px 36px rgba(0,0,0,.45);
  --shadow-lift: 0 2px 8px rgba(0,0,0,.55), 0 26px 60px rgba(0,0,0,.55);
  --glass: rgba(20,20,23,.78);
  --logo-invert: 1;
  color-scheme: dark;
}

@media (min-width: 900px)  { :root { --gutter: 2rem; } }
@media (min-width: 1360px) { :root { --spine-pad: 150px; } }


/* ---------- 3. Reset & base ---------- */

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

html {
  /* HARD RULE: never overflow-x:hidden on the scroll path — it creates a
     scroll container and steals the document scroll from Lenis. */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--ff);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; }
/* Every image gets height:auto so nothing can ever be warped by a stray
   width/height attribute. Applies to logos AND photos. */
img { height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }
button, a, [role="button"], summary { cursor: pointer; }

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

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.site-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface); color: var(--ink);
}
.site-skip:focus { left: var(--sp-2); top: var(--sp-2); }

.u-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 4. Layout primitives ---------- */

.wrap {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--sp-7);
}
@media (min-width: 1024px) {
  .section { padding-block: var(--sp-8); }
}
@media (min-width: 1360px) {
  .section .wrap { padding-left: var(--spine-pad); }
}

.section--tight { padding-block: var(--sp-6); }
.section--raised { background: transparent; }

.section__head { max-width: 46rem; margin-bottom: var(--sp-6); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .7em;
  font-size: var(--fs-label); font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: var(--sp-4);
}
/* The vertical bar from the "C|C" mark, reused as the house separator. */
.eyebrow:empty { display: none; }
.eyebrow::before {
  content: "";
  width: 1px; height: 1em;
  background: currentColor;
  opacity: .55;
}

.display {
  font-size: var(--fs-display);
  font-weight: 200;
  line-height: 1.08;
  letter-spacing: -.005em;
  text-transform: uppercase;
}
.h1 { font-size: var(--fs-h1); font-weight: 200; line-height: 1.12; letter-spacing: .005em; text-transform: uppercase; text-wrap: balance; max-width: 22ch; }
.h2 { font-size: var(--fs-h2); font-weight: 300; line-height: 1.16; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; max-width: 20ch; }
.h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; letter-spacing: 0; }

.lede { font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem); color: var(--ink-soft); line-height: 1.6; max-width: 34em; }
.prose { color: var(--ink-soft); max-width: 34em; }
.prose + .prose { margin-top: var(--sp-2); }
.muted { color: var(--ink-mute); }

/* ---------- 5. Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .65em;
  min-height: 48px;
  padding: .85rem 1.6rem;
  border-radius: var(--r-pill);
  font-size: .9375rem; font-weight: 500; letter-spacing: .01em;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
  transition: background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out;
}
.btn--primary { background: var(--ink); color: var(--ground); }
.btn--primary:hover { background: var(--s1); }
.btn--ghost { border: 1px solid var(--line-control); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(38, 41, 46, .05); }

/* A text path, not a second shouting button. */
.btn-text {
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 44px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-control);
  transition: color .2s ease-out, border-color .2s ease-out;
}
.btn-text:hover { color: var(--s1); border-color: var(--s1); }
.btn-text__arrow { transition: transform .2s ease-out; }
.btn-text:hover .btn-text__arrow { transform: translateX(3px); }

@media (max-width: 480px) {
  .btn { width: 100%; font-size: clamp(.8125rem, .55rem + 1.1vw, .9375rem); padding: .85rem 1.1rem; }
}

/* ---------- 6. The spine: the disc, unrolled ---------- */

.spine {
  position: fixed;
  left: 20px;
  top: 50%; transform: translateY(-50%);
  z-index: 40;
  display: none; flex-direction: column; gap: 15px;
  /* Sits over the price strip and over photographs — a soft blurred ground
     keeps it readable without ever putting text straight onto text. */
  padding: var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-3);
  border-radius: var(--r-lg);
  /* Nur so viel Unschaerfe, dass Text nie auf Text steht — man soll weiter
     sehen, dass dahinter etwas laeuft. */
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  -webkit-backdrop-filter: blur(5px) saturate(120%);
  backdrop-filter: blur(5px) saturate(120%);
}
@media (min-width: 1360px) { .spine { display: flex; } }

/* Zwei Gruppen: oben die Abschnitte der Startseite, unten die Seiten. */
.spine__group { display: flex; flex-direction: column; gap: 15px; }
.spine__sep {
  height: 1px; margin: 4px 0 4px auto; width: var(--spine-label);
  background: var(--line-strong);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%);
  mask-image: linear-gradient(90deg, transparent, #000 30%);
}
.spine__group--pages { gap: 11px; }
.spine__group + .spine__group { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

/* Gruppenueberschrift: sehr klein, damit sie ordnet, ohne zu konkurrieren. */
.spine__cap {
  display: block; text-align: right; width: var(--spine-label);
  font-size: .5rem; font-weight: 600; letter-spacing: .18em;
  /* Keine Deckkraft-Absenkung: die druecke den Kontrast auf 2,6:1. */
  text-transform: uppercase; color: var(--ink-mute);
  margin-bottom: 3px;
}

/* Seitenlinks: dieselbe Spalte wie die Abschnitte, aber ruhiger — ein Punkt
   statt eines Balkens, damit die Positionsanzeige oben eindeutig bleibt. */
.spine__page {
  display: grid; grid-template-columns: var(--spine-label) 44px;
  align-items: center; gap: 12px;
}
.spine__page .spine__label { color: var(--ink-mute); font-weight: 600; letter-spacing: .08em; }
.spine__page:hover .spine__label { color: var(--ink); }
.spine__page.is-current .spine__label { color: var(--ink); }
.spine__dot {
  grid-column: 2; justify-self: start;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--line-strong);
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.spine__page:hover .spine__dot { background: var(--ink-soft); transform: scale(1.3); }
.spine__page.is-current .spine__dot { background: var(--accent); transform: scale(1.5); }

/* Label left, rule right — the reader scans the words, the rules mark position. */
.spine__item {
  display: grid; grid-template-columns: var(--spine-label) 44px;
  align-items: center; gap: 12px;
}

.spine__label {
  grid-column: 1;
  text-align: right;
  font-size: .5625rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* Voll deckend: als Navigationsbeschriftung muss sie lesbar sein. */
  opacity: 1;
  transition: opacity .3s var(--ease), color .3s var(--ease);
}
.spine__item:hover .spine__label { opacity: 1; color: var(--ink); }
.spine__item.is-active .spine__label { opacity: 1; color: var(--ink); font-weight: 700; }

.spine__mark {
  grid-column: 2; justify-self: start;
  width: 20px; height: 3px; border-radius: 2px;
  background: var(--line-strong);
  transition: width .45s var(--ease), background-color .45s var(--ease);
}
.spine__item:hover .spine__mark { width: 32px; }
.spine__item.is-active .spine__mark { width: 44px; }
.spine__group > .spine__item:nth-child(1).is-active .spine__mark { background: var(--s1); }
.spine__group > .spine__item:nth-child(2).is-active .spine__mark { background: var(--s2); }
.spine__group > .spine__item:nth-child(3).is-active .spine__mark { background: var(--s3); }
.spine__group > .spine__item:nth-child(4).is-active .spine__mark { background: var(--s4); }
.spine__group > .spine__item:nth-child(5).is-active .spine__mark { background: var(--s5); }
.spine__group > .spine__item:nth-child(6).is-active .spine__mark { background: var(--s6); }
.spine__group > .spine__item:nth-child(7).is-active .spine__mark { background: var(--s7); }
.spine__group > .spine__item:nth-child(8).is-active .spine__mark { background: var(--s8); }

.spine-bar {
  position: fixed; inset: 0 0 auto 0; height: 2px;
  z-index: 61;
  background: transparent;
}
.spine-bar__fill {
  height: 100%; width: 0%;
  background: var(--spectrum);
  transition: width .1s linear;
}
@media (min-width: 1024px) { .spine-bar { display: none; } }

/* ---------- 7. Header ---------- */

.site-nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-nav);
  transition: background-color .3s ease-out, border-color .3s ease-out;
  border-bottom: 1px solid transparent;
  /* Klarer Schnitt statt Unschaerfe: ueber dem Hero transparent, ab dem
     ersten Scrollen deckend mit einer Haarlinie darunter. */
  background: transparent;
}
.site-nav.is-transparent { border-bottom-color: transparent; }
.site-nav:not(.is-transparent),
.site-nav.is-scrolled {
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: var(--line);
}

.site-nav__inner {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  min-height: 78px;
}

.site-nav__brand { display: inline-flex; align-items: center; gap: .75rem; }
.site-nav__logo { height: 52px; width: auto; filter: invert(var(--logo-invert)); }

/* Mehr Luft zwischen Sprache, Aufruf und dem Hell/Dunkel-Knopf. */
.site-nav__desktop { display: none; align-items: center; gap: var(--sp-4); }
@media (min-width: 1024px) { .site-nav__desktop { display: flex; } }

.site-nav__menu { display: flex; align-items: center; gap: var(--sp-3); }
.site-nav__menu-item { position: relative; }

.site-nav__link {
  display: inline-flex; align-items: center; gap: .4em;
  min-height: 44px;
  font-size: .875rem; font-weight: 400; letter-spacing: .01em;
  color: var(--ink-soft);
  transition: color .2s ease-out;
}
.site-nav__link:hover { color: var(--ink); }

.site-nav__caret { width: 10px; height: 10px; opacity: .6; }

.site-nav__dropdown {
  position: absolute; top: calc(100% + 8px); left: -14px;
  min-width: 220px;
  padding: .5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease-out, transform .2s ease-out, visibility .2s;
}
.site-nav__menu-item:hover .site-nav__dropdown,
.site-nav__menu-item:focus-within .site-nav__dropdown { opacity: 1; visibility: visible; transform: none; }
.site-nav__dropdown a {
  display: block; padding: .6rem .75rem; border-radius: var(--r-sm);
  font-size: .875rem; color: var(--ink-soft);
  transition: background-color .18s ease-out, color .18s ease-out;
}
.site-nav__dropdown a:hover { background: var(--surface-3); color: var(--ink); }

.site-nav__lang-toggle {
  display: inline-flex; align-items: center; gap: .35em;
  min-height: 44px;
  font-family: var(--ff); font-size: .6875rem; letter-spacing: .12em;
  color: var(--ink-mute);
  transition: color .2s ease-out;
}
.site-nav__lang-toggle:hover { color: var(--ink); }

.site-nav__cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .6rem 1.25rem;
  border: 1px solid var(--line-control);
  border-radius: var(--r-pill);
  font-size: .875rem; font-weight: 500;
  transition: background-color .2s ease-out, color .2s ease-out, border-color .2s ease-out;
}
.site-nav__cta:hover { background: var(--ink); color: var(--ground); border-color: var(--ink); }

/* Burger */
.site-nav__burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px;
  padding: 0 12px;
}
@media (min-width: 1360px) { .site-nav__burger { display: none; } }
.site-nav__burger span {
  display: block; height: 1px; width: 100%;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s ease-out;
}
body.nav-open .site-nav__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .site-nav__burger span:nth-child(2) { opacity: 0; }
body.nav-open .site-nav__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer.
   HARD RULE: when closed it must be pointer-events:none AND visibility:hidden.
   A fixed inset:0 overlay at opacity:0 stays interactive and eats every click. */
.site-nav__mobile {
  position: fixed; inset: 0;
  z-index: var(--z-drawer);
  display: flex; flex-direction: column;
  padding: 96px var(--gutter) var(--sp-5);
  background: var(--ground);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  overflow-y: auto;
}
body.nav-open .site-nav__mobile {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
}
@media (min-width: 1360px) { .site-nav__mobile { display: none; } }

.site-nav__mobile-inner { display: flex; flex-direction: column; gap: .25rem; }
.site-nav__mobile-link {
  display: flex; align-items: center;
  min-height: 56px;
  font-family: var(--ff); font-size: 1.75rem; font-weight: 300;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.site-nav__mobile-foot { margin-top: auto; padding-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }

.site-nav__scrim {
  position: fixed; inset: 0; z-index: var(--z-scrim);
  background: rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s ease-out, visibility .3s;
}
body.nav-open .site-nav__scrim { opacity: 1; visibility: visible; pointer-events: auto; }

/* Hell/Dunkel. Stand hier auf display:none — der Umschalter war dadurch
   ueberhaupt nicht erreichbar, obwohl er im Markup und im Skript fertig war. */
.site-theme-toggle {
  display: inline-grid; place-items: center;
  /* Gleiche Hoehe wie der Aufruf daneben und buendig mit der Containerkante,
     genau wie die Marke auf der linken Seite. Der zusaetzliche Aussenabstand
     hatte ihn aus dieser Flucht geschoben. */
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--ink-soft);
  border: 1px solid transparent;
  transition: color .2s ease-out, border-color .2s ease-out, background-color .2s ease-out;
}
.site-theme-toggle:hover { color: var(--ink); border-color: var(--line-strong); }
.site-theme-toggle svg { grid-area: 1 / 1; }
/* Hell: Mond anbieten (Ziel), dunkel: Sonne. */
.site-theme-toggle__sun  { display: none; }
.site-theme-toggle__moon { display: block; }
html.site-dark .site-theme-toggle__sun  { display: block; }
html.site-dark .site-theme-toggle__moon { display: none; }

/* ---------- 8. Hero — statement left, the mark right ----------
   The ring is his own device. It carries the eight subjects he teaches, so
   it explains something. The old orbiting tickers are gone for good. */

/* Voller Bildschirm. Kopfleiste 80px oben, Kursband 52px unten. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: calc(80px + var(--sp-3)) calc(var(--sp-3) + 52px);
  /* clip statt hidden: verhindert den Ueberlauf, ohne einen zweiten
     Bildlaufbehaelter zu erzeugen (der wuerde Lenis das Scrollen klauen). */
  overflow: clip;
}
.hero .ticker {
  position: absolute; inset: auto 0 0 0;
  border-bottom: 0;
  background: var(--ground);
}

/* Weiches Farbfeld aus seinen acht Toenen. Traegt die Stimmung hinter dem
   Bild, kostet kein Byte und funktioniert in beiden Schemata. */
.hero__aura {
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(46% 52% at 88% 8%,  color-mix(in srgb, var(--s1) 42%, transparent), transparent 68%),
    radial-gradient(40% 46% at 104% 74%, color-mix(in srgb, var(--s6) 26%, transparent), transparent 70%);
  filter: blur(30px);
  opacity: .62;
}
html.site-dark .hero__aura { opacity: .34; }

.hero__grid {
  position: relative; z-index: 1;
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: grid; gap: var(--sp-5); align-items: center;
}
/* Eine Spalte ueber die volle Breite. Genau das erlaubt die grosse Schrift:
   die laengste Zeile („IHRE ENTSCHEIDUNG.") ist 11,1em breit — in einer
   halben Spalte passt sie nur bis 48px, ueber die volle bis 97px. */
@media (min-width: 1360px) { .hero__grid { padding-left: var(--spine-pad); } }

.hero__eyebrow { color: var(--ink-mute); }

/* Zwei kurze Zeilen. Genau deshalb darf die Schrift so gross werden, ohne
   je auf drei Zeilen zu brechen — die Groesse ist gemessen, nicht geraten. */
.hero__title {
  margin-bottom: var(--sp-4);
  font-size: clamp(1.875rem, 6vw, 5.5rem);
  font-weight: 200;
  line-height: 1.02;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.hero__title span, .hero__title em { display: block; }
/* Sehr schmale Geraete: hier darf sie umbrechen, sonst laeuft sie heraus. */
@media (max-width: 420px) { .hero__title { font-size: 7.4vw; } }
.hero__title span { color: var(--ink-soft); }
.hero__title em   { font-style: normal; font-weight: 600; color: var(--ink); }

/* 28em statt 34em: der Fliesstext soll rechts Platz fuer die Kurve lassen. */
.hero__lede { margin-bottom: var(--sp-5); max-width: 28em; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.hero__note { margin-top: var(--sp-3); font-size: var(--fs-small); }

/* Drei Zusagen als Sockel des Hero — der Teil, den ein Besucher wirklich sucht. */
.hero__proof {
  position: relative; z-index: 1;
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin: var(--sp-5) auto 0;
  padding-top: var(--sp-4);
  display: grid; gap: var(--sp-3);
}
@media (min-width: 820px)  { .hero__proof { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } }
@media (min-width: 1360px) { .hero__proof { padding-left: var(--spine-pad); } }
.hero__proof-title { font-size: var(--fs-h3); font-weight: 600; margin-bottom: .35rem; letter-spacing: 0; text-transform: none; }
.hero__proof-text  { color: var(--ink-mute); font-size: var(--fs-small); line-height: 1.55; max-width: 34ch; }

/* ---------- Der Ring aus acht Bildsegmenten ----------
   Fruehere Fassung waren SVG-Pfade mit Verlaeufen. Jetzt sind es acht
   Ausschnitte aus EINEM gerenderten Leuchtring — dadurch hat er echtes
   Volumen, Glut an den Kanten und Tiefe, die sich in Vektoren nicht
   nachbauen laesst. Lage und Groesse stehen in Prozent im Markup. */
.ring { position: relative; width: min(100%, 520px); margin-inline: auto; aspect-ratio: 1 / 1; }

.ring__seg {
  position: absolute; display: block;
  transition: transform .42s cubic-bezier(.22,.9,.28,1),
              opacity .3s ease-out, filter .3s ease-out;
}
.ring__seg img { display: block; width: 100%; height: auto; }
/* Ist eines im Zugriff, treten die anderen zurueck. */
.ring.is-focused .ring__seg { opacity: .3; }
.ring .ring__seg.is-on {
  opacity: 1;
  transform: translate(var(--push-x, 0), var(--push-y, 0));
}
.ring__seg:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 6px; }

.ring__hubwrap {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: .35rem;
  text-align: center; pointer-events: none;
}
.ring__hub {
  display: block;
  font-size: clamp(.9rem, 1.5vw, 1.25rem); font-weight: 300;
  letter-spacing: .3em; text-transform: uppercase; color: var(--ink);
  transition: opacity .19s ease-out, transform .19s ease-out;
}
.ring__hubsub {
  display: block;
  font-size: .625rem; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: var(--ink-mute);
  transition: opacity .19s ease-out, transform .19s ease-out;
}
/* Zwei Halbwellen: erst raus, dann mit dem neuen Wort wieder rein. */
.ring__hub.is-swapping, .ring__hubsub.is-swapping { opacity: 0; transform: translateY(-4px); }
.ring__hub.is-named { letter-spacing: .06em; font-weight: 500; }

@media (max-width: 640px) { .ring__label { font-size: 15px; } }

/* ---------- 9. The eight fields ---------- */

.fields { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 768px)  { .fields { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .fields { grid-template-columns: repeat(4, 1fr); } }

.field {
  position: relative;
  background: var(--ground);
  padding: var(--sp-4) var(--sp-3) var(--sp-4);
  transition: background-color .25s ease-out;
}
.field:hover { background: var(--surface); }

.field__arc { width: 30px; height: 30px; margin-bottom: var(--sp-3); }
.field__arc circle { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.field__arc path { fill: none; stroke-width: 3; stroke-linecap: round; transition: stroke .25s ease-out; }
.field:nth-child(1) .field__arc path { stroke: var(--s1); }
.field:nth-child(2) .field__arc path { stroke: var(--s2); }
.field:nth-child(3) .field__arc path { stroke: var(--s3); }
.field:nth-child(4) .field__arc path { stroke: var(--s4); }
.field:nth-child(5) .field__arc path { stroke: var(--s5); }
.field:nth-child(6) .field__arc path { stroke: var(--s6); }
.field:nth-child(7) .field__arc path { stroke: var(--s7); }
.field:nth-child(8) .field__arc path { stroke: var(--s8); }

.field__no {
  font-family: var(--ff); font-size: .625rem; letter-spacing: .14em;
  color: var(--ink-mute); margin-bottom: .5rem;
}
.field__title { font-size: 1rem; font-weight: 500; line-height: 1.35; margin-bottom: .6rem; }
.field__text { font-size: var(--fs-small); color: var(--ink-mute); line-height: 1.6; }

/* ---------- 10. Programmes / prices ---------- */

.programmes { display: grid; gap: var(--sp-3); }
@media (min-width: 768px)  { .programmes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .programmes { grid-template-columns: repeat(3, 1fr); } }

.programme {
  display: flex; flex-direction: column;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .25s ease-out, background-color .25s ease-out;
}
.programme:hover { border-color: var(--line-strong); background: var(--surface-3); }
/* The most substantial programme is marked by room and a rule, not by colour shouting. */
.programme--feature { padding: var(--sp-5) var(--sp-4); border-color: var(--accent); }

.programme__meta {
  font-family: var(--ff); font-size: .625rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: var(--sp-2);
}
.programme__title { font-family: var(--ff); font-size: 1.625rem; font-weight: 400; line-height: 1.15; margin-bottom: var(--sp-2); }
.programme__text { font-size: var(--fs-small); color: var(--ink-mute); line-height: 1.6; margin-bottom: var(--sp-3); }

.programme__price { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: .4em; }
.programme__cur { font-family: var(--ff); font-size: .75rem; color: var(--ink-mute); letter-spacing: .06em; }
.programme__amt { font-size: 1.5rem; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ---------- 11. Path (four steps) ---------- */

.path { display: grid; gap: var(--sp-4); counter-reset: step; }
@media (min-width: 900px) { .path { grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); } }

.step { position: relative; padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.step__no { font-family: var(--ff); font-size: .625rem; letter-spacing: .14em; color: var(--ink-mute); margin-bottom: .75rem; }
.step:nth-child(1) { border-top-color: var(--s1); }
.step:nth-child(2) { border-top-color: var(--s3); }
.step:nth-child(3) { border-top-color: var(--s5); }
.step:nth-child(4) { border-top-color: var(--s7); }
.step__title { font-size: 1.0625rem; font-weight: 500; margin-bottom: .5rem; }
.step__text { font-size: var(--fs-small); color: var(--ink-mute); line-height: 1.6; }

/* ---------- 12. Voice (single testimonial) ---------- */

.voice { max-width: 44rem; }
.voice__quote {
  font-family: var(--ff);
  font-weight: 300;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin-bottom: var(--sp-4);
}
.voice__who { display: flex; align-items: center; gap: .75rem; font-size: var(--fs-small); color: var(--ink-mute); }
.voice__rule { width: 40px; height: 1px; background: var(--spectrum); }

/* ---------- 13. Founder ---------- */

.founder { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 900px) { .founder { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: var(--sp-6); } }

.founder__figure { position: relative; margin: 0; }
.founder__img {
  width: 100%; height: auto;
  border-radius: var(--r-lg);
  filter: grayscale(1) contrast(1.06);
  transition: filter .5s ease-out;
}
.founder__figure:hover .founder__img { filter: grayscale(.15) contrast(1.02); }
.founder__caption {
  margin-top: var(--sp-2);
  font-family: var(--ff); font-size: .625rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-mute);
}

/* ---------- 14. Contact band + footer ---------- */

/* Ohne Trennlinie: das Lichtband laeuft von hier nach oben in die
   Sektion darueber, eine Linie mittendrin waere ein Bruch. */
.site-cta-band { padding-block: var(--sp-8); border-top: 0; }
.site-cta-band__inner {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
  }
@media (min-width: 1024px) { .site-cta-band__inner { padding-left: var(--spine-pad); } }
.site-cta-band__title { font-family: var(--ff); font-weight: 300; font-size: var(--fs-h2); line-height: 1.05; margin-bottom: var(--sp-3); }
.site-cta-band__sub { color: var(--ink-soft); max-width: 34rem; margin: 0 0 var(--sp-4); }

.site-footer { background: transparent; border-top: 0; padding-block: var(--sp-6) var(--sp-4); }
.site-footer__inner {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: grid; gap: var(--sp-5);
}
@media (min-width: 768px) { .site-footer__inner { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .site-footer__inner { grid-template-columns: 1.2fr 1fr 1fr 1.2fr; padding-left: var(--spine-pad); } }

.site-footer__heading {
  font-family: var(--ff); font-size: .625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: var(--sp-2);
}
.site-footer__list { display: flex; flex-direction: column; gap: .1rem; }
.site-footer__list a, .site-footer__addr-link {
  display: inline-flex; align-items: center; min-height: 40px;
  font-size: var(--fs-small); color: var(--ink-soft);
  transition: color .2s ease-out;
}
.site-footer__list a:hover, .site-footer__addr-link:hover { color: var(--s1); }

.site-footer__bar {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin: var(--sp-5) auto 0;
  padding-top: var(--sp-3);
  border-top: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3);
  align-items: center; justify-content: space-between;
  font-size: .75rem; color: var(--ink-mute);
}
@media (min-width: 1024px) { .site-footer__bar { padding-left: var(--spine-pad); } }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.site-footer__legal a { min-height: 40px; display: inline-flex; align-items: center; }
.site-footer__legal a:hover { color: var(--ink); }
/* Ohne Deckkraft-Absenkung — die zog den Hinweis auf 3,6:1. */
.site-footer__ai-note { font-size: .6875rem; color: var(--ink-mute); }
.site-footer__copy { font-size: .75rem; }

.site-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .8rem 1.5rem;
  border: 1px solid var(--line-control); border-radius: var(--r-pill);
  font-size: .9375rem; font-weight: 500;
  transition: background-color .2s ease-out, color .2s ease-out, border-color .2s ease-out;
}
.site-btn-ghost:hover { background: var(--ink); color: var(--ground); border-color: var(--ink); }

/* ---------- 15. Reveal on scroll ----------
   Always an explicit start AND end state. Never a "from" pattern that can
   leave an element invisible if the trigger never fires. */

.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal, .reveal.is-forced { opacity: 1; transform: none; }

/* ---------- 16. Cookie banner: small floaty glass card, bottom-left ---------- */

.site-consent-banner {
  position: fixed !important;
  left: 1.25rem !important; bottom: 1.25rem !important; right: auto !important; top: auto !important;
  max-width: 340px !important;
  z-index: var(--z-consent) !important;
  display: flex !important; flex-direction: column !important; gap: .75rem !important;
  padding: 1rem 1.1rem 1.05rem !important;
  background: rgba(18, 21, 29, .74) !important;
  -webkit-backdrop-filter: blur(26px) saturate(180%) !important;
  backdrop-filter: blur(26px) saturate(180%) !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .42), 0 2px 6px rgba(0, 0, 0, .18) !important;
  transform: translateY(16px); opacity: 0;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.site-consent-banner.is-visible { transform: none; opacity: 1; }
.site-consent-banner__title { font-family: var(--ff) !important; font-size: 1.0625rem !important; color: #fff !important; }
.site-consent-banner__text { font-size: .8125rem !important; color: var(--ink-soft) !important; line-height: 1.5 !important; }
.site-consent-banner__text a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.site-consent-banner__text a:hover { color: var(--s1); }
.site-consent-banner__actions { display: flex !important; gap: .5rem !important; }
.site-consent-banner__btn {
  flex: 1 1 0 !important; min-height: 44px;
  border-radius: 999px !important; padding: .55rem .9rem !important;
  font-size: .8rem !important; font-weight: 600 !important;
}
.site-consent-banner__btn--accept { background: var(--s1) !important; color: var(--ground) !important; }
.site-consent-banner__btn--reject { background: transparent !important; color: var(--ink-soft) !important; border: 1px solid var(--line-control) !important; }
/* Die Karte ist immer dunkel — der Fokus darin deshalb immer hell. */
.site-consent-banner :is(a, button):focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
@media (max-width: 480px) {
  .site-consent-banner { left: .85rem !important; right: .85rem !important; max-width: none !important; }
}

/* ---------- 17. Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
    .reveal { opacity: 1; transform: none; }
}

/* ---------- 18. Brand lockup ----------
   Rendered as live text, not an image: it can never be warped, it stays
   crisp at any density, and it uses the same serif as the client's own
   wordmark. The mark beside it is the eight-segment disc in miniature. */

.site-nav__brand { gap: .7rem; }


@media (max-width: 420px) {
    }

/* Footer heading spacing when a column has no items yet */
.site-footer__col:empty { display: none; }

/* Hero note sits under the actions, not against them */
.hero__note { margin-top: var(--sp-3); font-size: var(--fs-small); }


/* ---------- 19. Why (his three pillars, his own round icon tiles) ---------- */

.why { display: grid; gap: var(--sp-5); }
@media (min-width: 820px) { .why { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }

.why__item { display: flex; flex-direction: column; align-items: flex-start; }
.why__tile {
  display: grid; place-items: center;
  width: 108px; height: 108px; border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line);
  margin-bottom: var(--sp-3);
  transition: border-color .3s ease-out, transform .3s var(--ease);
}
.why__item:hover .why__tile { border-color: var(--accent); transform: translateY(-3px); }
.why__tile svg { width: 46px; height: 46px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.why__title { font-size: 1.125rem; font-weight: 500; letter-spacing: .01em; margin-bottom: .7rem; }
.why__text { font-size: var(--fs-small); color: var(--ink-mute); line-height: 1.65; max-width: 26rem; }

/* ---------- 20. Quote band ---------- */

.quoteband { border-bottom: 0; }
.quoteband__inner { max-width: 46rem; }
.quoteband__text {
  font-size: clamp(1.375rem, 1rem + 1.9vw, 2.25rem);
  font-weight: 200; line-height: 1.35; letter-spacing: .005em;
  text-transform: uppercase;
}
.quoteband__by { margin-top: var(--sp-4); font-size: var(--fs-label); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-mute); }

/* ---------- 21. Partners ---------- */

/* Eine Zeile. Die Groessen stecken in den Dateien: jedes Logo ist auf gleiche
   Tintenflaeche gerechnet und auf einer gemeinsamen Leinwand zentriert —
   deshalb reicht hier EINE Hoehe. Gleiche Hoehe fuer alle waere optisch
   falsch, die gestapelten Marken wirken dann winzig neben den Wortmarken. */
.partners {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: var(--sp-3) var(--sp-4);
}
.partner { display: grid; place-items: center; min-height: 56px; }
/* Die Dateien sind reine Silhouetten OHNE Farbe (gemessen: Saettigung ~4 von
   255). Ein Farbwechsel beim Ueberfahren ist daraus nicht herstellbar; die
   Marke tritt stattdessen von gedaempft auf voll. Im Dunkelmodus wird sie
   invertiert — dieser Filter darf beim Ueberfahren NICHT wegfallen, sonst
   steht wieder Schwarz auf Schwarz. */
.partner img {
  height: 44px; width: auto;      /* width:auto ist Pflicht gegen Verzerrung */
  opacity: .5;
  transition: opacity .25s ease-out, transform .25s ease-out;
}
.partner:hover img { opacity: .92; transform: translateY(-2px); }
html.site-dark .partner img { opacity: .5; filter: invert(1); }
html.site-dark .partner:hover img { opacity: .95; filter: invert(1); }
@media (max-width: 700px) {
  .partners { justify-content: center; gap: var(--sp-4); }
  .partner img { height: 34px; }
}

.partners__note { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--ink-mute); max-width: 40rem; }

/* ---------- 22. Two-tone panel, straight from his deck ---------- */

.split { position: relative; }
.split::before {
  content: ""; position: absolute; inset: 0 0 0 50%;
  background: var(--surface-2); z-index: -1;
}
@media (max-width: 899px) { .split::before { display: none; } }

/* ---------- 23. Rings: theme-driven fills (these must never be hardcoded) ---------- */


.programme__amt--open { font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }


/* Field icons: one glyph per subject, plus a tiny 12.5% tick that draws
   itself on hover — the card's own position in the circle. */
.field__icon { width: 32px; height: 32px; margin-bottom: var(--sp-3); }
.field__icon .glyph { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s ease-out; }

.field__no { display: flex; align-items: center; gap: .5em; }
.field__tick { width: 13px; height: 13px; flex: 0 0 auto; }
.field__tick circle { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.field__tick .arc { fill: none; stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset .55s var(--ease); }
.field:hover .field__tick .arc, .field:focus-within .field__tick .arc { stroke-dashoffset: 0; }
.field:nth-child(1) .field__tick .arc { stroke: var(--s1); } .field:nth-child(1):hover .glyph { stroke: var(--s1); }
.field:nth-child(2) .field__tick .arc { stroke: var(--s2); } .field:nth-child(2):hover .glyph { stroke: var(--s2); }
.field:nth-child(3) .field__tick .arc { stroke: var(--s3); } .field:nth-child(3):hover .glyph { stroke: var(--s3); }
.field:nth-child(4) .field__tick .arc { stroke: var(--s4); } .field:nth-child(4):hover .glyph { stroke: var(--s4); }
.field:nth-child(5) .field__tick .arc { stroke: var(--s5); } .field:nth-child(5):hover .glyph { stroke: var(--s5); }
.field:nth-child(6) .field__tick .arc { stroke: var(--s6); } .field:nth-child(6):hover .glyph { stroke: var(--s6); }
.field:nth-child(7) .field__tick .arc { stroke: var(--s7); } .field:nth-child(7):hover .glyph { stroke: var(--s7); }
.field:nth-child(8) .field__tick .arc { stroke: var(--s8); } .field:nth-child(8):hover .glyph { stroke: var(--s8); }

/* ---------- 24. Hero: his own title-slide devices ---------- */

@media (max-width: 899px) {  }

/* The price line. Low contrast on purpose — it is texture, not information.
   It draws itself once, left to right, then stands still. */

.hero__grid, .hero__scroll { position: relative; z-index: 1; }

/* The disc builds itself once, segment by segment. */
/* Doppelte Definition entfernt — ihr Endzustand (transform: none) hat mit
   animation-fill-mode: forwards jede Hover-Verschiebung ueberschrieben. */

@media (prefers-reduced-motion: reduce) {
  }
.spine.is-over-media { opacity: .55; transition: opacity .3s var(--ease); }
.spine { transition: opacity .3s var(--ease); }


/* ---------- 25. The market ring — real coin marks ----------
   Official marks, dark ink on light so they actually read (the earlier grey
   text tickers had no contrast). Upright at all times, one slow turn. */

.orbit { transform-box: view-box; transform-origin: 50% 50%; animation: orbit-turn 120s linear infinite; }
.orbit.is-paused { animation-play-state: paused; }
@keyframes orbit-turn { to { transform: rotate(360deg); } }

.orbit__track { fill: none; stroke: var(--line); stroke-width: 1; }

/* Counter-rotation keeps every mark upright while the ring turns. */
.orbit__inner { animation: orbit-turn-back 120s linear infinite; transform-box: fill-box; transform-origin: center; }
.orbit.is-paused .orbit__inner { animation-play-state: paused; }
@keyframes orbit-turn-back { to { transform: rotate(-360deg); } }

.orbit__chip { fill: var(--surface); stroke: var(--line); stroke-width: 1; transition: stroke .25s ease-out; }
.orbit__glyph { fill: var(--ink); opacity: .82; transition: opacity .25s ease-out, fill .25s ease-out; }
.orbit__mark { cursor: default; }
.orbit__mark:hover .orbit__chip { stroke: var(--accent); }
.orbit__mark:hover .orbit__glyph { opacity: 1; fill: var(--accent); }

.ring__labels[hidden] { display: none; }

/* The hub names the hovered subject; otherwise it says what the mark is. */
.ring__hub.is-named { font-size: 17px; font-weight: 500; letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce) { .orbit, .orbit__inner { animation: none !important; } }

/* Depth: a soft wash behind the mark, shadowed chips, a shadowed disc.
   All theme-driven so dark mode keeps the same reading. */
.glow-in  { stop-color: var(--ink); stop-opacity: .05; }
.glow-mid { stop-color: var(--ink); stop-opacity: .018; }
.glow-out { stop-color: var(--ink); stop-opacity: 0; }
html.site-dark .glow-in  { stop-opacity: .10; }
html.site-dark .glow-mid { stop-opacity: .035; }
.ring__glow { pointer-events: none; }

/* House rule for section headings: one line, two weights — the half that
   carries the point is bold. Wraps only when the viewport forces it. */
.h2--wide { max-width: none; }
/* Breite Ueberschriften duerfen die Zeichenbremse der .h2 ignorieren, aber
   NICHT nowrap sein: lange Saetze liefen sonst rechts aus dem Bild und in
   zweispaltigen Bloecken quer ueber die Nachbarspalte. */
@media (min-width: 900px) { .h2--wide { max-width: none; } }
.h2--wide { font-weight: 200; }
.h2--wide em { font-style: normal; font-weight: 700; color: var(--ink); }

.site-cta-band__inner { text-align: left; }
.site-cta-band__sub { margin-left: 0; margin-right: 0; }

/* ---------- 26. Magnetic reveal ----------
   Hovering the closing headline opens a disc that follows the cursor and
   shows the action inside it. Same face, same weights — the effect is the
   reveal, not a second typeface. */

.magnetic { position: relative; display: inline-block; cursor: none; }
.magnetic__base { display: block; }

.magnetic__disc {
  position: absolute; top: 0; left: 0;
  width: 0; height: 0; border-radius: 50%;
  background: var(--ink);
  overflow: hidden; pointer-events: none;
  transition: width .5s cubic-bezier(.33,1,.68,1), height .5s cubic-bezier(.33,1,.68,1);
  will-change: transform, width, height;
}
.magnetic.is-on .magnetic__disc { width: 190px; height: 190px; }

.magnetic__inner { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: flex-start; will-change: transform; }
.magnetic__inner span {
  white-space: nowrap; color: var(--ground);
  line-height: inherit;
  font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.02em;
  text-transform: uppercase;
}

.magnetic__hint {
  display: block; margin-bottom: var(--sp-2);
  font-size: var(--fs-label); font-weight: 500; letter-spacing: .26em;
  text-transform: uppercase; color: var(--ink-mute);
  opacity: .75; transition: opacity .3s var(--ease);
}
.magnetic-wrap:hover .magnetic__hint { opacity: 0; }

@media (hover: none), (prefers-reduced-motion: reduce) {
  .magnetic { cursor: auto; }
  .magnetic__disc { display: none; }
  .magnetic__hint { display: none; }
}

/* ---------- 27. Live price strip ---------- */

.ticker {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding-block: var(--sp-2);
}
.ticker__lane { display: flex; width: max-content; animation: ticker-run 64s linear infinite; }
.ticker:hover .ticker__lane { animation-play-state: paused; }
@keyframes ticker-run { to { transform: translateX(-50%); } }

.ticker__row { display: flex; }
.ticker__item {
  display: inline-flex; align-items: baseline; gap: .5em;
  padding-inline: 1.6rem;
  font-size: .8125rem;
  white-space: nowrap;
}
.ticker__sym   { font-weight: 700; letter-spacing: .08em; color: var(--ink); }
.ticker__price { font-weight: 500; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* House spectrum, not trading-app green and red. */
.ticker__chg        { font-weight: 600; font-size: .75rem; font-variant-numeric: tabular-nums; }
/* --s3 erreicht auf hellem Grund nur 3,8:1 — fuer 12px Text zu wenig. */
.ticker__chg.is-up   { color: #2E6A93; }
.ticker__chg.is-down { color: var(--s8); }

@media (prefers-reduced-motion: reduce) {
  .ticker__lane { animation: none; }
  .ticker { overflow-x: auto; }
}

/* The AI-labelling line is its own row, not glued to the copyright. */
.site-footer__ai-note { display: block; flex-basis: 100%; margin-top: var(--sp-1); }

/* ---------- 28. Intro ----------
   First visit of a session: the wordmark stands alone, then travels into its
   header slot while the curtain fades. The curtain is opaque and does the
   covering by itself — the page underneath is NEVER hidden by CSS, so a
   failure here can only mean "no animation", never "no page". */

.intro {
  position: fixed; inset: 0; z-index: 9500;
  display: none; align-items: center; justify-content: center;
  background: var(--ground);
  transition: opacity .5s cubic-bezier(.16,1,.3,1);
}
html.is-intro .intro { display: flex; }

.intro__logo {
  width: min(44vw, 340px); height: auto;
  filter: invert(var(--logo-invert));
  opacity: 0;
  animation: intro-in .8s cubic-bezier(.16,1,.3,1) .1s forwards;
  will-change: transform, opacity;
  transform-origin: center center;
}
@keyframes intro-in { to { opacity: 1; } }

/* The travel. Transform and fade are separately timed so the logo lands
   before the curtain is gone. */
.intro.is-leaving { opacity: 0; transition-delay: .5s; }
.intro.is-leaving .intro__logo {
  animation: none; opacity: 1;
  transition: transform .85s cubic-bezier(.55,.02,.2,1);
}

/* The header slot stays empty until the travelling logo lands in it. */
html.is-intro .site-nav__logo { opacity: 0; }
html.is-intro-landed .site-nav__logo { opacity: 1; transition: opacity .25s ease-out; }

/* Failsafe: if the script never runs, the curtain lifts on its own. */
html.is-intro .intro { animation: intro-failsafe .6s linear 2.6s forwards; }
@keyframes intro-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

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

/* Quotes: centred, because they carry more weight than the copy around them. */
.quoteband__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) { .quoteband__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } }

.quotecard {
  margin: 0;
  display: grid; grid-template-rows: auto 1fr auto;
  align-items: start;
}
/* Two lines, one sentence each, flush left — the sentence break is the
   line break, so the quote never wraps at an arbitrary word. */
.quotecard__text {
  font-size: clamp(1.125rem, .9rem + 1vw, 1.625rem);
  font-weight: 300; line-height: 1.35; letter-spacing: .005em;
  text-transform: uppercase; max-width: none; text-align: left;
}
.quotecard__line { display: block; }
@media (max-width: 700px) { .quotecard__text { font-size: 1.0625rem; } }
.quotecard__by { margin-top: var(--sp-3); align-self: end; font-size: var(--fs-label); font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-mute); }
.quotecard .magnetic__hint { margin-bottom: var(--sp-2); }
.quotecard .magnetic__inner span { font-size: clamp(1.25rem, .95rem + 1.15vw, 1.75rem); font-weight: 600; text-transform: uppercase; }
.quotecard .magnetic.is-on .magnetic__disc { width: 150px; height: 150px; }

/* The hub swaps in two half-waves: out, then back in with the new word. */
.ring__hub, .ring__hubsub {
  transition: opacity .19s ease-out, transform .19s cubic-bezier(.16,1,.3,1);
  transform-box: fill-box; transform-origin: center;
}
.ring__hub.is-swapping, .ring__hubsub.is-swapping { opacity: 0; transform: translateY(-6px); }
.ring__hub.is-named { font-size: 19px; font-weight: 500; letter-spacing: .02em; }

/* The explanation under the ring, revealed with the hovered field. */
/* Erklaerkasten: feste Hoehe, damit beim Wechsel zwischen den Feldern
   nichts springt. Alle acht Texte sind auf drei Zeilen getrimmt, die Hoehe
   ist danach bemessen. */
.ring__note {
  margin: var(--sp-4) 0 0;
  max-width: 40rem;
  min-height: 9.25rem;
  display: flex; align-items: center;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  font-size: clamp(1rem, .95rem + .3vw, 1.1875rem);
  line-height: 1.55;
  color: var(--ink-soft);
  text-align: left;
  transition: color .25s var(--ease), border-color .3s var(--ease);
}
.ring__note.is-on { color: var(--ink); }
.ring__seg { outline: none; }
.ring__sheen { pointer-events: none; mix-blend-mode: soft-light; }
html.site-dark .ring__sheen { mix-blend-mode: overlay; opacity: .7; }


/* ---------- 30. Section transitions ----------
   Each section arrives on its own: the heading first, then the body, then
   the grid — a short cascade rather than everything appearing at once. */

.section > .wrap > * { --lift: 22px; }

.section__head .eyebrow { opacity: 0; transform: translateY(var(--lift)); }
.section.is-seen .section__head .eyebrow { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.section.is-seen .section__head .h2,
.section.is-seen .section__head .h1 { transition-delay: .08s; }
.section.is-seen .section__head .lede { transition-delay: .16s; }

/* Trennlinien zwischen den Sektionen.
   Kuerzer als die Sektion, an beiden Enden ins Transparente auslaufend.
   Beim Erreichen laeuft EINMAL Farbe von links nach rechts durch und
   verschwindet wieder — uebrig bleibt die ruhige Haarlinie. Das Verschwinden
   ist hier gewollt: die Endstellung der Bewegung ist deshalb opacity 0. */
.section--rule { border-top: 0; }
.section--rule::before,
.section--rule::after {
  content: ""; position: absolute; top: 0;
  left: var(--rule-pad); right: var(--rule-pad);
  height: 1px; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.section--rule::before { background: var(--line-strong); }
.section--rule::after {
  background-image: linear-gradient(90deg, transparent, var(--s1), var(--s4), var(--s8), transparent);
  background-repeat: no-repeat;
  background-size: 46% 100%;
  background-position: -60% 0;
  opacity: 0;
}
/* Die Richtung folgt der Leserichtung: runter scrollen laesst die Farbe von
   links nach rechts laufen, hoch scrollen von rechts nach links. Welche der
   beiden Bewegungen laeuft, entscheidet das Skript beim Eintreten. */
.section--rule.is-sweep-down::after { animation: rule-sweep-down 1.7s cubic-bezier(.22, .9, .28, 1) forwards; }
.section--rule.is-sweep-up::after   { animation: rule-sweep-up   1.7s cubic-bezier(.22, .9, .28, 1) forwards; }
@keyframes rule-sweep-down {
  0%   { background-position: -60% 0; opacity: 0; }
  14%  { opacity: 1; }
  62%  { opacity: 1; }
  100% { background-position: 160% 0;  opacity: 0; }
}
@keyframes rule-sweep-up {
  0%   { background-position: 160% 0;  opacity: 0; }
  14%  { opacity: 1; }
  62%  { opacity: 1; }
  100% { background-position: -60% 0; opacity: 0; }
}

/* Image bands rise slightly as they enter — enough to feel alive, not enough
   to distract. */
.band__img { transform: scale(1.06); transition: transform 1.4s cubic-bezier(.16,1,.3,1); }
.band.is-seen .band__img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .section__head .eyebrow { opacity: 1; transform: none; }
  .section--rule.is-sweep-down::after,
  .section--rule.is-sweep-up::after { animation: none; }
  .band__img { transform: none; }
}

/* ---------- 29. Founder cutout ----------
   Cut above the knees and docked on a hairline that fades out to both
   sides — the line does the cutting, so there is no hard edge anywhere. */

.founder__figure { position: relative; margin: 0; padding-bottom: var(--sp-4); }

.founder__cutout {
  display: block;
  width: 100%; max-width: 560px; height: auto;
  margin: 0 auto;
}
html.site-dark .founder__cutout { filter: brightness(.97) contrast(1.02); }

.founder__rule {
  display: block; height: 1px; width: 100%;
  background: linear-gradient(to right, transparent, var(--line-strong) 22%, var(--line-strong) 78%, transparent);
}

.founder__caption { margin-top: var(--sp-3); text-align: center; }

/* ---------- 32. Direct contact ----------
   His navy, not WhatsApp green: a foreign brand colour would be the loudest
   thing on a page built out of one restrained palette. Sits above the price
   strip in the hero and stays put from there on. */

/* Liquid Glass, wie bei Lanserring und Mission Flow: getönte Transparenz,
   Specular-Kante nach innen statt einer Kontur nach aussen. */
.wa {
  position: fixed; right: 1.25rem; bottom: calc(1.25rem + 52px);
  z-index: 80;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  /* Wie der Haupt-CTA: Tinte auf Grund, im Dunkelmodus umgekehrt. */
  color: var(--ground);
  background: var(--ink);
  border: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 -2px 4px rgba(0, 0, 0, .22),
    0 16px 40px -14px color-mix(in srgb, var(--ink) 45%, transparent);
  isolation: isolate;
  transition: transform .25s var(--ease), background-color .25s ease-out, box-shadow .25s ease-out;
}
.wa::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, .30), transparent 58%);
  mix-blend-mode: plus-lighter;
}
.wa svg { position: relative; z-index: 1; }
.wa svg { width: 26px; height: 26px; }
.wa:hover {
  transform: translateY(-3px);
  background: var(--accent); color: var(--accent-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .40),
    inset 0 -2px 4px rgba(0, 0, 0, .24),
    0 22px 52px -14px color-mix(in srgb, var(--accent) 60%, transparent);
}
.wa:focus-visible { outline-offset: 4px; }
@media (max-width: 480px) { .wa { right: .9rem; bottom: calc(.9rem + 52px); width: 50px; height: 50px; } }

/* The market ring around the mark in the hero. */
.orbit { transform-box: view-box; transform-origin: 50% 50%; animation: orbit-turn 120s linear infinite; }
.orbit.is-paused { animation-play-state: paused; }
@keyframes orbit-turn { to { transform: rotate(360deg); } }
.orbit__track { fill: none; stroke: var(--line); stroke-width: 1; }
.orbit__inner { animation: orbit-turn-back 120s linear infinite; transform-box: fill-box; transform-origin: center; }
.orbit.is-paused .orbit__inner { animation-play-state: paused; }
@keyframes orbit-turn-back { to { transform: rotate(-360deg); } }
.orbit__chip { fill: var(--surface); stroke: var(--line); stroke-width: 1; transition: stroke .25s ease-out; }
.orbit__glyph { fill: var(--ink); opacity: .8; transition: opacity .25s ease-out, fill .25s ease-out; }
.orbit__mark:hover .orbit__chip { stroke: var(--accent); }
.orbit__mark:hover .orbit__glyph { opacity: 1; fill: var(--accent); }

/* With the ring back in the hero, the page-wide arc steps right down so the
   two never compete. */
@media (prefers-reduced-motion: reduce) { .orbit, .orbit__inner { animation: none !important; } }

/* ---------- 33. Hero figure ----------
   No generated photograph of him here. The mark carries the right side on
   its own: it is his, it is real, and it explains what he teaches. */

@media (min-width: 1024px) {
  .hero__figure .ring {
    position: relative; width: min(100%, 520px);
    margin-left: 0; margin-right: auto; transform: translateY(6%);
  }
  .hero__figure .ring__svg { filter: none; }
}
@media (max-width: 1023px) {
  .hero__figure .ring { width: min(100%, 380px); margin-inline: auto; }
}


/* ---------- 34. Hero constellation ----------
   Brands on a fibonacci sphere, only the camera turns. Depth drives size,
   opacity and blur, so the sphere reads without a 3D library. */

/* Sitzt jetzt in der Sektion „Maerkte" neben ihrer Aussage, nicht mehr
   hinter der Schlagzeile. Dadurch braucht sie weder Unschaerfe-Teppich
   noch absolute Verankerung — sie ist einfach ein Bild im Raster. */
.constel { position: relative; width: min(100%, 460px); margin-inline: auto; aspect-ratio: 1 / 1; }
@media (min-width: 960px) { .constel { width: min(100%, 520px); } }

.constel__svg { width: 100%; height: 100%; overflow: visible; }

.constel-glow-in  { stop-color: var(--s2); stop-opacity: .10; }
.constel-glow-out { stop-color: var(--s2); stop-opacity: 0; }
html.site-dark .constel-glow-in { stop-opacity: .16; }

/* Kugel statt Scheibe: Verlauf fuer das Volumen, Streiflicht unten fuer die
   Rundung, kleines Glanzlicht oben links, weicher Kontaktschatten. Keine Kontur. */
.ball-hi   { stop-color: #FFFFFF; stop-opacity: 1; }
.ball-mid  { stop-color: #F4F5F7; stop-opacity: 1; }
.ball-lo   { stop-color: #DCDFE5; stop-opacity: 1; }
.ball-edge { stop-color: #C6CAD3; stop-opacity: 1; }
.rim-in    { stop-color: #FFFFFF; stop-opacity: .55; }
.rim-out   { stop-color: #FFFFFF; stop-opacity: 0; }
.spec-in   { stop-color: #FFFFFF; stop-opacity: .92; }
.spec-out  { stop-color: #FFFFFF; stop-opacity: 0; }

html.site-dark .ball-hi   { stop-color: #33343A; }
html.site-dark .ball-mid  { stop-color: #26272C; }
html.site-dark .ball-lo   { stop-color: #17181C; }
html.site-dark .ball-edge { stop-color: #0E0F12; }
html.site-dark .rim-in    { stop-color: #7E8492; stop-opacity: .40; }
html.site-dark .spec-in   { stop-color: #FFFFFF; stop-opacity: .28; }

.constel__ball { transition: filter .25s ease-out; }
/* Dauerhaft in der echten Hausfarbe der Marke. */
.constel__glyph { fill: var(--brand, var(--ink)); transition: fill .25s ease-out, opacity .25s ease-out; }
/* Im Dunkelmodus die aufgehellte Fassung: sonst verschwinden Apple, PayPal
   und alle anderen schwarzen Marken auf dem dunklen Ball. */
html.site-dark .constel__glyph { fill: var(--brand-dark, var(--brand, var(--ink))); }
html.site-dark .constel__node.is-near .constel__glyph { fill: var(--brand-dark, var(--brand, var(--accent))); }
/* Mehrfarbige Marken behalten ihre Farben, die stehen ohnehin hell genug. */
html.site-dark .constel__glyph--fixed { fill: inherit; }
.constel__node { cursor: default; transition: filter .25s ease-out; }
.constel__node.is-near .constel__ball { filter: url(#ballShadow) drop-shadow(0 0 10px color-mix(in srgb, var(--brand, var(--accent)) 55%, transparent)); }
/* Beim Ueberfahren zeigt die Marke ihre echte Hausfarbe. */
.constel__node.is-near .constel__glyph { fill: var(--brand, var(--accent)); }


@media (prefers-reduced-motion: reduce) { .constel__node { transition: none; } }

/* Der Name des Gruenders traegt die Sektion — er steht fett. */
#founder .h2 { font-weight: 700; }

/* The mark now introduces the programmes: it names the eight fields those
   programmes are built from, so it sits with them rather than in the hero. */
.prog-top { display: grid; gap: var(--sp-5); align-items: center; margin-bottom: var(--sp-6); }
.prog-ring { display: grid; place-items: center; }
.prog-ring .ring { width: min(100%, 520px); }
@media (min-width: 1024px) {
  /* Die Scheibe liegt absolut und unten buendig mit dem Kasten links. Damit
     kann sie beliebig gross werden, ohne die Zeilenhoehe zu veraendern —
     die Karten darunter bleiben also exakt, wo sie sind. Sie waechst nach
     oben in die Ueberschrift hinein, das ist gewollt. */
  .prog-top { position: relative; grid-template-columns: minmax(0, 1fr); }
  .prog-head { position: relative; z-index: 2; max-width: 37%; pointer-events: none; }
  /* Die Ueberschrift bleibt in ihrer Spalte. `h2--wide` setzt sonst nowrap,
     dann laeuft sie quer durch die Scheibe und durch deren Nabentext. */
  #programmes .prog-head .h2--wide { white-space: normal; }
  .prog-head a, .prog-head button, .prog-head .ring__note { pointer-events: auto; }
  .prog-ring {
    position: absolute; bottom: 0;
    right: calc(-1 * var(--sp-3));
    width: min(62%, 740px);
    z-index: 1; pointer-events: none;
  }
  .prog-ring .ring { width: 100%; }
  .prog-ring .ring__seg, .prog-ring .ring__hub { pointer-events: auto; }
}

/* Beim Ueberfahren faehrt das Segment ein Stueck nach aussen — die Scheibe
   bekommt dadurch Spiel, ohne dass sich die Geometrie veraendert. */
.ring__seg { transition: transform .42s cubic-bezier(.22,.9,.28,1), opacity .3s ease-out; }
.ring .ring__seg.is-on {
  /* Faehrt nach aussen und wieder zurueck — kein Schatten, nur Bewegung. */
  transform: translate(var(--push-x, 0), var(--push-y, 0));
}

/* Gruender: sein redaktionelles Bild statt des Freistellers. */
/* Schwarzweiss im Ruhezustand, beim Ueberfahren kommt die Farbe zurueck. */
.founder__photo {
  display: block; width: min(100%, 420px); margin-inline: auto; height: auto;
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  filter: grayscale(1);
  transition: filter .5s cubic-bezier(.22, .9, .28, 1);
}
.founder__figure:hover .founder__photo { filter: grayscale(0); }
html.site-dark .founder__photo { filter: grayscale(1) brightness(.9); }
html.site-dark .founder__figure:hover .founder__photo { filter: grayscale(0) brightness(.95); }
@media (prefers-reduced-motion: reduce) { .founder__photo { transition: none; } }

/* ---------- 35. Contact ---------- */

.contact { display: grid; gap: var(--sp-6); }
@media (min-width: 960px) { .contact { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: var(--sp-7); align-items: start; } }

.contact__facts { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: .35rem; font-size: var(--fs-small); color: var(--ink-soft); }
.contact__facts a:hover { color: var(--accent); }

.contact__form { display: grid; gap: var(--sp-3); }
@media (min-width: 700px) { .contact__form { grid-template-columns: repeat(2, 1fr); } }
.field-row { display: flex; flex-direction: column; gap: .45rem; }
.field-row--wide { grid-column: 1 / -1; }

.field-label { font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.field-label span { color: var(--s8); }

.contact__form input[type="text"],
.contact__form input[type="email"],
.contact__form select,
.contact__form textarea {
  width: 100%; min-height: 52px;
  padding: .85rem 1rem;
  font: inherit; color: var(--ink);
  background: var(--surface);
  /* Der Rahmen ist das Einzige, was das Feld als Feld ausweist — er braucht
     3:1. --line (14 %) kam auf 1,3:1. */
  border: 1px solid var(--line-control);
  border-radius: var(--r-md);
  transition: border-color .2s ease-out, box-shadow .2s ease-out;
}
.contact__form textarea { min-height: 140px; resize: vertical; }
.contact__form :is(input, select, textarea):focus {
  /* Echte Kontur statt eines 18-%-Scheins: der kam auf 1,4:1 und war fuer
     die Ankreuzfelder der einzige Hinweis ueberhaupt. */
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-color: var(--ink);
  box-shadow: none;
}
.contact__form input[type="checkbox"]:focus-visible,
.field-check input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.field-check { display: flex; align-items: flex-start; gap: .7rem; font-size: var(--fs-small); color: var(--ink-soft); }
.field-check input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--accent); }
.field-check a { text-decoration: underline; text-underline-offset: 2px; }
.field-check a:hover { color: var(--accent); }

.contact__hint { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--ink-mute); }
.contact__status { grid-column: 1 / -1; min-height: 1.5em; font-size: var(--fs-small); }
.contact__status.is-ok { color: var(--s3); }
.contact__status.is-err { color: var(--s8); }


/* ---------- 36. Maerkte ----------
   Die Konstellation erklaert hier etwas: die Bandbreite dessen, was
   betrachtet wird. Deshalb steht sie neben ihrer Aussage, nicht dahinter. */
.markets__grid { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 960px) {
  /* Eine Spalte: die Kugel liegt absolut darueber und darf deshalb aus der
     Sektion herauswachsen — rund 15 % nach oben und unten in die Nachbarn. */
  .markets__grid { grid-template-columns: minmax(0, 1fr); position: relative; }
  .markets__copy { position: relative; z-index: 2; max-width: 34rem; }
  .markets__figure {
    position: absolute; z-index: 1;
    right: calc(-1 * var(--sp-4)); top: 50%;
    transform: translateY(-50%);
    /* Ragt oben und unten deutlich in die Nachbarsektionen — rund ein
       Viertel der Sektionshoehe je Seite. Gemessen, nicht geschaetzt. */
    width: min(66vw, 1060px);
    pointer-events: none;
  }
  .markets__figure .constel { width: 100%; }

  /* Die Kugel liegt bewusst leicht hinter dem Text. Damit die Worte trotzdem
     klar stehen, beruhigt ein weich auslaufender Schleier den Grund — ohne
     irgendwo als Kante lesbar zu werden. */
  .markets__copy::before {
    content: ""; position: absolute; inset: -34% -46% -30% -30%;
    z-index: -1; pointer-events: none;
    -webkit-backdrop-filter: blur(13px) saturate(108%);
    backdrop-filter: blur(13px) saturate(108%);
    background: color-mix(in srgb, var(--ground) 24%, transparent);
    -webkit-mask-image: radial-gradient(closest-side at 40% 50%,
      #000 0 36%, rgba(0,0,0,.92) 50%, rgba(0,0,0,.68) 63%, rgba(0,0,0,.40) 74%,
      rgba(0,0,0,.18) 85%, rgba(0,0,0,.05) 94%, transparent 100%);
    mask-image: radial-gradient(closest-side at 40% 50%,
      #000 0 36%, rgba(0,0,0,.92) 50%, rgba(0,0,0,.68) 63%, rgba(0,0,0,.40) 74%,
      rgba(0,0,0,.18) 85%, rgba(0,0,0,.05) 94%, transparent 100%);
  }
  .markets__figure .constel__node { pointer-events: auto; }
}
/* Damit die Kugel wirklich ueber die Sektionsgrenze laufen kann. */
.markets { overflow: visible; }
/* Zusaetzliche Luft oben und unten — rund 10 % der Kugelhoehe, damit sie in
   den Nachbarsektionen nicht an deren Inhalt stoesst. Waechst mit dem Fenster. */
@media (min-width: 960px) { .markets { padding-block: calc(var(--sp-8) + 6.6vw); } }
.markets__copy .h2 { margin-bottom: var(--sp-3); }
.markets__note { margin-top: var(--sp-4); font-size: var(--fs-small); max-width: 38ch; }
.markets__figure { display: grid; place-items: center; }

/* ---------- 37. Rechtsseiten ----------
   Eine schmale Lesespalte. Farben aus den Token, nicht fest verdrahtet —
   die alten Vorlagen hatten rgba(11,13,16,.75) im Stil-Attribut stehen und
   waren im Dunkelmodus damit unlesbar. */
.legal__wrap { max-width: 52rem; }
.legal__title { margin-bottom: var(--sp-5); }
.legal__body { color: var(--ink-soft); font-size: 1rem; line-height: 1.8; }
.legal__body p { margin-bottom: var(--sp-2); }
.legal__body .site-cblock__h2,
.legal__body h2 {
  margin: var(--sp-5) 0 var(--sp-2);
  font-size: var(--fs-h3); font-weight: 600; color: var(--ink);
  letter-spacing: 0; text-transform: none;
}
.legal__body .site-ilink,
.legal__body a { color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.legal__body .site-ilink:hover,
.legal__body a:hover { color: var(--s3); border-color: var(--s3); }
.legal__body ul { margin: var(--sp-2) 0 var(--sp-2) 1.1rem; list-style: disc; }
.legal__body li { margin-bottom: .35rem; }
.legal__updated { margin-top: var(--sp-5); font-size: var(--fs-small); }

/* Ruhiger Akzent im Abschlussband. Liegt hinter dem Text, nimmt keine
   Zeiger an und laeuft an den Raendern aus. */
/* clip statt hidden: harter Schnitt an den Sektionskanten, ohne einen
   zweiten Bildlaufbehaelter zu erzeugen. */
.site-cta-band { position: relative; overflow: clip; }
.site-cta-band__art {
  /* Buendig mit der rechten Containerkante — derselbe Rand, den der Text
     links hat. Vorher lief sie ueber den Bildrand hinaus und war angeschnitten. */
  /* Groesser als die Sektion und hart an deren Kanten geschnitten: das Band
     laeuft oben und unten glatt in die Trennlinien, kein weiches Auslaufen.
     NUR die Hoehe setzen, die Breite folgt. */
  position: absolute; top: 50%;
  right: max(var(--gutter), (100vw - var(--container)) / 2);
  transform: translateY(-50%);
  height: 132%; width: auto;
  z-index: 0; pointer-events: none;
  opacity: .82;
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent 96%);
  mask-image: radial-gradient(closest-side, #000 52%, transparent 96%);
}
html.site-dark .site-cta-band__art { opacity: .62; }
.site-cta-band__inner { position: relative; z-index: 1; }
@media (max-width: 899px) { .site-cta-band__art { height: 116%; width: auto; right: 0; opacity: .3; } }

/* Aufwaertskurve im Hero, acht einzeln anfassbare Kerzen.
   Liegt hinter dem Text und laeuft rechts aus dem Bild — dadurch bleibt die
   Schlagzeile in voller Breite und Groesse. Unten buendig mit dem Raster,
   dessen Unterkante die Haarlinie ueber den drei Zusagen ist: die Kurve kann
   also nie in sie hineinlaufen. */
.hero__art {
  position: absolute; z-index: 0;
  /* Mittig in dem Raum zwischen Fliesstext und Bildrand: links wie rechts
     bleibt gleich viel Luft. Der Faktor ist gegen die gemessenen Kanten
     eingestellt, nicht geschaetzt. */
  /* Der Abstand zum rechten Bildrand ist direkt angegeben und waechst mit
     dem Fenster: 4,5vw, mindestens 2rem. Die Rechnung setzt ihn von der
     Containerkante aus um, an der dieses Element haengt. */
  right: calc(max(2rem, 7.6vw) - (100vw - var(--container)) / 2);
  bottom: 0;
  width: min(32vw, 500px);
  aspect-ratio: 1116 / 1064;
  opacity: .92;
}
html.site-dark .hero__art { opacity: .95; }

.kerze { position: absolute; display: block; }
.kerze img {
  display: block; width: 100%; height: auto;
  transition: transform .45s cubic-bezier(.22, .9, .28, 1), filter .45s ease-out;
  will-change: transform;
}
/* Beim Ueberfahren hebt sich die einzelne Kerze leicht an — mehr braucht es
   nicht, die Bewegung allein genuegt. */
.kerze:hover img { transform: translateY(-3.2%) scale(1.015); filter: brightness(1.06); }
@media (hover: none) { .kerze:hover img { transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .kerze img { transition: none; } .kerze:hover img { transform: none; } }

@media (max-width: 1023px) {
  .hero__art {
    position: relative; right: auto; bottom: auto;
    width: min(100%, 480px); margin: var(--sp-4) auto 0;
    opacity: .85;
  }
}


/* ---------- 38. Alle uebrigen Trennlinien ----------
   Keine Linie laeuft mehr von Rand zu Rand. Sie sind eingerueckt und laufen
   an beiden Enden ins Transparente — dieselbe Sprache wie die Linien zwischen
   den Sektionen. Ausnahme: die Linie ueber dem Kursband im Hero, die traegt
   dort die Kante des Bandes und bleibt durchgehend. */
.hero__proof,
.quoteband,
.site-footer,
.site-footer__bar { position: relative; }
.hero__proof::before,
.quoteband::after,
.site-footer::before,
.site-footer__bar::before {
  content: ""; position: absolute; left: var(--rule-pad); right: var(--rule-pad);
  height: 1px; background: var(--line-strong); pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.hero__proof::before,
.site-footer::before,
.site-footer__bar::before { top: 0; }
.quoteband::after { bottom: 0; }


/* „Plattformen, mit denen wir arbeiten" soll auf EINER Zeile stehen. Bei der
   normalen h2-Groesse passt der Satz nicht in den Container — die Groesse ist
   deshalb gegen die gemessene Zeilenbreite gedeckelt. */
@media (min-width: 900px) {
  #partners .section__head .h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); white-space: nowrap; }
}

/* Auf kleinen Geraeten stand die Kugel in einem quadratischen Kasten, den sie
   nicht ausfuellt — daher die Luft oben und unten. Kasten enger, Sektion knapper. */
@media (max-width: 959px) {
  .markets { padding-block: var(--sp-6); }
  .markets__figure { margin-block: calc(-1 * var(--sp-4)); }
  .markets .constel { width: min(112%, 420px); }
}


/* ---------- 39. Ruhiges Schweben ----------
   Alle freigestellten Grafiken atmen im Ruhezustand ein paar Bildpunkte auf
   und ab. Unterschiedliche Dauern, damit sie nicht im Gleichschritt laufen.
   Die Bewegung liegt jeweils auf einem ANDEREN Element als die Reaktion beim
   Ueberfahren — sonst wuerden sich die beiden Verschiebungen ueberschreiben.
   Ausgenommen: das Lichtband im Abschlussband, das steht still (Nils). */
@keyframes schweben {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.kerze                      { animation: schweben 7.5s ease-in-out infinite; }
.kerze:nth-of-type(2n)      { animation-duration: 9.2s; animation-delay: -1.4s; }
.kerze:nth-of-type(3n)      { animation-duration: 8.1s; animation-delay: -3.1s; }
.ring__seg img              { animation: schweben 9s ease-in-out infinite; }
.ring__seg:nth-of-type(2n) img { animation-duration: 10.6s; animation-delay: -2.2s; }
.ring__seg:nth-of-type(3n) img { animation-duration: 8.4s;  animation-delay: -4.5s; }

@media (prefers-reduced-motion: reduce) {
  .kerze, .ring__seg img { animation: none; }
}