/* ─── tokens — VTC-leaned: sans-serif, white, single brand blue ───── */
    :root {
      --bg:      #ffffff;
      --band:    #f4f5f6;   /* lighter than v1's #e8e8e8 — VTC airiness */
      --band-2:  #e8e8e8;   /* briefed grey, used sparingly */
      --fg:      #1c1f24;   /* near-black text */
      --muted:   #62676f;
      --border:  #e2e4e7;
      --accent:  #156082;   /* briefed blue — one accent */
      --logo:    #4f586f;   /* briefed logo colour */

      --font-sans: 'Helvetica Neue', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
      --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

      --container: 1140px;
      --gutter: 40px;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    body {
      margin: 0; background: var(--bg); color: var(--fg);
      font-family: var(--font-sans);
      font-size: 16px; line-height: 1.65; font-weight: 400;
      -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    p { text-wrap: pretty; margin: 0; }
    h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: 600; letter-spacing: -0.01em; }

    .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
    .section { padding-block: clamp(64px, 9vw, 120px); }
    .band { background: var(--band); }
    .lead { font-size: clamp(19px, 2.2vw, 26px); line-height: 1.5; font-weight: 400; color: var(--fg); max-width: 30ch; }

    .eyebrow {
      font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--accent); font-weight: 600;
      margin-bottom: 28px; display: block;
    }
    .eyebrow::before { content: '→  '; }

    /* ─── top-center nav (VTC signature) ──────────────────────────────── */
    .topnav { border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20;
      background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); }
    .topnav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-block: 22px; }
    /* Wordmark per brand spec: Times New Roman, not bold, lowercase "i", 2pt tracking, #4F586F */
    .logo { font-family: 'Times New Roman', Times, serif; font-size: 24px; font-weight: 400; letter-spacing: 2pt; color: var(--logo); }
    .logo b, .logo span { font-weight: 400; }
    .topnav nav { display: flex; gap: 38px; justify-self: center; }
    .topnav nav a { font-size: 14px; color: var(--muted); letter-spacing: 0.02em; padding-bottom: 2px; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
    .topnav nav a:hover { color: var(--accent); border-color: var(--accent); }
    .topnav .nav-cta { justify-self: end; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg); border-bottom: 1px solid var(--fg); padding-bottom: 2px; }
    .topnav .nav-cta:hover { color: var(--accent); border-color: var(--accent); }
    @media (max-width: 820px) { .topnav-inner { grid-template-columns: 1fr auto; } .topnav nav, .topnav .nav-cta { display: none; } }

    /* ─── hero ────────────────────────────────────────────────────────── */
    /* hero — architectural photo background with legibility gradient, text reversed to white */
    .hero {
      padding-block: clamp(120px, 19vw, 230px);
      position: relative; overflow: hidden;
      color: #fff;
      background:
        linear-gradient(95deg, rgba(8,10,14,.94) 0%, rgba(8,10,14,.80) 40%, rgba(8,10,14,.42) 72%, rgba(8,10,14,.30) 100%),
        #0b0d10 url('../img/hero.jpg') center/cover no-repeat;
    }
    .hero .container { position: relative; z-index: 1; }
    .hero .kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
      color: #fff; display: inline-flex; align-items: center; gap: 12px; margin-bottom: 32px; opacity: .85; }
    .hero .kicker::before { content: ''; width: 28px; height: 1px; background: #fff; }
    .hero h1 {
      font-size: clamp(34px, 5vw, 60px); line-height: 1.12; font-weight: 600; letter-spacing: -0.02em;
      max-width: 18ch; margin-bottom: 36px; color: #fff;
    }
    .hero .sub { font-size: clamp(17px, 2vw, 21px); line-height: 1.6; color: rgba(255,255,255,.82); max-width: 58ch; font-weight: 400; }
    .hero .rule { width: 56px; height: 2px; background: var(--accent); margin-top: 48px; }

    /* ─── section index system (structural ornament, no added copy) ───── */
    .split { position: relative; }
    /* ghost numeral is anchored to the heading block, so it sits at the
       block's top-left in every section — same internal alignment whether
       the block is in the left column, the right column, or stacked on top.
       Offset is the original: lifted above the heading and pushed out to the
       left so it reads as a large faint chapter mark behind the title. */
    .sec-ghost {
      position: absolute; top: calc(clamp(-90px, -7vw, -48px) - 29px); left: clamp(-32px, -2.4vw, -18px); z-index: -1;
      font-family: var(--font-mono); font-weight: 400; line-height: 1;
      font-size: clamp(110px, 15vw, 200px);
      color: color-mix(in srgb, var(--accent) 6%, transparent);
      pointer-events: none; user-select: none; letter-spacing: -0.04em;
    }
    .sec-label { position: relative; z-index: 1; }
    .sec-no {
      display: block; font-family: var(--font-mono); font-size: 12px;
      letter-spacing: 0.16em; color: var(--accent); margin-bottom: 10px;
    }

    /* ─── content row: label left, prose right (VTC editorial calm) ───── */
    .split { display: grid; grid-template-columns: 1fr 1.7fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
    @media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: 28px; } }
    .split h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.18; }
    /* 02 mirrored: prose left (wide), heading right (narrow) — same boundaries, just swapped */
    .split--mirror { grid-template-columns: 1.7fr 1fr; }
    .split--mirror .prose { order: 1; }
    .split--mirror .sec-label { order: 2; }
    @media (max-width: 880px) {
      .split--mirror { grid-template-columns: 1fr; }
      .split--mirror .prose, .split--mirror .sec-label { order: initial; }
    }
    /* 03 stacked: heading on top, cards full width below */
    .split--stack { display: block; }
    .split--stack .sec-label { margin-bottom: clamp(40px, 5vw, 64px); max-width: 64ch; }
    .prose p + p { margin-top: 20px; }
    .prose { font-size: 17px; line-height: 1.75; color: var(--fg); max-width: 60ch; }
    .prose .muted { color: var(--muted); }

    /* ─── investment focus / situations ──────────────────────────────── */
    .pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
    .pill { border: 1px solid var(--border); border-radius: 2px; padding: 9px 16px; font-size: 14px; color: var(--fg); background: var(--bg); }
    .focus { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 40px; border-top: 1px solid var(--border); }
    @media (max-width: 560px) { .focus { grid-template-columns: 1fr; } }
    .focus div { padding: 22px 0; border-bottom: 1px solid var(--border); }
    .focus .k { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: 0.08em; }
    .focus .v { font-size: 19px; font-weight: 600; margin-top: 6px; }

    /* ─── partners ────────────────────────────────────────────────────── */
    .partner-head { position: relative; }
    .partner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); position: relative; z-index: 1; }
    @media (max-width: 880px) { .partner-grid { grid-template-columns: 1fr; gap: 56px; } }
    .partner { padding-top: 26px; border-top: 1px solid var(--border); min-width: 0; }
    .portrait {
      width: 100%; min-width: 0; height: auto; aspect-ratio: 4 / 5;
      object-fit: cover; object-position: center top;
      background: var(--band-2); margin-bottom: 26px;
    }
    .partner h3 { font-size: 24px; font-weight: 600; }
    .partner .role { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-top: 6px; margin-bottom: 22px; }
    .partner p { font-size: 15px; line-height: 1.7; color: var(--fg); max-width: 48ch; }
    .partner .focus-line { margin-top: 16px; font-size: 14.5px; line-height: 1.7; color: var(--muted); }
    .partner .focus-line b { color: var(--fg); font-weight: 600; }

    /* ─── kontakt / contact form ──────────────────────────────────────── */
    .contact .sec-label .lead-sub { color: var(--muted); font-size: 16px; line-height: 1.7; margin-top: 18px; max-width: 36ch; }
    .contact .contact-meta { margin-top: 32px; font-size: 14px; line-height: 1.95; color: var(--muted); }
    .contact .contact-meta a { color: var(--accent); display: inline; }
    .contact .form-wrap { max-width: none; }
    .form { display: grid; gap: 20px; }
    .form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    @media (max-width: 540px) { .form .row-2 { grid-template-columns: 1fr; } }
    .field { display: flex; flex-direction: column; gap: 8px; }
    .field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
    .field label .req, .consent .req { color: var(--accent); }
    .field input, .field textarea {
      font-family: var(--font-sans); font-size: 15px; color: var(--fg);
      background: var(--bg); border: 1px solid var(--border); border-radius: 2px;
      padding: 13px 14px; transition: border-color .15s; width: 100%;
    }
    .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
    .field textarea { resize: vertical; min-height: 132px; }
    .field .err { font-size: 12px; color: #c0392b; display: none; }
    .field.invalid input, .field.invalid textarea { border-color: #c0392b; }
    .field.invalid .err { display: block; }
    .consent { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.55; cursor: pointer; }
    .consent input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--accent); cursor: pointer; }
    .consent a { color: var(--accent); display: inline; }
    .consent.invalid { color: #c0392b; }
    .btn-submit {
      justify-self: start; font-family: var(--font-sans); font-size: 14px; letter-spacing: 0.04em; font-weight: 500;
      color: #fff; background: var(--accent); border: 1px solid var(--accent); border-radius: 2px;
      padding: 14px 34px; cursor: pointer; transition: background .15s, border-color .15s; margin-top: 4px;
    }
    .btn-submit:hover { background: #114e6a; border-color: #114e6a; }
    .form-success {
      display: none; padding: 26px 28px; border: 1px solid var(--accent);
      background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 2px;
      font-size: 15px; line-height: 1.65; color: var(--fg);
    }
    .form-success.show { display: block; }
    .form.hidden { display: none; }

    /* ─── footer / kontakt / impressum — Grundfarbe weiß (per Struktur) ── */
    .pagefoot { background: var(--bg); color: var(--fg); border-top: 1px solid var(--border); }
    .pagefoot .section { padding-block: 72px; }
    .foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 56px 96px; align-items: start; }
    .foot-grid > div { flex: 0 1 auto; }
    .foot-grid > div:first-child { max-width: 34ch; }
    .foot-grid > div:last-child { text-align: right; }
    @media (max-width: 520px) { .foot-grid > div:last-child { text-align: left; } }
    @media (max-width: 520px) { .foot-grid { gap: 32px; } }
    .pagefoot .logo { color: var(--logo); font-size: 24px; }
    .pagefoot h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; font-weight: 600; }
    .pagefoot p, .pagefoot a { font-size: 14px; line-height: 1.8; color: var(--fg); }
    .pagefoot a { display: block; color: var(--muted); }
    .pagefoot a:hover { color: var(--accent); }
    .pagefoot .muted-line { color: var(--muted); }
    .foot-bottom { border-top: 1px solid var(--border); margin-top: 56px; padding-top: 28px; font-size: 12.5px; color: var(--muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
    .foot-legal { margin-top: 40px; font-size: 12.5px; line-height: 1.8; color: var(--muted); max-width: 100%; }
    .foot-legal h4 { color: var(--accent); }
    .foot-legal p { font-size: 12.5px; color: var(--muted); max-width: 78ch; }

/* ─── contact form runtime states (set by contact-form.js) ─────────── */
.form-error {
  display: none; margin-top: 16px; padding: 14px 16px; border-radius: 2px;
  border: 1px solid #c0392b; background: color-mix(in srgb, #c0392b 6%, transparent);
  color: #c0392b; font-size: 14px; line-height: 1.6;
}
.form-error.show { display: block; }
.btn-submit[disabled] { opacity: .6; cursor: default; }
/* honeypot — visually hidden, off-screen, not display:none (bots skip display:none) */
.cf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { margin-top: 4px; }

/* ═══ Legal pages (Impressum, Datenschutz) ═══════════════════════════
   Scoped to body.legal so these rules never affect the homepage. They
   carry over the original per-page styles and override the few homepage
   rules that would otherwise leak in (footer grid, eyebrow spacing). */
.legal .doc { padding-block: clamp(56px, 9vw, 104px); }
.legal .doc .container { max-width: 820px; }
.legal .eyebrow { margin-bottom: 20px; }
.legal h1 { font-size: clamp(32px, 4.5vw, 46px); line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 28px; }
.legal .rule { width: 56px; height: 2px; background: var(--accent); margin: 0 0 48px; }
.legal .doc h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 44px 0 12px; }
.legal .block { max-width: 62ch; }
.legal .block p { margin: 0 0 4px; }
.legal .block p.gap { margin-bottom: 18px; }
.legal .meta { font-family: var(--font-mono); font-size: 14px; color: var(--fg); }
/* legal footer is a 3-column grid (homepage footer is a flex row) */
.legal .foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 48px; }
.legal .foot-grid > div:first-child { max-width: none; }
.legal .foot-grid > div:last-child { text-align: left; }
@media (max-width: 820px) { .legal .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .legal .foot-grid { grid-template-columns: 1fr; gap: 32px; } }