/* ==========================================================================
   VITL Capital L.L.C. — vitlcapital.com
   Aus dem Original-Onepager uebernommen. Das Design ist unveraendert;
   Ergaenzungen sind mit  [FIX]  bzw.  [NEU]  gekennzeichnet und begruendet.
   ========================================================================== */

:root {
  --navy: #06111f;
  --navy2: #0b1c31;
  --black: #03070b;
  --gold: #d2a956;
  --gold2: #f0d48a;
  --cream: #f7f4ed;
  --muted: #aeb8c4;
  /* [FIX] Gold auf Creme-Grund. --gold2 erreicht auf #f7f4ed nur 1,32:1 und
     --gold nur 2,00:1 (WCAG AA verlangt 4,5:1) — die Kicker und die Karten-
     nummern waren auf den hellen Sections praktisch unsichtbar.
     #846312 = 5,06:1 und behaelt den Goldcharakter. */
  --gold-on-cream: #846312;
  --tief: #020609;
  --header-h: 58px;

  /* Abstaende auf 4er-Basis. Vorher lagen im Stylesheet vier verschiedene
     Rhythmen nebeneinander (105px, 70px, 46px, 44px) — sichtbar als
     unruhige Abstaende zwischen den Abschnitten. */
  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;  --s6: 24px;
  --s8: 32px; --s12: 48px; --s16: 64px; --s22: 88px; --s30: 120px;
  --s-section: clamp(64px, 6.4vw + 28px, 120px);
  --s-split: clamp(40px, 4.5vw, 72px);
  --s-head: clamp(40px, 4vw, 64px);

  /* Schriften. Cormorant Garamond fuer Ueberschriften, Manrope fuer alles
     andere — beide selbst ausgeliefert (siehe schriften.css). Chinesisch
     bekommt keine Webschrift, dafuer stehen die Systemschriften in der Kette. */
  --serif: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', 'Manrope Fallback', -apple-system, BlinkMacSystemFont,
          'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* Sperrung von Versalien. Wird pro Sprache gestuft: deutsche und russische
     Woerter sind laenger, chinesische Schriftzeichen duerfen gar nicht
     gesperrt werden, weil sonst die Zeichen auseinanderfallen. */
  --track-label: .28em;
}

/* site.js setzt documentElement.lang auf 'zh-CN' — :lang(zh) trifft das. */
html:lang(zh) {
  --serif: 'PingFang SC', 'Hiragino Sans GB', 'Source Han Serif SC',
           'Noto Serif CJK SC', 'Microsoft YaHei New', 'Microsoft YaHei', sans-serif;
  --sans: 'Manrope', 'PingFang SC', 'Hiragino Sans GB', 'Source Han Sans SC',
          'Noto Sans CJK SC', 'Microsoft YaHei New', 'Microsoft YaHei', sans-serif;
  --track-label: .12em;
}
html:lang(de), html:lang(ru) { --track-label: .20em }

* { box-sizing: border-box }

html { scroll-behavior: smooth }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--navy);
  color: white;
  line-height: 1.6;
  font-kerning: normal;
  /* Bewusst KEIN -webkit-font-smoothing:antialiased — das duennt die feinen
     Striche von Cormorant auf den dunklen Flaechen weiter aus. */
  /* [FIX] verhindert, dass iOS Safari Text im Querformat eigenmaechtig vergroessert */
  -webkit-text-size-adjust: 100%;
}

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

p { text-wrap: pretty }
/* Ziffern gleicher Breite, damit die Indizes 01-09 senkrecht fluchten */
.num, .kicker, .contact-details { font-variant-numeric: tabular-nums }

.wrap {
  max-width: 1240px;
  margin: auto;
  /* [FIX] env(safe-area-inset-*) fuer iPhone im Querformat (Notch/Dynamic Island) */
  padding-left: max(28px, env(safe-area-inset-left));
  padding-right: max(28px, env(safe-area-inset-right));
}

/* [NEU] Sprungmarke fuer Tastatur- und Screenreader-Nutzer */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gold);
  color: #07111f;
  padding: 12px 18px;
  font-size: 12px;
  letter-spacing: .13em;
}
.skip:focus { left: 0 }

/* [FIX] Sichtbarer Tastaturfokus. Das Original hatte keinerlei Fokus-Styling,
   d. h. die Seite war ohne Maus nicht bedienbar nachvollziehbar. */
:focus-visible {
  outline: 2px solid var(--akzent, var(--gold2));
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- Header */

header {
  position: fixed;
  z-index: 30;
  /* Bezugspunkt fuer die Fortschrittslinie an der Unterkante */
  isolation: isolate;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(2, 7, 12, .98), rgba(2, 7, 12, .78));
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(210, 169, 86, .18);
}

nav {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Wortmarke. Die gelieferte Logo-Grafik ist eine Karte mit Seitenverhaeltnis
   1,43:1 — in einer schmalen Leiste wurde sie zwangslaeufig beschnitten. Als
   Text ist sie in jeder Aufloesung scharf, kostet keinen einzigen Byte
   Ladezeit und laesst sich markieren und vorlesen. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
  white-space: nowrap;
}
/* Die Marke bindet sich an die Leistenhoehe — sie kann damit in keiner
   Bildschirmbreite beschnitten werden. */
.brand img {
  height: calc(var(--header-h) - 26px);
  width: auto;
  display: block;
}
.brand span {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1;
  color: var(--gold2);
}
/* Goldverlauf wie im Logo — nur dort, wo der Browser Text als Maske beherrscht,
   sonst bliebe der Schriftzug unsichtbar. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .brand span {
    background: linear-gradient(120deg, #f5e2ae 0%, #f0d48a 30%, #d2a956 62%, #b98b3d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.brand:focus-visible { outline-offset: 6px }

.navlinks {
  display: flex;
  gap: 22px;
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
}
.navlinks a:hover { color: var(--gold2) }

.langs {
  display: flex;
  gap: 5px;
  border-left: 1px solid #ffffff24;
  padding-left: 16px;
}

.lang {
  border: 1px solid #d2a95655;
  background: transparent;
  color: var(--gold2);
  padding: 6px 7px;
  font-size: 10px;
  cursor: pointer;
  /* [FIX] Buttons erbten die Systemschrift statt Arial */
  font-family: inherit;
  line-height: 1;
}
.lang.active,
.lang:hover { background: var(--gold); color: #07111f }

/* [FIX] Auf Touchgeraeten waren die Sprachbuttons ca. 24x22 px gross.
   WCAG 2.5.8 fordert mindestens 24x24 px, Apple empfiehlt 44 px.
   Nur fuer grobe Zeiger — das Desktop-Layout bleibt exakt wie gehabt. */
@media (pointer: coarse) {
  .lang { min-width: 34px; min-height: 34px; padding: 6px 8px }
  /* [FIX] E-Mail/Telefon/Website waren nur 17px hoch. Am Zeigertyp haengen
     statt an der Breite — sonst greift es im Querformat nicht. */
  .contact-details a { display: inline-block; padding: 5px 0 }
  /* Die Wortmarke verlinkt auf den Seitenanfang und war als Textzeile nur
     16px hoch. Die Polsterung vergroessert nur die Trefferflaeche, nicht die
     Schrift — die Leiste zentriert weiterhin senkrecht. */
  .brand { padding: 9px 0 }
}

/* [NEU] Mobile Navigation. Im Original wurden die Navigationslinks unter
   950 px per display:none ausgeblendet — ohne Ersatz. Auf dem Handy war die
   Seite damit ausschliesslich per Scrollen navigierbar. */
.navtoggle {
  display: none;
  margin-left: auto;
  /* [FIX] Ohne feste Flex-Basis wurde der Button im engen Kopfbalken auf 22px
     zusammengedrueckt und war auf 320-px-Geraeten nicht mehr bedienbar. */
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #d2a95655;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.navtoggle span {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--gold2);
  transition: transform .22s ease, opacity .22s ease;
}
.navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg) }
.navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0 }
.navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg) }

/* Vollflaechiges Overlay unter dem Kopfbalken. dvh statt vh, damit die
   ein- und ausfahrende Adressleiste auf iOS die Hoehe nicht verfaelscht. */
.mobilenav {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid rgba(210, 169, 86, .18);
  background: linear-gradient(180deg, rgba(2, 7, 12, .99), rgba(4, 14, 26, .99));
  backdrop-filter: blur(18px);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .26s ease, transform .26s ease;
}
.mobilenav.offen { opacity: 1; transform: none }
.mobilenav[hidden] { display: none }

.mobilenav .wrap {
  counter-reset: menue;
  padding-top: 10px;
  padding-bottom: calc(32px + env(safe-area-inset-bottom));
}

.mobilenav a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 17px 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .15em;
  border-bottom: 1px solid #ffffff10;
  /* Eintraege blenden gestaffelt ein, sobald .offen gesetzt ist */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease, color .2s ease;
}
/* Durchnummeriert wie die Loesungskarten (01, 02, ...) */
.mobilenav a::before {
  counter-increment: menue;
  content: counter(menue, decimal-leading-zero);
  flex: 0 0 auto;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: .18em;
}
.mobilenav a:hover,
.mobilenav a:focus-visible { color: var(--gold2) }
.mobilenav.offen a { opacity: 1; transform: none }
.mobilenav.offen a:nth-child(1) { transition-delay: .03s }
.mobilenav.offen a:nth-child(2) { transition-delay: .06s }
.mobilenav.offen a:nth-child(3) { transition-delay: .09s }
.mobilenav.offen a:nth-child(4) { transition-delay: .12s }
.mobilenav.offen a:nth-child(5) { transition-delay: .15s }
.mobilenav.offen a:nth-child(6) { transition-delay: .18s }
.mobilenav.offen a:nth-child(7) { transition-delay: .21s }

/* Sprachwahl im Menue (ab hier auch auf Tablets, siehe Breakpoints) */
.mobilenav .langs {
  display: none;
  flex-wrap: wrap;
  border-left: 0;
  border-top: 0;
  padding-left: 0;
  padding-top: 26px;
  gap: 10px;
  opacity: 0;
  transition: opacity .3s ease .24s;
}
.mobilenav.offen .langs { opacity: 1 }
.mobilenav .lang {
  min-width: 54px;
  min-height: 44px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .09em;
}

/* Solange das Menue offen ist, soll die Seite dahinter nicht mitscrollen */
body.menue-offen { overflow: hidden }

/* Aktueller Abschnitt — wird per IntersectionObserver gesetzt */
.navlinks a[aria-current="true"],
.mobilenav a[aria-current="true"] { color: var(--gold2) }
.mobilenav a[aria-current="true"]::before { color: var(--gold2) }

/* ------------------------------------------------------------------ Hero */

.hero {
  min-height: 760px;
  display: flex;
  align-items: center;
  position: relative;
  padding-top: var(--header-h);
  background: var(--black);
  overflow: hidden;
  isolation: isolate;
}

/* [FIX] Das Hintergrundbild ist jetzt ein echtes <picture> statt eines
   CSS-Backgrounds: es ist das LCP-Element, wird dadurch frueher gefunden
   (fetchpriority) und kann pro Viewport in der passenden Groesse und im
   passenden Format (AVIF/WebP/JPEG) geladen werden. Optisch identisch. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Hintergrundvideo: gleiche Ebene wie das Standbild, im Quelltext danach und
   damit darueber gemalt. Es startet unsichtbar und blendet erst ein, wenn es
   tatsaechlich spielt — bis dahin sieht man das Foto, und es gibt nie einen
   schwarzen Kasten oder ein eingefrorenes erstes Bild. */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
  pointer-events: none;
}
.hero-video.laeuft { opacity: 1 }
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none }
}
@media print {
  .hero-video { display: none }
}

/* Deckkraft des Verlaufs als animierbare Zahlen. Ein Farbverlauf selbst laesst
   sich nicht per transition ueberblenden, registrierte Eigenschaften schon.
   Browser ohne @property schalten die Werte einfach um, ohne Uebergang. */
@property --deckung-links { syntax: '<number>'; inherits: false; initial-value: .98; }
@property --deckung-mitte { syntax: '<number>'; inherits: false; initial-value: .82; }
@property --deckung-rechts { syntax: '<number>'; inherits: false; initial-value: .28; }
@property --deckung-rand { syntax: '<number>'; inherits: false; initial-value: .42; }

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
      rgba(2, 8, 15, var(--deckung-links)) 0%,
      rgba(2, 8, 15, var(--deckung-mitte)) 37%,
      rgba(2, 8, 15, var(--deckung-rechts)) 68%,
      rgba(2, 8, 15, var(--deckung-rand)) 100%);
  transition: --deckung-links 1.6s ease, --deckung-mitte 1.6s ease,
              --deckung-rechts 1.6s ease, --deckung-rand 1.6s ease;
}

/* Spielt das Video, oeffnet sich der Verlauf. Mit dem Standbild war die
   starke Abdunklung richtig; ueber Bewegtbild erstickte sie jede Wirkung —
   rechts vom Text blieben 28 %, in der Mitte 82 % Schwarz uebrig. Links
   bleibt genug Deckung fuer die Headline, der Textschatten sichert helle
   Stellen im Video zusaetzlich ab. */
.hero.mit-video::before {
  --deckung-links: .9;
  --deckung-mitte: .58;
  --deckung-rechts: .08;
  --deckung-rand: .18;
}
/* Unterhalb der Desktop-Navigation laeuft der Text weiter nach rechts, auf dem
   Handy ueber die ganze Breite — also auch ueber den fast offenen Teil des
   Verlaufs. Ueber hellen Clips (Goldguss, Tageslicht) fiel die Headline dort
   auf 1,3:1. Die Werte sind mit _werkzeug/lesbarkeit.mjs nachgemessen. */
@media (max-width: 1159px) {
  .hero.mit-video::before {
    --deckung-mitte: .66;
    --deckung-rechts: .36;
    --deckung-rand: .4;
  }
}
@media (max-width: 640px) {
  .hero.mit-video::before {
    --deckung-mitte: .74;
    --deckung-rechts: .56;
    --deckung-rand: .56;
  }
}
.hero.mit-video h1,
.hero.mit-video .hero-content p,
.hero.mit-video .kicker {
  text-shadow: 0 2px 22px rgba(2, 8, 15, .6), 0 1px 3px rgba(2, 8, 15, .45);
}
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 170px;
  background: linear-gradient(transparent, var(--navy));
}
.hero > .wrap {
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.kicker {
  /* Gold wird rationiert: der Kicker laeuft in der gedeckten Textfarbe der
     jeweiligen Flaeche. Gold bleibt Ziffern, Haarlinien und dem
     Primaerbutton vorbehalten — sonst verliert es seine Wirkung. */
  color: var(--fg2);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  margin-bottom: 18px;
}

/* Fluide Skala statt fester Werte je Breakpoint. Die Eckwerte sind so
   gerechnet, dass die Versalhoehe von Cormorant der frueheren Georgia-Optik
   entspricht (Faktor 1,18). Dadurch entfallen alle Groessen-Ueberschreibungen
   in den Media Queries — vorher waren die Mobilwerte beim Schriftwechsel
   schlicht nicht mitskaliert worden. */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 {
  font-size: clamp(45px, 2.7vw + 35px, 78px);
  line-height: 1.06;
  letter-spacing: -.012em;
  max-width: 18ch;
  margin: 0 0 24px;
}
.hero p {
  font-family: var(--sans);
  font-size: clamp(17px, .35vw + 14px, 19px);
  line-height: 1.6;
  /* Zeilenbreite in ch statt px: dann bricht Deutsch und Russisch bei derselben
     Zeichenzahl wie Englisch, nicht bei derselben Pixelbreite. */
  max-width: 54ch;
  color: #e8e4dc;
}

.actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap }
.btn {
  display: inline-block;
  border: 1px solid var(--gold);
  padding: 15px 24px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  /* [FIX] transform:hover ohne transition sprang hart */
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn.primary {
  background: linear-gradient(135deg, #b98b3d, #f0d48a);
  color: #06111f;
  border: none;
}

/* -------------------------------------------------------------- Sections */

section { padding: var(--s-section) 0 }
/* [FIX] Ankersprung landete unter dem 92 px hohen fixierten Header —
   die Ueberschrift des Zielabschnitts war jedes Mal verdeckt. */
section[id] { scroll-margin-top: calc(var(--header-h) + 12px) }

/* Jede Flaeche traegt ihre eigenen Farbwerte. Wer einen neuen Baustein baut,
   benutzt var(--fg), var(--fg2), var(--rule), var(--akzent) — und er stimmt
   auf heller wie auf dunkler Flaeche, ohne Sonderregel. */
.ink {
  background: var(--navy);
  --fg: #eef1f5; --fg2: #a7b2be;
  --rule: rgba(240, 212, 138, .22); --rule2: rgba(240, 212, 138, .45);
  --akzent: var(--gold2); --akzent-linie: var(--gold);
}
.ink-2 {
  background: var(--navy2);
  --fg: #eef1f5; --fg2: #a7b2be;
  --rule: rgba(240, 212, 138, .24); --rule2: rgba(240, 212, 138, .48);
  --akzent: var(--gold2); --akzent-linie: var(--gold);
}
.paper {
  background: var(--cream);
  --fg: #141d28; --fg2: #3a4653;
  --rule: rgba(6, 17, 31, .16); --rule2: rgba(6, 17, 31, .34);
  --akzent: var(--gold-on-cream); --akzent-linie: var(--gold-on-cream);
}
section { color: var(--fg) }

/* Naht zwischen zwei aehnlich hellen Abschnitten — sonst zerlaeuft die
   dunkle Seitenmitte zu einer einzigen Flaeche ohne Gliederung. */
section + section { position: relative }
.ink + .ink-2::before,
.ink-2 + .ink::before,
.ink + .ink::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule) 18%,
              var(--rule2) 50%, var(--rule) 82%, transparent);
}

h2 {
  font-size: clamp(34px, 1.78vw + 27.6px, 56px);
  line-height: 1.12;
  letter-spacing: -.008em;
  max-width: 26ch;
  margin: 10px 0 26px;
}
.lead { font-size: 17px; line-height: 1.72; max-width: 64ch; color: var(--fg) }

/* minmax(0,1fr) statt 1fr: ohne das sprengt ein langes russisches
   Kompositum die Spalte, weil Grid sonst die Mindestinhaltsbreite erzwingt. */
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(24px, 2.6vw, 32px);
  row-gap: var(--s8);
  margin-top: var(--s12);
}
.card {
  padding: 30px 0 0;
  border: 0;
  border-top: 1px solid var(--rule);
  background: none;
}
.num { color: var(--akzent); font-size: 11px; font-weight: 600; letter-spacing: .18em }
.card h3 { font-size: clamp(24px, .48vw + 22px, 30px); line-height: 1.2; letter-spacing: -.004em; margin: 12px 0 10px }
.card p { color: var(--fg2); font-size: 15px; line-height: 1.68; max-width: 44ch }

/* Inhaltsbilder (erzeugt von _werkzeug/inhaltsbilder.mjs). Das Seitenverhaeltnis
   steht im CSS und die Pixelmasse im <img>: der Platz ist reserviert, bevor das
   Bild geladen ist — nichts springt beim Scrollen. Der Navy-Grund fuellt die
   Flaeche, solange das Bild noch unterwegs ist. */
.karte-bild, .abschnitt-bild {
  display: block;
  overflow: hidden;
  background: var(--navy2);
}
.karte-bild img, .abschnitt-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.karte-bild { aspect-ratio: 3 / 2; margin-bottom: 22px }
/* Mit Bild uebernimmt das Bild die Oberkante der Karte, die Haarlinie entfaellt */
.card:has(.karte-bild) { padding-top: 0; border-top: 0 }
.card .karte-bild img { transition: transform .7s ease }
.card:hover .karte-bild img { transform: scale(1.035) }
.abschnitt-bild { aspect-ratio: 4 / 3; margin-bottom: var(--s8) }
.abschnitt-bild.breit { aspect-ratio: 21 / 9; margin: var(--s12) 0 0 }
@media (max-width: 640px) {
  /* 21:9 wird auf dem Handy zum Streifen — dort ruhiger 16:9 */
  .abschnitt-bild.breit { aspect-ratio: 16 / 9 }
}
@media print {
  .karte-bild, .abschnitt-bild { display: none }
}

/* align-items:start statt center — sobald die Panels Inhalt tragen, muss
   oben ausgerichtet werden, sonst schwimmen die Spalten gegeneinander. */
.split { display: grid; gap: var(--s-split); align-items: start }
#about .split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) }
#finance .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) }
#banking .split { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) }

/* Traegt nur noch das Logo im Abschnitt About. Ohne feste Hoehe, ohne Rahmen,
   ohne den 340px-Dekokreis — stattdessen eine einzige Materialebene:
   Lichtkante oben, Navy-Schatten nach unten. Mehr Tiefe vertraegt ein
   Finanzauftritt nicht, ohne nach Handelsplattform auszusehen. */
.visual-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s16) var(--s8);
  background: linear-gradient(168deg, #0a1a2e, #04101c 62%, #020a12);
  border-top: 1px solid rgba(240, 212, 138, .18);
  box-shadow: 0 24px 60px -30px #01060c;
  overflow: hidden;
}
/* Das Flex-Element ist das <picture>, nicht das <img> — die Huelle nimmt die
   volle Breite ein, das Bild darin saesse sonst linksbuendig. Deshalb wird das
   Bild selbst zentriert, nicht der Container. */
.visual-panel picture { display: block; width: 100% }
.visual-panel img {
  display: block;
  margin-inline: auto;
  width: 74%;
  /* Die Vorlage ist jetzt 1536px breit, eine Deckelung gegen Hochrechnen ist
     nicht mehr noetig. 460px begrenzt die Marke nur optisch, damit sie die
     Flaeche nicht erschlaegt. */
  max-width: 520px;
  height: auto;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 20px 30px #0008);
}

/* --- Instrumententafel (#finance) und Verfahrensleiter (#banking) --------
   Ersetzen die beiden fruheren Deko-Kaesten. Beide bestehen nur aus
   Haarlinien, Ziffern und Text — Material, das in allen fuenf Sprachen
   identisch aussieht und in keiner Breite bricht. */

.register { border-top: 1px solid var(--rule2) }
.register-row {
  display: grid;
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
  column-gap: var(--s6);
  align-items: baseline;
  padding: var(--s4) 0 17px;
  border-bottom: 1px solid var(--rule);
}
.register-code {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--akzent);
}
.register-note { font-size: 15px; line-height: 1.6; color: var(--fg2) }

.leiter {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule2);
  position: relative;
}
/* Senkrechte Verbindungslinie durch die Ziffernspalte */
.leiter::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: var(--rule);
}
.leiter-schritt {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 20px;
  align-items: baseline;
  padding: var(--s4) 0 18px;
  border-bottom: 1px solid var(--rule);
}
.leiter-nr {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: .18em;
  color: var(--akzent);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .register-row { grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding: 14px 0 }
  .leiter-schritt { grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; padding: 14px 0 }
}
.leiter-titel { font-family: var(--serif); font-size: clamp(18px, .3vw + 16.4px, 21px); line-height: 1.35 }

.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(24px, 2.6vw, 32px);
  row-gap: var(--s8);
  margin-top: var(--s16);
}
.trio .item { border-top: 1px solid var(--rule2); padding-top: var(--s6) }
.trio p { max-width: 36ch; color: var(--fg2) }
.trio h3 { font-size: clamp(25px, .56vw + 23px, 32px); line-height: 1.18; margin: 0 0 12px }

.contactbox {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--s-split);
}
.contact-details {
  /* Oberlinie statt Seitenlinie: der Block steht damit im selben Raster wie
     Instrumententafel, Verfahrensleiter und Loesungsverzeichnis. */
  border-top: 1px solid var(--rule);
  padding: var(--s6) 0 0;
  /* <address> stellen Browser per Voreinstellung kursiv dar */
  font-style: normal;
  font-size: 15px;
  line-height: 1.9;
  font-variant-numeric: tabular-nums;
}
.kontakt-zeile {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: var(--s4);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--rule);
}
.kontakt-marke {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--track-label);
  color: var(--akzent);
}
.kontakt-wert strong {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--gold2);
  display: block;
  margin-bottom: var(--s2);
}
/* [FIX] Die Links waren nur an der Farbe erkennbar (WCAG 1.4.1 "Use of Color").
   Eine dezente Unterstreichung mit Abstand stoert die Optik nicht. */
.contact-details a {
  color: var(--gold2);
  text-decoration: underline;
  text-decoration-color: #d2a95677;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.contact-details a:hover { text-decoration-color: var(--gold2) }
/* [FIX] E-Mail/Telefon sind lange, zusammenhaengende Zeichenketten und liefen
   auf schmalen Displays aus der Spalte heraus. */
.contact-details a { overflow-wrap: anywhere }

/* Der Haftungshinweis lief im Original ueber beide Spalten (inline-style) */
.contactbox .disclaimer { grid-column: 1 / -1 }

/* War ein grauer 11px-Block ganz unten. Jetzt eigene Oberlinie, ein Gedanken-
   strich als Einleitung und lesbare 12px/1,75 — der Hinweis ist die
   wichtigste Aussage der Seite und darf nicht wie Kleingedrucktes wirken. */
.disclaimer {
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: .005em;
  color: #929eab;
  max-width: 92ch;
  border-top: 1px solid var(--rule);
  padding-top: var(--s4);
  margin-top: var(--s22);
}
.disclaimer::before {
  content: "\2014";
  display: block;
  margin-bottom: 10px;
  color: var(--akzent);
}

footer {
  background: var(--tief);
  border-top: 1px solid rgba(240, 212, 138, .18);
  padding: var(--s6) 0;
  color: #929eab;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .09em;
  font-variant-numeric: tabular-nums;
  /* [FIX] Home-Indicator-Bereich auf dem iPhone */
  padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom));
}
.footerrow {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------- Breakpoints */

/* [FIX] Umschaltpunkt von 950 auf 1119px angehoben. Gemessen: die Desktop-
   Navigation passt erst ab 1150px clientWidth in ALLEN Sprachen (Russisch
   braucht am meisten Platz, die Wortmarke belegt 201px) — darunter
   wurde der letzte Sprachbutton (ES) aus dem sichtbaren Bereich geschoben und
   war wegen position:fixed auch nicht erscrollbar. Russisch braucht am meisten
   Platz. Unterhalb greift jetzt das vollwertige Overlay-Menue. */
@media (max-width: 1159px) {
  :root { --header-h: 52px }
  .navlinks { display: none }
  .navtoggle { display: flex }
  .mobilenav { display: block }
  nav { height: var(--header-h) }
  /* [FIX] Die Sprachwahl zieht ins Menue. Im Kopfbalken bleiben Marke und
     Menue-Button — das war vorher schon ab 560px zu eng, und im Menue haben
     die Schaltflaechen bequeme 54x44px statt 24x22px. */
  nav .langs { display: none }
  .mobilenav .langs { display: flex }
  .brand span { font-size: 18px; letter-spacing: .15em }
  .hero { min-height: 690px; padding-top: var(--header-h) }
  /* Die Selektoren muessen die ID-Regeln aus dem Grundteil (#about .split usw.)
     ueberbieten — eine ID wiegt immer schwerer als eine Klasse, sonst bliebe
     das Zweispalten-Raster auch auf dem Handy stehen. */
  #about .split, #finance .split, #banking .split,
  .split, .contactbox { grid-template-columns: minmax(0, 1fr) }
  /* In #banking steht die Verfahrensleiter (mit Bild) am Desktop links vom Text.
     Einspaltig kaeme sie deshalb VOR Kicker und Ueberschrift — auf dem Handy
     laese man drei Schritte, bevor klar ist, worum es geht. */
  #banking .split > :first-child { order: 2 }
  /* [FIX] Das Original sprang von drei Spalten direkt auf eine. Auf Tablets
     entstanden dadurch neun untereinander gestapelte Karten mit sehr viel
     Leerraum daneben. Zwei Spalten sind hier die passende Zwischenstufe. */
  .grid, .trio { grid-template-columns: repeat(2, minmax(0, 1fr)) }
    .contact-details { margin-top: var(--s8) }
  .disclaimer { margin-top: var(--s16) }
}

@media (max-width: 640px) {
  /* Auf dem Handy steht das Logo allein auf der Flaeche — dann darf es sie
     auch tragen. Vorher blieb rundherum mehr Leerraum als Motiv. */
  .visual-panel { padding: var(--s8) var(--s4) }
  .visual-panel img { width: 88%; max-width: none }
}

@media (max-width: 560px) {
  .wrap {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
  /* Ab hier ist auch fuer zwei Spalten kein Platz mehr */
  .grid, .trio { grid-template-columns: minmax(0, 1fr) }

  .brand span { font-size: 17px; letter-spacing: .14em }
  .brand { gap: 9px }
  .hero { min-height: 620px }
  /* Karten haben keinen Hintergrund mehr — ein seitliches Polster ruckte Bild und
     Text nur gegenueber der Abschnittsueberschrift ein. Buendig wie am Desktop. */
  .card { padding: 24px 0 0 }
  .footerrow { gap: 10px }
}

/* [FIX] Querformat auf dem Handy: der Hero hatte eine feste Mindesthoehe von
   690px. Bei 390px Viewporthoehe endeten die beiden Schaltflaechen bei y=498,
   also weit unter der Falz — sichtbar war nur eine dunkle Bildflaeche. Hier
   richtet sich die Hoehe nach dem Viewport statt nach einer festen Zahl. */
@media (orientation: landscape) and (max-height: 520px) {
  .hero {
    min-height: 0;
    padding-top: calc(var(--header-h) + 28px);
    padding-bottom: 36px;
  }
  .hero::after { height: 90px }
  h1 { font-size: 34px }
  .hero p { font-size: 16px }
  .actions { margin-top: 22px }
  .mobilenav .wrap { padding-bottom: 20px }
}

/* --------------------------------------------------------- Sprachstufen

   Deutsch und Russisch brauchen mehr Platz pro Wort, Chinesisch fuellt die
   Geviertbox aus und wirkt bei gleicher Punktzahl rund ein Fuenftel groesser.
   Ohne diese Stufen bricht die Ueberschrift im Deutschen dreizeilig und die
   chinesische wirkt erschlagend. */

html:lang(de) h1, html:lang(ru) h1 { font-size: clamp(40px, 2.35vw + 31.5px, 68px) }
html:lang(de) h2, html:lang(ru) h2 { font-size: clamp(31px, 1.45vw + 25.8px, 48px); max-width: 28ch }
html:lang(de) h1,
html:lang(de) h2,
html:lang(ru) h2 { hyphens: auto; -webkit-hyphens: auto }
html:lang(de) .card h3, html:lang(ru) .card h3 { font-size: clamp(22px, .4vw + 20.6px, 26px) }
html:lang(de) .navlinks, html:lang(ru) .navlinks { gap: 18px }

html:lang(zh) h1 { font-size: clamp(38px, 2.1vw + 30.4px, 60px); line-height: 1.28; letter-spacing: 0 }
html:lang(zh) h2 { font-size: clamp(30px, 1.35vw + 25.1px, 42px); line-height: 1.38; letter-spacing: 0 }
html:lang(zh) .card h3,
html:lang(zh) .trio h3 { font-size: 24px; letter-spacing: 0 }
html:lang(zh) .lead,
html:lang(zh) .card p {
  line-height: 1.9;
  max-width: 40ch;
  text-align: justify;
  text-justify: inter-ideograph;
}

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

   Vier Muster, alle unter 600ms, keines dekorativ um seiner selbst willen.
   Alles ueber scrollgesteuerte Animationen: kein JavaScript, und wo der
   Browser sie nicht kennt, passiert einfach nichts — es kann nichts
   unsichtbar bleiben. */

@keyframes einblenden {
  from { opacity: 0; transform: translateY(14px) }
  to { opacity: 1; transform: none }
}
@keyframes fortschritt {
  from { transform: scaleX(0) }
  to { transform: scaleX(1) }
}
/* Der Kopfbalken traegt einen Farbverlauf als Hintergrund — eine animierte
   background-color laege dahinter und waere unsichtbar. Deshalb wandern nur
   Trennlinie und Schatten: oben auf dem Hero liegt der Balken flach auf, beim
   Scrollen hebt er sich sichtbar vom Inhalt ab. */
@keyframes kopf-verdichten {
  from { border-bottom-color: rgba(210, 169, 86, .10); box-shadow: 0 0 0 rgba(1, 6, 12, 0) }
  to { border-bottom-color: rgba(210, 169, 86, .32); box-shadow: 0 10px 30px -18px rgba(1, 6, 12, .9) }
}

/* Lesefortschritt: 1px Goldlinie an der Unterkante des Kopfbalkens. */
.fortschritt {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: einblenden linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
  }
  @supports (animation-timeline: scroll()) {
    .fortschritt {
      animation: fortschritt linear both;
      animation-timeline: scroll(root block);
    }
    header {
      animation: kopf-verdichten linear both;
      animation-timeline: scroll(root block);
      /* Der Wechsel ist nach 140px Scrollweg abgeschlossen. Die HOEHE bleibt
         konstant — an --header-h haengen Ankerziele, Hero-Polsterung und die
         Hoehe des Menue-Overlays; eine animierte Hoehe wuerde sie wandern
         lassen. */
      animation-range: 0 140px;
    }
  }
}

/* Zustaende statt Sprung: der fruehere translateY beim Ueberfahren war die
   unruhigste Bewegung der Seite. Jetzt wechselt die Flaeche, und das
   Herunterdruecken quittiert der Button mit einem Innenschatten. */
.btn { transition: background-color .18s ease, border-color .18s ease, color .18s ease }
.btn:not(.primary):hover { background: rgba(240, 212, 138, .08); border-color: var(--gold2) }
.btn.primary:hover { filter: brightness(1.06) }
.btn:active { box-shadow: inset 0 2px 8px rgba(2, 7, 12, .35) }

.card, .register-row, .leiter-schritt, .trio .item { transition: border-color .18s ease }
.card:hover, .register-row:hover, .leiter-schritt:hover { border-color: var(--rule2) }

/* [NEU] Nutzer mit reduzierter Bewegung: kein Smooth-Scroll, keine Transforms */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* Sicherheitsnetz: die Einblend-Animation laeuft in diesem Zweig gar nicht
     erst an (siehe no-preference oben) — falls doch, endet sie sichtbar. */
  .reveal { opacity: 1 !important; transform: none !important }
  .fortschritt { display: none }
}

/* [NEU] Druckausgabe: dunkle Flaechen kosten Toner und drucken schlecht */
@media print {
  header, .navtoggle, .mobilenav, .langs, .hero-bg, .actions { display: none !important }
  .register-row, .leiter-schritt, .card, .trio .item { break-inside: avoid }
  body { background: white; color: black }
  .ink, .ink-2, .paper, .hero { background: white !important; color: black !important }
  .lead, .card p, .disclaimer, footer { color: #333 !important }
  .hero { min-height: auto; padding-top: 0 }
  .hero::before, .hero::after { display: none }
  a { color: black }
  .card, .visual-panel { border-color: #999 }
}