/* MARNAL v5 — ruhig, klar, wenig.
   Farben „Sandstein & Logo-Gold“ (2026-10-25): helle, warme Flächen wie Kalkstein und Wüstensand in Dubai,
   das Gold direkt aus dem Löwen-Logo, Text in Espresso statt Schwarz oder Navy. Keine dunklen Bänder mehr;
   dunkel wird nur noch ein Foto abgetönt, damit helle Schrift darauf lesbar bleibt.
   Alle Flächen eckig. Kleinste Schrift 16px, Klickflächen ab 48px. Bewegung nur einmal beim Erscheinen
   (siehe Block „Bewegung“ am Ende), nichts läuft in Schleife. */

:root {
  --bg: #fcfaf6;          /* Elfenbein: Grundfläche */
  --paper: #fffdf9;       /* Karten, Formulare, Logo-Felder */
  --bg-alt: #f4eee4;      /* heller Sand: Wechselgrund */
  --sand: #e9dfcd;        /* Sandstein: Bänder, Kapital-Karte, Fußzeile, Symbolfelder */
  --ink: #2b2219;         /* Espresso: Überschriften */
  --ink-2: #3f362d;       /* Fließtext */
  --muted: #6b5f52;       /* Nebentext, AA auf Elfenbein (5.9:1) und Sandstein (4.7:1) */
  --gold: #b8862f;        /* Logo-Gold: Linien, Haken, kleine Flächen */
  --gold-bright: #d9ad52; /* Logo-Glanz: Schaltflächen, Schrift darauf in Espresso (7.6:1) */
  --gold-soft: #e9c98a;   /* Gold für Schrift auf abgetönten Fotos */
  --gold-deep: #7d5714;   /* Gold als Schrift auf Hell (6.2:1 Elfenbein, 4.9:1 Sandstein) */
  --line: #e2d8c8;
  --line-strong: #cbbba3;
  --shade: 36, 26, 16;    /* warmes Dunkel, nur zum Abtönen von Fotos: rgba(var(--shade), a) */
  --error: #b3261e;
  --font: "Hanken Grotesk", "Onest", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --wrap: 1200px;
  --gutter: 24px;
  /* Kopfzeile = Zeile mit Logo/Menü + (nur bei eingeklapptem Menü) Sprachleiste darüber */
  --row: 76px;
  --topbar: 0px;
  --header: calc(var(--row) + var(--topbar));
  --ease: cubic-bezier(.22, 1, .36, 1);       /* ease-out-quint: ruhig auslaufend */
  --ease-expo: cubic-bezier(.16, 1, .3, 1);   /* für Bildöffnungen */
}
html:lang(ru) { --font: "Onest", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }

@media (min-width: 900px) {
  :root { --gutter: 40px; --row: 88px; }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 16px); }
body {
  margin: 0;
  padding-top: var(--header);
  font: 400 1.125rem/1.6 var(--font);
  color: var(--ink-2);
  background: var(--bg);
}

h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1.12; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); overflow-wrap: break-word; }
@media (max-width: 359px) { h1 { font-size: 2.125rem; } }
h2 { font-size: clamp(2.125rem, 4vw, 3rem); }
h3 { font-size: 1.625rem; line-height: 1.3; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
svg { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Fokus: Espresso auf hellen Flächen, Gold auf Fotos */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.hero :focus-visible, .duo__panel:focus-visible { outline-color: var(--gold-soft); }

/* Seitenrand sitzt auf den Bändern selbst, .wrap begrenzt nur die Breite. */
.header, .hero, .section, .legal, .footer { padding-left: 24px; padding-right: 24px; }
@media (min-width: 900px) {
  .header, .hero, .section, .legal, .footer { padding-left: 40px; padding-right: 40px; }
}
.wrap { max-width: var(--wrap); margin-left: auto; margin-right: auto; }
.wrap--narrow { --wrap: 780px; }

.skip { position: absolute; left: 16px; top: -100px; z-index: 30; padding: 12px 16px; background: var(--paper); color: var(--ink); }
.skip:focus { top: 8px; }

/* Schaltflächen: eckig. Logo-Gold mit Espresso-Schrift führt (gold und primary sind gleich);
   Kontur in Espresso ist die zweite Wahl, auf Fotos eine helle Kontur. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 28px;
  border: 1px solid transparent;
  font: 600 1.0625rem/1.2 var(--font); letter-spacing: .01em; text-decoration: none; text-align: center;
  cursor: pointer;
  --sweep: transparent;
  background-image: linear-gradient(var(--sweep), var(--sweep)); background-repeat: no-repeat; background-position: 0 0; background-size: 0% 100%;
  transition: background-size .55s var(--ease), color .3s var(--ease) .05s, border-color .3s var(--ease);
}
.btn:hover { background-size: 100% 100%; }
.btn__go { transition: transform .4s var(--ease); }
.btn:hover .btn__go { transform: translateX(4px); }
.btn--gold, .btn--primary { background-color: var(--gold-bright); border-color: var(--gold-bright); color: var(--ink); --sweep: #c99a3f; }
.btn--gold:hover, .btn--primary:hover { border-color: #c99a3f; }
.btn--ghost { border-color: rgba(255, 250, 242, .8); background-color: rgba(var(--shade), .2); color: #fffaf2; --sweep: #fffaf2; }
.btn--ghost:hover { border-color: #fffaf2; color: var(--ink); }
.btn--line, .section--sand .btn--ghost { border-color: var(--ink); background-color: transparent; color: var(--ink); --sweep: var(--sand); }
.section--sand .btn--line, .section--sand .btn--ghost, .capital .btn--line { --sweep: var(--paper); }
.btn--line:hover, .section--sand .btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn[disabled] { opacity: .6; cursor: default; pointer-events: none; }
@media (max-width: 479px) { .btn { padding: 0 20px; } }
@media (max-width: 359px) { .btn__go { display: none; } }

/* Kopfzeile: Elfenbein, das Gold-Logo steht frei; beim Scrollen kommt ein weicher Schatten dazu (site.js) */
.header { position: fixed; inset: 0 0 auto 0; z-index: 20; height: var(--header); background: rgba(252, 250, 246, .97); border-bottom: 1px solid var(--line); color: var(--ink); transition: box-shadow .5s var(--ease); }
.header.is-scrolled { box-shadow: 0 12px 32px -20px rgba(var(--shade), .4); }
.header__row { display: flex; align-items: stretch; justify-content: space-between; gap: 24px; height: var(--row); }
/* Sprachleiste ganz oben: nur bei eingeklapptem Menü (Handy/Tablet), sonst steht die Sprache in der Navigation */
.topbar { display: none; }
@media (max-width: 1279px) {
  .js { --topbar: 36px; }
  .js .topbar { display: flex; justify-content: flex-end; height: var(--topbar); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); border-bottom: 1px solid var(--line); background: var(--bg-alt); }
  .topbar__lang { display: flex; margin: 0; padding: 0; list-style: none; }
  .topbar__lang a { display: grid; place-items: center; min-width: 48px; height: 100%; padding: 0 10px; color: var(--muted); font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-decoration: none; transition: background-color .2s, color .2s; }
  .topbar__lang a:hover { color: var(--ink); background: var(--sand); }
  .topbar__lang a[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--gold); }
  .topbar__lang :focus-visible { outline-offset: -3px; }
}
.brand { display: inline-flex; flex: none; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); font-family: "Hanken Grotesk", system-ui, sans-serif; font-size: 1.5rem; font-weight: 500; letter-spacing: .14em; }
.brand img { width: auto; height: 46px; }
@media (min-width: 900px) { .brand img { height: 54px; } }
/* Firmenname: MARNAL + Zeile "Consulting Group" */
.brand__name { display: flex; flex-direction: column; line-height: 1; }
.brand__name small { margin-top: 7px; font-size: .4em; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-deep); white-space: nowrap; }

/* Menü-Schalter (unter 1280px): Kontur; geöffnet weiß gefüllt und mit Kreuz statt Balken */
.menu-btn {
  display: none; align-items: center; align-self: center; gap: 10px;
  min-height: 48px; padding: 0 16px;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font: 600 1.0625rem/1 var(--font); cursor: pointer;
  transition: background-color .2s, color .2s;
}
.menu-btn__close, [data-menu] .menu-btn__open { display: none; }
[data-menu] .menu-btn__close { display: inline; }
[data-menu] .menu-btn { background: var(--sand); }
@media (hover: hover) { .menu-btn:hover { background: var(--sand); } }

/* Navigation.
   .nav__link  Punkt der Hauptzeile (die Abschnitte der Startseite und der Schalter „Leistungen“)
   .nav__item  eine der vier Leistungsseiten, mit Symbolfeld .nav__ico
   Ab 1280px liegt alles in der Kopfzeile, die Leistungen klappen unter ihrem Schalter auf;
   darunter öffnet der Menü-Schalter alle sieben Ziele als Liste. */
.nav { display: flex; align-items: stretch; gap: 28px; }
.nav ul { margin: 0; padding: 0; list-style: none; }
.nav__list { display: flex; align-items: stretch; }
.nav__list > li { display: flex; }
.nav__link, .nav__item {
  display: flex; align-items: center;
  color: var(--ink-2); font: 500 1.0625rem/1.2 var(--font); text-decoration: none; white-space: nowrap;
}
.nav__link { position: relative; gap: 6px; padding: 0 16px; border: 0; background: none; cursor: pointer; transition: background-color .2s, color .2s; }
.nav__toggle svg { width: 20px; height: 20px; transition: transform .2s; }
.nav__ico { display: grid; place-items: center; flex: none; width: 48px; height: 48px; background: var(--sand); color: var(--gold-deep); transition: background-color .25s, color .25s; }
.nav__ico svg { width: 26px; height: 26px; }
/* Pfeil am Zeilenende */
.nav__item::after, .nav__link::after { content: ""; flex: none; width: 10px; height: 10px; margin-left: auto; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); transition: transform .2s var(--ease); }

/* Sprache: drei Felder nebeneinander, die gewählte Sprache ist sandfarben gefüllt */
.lang { display: flex; align-self: center; }
.lang a {
  display: grid; place-items: center; min-width: 48px; height: 48px; padding: 0 8px;
  border: 1px solid var(--line-strong); color: var(--muted); font-weight: 600; text-decoration: none;
  transition: background-color .2s, color .2s;
}
.lang li + li a { border-left: 0; }
.lang a:hover { background: var(--bg-alt); color: var(--ink); }
.lang a[aria-current] { background: var(--sand); color: var(--ink); }
.nav__cta { align-self: center; min-height: 48px; padding: 0 24px; white-space: nowrap; }

@media (min-width: 1280px) {
  /* Punkte füllen die Höhe der Kopfzeile; ein Goldbalken an der Unterkante zeigt, wo man ist */
  .nav__link::after { position: absolute; inset: auto 16px 0 16px; width: auto; height: 2px; margin: 0; border: 0; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition-duration: .4s; }
  .nav__link:hover, .nav__link[aria-current], .nav__link.is-current { color: var(--ink); }
  .nav__link:hover::after, .nav__link[aria-current]::after, .nav__link.is-current::after { transform: none; }

  /* Leistungen: geöffnet wird der Schalter sandfarben, die Liste hängt bündig darunter */
  .nav__group { position: relative; }
  .js .nav__group[data-open] .nav__toggle { background: var(--bg-alt); color: var(--ink); }
  .js .nav__group[data-open] .nav__toggle::after { transform: scaleX(0); }
  .js .nav__group[data-open] .nav__toggle svg { transform: rotate(180deg); }
  .js .nav__sub {
    position: absolute; top: 100%; left: 0; display: none;
    width: max-content; min-width: 400px;
    background: var(--paper); border: 1px solid var(--line); border-top: 2px solid var(--gold); box-shadow: 0 28px 56px -20px rgba(var(--shade), .28);
  }
  .js .nav__group[data-open] .nav__sub { display: block; }
  .js .nav__item { gap: 16px; min-height: 80px; padding: 0 24px 0 16px; color: var(--ink); transition: background-color .25s; }
  .js .nav__sub li + li .nav__item { border-top: 1px solid var(--line); }
  .js .nav__item:hover, .js .nav__item[aria-current] { background: var(--bg-alt); }
  .js .nav__item:hover .nav__ico, .js .nav__item[aria-current] .nav__ico { background: var(--gold-bright); color: var(--ink); }
  .js .nav__item:hover::after { transform: translateX(4px) rotate(45deg); }
  .js .nav__sub :focus-visible { outline-color: var(--ink); outline-offset: -3px; }
}

/* Ohne JavaScript: alle Links offen unter dem Logo, nichts fixiert, nichts aufzuklappen. */
html:not(.js) body { padding-top: 0; }
html:not(.js) .header { position: static; height: auto; padding-top: 12px; padding-bottom: 12px; }
html:not(.js) .header__row, html:not(.js) .nav, html:not(.js) .nav__list, html:not(.js) .nav__sub { display: flex; flex-wrap: wrap; align-items: center; }
html:not(.js) .header__row { height: auto; }
html:not(.js) .nav__toggle, html:not(.js) .nav__ico, html:not(.js) .nav__item::after { display: none; }
html:not(.js) .nav__link, html:not(.js) .nav__item { min-height: 48px; padding: 0 14px; }
html:not(.js) .nav__link::after { content: none; }
html:not(.js) .nav__link:hover, html:not(.js) .nav__item:hover { background: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }

@media (max-width: 1279px) {
  .js .menu-btn { display: inline-flex; }
  .js .nav {
    position: fixed; inset: var(--header) 0 0 0;
    display: none; flex-direction: column; gap: 28px;
    padding: 8px var(--gutter) 40px; overflow-y: auto; background: var(--bg);
  }
  .js[data-menu] { overflow: hidden; }
  .js[data-menu] .nav { display: flex; }
  .js .nav__list, .js .nav__list > li { display: block; }
  .js .nav__toggle { display: none; }
  /* Alle sieben Ziele als gleich hohe Zeilen mit Pfeil */
  .js .nav__link, .js .nav__item { gap: 16px; min-height: 68px; padding: 0 6px 0 0; border-bottom: 1px solid var(--line); font-size: 1.375rem; white-space: normal; }
  .js .nav__link::after, .js .nav__item::after { color: var(--gold); }
  .js .nav__ico { display: none; }
  .js .nav__link[aria-current], .js .nav__item[aria-current] { color: var(--gold-deep); }
  .js .lang { align-self: stretch; }
  .js .lang li { flex: 1; }
  .js .lang a { height: 56px; }
  .js .nav__cta { align-self: stretch; min-height: 60px; }
  .header__row { gap: 12px; }
}

@media (max-width: 479px) {
  .brand { gap: 8px; font-size: 1.25rem; letter-spacing: .1em; }
  .brand img { height: 40px; }
  .brand__name small { margin-top: 5px; letter-spacing: .06em; }
  .menu-btn { gap: 6px; padding: 0 10px; }
}
@media (min-width: 360px) and (max-width: 559px) {
  /* Offen: nur das X zeigen, "Schließen"/"Закрыть" wäre neben dem Firmennamen zu breit */
  .js[data-menu] .menu-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 359px) {
  .menu-btn svg { display: none; }
  .brand span { display: none; }
}

/* Hero */
.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: min(86vh, 820px); padding-top: 72px; padding-bottom: 72px; background: #6b5a45; color: #fffaf2; }
.hero__body { width: 100%; }
.hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 72% 60%; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--shade), .38), rgba(var(--shade), .74)); }
/* Anhalten/Abspielen fürs Hero-Video; erscheint erst, wenn das Video läuft (site.js) */
.hero__toggle { position: absolute; right: 24px; bottom: 24px; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255, 250, 242, .55); background: rgba(var(--shade), .35); color: #fffaf2; cursor: pointer; transition: border-color .2s, background-color .2s; }
.hero__toggle:hover { border-color: var(--gold-soft); background: rgba(var(--shade), .55); }
.hero__toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; }
.hero__toggle .hero__toggle-play { display: none; fill: currentColor; stroke: none; }
.hero__toggle.is-paused .hero__toggle-play { display: block; }
.hero__toggle.is-paused .hero__toggle-pause { display: none; }
.hero h1 { max-width: 12em; color: #fffaf2; letter-spacing: -.02em; }
.hero h1:has(+ .hero__claim) { max-width: 15em; text-wrap: balance; }
.hero__kicker { margin: 0 0 18px; font-size: .875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft); }
.hero__lead { max-width: 30em; margin: 20px 0 36px; font-size: 1.25rem; line-height: 1.5; color: #fffaf2; text-wrap: balance; }
/* Markenbotschaft unter der Startseiten-Überschrift */
.hero__claim { display: flex; align-items: center; gap: 14px; margin: 22px 0 0; font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); font-weight: 500; letter-spacing: .01em; color: var(--gold-soft); }
.hero__claim::before { content: ""; flex: none; width: 40px; height: 1px; background: var(--gold-bright); }
.hero__claim + .hero__lead { margin-top: 14px; }
.hero__actions { display: flex; flex-direction: column; gap: 12px; }

@media (min-width: 700px) {
  .hero__actions { flex-direction: row; flex-wrap: wrap; }
}
@media (min-width: 900px) {
  .hero { padding-top: 112px; padding-bottom: 112px; }
  .hero::after { background: linear-gradient(90deg, rgba(var(--shade), .74) 0%, rgba(var(--shade), .44) 42%, rgba(var(--shade), .04) 82%); }
  .hero__toggle { right: 40px; bottom: 32px; }
  .hero__lead { font-size: 1.5rem; }
}

/* Abschnitte */
.section, .legal { padding-top: 64px; padding-bottom: 64px; }
@media (min-width: 900px) { .section, .legal { padding-top: 88px; padding-bottom: 88px; } }
.section--alt { background: var(--bg-alt); }
/* Sandstein-Band: ersetzt die früheren dunklen Bänder (Ablauf, Partner, Verwaltung übernehmen …) */
.section--sand { background: var(--sand); }
.section h2 { margin-bottom: 40px; letter-spacing: -.015em; }
.section h2::before { content: ""; display: block; width: 48px; height: 2px; margin-bottom: 24px; background: var(--gold); }
@media (min-width: 900px) { .section h2 { margin-bottom: 44px; } }

/* Leistungen */
.cards { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
/* Die ganze Karte ist der Link; Rahmen und Fläche sitzen deshalb auf dem Link selbst. */
.card a { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--paper); color: inherit; text-decoration: none; box-shadow: 0 1px 0 var(--line); transition: box-shadow .5s var(--ease); }
.card a:hover { box-shadow: 0 22px 44px -28px rgba(var(--shade), .45); }
.card img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.4s var(--ease); }
.card a:hover img { transform: scale(1.035); }
/* Spalte, damit „Mehr erfahren“ in allen Karten einer Reihe auf gleicher Höhe sitzt */
.card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 28px 28px 32px; }
.card h3 { margin-bottom: 10px; font-size: 1.75rem; }
/* Die vier Schwerpunkte der Leistungsseite, kurz mit Haken */
.card__list { display: grid; gap: 6px 20px; margin: 0 0 24px; padding: 0; list-style: none; font-size: 1rem; color: var(--ink); }
.card__list li { position: relative; padding-left: 26px; }
.card__list li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px; border: solid var(--gold); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
@media (min-width: 1100px) { .card__list { grid-template-columns: 1fr 1fr; } }
/* Sichtbarer Hinweis, dass die ganze Karte zur Leistungsseite führt */
.card__more { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: auto; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 8px; transition: color .3s var(--ease); }
.card__more svg { width: 20px; height: 20px; transition: transform .4s var(--ease); }
.card a:hover .card__more { color: var(--gold-deep); }
.card a:hover .card__more svg { transform: translateX(4px); }
.cards--3 h3 { margin-bottom: 20px; font-size: 1.5rem; }
@media (min-width: 900px) { .cards.cards--3 { grid-template-columns: repeat(3, 1fr); } }
.note { margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--line); color: var(--ink-2); }
@media (min-width: 700px) { .cards { grid-template-columns: 1fr 1fr; gap: 32px; } }
/* Startseite: alle vier Leistungen in einer Reihe, kompakter, damit der Überblick auf einen Blick passt */
@media (min-width: 1200px) {
  .cards:not(.cards--3) { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .cards:not(.cards--3) img { aspect-ratio: 4 / 3; }
  .cards:not(.cards--3) .card__body { padding: 24px 24px 28px; }
  .cards:not(.cards--3) h3 { font-size: 1.375rem; hyphens: auto; -webkit-hyphens: auto; }
  .cards:not(.cards--3) .card__list { grid-template-columns: 1fr; }
  .cards:not(.cards--3) .card__body > p { font-size: 1rem; }
}
.cards--3 img { aspect-ratio: 2 / 1; }
@media (max-width: 699px) { .card img { aspect-ratio: 16 / 9; } }

/* Ablauf: drei Stationen mit Symbol. Schmal an einer senkrechten Linie,
   ab 900px auf einer ansteigenden Kurve mit Fläche darunter (Maße wie in build.js). */
.steps { --node: 60px; display: grid; margin: 0; padding: 0; list-style: none; }
.step { position: relative; display: grid; grid-template-columns: var(--node) minmax(0, 1fr); column-gap: 16px; align-content: start; padding-bottom: 44px; }
.step:last-child { padding-bottom: 0; }
.step::before { content: ""; position: absolute; left: calc(var(--node) / 2 - 1px); top: var(--node); bottom: 0; width: 2px; background: var(--gold); transform-origin: 50% 0; }
.step:last-child::before { content: none; }
.step__fig { position: relative; grid-row: 1 / span 2; }
.step__node { position: relative; display: block; width: var(--node); height: var(--node); border-radius: 50%; background: var(--paper); color: var(--gold-deep); }
.step__node svg { display: block; width: 100%; height: 100%; }
.step__ring { stroke: var(--gold); }
.step__icon { stroke-width: 1; }
.step__link { display: none; }
.step h3, .step p { grid-column: 2; }
/* Titel sitzt auf Höhe der Kreismitte */
.step h3 { display: flex; align-items: baseline; gap: 10px; margin: calc((var(--node) - 1.3em) / 2) 0 8px; font-size: 1.5rem; overflow-wrap: anywhere; }
.step__n { color: var(--gold-deep); }
@media (max-width: 359px) { .step h3 { font-size: 1.375rem; } }
@media (min-width: 480px) {
  .steps { --node: 72px; }
  .step { column-gap: 20px; }
  .step h3 { gap: 12px; font-size: 1.75rem; }
}

@media (min-width: 900px) {
  .steps { --node: 88px; grid-template-columns: repeat(3, 1fr); column-gap: 48px; }
  .step { display: block; padding-bottom: 0; }
  .step::before { content: none; }
  .step:nth-child(1) { --lift: 24px; }
  .step:nth-child(2) { --lift: 72px; }
  .step:nth-child(3) { --lift: 120px; }
  .step__fig { height: 216px; margin-bottom: 28px; }
  /* Grundlinie, durchgehend über die Spaltenabstände */
  .step__fig::after { content: ""; position: absolute; left: 0; bottom: 0; width: calc(100% + 48px); height: 1px; background: var(--line-strong); }
  .step:last-child .step__fig::after { width: 100%; }
  /* Lot von der Station zur Grundlinie */
  .step__fig::before { content: ""; position: absolute; left: 43px; bottom: 0; height: var(--lift); border-left: 2px dotted var(--gold); transform-origin: 50% 100%; }
  .step__node { position: absolute; left: 0; bottom: var(--lift); }
  /* Kurve zur nächsten Station: von Mitte zu Mitte, also Spaltenbreite plus Abstand */
  .step__link { display: block; position: absolute; left: 44px; bottom: 0; width: calc(100% + 48px); height: calc(var(--lift) + 92px); overflow: visible; }
  .step__link--tail { width: calc(100% - 44px); height: calc(var(--lift) + 68px); -webkit-mask-image: linear-gradient(90deg, #000 10%, transparent); mask-image: linear-gradient(90deg, #000 10%, transparent); }
  .step__line { stroke: var(--gold); }
  .step__area { stroke: none; }
  .step h3 { margin-top: 0; }
}

/* Über uns, Kontakt */
.split { display: grid; gap: 40px; align-items: center; }
.split > * { min-width: 0; }
/* Lange deutsche Komposita (z. B. „Investitionsentscheidung“) dürfen auf dem Handy trennen */
:lang(de) h1, :lang(de) h2, :lang(de) h3 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.split > img { display: block; width: 100%; }
.split h2 { margin-bottom: 24px; }
.more { margin-top: 32px; }
.section .lead { font-size: 1.25rem; line-height: 1.5; color: var(--ink); }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 72px; }
  .split--top { align-items: start; }
}

.quote { margin: 32px 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
.quote blockquote { margin: 0; }
.quote blockquote p { font-size: 1.375rem; line-height: 1.45; color: var(--ink); }
.quote figcaption { margin-top: 16px; font-weight: 500; color: var(--ink); }
.quote--dark { margin-top: 28px; padding-top: 24px; border-top-color: var(--line-strong); }
.quote--dark blockquote p { font-size: 1.1875rem; font-style: italic; color: var(--ink); }

/* Leistungsseiten: niedrigeres Kopfbild, vier Punkte mit Haken, Kontaktband */
.hero--page { min-height: min(62vh, 580px); }
.hero--page .hero__img { object-position: 50% 50%; }
.points { display: grid; gap: 40px; margin: 0; padding: 0; list-style: none; }
.points li { display: grid; grid-template-columns: 80px minmax(0, 1fr); column-gap: 20px; align-items: start; }
/* Grafik je Punkt: Espresso-Linien für den Gegenstand, Gold für das, worauf es ankommt (build.js, POINT_ICON) */
.points__icon { display: grid; place-items: center; width: 80px; height: 80px; background: var(--sand); color: var(--ink); }
.section--sand .points__icon { background: var(--paper); }
.points__icon svg { width: 62px; height: 62px; }
.points__icon .a { stroke: var(--gold); }
.points h3 { margin: 6px 0 8px; overflow-wrap: anywhere; }
@media (max-width: 479px) {
  .points li { grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; }
  .points__icon { width: 64px; height: 64px; }
  .points__icon svg { width: 50px; height: 50px; }
  .points h3 { margin-top: 0; font-size: 1.375rem; }
}
@media (min-width: 900px) {
  .points { grid-template-columns: 1fr 1fr; gap: 56px 72px; }
  .points li { grid-template-columns: 96px minmax(0, 1fr); column-gap: 24px; }
  .points__icon { width: 96px; height: 96px; }
  .points__icon svg { width: 76px; height: 76px; }
  .points h3 { margin-top: 8px; }
}

/* Partner: Logos auf hellen, gleich großen Feldern im Sandstein-Band */
.section h2:has(+ .partners__lead), .section h2:has(+ .band__lead) { margin-bottom: 20px; }
.partners__lead, .band__lead { margin-bottom: 40px; font-size: 1.25rem; color: var(--ink); }
.partners { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 0; padding: 0; list-style: none; }
.partners li { display: grid; place-items: center; flex: 0 0 calc((100% - 16px) / 2); min-height: 112px; padding: 12px; background: var(--paper); }
/* Breite kommt aus dem width-Attribut (je Logo optisch abgeglichen), Höhe folgt dem Seitenverhältnis */
.partners img { display: block; }
@media (min-width: 700px) {
  .partners { gap: 16px; }
  .partners li { flex-basis: calc((100% - 32px) / 3); min-height: 112px; padding: 16px; }
}
@media (min-width: 1000px) {
  .partners__lead { margin-bottom: 44px; }
  .partners li { flex-basis: calc((100% - 64px) / 5); }
}

/* Investment-Brief unter dem Hero: fünf Schritte, je einer sichtbar (site.js).
   Ohne Skript stehen alle Schritte untereinander und das Formular sendet wie jedes andere. */
.brief { display: grid; gap: 40px; }
.brief__lead { font-size: 1.25rem; line-height: 1.5; color: var(--ink); }
/* Lange deutsche Komposita („Investitionskriterien") passen nicht in die schmale Spalte: sauber trennen statt mitten im Wort umbrechen */
.brief__intro h2 { hyphens: auto; -webkit-hyphens: auto; }
.brief__meta { font-weight: 600; color: var(--ink); }
.brief__steps { display: none; }
.brief__note { margin-top: 24px; font-size: 1rem; color: var(--muted); }
.brief__form { gap: 0; align-content: start; }
.brief__head { margin-bottom: 28px; }
.brief__count { margin: 0 0 12px; font-weight: 600; color: var(--ink); }
.brief__bar { height: 4px; background: var(--bg-alt); }
.brief__bar span { display: block; width: 20%; height: 100%; background: var(--gold); transition: width .4s var(--ease); }
.brief__step, .brief__group { min-width: 0; margin: 0; padding: 0; border: 0; }
.brief__step + .brief__step { margin-top: 56px; }
.is-stepped .brief__step + .brief__step { margin-top: 0; }
.brief__q { padding: 0; font-size: 1.5rem; font-weight: 500; line-height: 1.3; color: var(--ink); }
.brief__q + * { margin-top: 20px; }
.brief__hint { margin-bottom: 12px; font-size: 1rem; color: var(--muted); }
.brief__group + .brief__group { margin-top: 28px; }
.brief__sub { padding: 0; font-weight: 600; color: var(--ink); }
.brief__sub + * { margin-top: 12px; }
@media (min-width: 900px) { .brief__q { font-size: 1.75rem; } }

/* Auswahlfelder: ganze Fläche klickbar; Kreis = eine Antwort, Quadrat = mehrere */
.chips { display: grid; gap: 10px; }
.chip { position: relative; display: block; }
.chip input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.chip span {
  display: flex; align-items: center; gap: 14px; height: 100%; min-height: 60px; padding: 12px 16px;
  border: 1px solid var(--muted); background: var(--paper); color: var(--ink); font-weight: 500; line-height: 1.3;
  cursor: pointer; transition: background-color .25s, border-color .25s, box-shadow .25s;
}
.chip span::before { content: ""; flex: none; width: 20px; height: 20px; border: 2px solid var(--muted); background: var(--paper); }
.chip input[type="radio"] + span::before { border-radius: 50%; }
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span { background: #f6ead3; border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.chip input:checked + span::before { border-color: var(--gold-deep); background: var(--gold-deep); box-shadow: inset 0 0 0 3px #f6ead3; }
.chip input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (min-width: 600px) {
  .chips { grid-template-columns: 1fr 1fr; }
  .chips--3 { grid-template-columns: repeat(3, 1fr); }
}

.brief__sum { border-top: 1px solid var(--line); font-size: 1rem; }
.brief__sum div { display: grid; gap: 2px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.brief__sum dt { color: var(--muted); }
.brief__sum dd { margin: 0; font-weight: 500; color: var(--ink); }
.brief__fields { display: grid; gap: 20px; margin: 24px 0; }
.brief__fields .field__hint { margin-top: -12px; }
.brief__nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.brief__next, .brief__submit { margin-left: auto; }
.brief .form__note { margin-top: 20px; }
.chips.chips--stack { grid-template-columns: 1fr; }
.brief__hint-inline { font-weight: 400; color: var(--muted); }

/* Gründer auf der Startseite: Name, Funktion, drei Fakten, Text, Gesprächsangebot */
.person h2 { margin-bottom: 28px; }
.person__name { margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.25; color: var(--ink); }
.person__role { margin: 4px 0 20px; font-weight: 500; color: var(--ink-2); }
.person .person__facts { margin-bottom: 24px; }
.person .ticks li { font-weight: 500; }
.person .hero__actions { margin-top: 32px; }

/* Startseite „Über uns“: Paarfoto mit versetztem Goldrahmen und Namensschild, daneben Text und drei Kennzahl-Zeilen */
.people { display: grid; gap: 64px; align-items: center; }
.people > * { min-width: 0; }
.people__media { display: grid; max-width: 480px; margin: 16px 0 0 16px; }
.people__media::before { content: ""; grid-area: 1 / 1; border: 1px solid var(--gold); transform: translate(-16px, -16px); }
.people__media img { position: relative; grid-area: 1 / 1; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
/* Namensschild ragt unten über das Foto hinaus */
.people__names { position: relative; justify-self: end; margin: -32px -8px 0 0; padding: 18px 28px 20px; background: var(--paper); border-top: 2px solid var(--gold); box-shadow: 0 20px 44px -20px rgba(var(--shade), .38); }
.people__names span { display: block; margin-bottom: 6px; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.people__names strong { display: block; font-size: 1.625rem; font-weight: 600; line-height: 1.15; color: var(--ink); }
.people h2 { margin-bottom: 28px; }
.people__lead { font-size: 1.25rem; line-height: 1.5; color: var(--ink); }
/* Name | Funktion: auf dem Handy untereinander, ab 600px mit Goldstrich nebeneinander */
.people__name { margin: 0 0 24px; font-size: 1.25rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.people__name span { display: block; margin-top: 2px; font-size: 1.0625rem; font-weight: 500; color: var(--gold-deep); }
@media (min-width: 600px) { .people__name span { display: inline; margin: 0 0 0 14px; padding-left: 14px; border-left: 1px solid var(--gold); } }
.people__quote { border-top-color: var(--gold); }
.people__quote blockquote p { font-size: 1.25rem; }
.people__quote figcaption { color: var(--gold-deep); }
@media (min-width: 900px) {
  .people { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 96px; }
  .people__media { justify-self: end; width: 100%; margin: 24px 0 0 24px; }
  .people__media::before { transform: translate(-24px, -24px); }
  .people__names { margin-right: -40px; }
}
@media (max-width: 479px) { .brief__nav .btn { flex: 1 1 auto; } }
@media (min-width: 600px) { .brief__sum div { grid-template-columns: 200px 1fr; } }
@media (min-width: 700px) {
  .brief__fields { grid-template-columns: 1fr 1fr; }
  .brief__wide { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .brief { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; align-items: start; }
  .brief__intro { position: sticky; top: calc(var(--header) + 32px); }
  /* Schrittliste nur mit Skript, denn erst dann gibt es einen aktuellen Schritt */
  .js .brief__steps { display: block; margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
  .brief__steps li { display: flex; align-items: center; gap: 14px; min-height: 52px; border-bottom: 1px solid var(--line); color: var(--muted); transition: color .2s; }
  .brief__steps li::before { content: ""; flex: none; width: 12px; height: 12px; border: 2px solid var(--muted); transition: background-color .2s, border-color .2s; }
  .brief__steps .is-done { color: var(--ink); }
  .brief__steps .is-done::before { border-color: var(--gold); background: var(--gold); }
  .brief__steps .is-cur { color: var(--ink); font-weight: 600; }
  .brief__steps .is-cur::before { border-color: var(--gold-deep); background: var(--gold-deep); }
}

/* Über uns: vier Bereiche als Zeilen, Gründer mit zwei Bildern, drei Zusagen */
.areas { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.areas a { display: flex; align-items: center; gap: 20px; min-height: 104px; padding: 18px 6px 18px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.areas a::after { content: ""; flex: none; width: 10px; height: 10px; margin-left: auto; border: solid var(--ink); border-width: 2px 2px 0 0; transform: rotate(45deg); transition: transform .2s var(--ease); }
.areas__icon { display: grid; place-items: center; flex: none; width: 60px; height: 60px; background: var(--sand); color: var(--gold-deep); transition: background-color .3s, color .3s; }
.areas__icon svg { width: 28px; height: 28px; }
.areas__text { display: grid; gap: 4px; min-width: 0; }
.areas__name { font-size: 1.375rem; font-weight: 500; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.areas__desc { font-size: 1rem; color: var(--ink-2); }
.areas a:hover .areas__icon { background: var(--gold-bright); color: var(--ink); }
.areas a:hover .areas__name { text-decoration: underline; }
.areas a:hover::after { transform: translateX(4px) rotate(45deg); }

.founder { display: grid; gap: 48px; align-items: center; }
/* Ein Porträt; ein Goldrahmen sitzt versetzt dahinter */
.founder__media { display: grid; max-width: 480px; margin: 16px 0 16px 16px; }
.founder__media::before { content: ""; grid-column: 1; grid-row: 1; border: 1px solid var(--gold); transform: translate(-16px, -16px); }
/* position: relative hebt das Bild über den Rahmen (der Rahmen ist durch transform eine eigene Ebene) */
.founder__media img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.founder__main { grid-column: 1; grid-row: 1; }
.founder h2 { margin-bottom: 32px; }
.founder__name { margin-bottom: 6px; font-size: 1.75rem; }
.founder__role { margin-bottom: 24px; font-weight: 500; color: var(--gold-deep); }
.founder .hero__actions { margin-top: 36px; }
@media (min-width: 900px) {
  .founder { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 88px; }
  .founder__media { justify-self: end; width: 100%; margin: 24px 0 0 24px; }
  .founder__media::before { transform: translate(-24px, -24px); }
}

.pledges { display: grid; gap: 40px; margin: 0; padding: 0; list-style: none; }
.pledges li { padding-top: 24px; border-top: 1px solid var(--ink); }
.pledges h3 { margin-bottom: 12px; font-size: 1.5rem; }
@media (min-width: 900px) { .pledges { grid-template-columns: repeat(3, 1fr); gap: 48px; } }

.founder__facts { display: grid; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.founder__facts li { display: flex; align-items: baseline; gap: 12px; font-weight: 500; color: var(--ink); }
.founder__facts li::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--gold); transform: translateY(-2px); }

/* Leistungsseiten (Inhalt aus v4, im v5-Raster)
   .intro      Überschrift links, Text rechts
   .offers     Kacheln mit Bild, Titel, Text, Hinweis und Link
   .timeline   Ablauf an einer Goldlinie, ohne Nummern
   .duo        zwei Wege nebeneinander, als Bildfläche (Link) oder als Textkarte
   .callout    Kasten mit Aufforderung und Schaltflächen
   .ticks      Liste mit Haken, .compare zwei Spalten im Vergleich, .way die Orientierungsfragen */
.intro { display: grid; gap: 24px 72px; }
.intro h2 { margin-bottom: 0; }
.intro__text > p:first-child { font-size: 1.25rem; line-height: 1.5; color: var(--ink); }
@media (min-width: 900px) { .intro { grid-template-columns: 5fr 7fr; } }

.section__lead { max-width: 46em; margin: -16px 0 40px; font-size: 1.25rem; line-height: 1.5; }
.section--sand .section__lead { color: var(--ink); }
.section__lead:has(+ .section__lead) { margin-bottom: 20px; }
/* Service-Seite: Verwaltung übernehmen (Frage, Text, Kernsatz) */
#takeover .band__lead { margin-bottom: 16px; }
#takeover p + p { margin-top: 14px; }
#takeover .takeover__claim { font-size: 1.125rem; font-weight: 600; line-height: 1.5; color: var(--ink); }
#takeover .hero__actions { margin-top: 32px; }
@media (min-width: 900px) { .section__lead { margin-bottom: 56px; } }

.offers { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.offer { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); }
.offer img { display: block; flex: 1 1 auto; width: 100%; min-height: 0; aspect-ratio: 3 / 2; object-fit: cover; }
.offer__body { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-start; padding: 24px 24px 28px; }
.offer h3 { margin-bottom: 10px; font-size: 1.5rem; }
.offer p { font-size: 1rem; line-height: 1.6; }
.offer__sub { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.offer__sub h4 { margin: 0 0 6px; font-size: 1.125rem; font-weight: 600; color: var(--ink); }
.offer__note { margin-top: auto; padding-top: 16px; font-size: 1rem; font-weight: 500; color: var(--ink); }
.offer__note::before { content: ""; display: block; width: 32px; height: 2px; margin-bottom: 12px; background: var(--gold); }
.lnk { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-top: auto; padding-top: 8px; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--gold); }
.lnk svg { width: 20px; height: 20px; transition: transform .2s var(--ease); }
.lnk:hover svg { transform: translateX(4px); }
.offer__note + .lnk { margin-top: 4px; }
.section--sand .offer { border-color: transparent; }
@media (min-width: 700px) { .offers { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (min-width: 1100px) {
  .offers--3 { grid-template-columns: repeat(3, 1fr); }
  .offers--4 { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .offers--4 .offer img { aspect-ratio: 4 / 5; }
  .offers--3 .offer img { aspect-ratio: 2 / 1; }
}
/* Eine einzelne Kachel in der letzten Reihe läuft über die ganze Breite, Bild links, Text rechts */
@media (min-width: 700px) and (max-width: 1099px) {
  .offers--3 > .offer:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; }
  .offers--3 > .offer:last-child:nth-child(odd) > img { flex: none; width: calc((100% - 32px) / 2); aspect-ratio: auto; }
  .offers--3 > .offer:last-child:nth-child(odd) .offer__body { flex: 1; }
  .offers--3 > .offer:last-child:nth-child(odd) .offer__body > p { max-width: 48em; }
}
@media (min-width: 1100px) {
  .offers--3 > .offer:last-child:nth-child(3n+1) { grid-column: 1 / -1; flex-direction: row; }
  .offers--3 > .offer:last-child:nth-child(3n+1) > img { flex: none; width: calc((100% - 64px) / 3); aspect-ratio: auto; }
  .offers--3 > .offer:last-child:nth-child(3n+1) .offer__body { flex: 1; }
  /* Acht Kacheln: die erste läuft über zwei Spalten, so geht das Raster 3 × 3 ohne Leerplatz auf */
  .offers--3 > .offer:first-child:nth-last-child(8) { grid-column: span 2; flex-direction: row; }
  .offers--3 > .offer:first-child:nth-last-child(8) > img { flex: none; width: 50%; aspect-ratio: auto; }
  .offers--3 > .offer:first-child:nth-last-child(8) .offer__body { flex: 1; justify-content: center; padding: 40px; }
  .offers--3 > .offer:first-child:nth-last-child(8) h3 { font-size: 1.875rem; }
  .offers--3 > .offer:last-child:nth-child(3n+1) .offer__body > p { max-width: 48em; }
}

.timeline { position: relative; display: grid; gap: 36px; margin: 0; padding: 0 0 0 40px; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--gold); transform-origin: 50% 0; }
.timeline li { position: relative; max-width: 46em; }
.timeline li::before { content: ""; position: absolute; left: -40px; top: 6px; width: 16px; height: 16px; background: var(--paper); border: 3px solid var(--gold); }
.timeline h3 { margin-bottom: 8px; font-size: 1.5rem; }
.timeline__meta { margin-bottom: 6px; font-size: 1rem; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.section--sand .timeline__meta { color: var(--gold-deep); }
/* Vier kurze Schritte nebeneinander statt untereinander (Partner-Seite) */
@media (min-width: 900px) {
  .timeline.timeline--grid { grid-template-columns: 1fr 1fr; gap: 40px 56px; padding-left: 0; }
  .timeline--grid::before { display: none; }
  .timeline--grid li { padding-left: 32px; border-left: 2px solid var(--gold); }
  .timeline.timeline--grid li::before { left: -9px; top: 4px; }
}
@media (min-width: 900px) {
  .timeline { gap: 44px; padding-left: 56px; }
  .timeline li::before { left: -56px; }
  .timeline h3 { font-size: 1.75rem; }
}

.callout { display: grid; gap: 16px; margin-top: 56px; padding: 32px 24px; background: var(--bg-alt); border-top: 2px solid var(--gold); }
.section--alt .callout { background: var(--paper); }
.callout h3 { font-size: 1.625rem; }
.callout .hero__actions { margin-top: 8px; }
@media (min-width: 900px) { .callout { padding: 40px 48px; } }
/* Breiter Kasten über die ganze Inhaltsbreite, Titel fett (Über uns) */
.callout--wide { margin: 0 0 48px; }
.callout--wide h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; line-height: 1.2; }
.callout--wide p { max-width: 62em; margin: 0; font-size: 1.125rem; line-height: 1.65; }
@media (min-width: 900px) { .callout--wide { padding: 48px 56px; } }

/* Kapital freisetzen (Startseite): Sandstein-Karte mit zwei Kennzahlen in Gold */
/* Fragebogen und Kapital-Karte stehen beide auf Weiß: kein doppelter Leerraum dazwischen */
#brief + #capital { padding-top: 0; }
.capital { padding: clamp(32px, 5vw, 64px); background: var(--sand); border-top: 2px solid var(--gold); color: var(--ink-2); }
.capital__kicker { margin: 0 0 16px; font-size: .875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.section .capital h2 { margin-bottom: 0; color: var(--ink); font-size: clamp(2.25rem, 5vw, 3.5rem); }
.section .capital h2::before { display: none; }
.capital__lead { max-width: 34em; margin: 20px 0 0; font-size: clamp(1.125rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--ink-2); }
.capital__stats { display: grid; gap: 40px; margin: 40px 0 0; padding: 40px 0 0; list-style: none; border-top: 1px solid var(--line-strong); }
.capital__stats li { display: flex; flex-direction: column; gap: 14px; }
.capital__stats p { max-width: 24em; margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); }
.capital__stats .capital__num { font-size: clamp(3.5rem, 8vw, 5.5rem); font-weight: 500; line-height: 1; letter-spacing: -.02em; color: var(--gold-deep); font-variant-numeric: lining-nums; }
.capital__num small { margin-right: .3em; font-size: .3em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.capital__stats .capital__sub { align-self: flex-start; padding: 8px 14px; border: 1px solid var(--line-strong); font-size: 1rem; font-weight: 500; color: var(--ink); }
.capital__sub strong { font-weight: 600; color: var(--gold-deep); }
.capital .lnk { align-self: flex-start; margin-top: 4px; color: var(--ink); }
.capital__note { max-width: 62em; margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--line-strong); font-size: .9375rem; line-height: 1.6; color: var(--muted); }
@media (min-width: 1100px) {
  .capital { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto auto 1fr; column-gap: 56px; align-items: start; }
  .capital > * { grid-column: 1; }
  .capital .capital__stats { grid-column: 2; grid-row: 1 / span 4; margin: 0; padding: 0; border-top: 0; }
  .capital .capital__note { align-self: end; margin-top: 32px; }
  .capital__stats .capital__num { font-size: clamp(3.5rem, 5.4vw, 4.75rem); }
  .section .capital h2 { font-size: clamp(2rem, 2.9vw, 2.5rem); }
}
.capital__stats .capital__label { font-size: .875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
@media (min-width: 760px) {
  .capital__stats { grid-template-columns: 1fr 1fr; gap: 0; }
  .capital__stats li:first-child { padding-right: 40px; }
  .capital__stats li + li { padding-left: 40px; border-left: 1px solid var(--line-strong); }
}

/* Finanzierung: zwei Wege zu Kapital aus einer Immobilie, je mit Zielgruppe, Voraussetzungen, Kosten, Ablauf */
.models { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .models { grid-template-columns: 1fr 1fr; gap: 32px; } }
.model { display: flex; flex-direction: column; align-items: flex-start; padding: 32px 28px; background: var(--bg-alt); border-top: 4px solid var(--gold); scroll-margin-top: calc(var(--header, 88px) + 16px); }
.model__kicker { margin: 0 0 8px; font-size: .875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.model h3 { margin-bottom: 20px; font-size: 1.5rem; }
.model__fig { margin: 0 0 24px; font-size: 1.125rem; color: var(--ink); }
.model__fig strong { display: block; font-size: clamp(2.5rem, 4vw, 3.25rem); font-weight: 500; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.model__fig span { display: block; margin-top: 8px; font-size: .9375rem; color: var(--muted); }
.model__facts { width: 100%; margin: 0 0 16px; }
.model__facts div { display: grid; gap: 4px 20px; padding: 14px 0; border-top: 1px solid var(--line); }
.model__facts dt { font-weight: 600; color: var(--ink); }
.model__facts dd { margin: 0; color: var(--ink-2); }
@media (min-width: 1100px) { .model__facts div { grid-template-columns: 9em minmax(0, 1fr); } }
.model__steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.model__steps li { position: relative; padding-left: 30px; counter-increment: step; }
.model__steps li::before { content: counter(step); position: absolute; left: 0; top: .15em; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--gold-bright); font-size: .75rem; font-weight: 700; line-height: 1; color: var(--ink); }
.model__note { margin: 0 0 8px; font-size: .9375rem; color: var(--muted); }

.duo { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 800px) { .duo { grid-template-columns: 1fr 1fr; gap: 32px; } }
.duo__panel { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; padding: 32px 28px; overflow: hidden; background: #6b5a45; color: #fffaf2; text-decoration: none; }
.duo__panel img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.duo__panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--shade), .1) 0%, rgba(var(--shade), .8) 66%); }
.duo__panel h3 { margin-bottom: 12px; font-size: clamp(1.75rem, 3vw, 2.25rem); color: #fffaf2; }
.duo__panel p { max-width: 30em; color: #fffaf2; }
.duo__go { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 20px; padding: 0 20px; align-self: flex-start; background: var(--gold-bright); color: var(--ink); font-weight: 600; transition: background-color .3s var(--ease); }
.duo__go svg { transition: transform .4s var(--ease); }
.duo__panel:hover img { transform: scale(1.035); }
.duo__panel:hover .duo__go { background: #e6c072; }
.duo__panel:hover .duo__go svg { transform: translateX(4px); }
.duo__card { display: flex; flex-direction: column; align-items: flex-start; padding: 32px 28px; background: var(--paper); border: 1px solid var(--line); border-top: 2px solid var(--gold); }
.duo__card h3 { margin-bottom: 12px; }
.duo__card .hero__actions { margin-top: auto; padding-top: 16px; }
@media (min-width: 900px) { .duo__panel { min-height: 520px; padding: 40px; } .duo__card { padding: 40px; } }

.statement { max-width: 24em; margin-bottom: 32px; font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.25; }
.badge { display: inline-flex; align-items: center; gap: 12px; margin-top: 8px; padding: 12px 18px; border: 1px solid var(--gold); font-weight: 600; color: var(--ink); }

.ticks { display: grid; gap: 12px 40px; margin: 0; padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 32px; color: var(--ink); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .4em; width: 14px; height: 8px; border: solid var(--gold); border-width: 0 0 3px 3px; transform: rotate(-45deg); }
.ticks--wide { font-size: 1.25rem; font-weight: 500; }
@media (min-width: 900px) { .ticks--wide { grid-template-columns: 1fr 1fr; } }
.fnote { max-width: 60em; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 1rem; color: var(--muted); }
.section--sand .fnote { border-color: var(--line-strong); }

.compare { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.compare > li { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s; }
.compare img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.compare__body { padding: 28px; }
.compare h3 { margin-bottom: 16px; }
.compare .ticks { gap: 10px; }
.compare > li.is-reco { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
@media (min-width: 800px) { .compare { grid-template-columns: 1fr 1fr; gap: 32px; } }

/* Orientierungsfragen: drei Fragen nebeneinander, darunter das Ergebnis über die volle Breite */
.way { display: grid; gap: 28px; margin-top: 48px; padding: 28px 24px; background: var(--paper); border: 1px solid var(--line); }
html:not(.js) .way { display: none; }
.way__q { min-width: 0; margin: 0; padding: 0; border: 0; }
.way__q legend { padding: 0; font-size: 1.25rem; font-weight: 500; color: var(--ink); }
.way__q legend + * { margin-top: 14px; }
.way .chips { grid-template-columns: 1fr; }
.way__result { padding: 24px; background: var(--sand); color: var(--ink); }
.way__verdict { margin: 0; font-size: 1.25rem; line-height: 1.45; transition: opacity .2s; }
.way__verdict em { font-style: normal; color: var(--gold-deep); font-weight: 600; }
.way__verdict.is-swap { opacity: 0; }
.way__result .fnote { margin-top: 16px; padding-top: 14px; border-color: var(--line-strong); color: var(--muted); }
@media (min-width: 900px) { .way { padding: 40px; } }
@media (min-width: 1000px) {
  .way { grid-template-columns: repeat(3, 1fr); gap: 32px 40px; }
  .way__result { grid-column: 1 / -1; padding: 28px 32px; }
  .way__verdict { font-size: 1.5rem; }
}

.duo__title { margin: 56px 0 24px; font-size: 1.5rem; }
.pledges--2, .pledges--4 { margin-top: 0; }
.section--sand .pledges li { border-top-color: var(--gold); }
.offers + .pledges { margin-top: 56px; }
@media (min-width: 700px) { .pledges--2, .pledges--4 { grid-template-columns: 1fr 1fr; gap: 40px 48px; } }
@media (min-width: 1100px) { .pledges--4 { grid-template-columns: repeat(4, 1fr); } }
.about-more { margin-top: 56px; }
.facts--2 { margin-bottom: 40px; }
@media (min-width: 900px) { .facts.facts--2 { grid-template-columns: 1fr 1fr; } }
.facts + .places { margin-top: 48px; }
.pull { max-width: 30em; padding-top: 20px; border-top: 1px solid var(--gold); font-size: clamp(1.375rem, 2.4vw, 1.75rem); line-height: 1.4; color: var(--ink); }
.split > figure { margin: 0; }
.split__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Kontakt: Bilder vom Standort (Hauptsitz im Dubai Digital Park) */
.hq figcaption, .site-pics figcaption { margin-top: 10px; font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
.site-pics { display: grid; gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; }
.site-pics figure { margin: 0; }
.site-pics img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 700px) { .site-pics { grid-template-columns: 1fr 1fr; gap: 20px; } }
/* Ein einzelnes Standortbild läuft über die ganze Breite, flacher geschnitten */
/* Kontakt: Gebäude (4:3) und Arbeitsplätze (16:9) untereinander neben den Kontaktwegen */
.hq-pics { display: grid; gap: 28px; align-content: start; }
.hq { margin: 0; }
.hq--wide .split__img { aspect-ratio: 16 / 9; }
@media (min-width: 700px) { .site-pics > li:only-child { grid-column: 1 / -1; } .site-pics > li:only-child img { aspect-ratio: 2 / 1; object-position: 50% 45%; } }
.nobr { white-space: nowrap; }

/* Fußzeile: „Folgen Sie uns“ mit Social-Media-Symbolen unter der E-Mail; Adressen in site.js (SOCIAL) */
.footer .footer__social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.footer__social-label { flex: 0 0 100%; font-weight: 600; color: var(--ink); }
.footer .footer__social a { display: grid; place-items: center; width: 48px; height: 48px; min-height: 48px; background: var(--paper); border: 1px solid var(--line-strong); color: var(--gold-deep); text-decoration: none; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.footer .footer__social a[href]:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--ink); text-decoration: none; }
.footer__social svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Über uns: Orte in den VAE */
.places { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; }
.places figure { margin: 0; }
.places img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.places figcaption { margin-top: 10px; font-weight: 500; color: var(--ink); }
.places li:first-child { grid-column: 1 / -1; }
.places li:first-child img { aspect-ratio: 16 / 9; }
@media (min-width: 900px) {
  .places { grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 56px; }
  .places li:first-child { grid-column: auto; }
  .places li:first-child img { aspect-ratio: 4 / 5; }
}
.facts { display: grid; gap: 20px 40px; margin: 0; padding: 0; list-style: none; }
.facts li { padding-top: 16px; border-top: 1px solid var(--ink); }
.facts strong { display: block; margin-bottom: 4px; font-size: 1.25rem; font-weight: 500; color: var(--ink); }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(3, 1fr); } }

.reach { margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.reach a { display: flex; align-items: center; gap: 20px; min-height: 96px; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.reach__icon { display: grid; place-items: center; flex: none; width: 60px; height: 60px; background: var(--sand); color: var(--gold-deep); transition: background-color .3s, color .3s; }
.reach__icon svg { width: 26px; height: 26px; }
.reach__v { font-size: 1.375rem; font-weight: 500; overflow-wrap: anywhere; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.reach a:hover .reach__v { text-decoration: underline; }
.reach a:hover .reach__icon { background: var(--gold-bright); color: var(--ink); }
@media (min-width: 900px) { .reach__v { font-size: 1.625rem; } }

/* Standorte: Dubai + Kontaktstellen Europa */
.offices__title { margin: 48px 0 0; font-size: 1.25rem; font-weight: 500; color: var(--ink); }
.offices { display: grid; gap: 24px; margin: 16px 0 0; padding: 0; list-style: none; }
@media (min-width: 480px) {
  .offices { grid-template-columns: 1fr 1fr; }
  .offices li:first-child { grid-column: 1 / -1; }
  .offices.offices--pair li:first-child { grid-column: auto; }
}
.offices li { padding-top: 14px; border-top: 1px solid var(--ink); }
/* Social Media: Symbol auf Sandstein-Kachel, Name daneben */
.social { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
/* Symbole sind immer sichtbar; ohne Profil-Adresse (site.js SOCIAL leer) fehlt href, dann sind sie nur noch nicht klickbar */
.social a { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding-right: 18px; border: 1px solid var(--line); background: var(--paper); font-weight: 500; color: var(--ink); text-decoration: none; transition: border-color .25s; }
.social a[href]:hover { border-color: var(--ink); }
.social a:not([href]), .footer__social a:not([href]) { cursor: default; }
.social__icon { display: grid; place-items: center; width: 46px; height: 46px; background: var(--sand); color: var(--gold-deep); transition: background-color .25s, color .25s; }
.social a[href]:hover .social__icon { background: var(--gold-bright); color: var(--ink); }
.social__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.offices address { font-style: normal; line-height: 1.55; color: var(--ink-2); }
@media (min-width: 900px) {
  .offices--3 { grid-template-columns: repeat(3, 1fr); }
  .offices--3 li:first-child { grid-column: auto; }
}
.offices__map { display: inline-flex; align-items: center; min-height: 48px; margin-top: 4px; font-weight: 500; color: var(--ink); text-underline-offset: 5px; }
/* Kontaktseite: Kanal mit kurzer Erklärung, Bürozeiten */
.reach__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.reach__note { font-size: 1rem; color: var(--muted); }
.hours { display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; margin: 0; }
.hours dt { font-weight: 500; color: var(--ink); }
.hours dd { margin: 0; }
.offices__tag { display: block; margin-bottom: 6px; font-size: .8125rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* Formular */
.form { display: grid; gap: 20px; padding: 24px; background: var(--paper); border: 1px solid var(--line); }
.field label { display: block; margin-bottom: 8px; font-weight: 500; color: var(--ink); }
.field input, .field textarea, .field select {
  display: block; width: 100%; min-height: 56px; padding: 14px 16px;
  border: 1px solid var(--muted);
  font: inherit; color: var(--ink); background: var(--paper);
  transition: border-color .25s, box-shadow .25s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--ink); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline-offset: 2px; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.field [aria-invalid="true"] { border-color: var(--error); }
.field__hint { margin: 8px 0 0; font-size: 1rem; color: var(--muted); }
.consent { display: flex; align-items: flex-start; gap: 14px; font-size: 1rem; color: var(--ink-2); cursor: pointer; }
.consent input { width: 24px; height: 24px; flex: none; margin: 1px 0 0; accent-color: var(--ink); }
.consent a { color: var(--ink); }
.form__note { margin: 0; padding: 14px 16px; background: var(--bg-alt); border: 1px solid var(--ink); color: var(--ink); font-weight: 500; }
.form__note.is-error { border-color: var(--error); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 900px) { .form { padding: 40px; } }

/* Fußzeile */
.footer { padding-top: 64px; padding-bottom: 28px; background: var(--sand); border-top: 1px solid var(--line-strong); color: var(--ink-2); font-size: 1rem; }
.footer a { color: var(--ink); text-decoration: none; text-underline-offset: 5px; text-decoration-color: var(--gold); }
.footer a:hover { color: var(--gold-deep); text-decoration: underline; }
.footer ul { margin: 0; padding: 0; list-style: none; }
.footer li a, .footer__base a { display: inline-flex; align-items: center; min-height: 48px; }
.footer__row { display: grid; gap: 28px; }
.footer__name { margin-bottom: 8px; font-size: 1.125rem; font-weight: 600; color: var(--ink); }
.footer__more { margin-top: 16px; font-size: .9375rem; line-height: 1.6; color: var(--muted); }
.footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line-strong); }
.footer__base p { margin: 0; }
@media (min-width: 700px) { .footer__row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .footer__row { grid-template-columns: 1.6fr 1.4fr 1fr 1.1fr; } }

/* Rechtsseiten und 404 */
.legal h1 { margin-bottom: 40px; font-size: clamp(2.25rem, 5vw, 3.25rem); }
.legal h1::after { content: ""; display: block; width: 48px; height: 2px; margin-top: 24px; background: var(--gold); }
.legal h2 { margin: 48px 0 12px; font-size: 1.75rem; line-height: 1.3; }
.legal .lead { font-size: 1.25rem; color: var(--ink); }
.legal a:not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.legal dl { margin: 0 0 24px; border-top: 1px solid var(--line); }
.kv { display: grid; gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.kv__addr { display: block; }
.kv__addr + .kv__addr { margin-top: 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0; }
@media (min-width: 700px) { .kv { grid-template-columns: 240px 1fr; } }

/* ===== Runde 2026-10-25b: Layout ohne Lücken =====
   Regel: zwei Spalten nebeneinander müssen ungefähr gleich lang sein. Ist eine Seite kurz, wandert sie mit (sticky)
   oder bekommt Inhalt (Bild, Ansprechpartner); kurze Formularfelder stehen paarweise. */
@media (min-width: 1100px) {
  .form { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .form > * { grid-column: 1 / -1; }
  .form > .field--half { grid-column: auto; }
}
@media (min-width: 900px) {
  .split--top > div:first-child:has(+ .form), .split--top > .areas { position: sticky; top: calc(var(--header) + 40px); }
}
/* Fragebogen: die Formularkarte ist so hoch wie die Spalte links, der aktuelle Schritt füllt den Raum bis zu den Knöpfen */
@media (min-width: 1000px) {
  .brief__form.is-stepped, .is-stepped .brief__form { align-self: stretch; display: flex; flex-direction: column; }
  .brief__form.is-stepped > .brief__step:not([hidden]), .is-stepped .brief__form > .brief__step:not([hidden]) { flex-grow: 1; }
}
/* Partnerseite: Foto des Ansprechpartners */
.person__photo { display: block; width: 100%; aspect-ratio: 4 / 3; margin: 0 0 28px; object-fit: cover; object-position: 50% 88%; }
.badge > strong { flex: none; }
/* Ablauf-Abschnitte: Überschrift und Einleitung links, Zeitstrahl rechts statt rechts leer */
@media (min-width: 1000px) {
  .wrap:has(> .timeline:not(.timeline--grid)) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 88px; align-items: start; }
  .wrap:has(> .timeline:not(.timeline--grid)) > * { grid-column: 1 / -1; }
  /* Spalte so hoch wie der Zeitstrahl; nur der Innenblock wandert mit und endet mit dem Zeitstrahl (nicht über dem Kasten darunter) */
  .wrap:has(> .timeline:not(.timeline--grid)) > .timeline__aside { grid-column: 1; grid-row: 1 / span 3; align-self: stretch; }
  .timeline__stick { position: sticky; top: calc(var(--header) + 40px); }
  .wrap:has(> .timeline:not(.timeline--grid)) > .timeline { grid-column: 2; grid-row: 1 / span 3; margin-top: 8px; }
  /* Aussage-Abschnitte (große Überschrift + Text): Überschrift links und mitwandernd, Text rechts */
  .wrap:has(> h2.statement) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 88px; align-items: start; }
  .wrap:has(> h2.statement) > * { grid-column: 2; }
  .wrap:has(> h2.statement) > h2.statement { grid-column: 1; grid-row: 1 / span 8; position: sticky; top: calc(var(--header) + 40px); margin-bottom: 0; }
  .wrap:has(> h2.statement) > .section__lead { margin-top: 0; }
  .wrap:has(> h2.statement) > .ticks--wide { grid-template-columns: 1fr; font-size: 1.125rem; }
}
/* Über uns: Kernsatz mittig unter dem Kasten */
.about-more > .pull { margin: 64px auto 0; max-width: 24em; padding-top: 0; border-top: 0; text-align: center; font-size: clamp(1.625rem, 3vw, 2.5rem); line-height: 1.3; }
.about-more > .pull::before { content: ""; display: block; width: 48px; height: 1px; margin: 0 auto 28px; background: var(--gold); }
/* Weitere Leistungen: Bildkacheln mit Titel auf dem Foto statt hoher, halbleerer Karten */
.cards--3 .card a { position: relative; isolation: isolate; min-height: 320px; justify-content: flex-end; background: #6b5a45; color: #fffaf2; box-shadow: none; }
.cards--3 .card a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--shade), 0) 28%, rgba(var(--shade), .8) 100%); }
.cards--3 .card img { position: absolute; inset: 0; z-index: -2; height: 100%; aspect-ratio: auto; }
.cards--3 .card__body { flex: 0 0 auto; padding: 28px; }
.section .cards--3 h3 { margin-bottom: 4px; font-size: 1.625rem; color: #fffaf2; }
.cards--3 .card__more { min-height: 40px; color: #fffaf2; text-decoration-color: var(--gold-bright); }
.cards--3 .card a:hover .card__more { color: var(--gold-soft); }
.cards--3 .card a:focus-visible { outline-color: var(--gold-bright); }
@media (min-width: 900px) { .cards--3 .card a { min-height: 380px; } }

/* Bewegung (2026-10-25b): ruhig und hochwertig, jedes Element einmal, nichts in Schleife.
   Hero: Foto blendet auf und gleitet beim Scrollen langsamer mit (Parallax), die Überschrift steigt Wort für Wort
   aus einer Maske (site.js teilt sie ab 700px). Abschnitte: Goldstrich zieht sich auf, Inhalte gleiten 16px herauf (.rv),
   Bilder öffnen sich von unten wie ein Vorhang (.rv-img), Ablauf: Stationen nacheinander, die Kurve zieht sich weiter.
   Kennzahlen zählen hoch, ein Goldfaden unter der Kopfzeile zeigt den Lesefortschritt, Seitenwechsel blenden über.
   .rv / .rv-img setzt site.js nur für Inhalte unterhalb des Bildschirms. Mit „Bewegung reduzieren“ steht alles still. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .hero__img { animation: fade 1.4s var(--ease) both; }
  .hero__kicker, .hero h1, .hero__claim, .hero__lead, .hero__actions { animation: rise 1s var(--ease) both; }
  .hero__kicker { animation-delay: .05s; }
  .hero h1 { animation-delay: .15s; }
  .hero__claim { animation-delay: .5s; }
  .hero__lead { animation-delay: .6s; }
  .hero__actions { animation-delay: .72s; }
  .hero h1.is-split { animation: none; }
  .hero h1 .w { display: inline-block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; vertical-align: top; }
  .hero h1 .w > span { display: inline-block; animation: word 1.1s var(--ease) both; animation-delay: calc(.15s + var(--i, 0) * 55ms); }

  .section h2.rv::before { transform: scaleX(0); transform-origin: 0 50%; }
  .section h2.rv.is-in::before { transform: none; transition: transform 1.1s var(--ease) .2s; }

  .rv { opacity: 0; transform: translateY(16px); }
  .rv.is-in { opacity: 1; transform: none; transition: opacity .9s var(--ease) var(--rd, 0s), transform .9s var(--ease) var(--rd, 0s); }

  /* Vorhang per Maske (nicht clip-path: Chrome zählt clip-path bei der Sichtbarkeitsprüfung mit) */
  .rv-img {
    -webkit-mask-image: linear-gradient(to top, #000 50%, transparent 50%); mask-image: linear-gradient(to top, #000 50%, transparent 50%);
    -webkit-mask-size: 100% 200%; mask-size: 100% 200%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: 0 0; mask-position: 0 0;
  }
  .rv-img.is-in {
    -webkit-mask-position: 0 100%; mask-position: 0 100%;
    transition: -webkit-mask-position 1.3s var(--ease-expo) var(--rd, 0s), mask-position 1.3s var(--ease-expo) var(--rd, 0s);
  }

  /* Reihen erscheinen nacheinander, je 80 ms versetzt */
  :is(.cards, .offers, .compare, .duo, .pledges, .areas, .facts, .places, .site-pics, .capital__stats, .models) > :nth-child(2) { --rd: .08s; }
  :is(.cards, .offers, .compare, .duo, .pledges, .areas, .facts, .places, .site-pics, .capital__stats, .models) > :nth-child(3) { --rd: .16s; }
  :is(.cards, .offers, .pledges, .areas, .facts, .places) > :nth-child(4) { --rd: .24s; }
  .places > :nth-child(5) { --rd: .32s; }
  .points li:nth-child(even) { --rd: .08s; }
  .partners li:nth-child(5n+2) { --rd: .05s; }
  .partners li:nth-child(5n+3) { --rd: .1s; }
  .partners li:nth-child(5n+4) { --rd: .15s; }
  .partners li:nth-child(5n) { --rd: .2s; }
  .founder__text > p { --rd: .08s; }

  /* Ablauf: Station für Station, die Kurve zieht sich zur nächsten */
  .steps > .step:nth-child(2) { --rd: .3s; }
  .steps > .step:nth-child(3) { --rd: .6s; }
  .step.rv .step__node { opacity: 0; transform: scale(.8); }
  .step.rv.is-in .step__node { opacity: 1; transform: none; transition: opacity .5s ease var(--rd, 0s), transform .9s var(--ease) var(--rd, 0s); }
  .step.rv .step__link { clip-path: inset(-4px 100% -4px 0); }
  .step.rv.is-in .step__link { clip-path: inset(-4px 0 -4px 0); transition: clip-path 1.3s var(--ease) calc(var(--rd, 0s) + .35s); }

  /* Karten heben sich beim Überfahren leicht an */
  .card a { transition: box-shadow .5s var(--ease), transform .5s var(--ease); }
  .card a:hover { transform: translateY(-4px); }

  /* Brief: der neue Schritt blendet kurz ein */
  .brief__step.is-entering { animation: fade .45s var(--ease) both; }
}

/* Scroll-gebunden, nur wo der Browser es kann (Chrome, Edge, Safari 26); sonst steht es einfach still */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; animation: progress linear both; animation-timeline: scroll(root); }
    .hero__img { animation: fade 1.4s var(--ease) both, drift linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 100vh; }
  }
}

/* Seitenwechsel (Chrome, Edge, Safari ab 18.2; andere Browser wechseln wie gewohnt): weiche Überblendung. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .header { view-transition-name: site-header; }
  ::view-transition-group(site-header), ::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; }
  ::view-transition-old(root) { animation: fade-out .22s cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: fade .5s var(--ease) .06s both; }
}
/* ---------- Runde 2026-10-27 ---------- */
/* Über uns: Bild an der Stelle des früheren großen Zitats */
.about-more__img { margin: 0; }
.about-more__img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 55% 50%; }
@media (min-width: 700px) { .about-more__img img { aspect-ratio: 21 / 9; } }

/* Zitat-Karte des Gründers (Aufbau nach Kundenvorlage, in den Seitenfarben) */
.founder-card { margin: 4px 0 0; padding: 32px 32px 28px; background: var(--paper); border-top: 3px solid var(--gold); box-shadow: 0 22px 44px -32px rgba(43, 34, 25, .45); }
.founder-card__kicker { margin: 0 0 14px; font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.founder-card__title { margin: 0; font-size: clamp(1.5rem, 2.4vw, 1.875rem); font-weight: 500; line-height: 1.25; color: var(--ink); }
.founder-card__rule { height: 1px; margin: 24px 0; background: var(--gold); border: 0; }
.founder-card blockquote { margin: 0; }
.founder-card blockquote p { margin: 0; font-size: 1.1875rem; font-style: italic; line-height: 1.55; color: var(--ink); }
.founder-card figcaption { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.founder-card__badge { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--gold-bright); font-weight: 600; letter-spacing: .04em; color: var(--ink); }
.founder-card__who { display: flex; flex-direction: column; line-height: 1.35; }
.founder-card__who strong { font-weight: 600; color: var(--ink); }
.founder-card__who span { font-size: .9375rem; color: var(--muted); }
@media (max-width: 479px) { .founder-card { padding: 26px 22px 22px; } }

/* Gründer-Botschaft: Überschrift links (wandert mit), Brief rechts */
.letter { display: grid; }
.letter__head h2, .founder-card__title { hyphens: manual; }
.letter__from { margin: -24px 0 32px; font-size: 1.125rem; font-weight: 500; color: var(--gold-deep); }
.letter__body { max-width: 40em; }
.letter__body p { margin: 0 0 20px; font-size: 1.125rem; line-height: 1.7; color: var(--ink); }
.letter__body .letter__first { font-size: clamp(1.25rem, 1.8vw, 1.4375rem); line-height: 1.55; }
.letter__body .letter__turn { font-size: clamp(1.25rem, 1.8vw, 1.4375rem); font-weight: 500; line-height: 1.45; }
.letter__body .letter__close { font-weight: 600; }
.letter__body .letter__sign { display: flex; flex-direction: column; margin: 32px 0 0; padding-top: 20px; border-top: 1px solid var(--gold); line-height: 1.4; }
.letter__sign strong { font-weight: 600; }
.letter__sign span { font-size: 1rem; color: var(--muted); }
@media (min-width: 1000px) {
  .letter { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 88px; align-items: start; }
  .letter__head { position: sticky; top: calc(var(--header) + 40px); }
  .letter__from { margin-bottom: 0; }
}

/* Partnerseite: Firmenlogo statt Personenfoto */
.person__brand { display: flex; align-items: center; gap: 22px; margin: 0 0 32px; padding: 32px; background: var(--sand); border-top: 3px solid var(--gold); }
.person__brand img { flex: none; width: auto; height: 84px; }
.person .person__brand h2 { display: flex; flex-direction: column; margin: 0; font-size: 2rem; font-weight: 500; letter-spacing: .14em; line-height: 1; }
.person__brand h2::before { display: none; }
.person__brand h2 small { margin-top: 10px; font-size: .40625em; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-deep); white-space: nowrap; }
@media (max-width: 479px) { .person__brand { gap: 14px; padding: 24px 20px; } .person__brand img { height: 60px; } .person .person__brand h2 { font-size: 1.5rem; letter-spacing: .1em; } .person__brand h2 small { letter-spacing: .12em; } }

@keyframes fade { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes word { from { transform: translateY(110%); } }
@keyframes progress { to { transform: scaleX(1); } }
@keyframes drift { to { transform: translateY(12%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Feinschliff 2026-11-02: ruhigere Überschriften, Gründer-Kicker, Founder-Card-Text, breites Bürobild */
h1, h2, h3 { text-wrap: balance; }
p, li, blockquote, figcaption { text-wrap: pretty; }
.people__lead { margin: 0 0 14px; font-size: .8125rem; font-weight: 600; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.people__lead::before { content: ""; display: inline-block; width: 28px; height: 1px; margin-right: 12px; vertical-align: middle; background: var(--gold); }
.people__lead + h3 { margin: 0 0 28px; max-width: 22em; font-size: clamp(1.5rem, 2.4vw, 1.875rem); font-weight: 500; line-height: 1.25; color: var(--ink); }
.founder-card > p { max-width: 62ch; margin: 0 0 16px; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); }
.founder-card > p:first-child { font-size: 1.1875rem; line-height: 1.6; color: var(--ink); }
.founder-card > p + .founder-card__rule { margin-top: 28px; }
.hq--wide .split__img { aspect-ratio: 1280 / 504; }
img { -webkit-user-drag: none; }

/* ===== Next-Level-Durchgang 2026-11-02: größer, luftiger, ruhiger ===== */
/* Ganze Seite auf großen Bildschirmen etwas größer (alle rem-Werte wachsen mit) */
@media (min-width: 1200px) { html { font-size: 106.25%; } :root { --wrap: 1280px; } }
@media (min-width: 1600px) { html { font-size: 112.5%; } :root { --wrap: 1360px; } }

/* Mehr Luft zwischen den Bereichen */
.section, .legal { padding-top: clamp(72px, 9vw, 136px); padding-bottom: clamp(72px, 9vw, 136px); }
.section h2 { margin-bottom: clamp(40px, 4.5vw, 64px); }
.section h2::before { width: 56px; margin-bottom: 28px; }

/* Überschriften: größer, enger gesetzt, ruhiger */
h1 { font-size: clamp(2.625rem, 6.4vw, 5.25rem); line-height: 1.04; letter-spacing: -.025em; }
h2 { font-size: clamp(2.25rem, 4.6vw, 3.75rem); line-height: 1.06; letter-spacing: -.02em; }
h3 { letter-spacing: -.01em; }
body { line-height: 1.65; }
.section .lead { font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.5; }

/* Kleine Zeilen etwas größer und lesbarer */
.hero__kicker, .capital__kicker, .model__kicker, .founder-card__kicker, .people__lead { font-size: .875rem; letter-spacing: .18em; }
.people__names span, .model__steps li::before { font-size: .8125rem; }
.offices__tag { font-size: .875rem; }
.card__list, .cards:not(.cards--3) .card__body > p, .areas__desc, .offer p { font-size: 1.0625rem; line-height: 1.6; }
.footer { font-size: 1.0625rem; }

/* Karten: mehr Innenraum, feinere Tiefe beim Überfahren */
.card { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
@media (hover: hover) { .card:hover { transform: translateY(-4px); box-shadow: 0 28px 56px -28px rgba(var(--shade), .28); } }
.card__body { padding: clamp(24px, 2.2vw, 36px); }

/* Nebeneinander: mehr Abstand zwischen Spalten */
@media (min-width: 900px) {
  .people, .founder, .split { gap: clamp(64px, 6vw, 112px); }
  .brief { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(56px, 5vw, 88px); }
  .steps { column-gap: clamp(48px, 4vw, 72px); }
  .capital__stats .capital__sub, .capital__stats .capital__label { font-size: 1rem; }
  .cards { gap: clamp(20px, 2vw, 32px); }
}

/* Schaltflächen etwas kräftiger */
.btn { min-height: 52px; padding-left: 26px; padding-right: 26px; font-size: 1rem; letter-spacing: .01em; }

@media (prefers-reduced-motion: reduce) { .card, .card:hover { transition: none; transform: none; } }
/* Lange Wörter (RU) im Hinweis-Kasten am Handy umbrechen */
.badge { max-width: 100%; flex-wrap: wrap; overflow-wrap: anywhere; }


/* Finanzierungswege (Investments): ruhiger, klarer, wie Dokumentkarten */
.model { padding: 0; background: var(--paper); border: 1px solid var(--line); border-top: 1px solid var(--line); box-shadow: 0 30px 60px -44px rgba(var(--shade), .28); }
.model > * { width: 100%; }
.model__kicker, .model h3 { padding: 0 clamp(24px, 3vw, 44px); }
.model__kicker { display: flex; align-items: center; gap: 14px; margin: clamp(28px, 3vw, 40px) 0 12px; font-size: .8125rem; letter-spacing: .18em; color: var(--gold-deep); }
.model__kicker::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.model h3 { margin-bottom: 28px; font-size: clamp(1.5rem, 2vw, 1.875rem); line-height: 1.2; }
.model__fig { margin: 0; padding: 28px clamp(24px, 3vw, 44px); background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.model__fig strong { margin-bottom: 6px; font-size: clamp(3rem, 5vw, 4.25rem); letter-spacing: -.03em; color: var(--ink); }
.model__fig span { margin-top: 10px; font-size: 1rem; }
.model__facts { margin: 0; padding: 8px clamp(24px, 3vw, 44px) clamp(28px, 3vw, 40px); }
.model__facts div { padding: 20px 0; }
.model__facts div:first-child { border-top: 0; }
.model__facts dt { font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.model__facts dd { line-height: 1.6; }
@media (min-width: 1100px) { .model__facts div { grid-template-columns: 11em minmax(0, 1fr); } .model__facts dt { padding-top: .25em; } }
.model__steps { gap: 12px; }
.model__steps li { padding-left: 40px; }
.model__steps li::before { top: .05em; width: 26px; height: 26px; background: transparent; border: 1px solid var(--gold); color: var(--gold-deep); font-size: .8125rem; font-weight: 600; }
.model__note { padding: 0 clamp(24px, 3vw, 44px) 28px; }

/* Firmengründung #handle: acht Leistungen als nummerierte Karten, zwei Spalten */
#handle .pledges { counter-reset: svc; gap: 16px; }
#handle .pledges li { counter-increment: svc; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(20px, 2.4vw, 36px); align-content: start; padding: clamp(28px, 3vw, 40px); background: var(--paper); border: 1px solid var(--line); border-top: 1px solid var(--line); transition: border-color .4s var(--ease), box-shadow .4s var(--ease); }
#handle .pledges li::before { content: counter(svc, decimal-leading-zero); grid-row: 1 / span 2; padding-top: .2em; font-size: .9375rem; font-weight: 600; letter-spacing: .08em; color: var(--gold-deep); font-variant-numeric: tabular-nums; }
#handle .pledges h3 { margin-bottom: 12px; font-size: clamp(1.375rem, 1.7vw, 1.625rem); line-height: 1.25; }
#handle .pledges p { color: var(--ink-2); line-height: 1.65; }
@media (min-width: 700px) { #handle .pledges { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (min-width: 1100px) { #handle .pledges--4 { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (hover: hover) { #handle .pledges li:hover { border-color: var(--line-strong); box-shadow: 0 24px 48px -36px rgba(var(--shade), .3); } }

/* Fix 2026-11-02: kein schwarzer Blitz beim Seitenwechsel */
html { background: var(--bg); }
::view-transition { background: var(--bg); }
::view-transition-old(root) { animation: none; opacity: 1; }
::view-transition-new(root) { animation: fade .35s var(--ease) both; }
/* Fix: Video-Knopf am Handy oben rechts, nicht über den Schaltflächen */
@media (max-width: 899px) {
  .hero__toggle { top: 16px; right: 16px; bottom: auto; width: 44px; height: 44px; }
}

/* Startseite #about: mehrteiliger Brief von Marcus und Olga statt Kurzzitat */
.people__quote .people__letter p { font-size: 1.125rem; line-height: 1.65; color: var(--ink-2); }
.people__quote .people__letter p:first-child { font-size: 1.25rem; color: var(--ink); }
.people__quote .people__letter p + p { margin-top: 1em; }
/* Startseite #about: Titel steht jetzt allein oben */
.people__text > h3:first-child { margin-bottom: 28px; font-size: clamp(1.875rem, 3vw, 2.625rem); line-height: 1.15; letter-spacing: -.015em; }

/* Über uns #founder: Bild und Text oben bündig, Bild größer, Abstände klarer */
#founder { padding-top: clamp(64px, 7vw, 104px); padding-bottom: clamp(64px, 7vw, 104px); }
#founder .founder { align-items: start; }
#founder .founder h2 { margin-bottom: 40px; }
#founder .founder__name { margin-bottom: 4px; }
#founder .founder__role { margin-bottom: 32px; }
#founder .founder-card { padding: clamp(28px, 3vw, 44px); }
@media (min-width: 900px) {
  #founder .founder { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(56px, 6vw, 96px); }
  #founder .founder__media { max-width: 520px; margin-top: 24px; position: sticky; top: calc(var(--header) + 48px); align-self: start; }
}