/* 032 Ventures GmbH — finales Stylesheet (Variante E: Blau mit Verläufen)
   Vollflächig Blau, Lime-Akzent, freier Fluss. Header/Footer weiß.
   Leseanimation: wortweises Aufdecken gekoppelt an den Scroll-Fortschritt. */

:root {
  --blue: #2730cf;
  --blue-deep: #181f8f;
  --blue-light: #3b46e6;
  --lime: #a3e635;
  --lime-bright: #bef264;
  --ink: #0c1f3d;
  --rule: #0c1f3d;
  --on-blue: #ffffff;
  --on-blue-mut: rgba(255,255,255,0.66);
  --line-blue: rgba(255,255,255,0.22);
  --max: 1180px;
  --pad: clamp(20px, 5vw, 56px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
  background: #fff; color: var(--on-blue);
  line-height: 1.55; font-size: 17px; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
.container { max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* ---------- Header (transparent auf Blau, dünne Linie, bündig links) ---------- */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 60; background: transparent; border-bottom: 1px solid rgba(255,255,255,0.18); }
.site-header .container { max-width: none; display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { font-weight: 700; font-size: 19px; color: #fff; display: inline-flex; align-items: center; gap: 9px; }
.brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lime-bright); box-shadow: 0 0 0 4px rgba(190,242,100,0.22); }
.brand span { color: rgba(255,255,255,0.6); font-weight: 400; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { font-size: 15px; color: rgba(255,255,255,0.72); position: relative; padding: 4px 0; transition: color .2s ease; }
.nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--lime-bright); transition: width .28s ease; }
.nav a:hover { color: #fff; }
.nav a:hover::after { width: 100%; }
.lang { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: rgba(255,255,255,0.6); }
.lang button { background: none; border: none; padding: 2px 4px; font: inherit; color: rgba(255,255,255,0.6); cursor: pointer; transition: color .2s ease; }
.lang button.active { color: #fff; font-weight: 600; }
.lang .sep { opacity: 0.4; }

/* ---------- Main / Hintergrund (Verläufe) ---------- */
.site-main {
  position: relative;
  background:
    radial-gradient(120% 90% at 82% -5%, var(--blue-light) 0%, transparent 55%),
    radial-gradient(120% 100% at -10% 110%, var(--blue-deep) 0%, transparent 55%),
    var(--blue);
}
.bgfx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; filter: blur(70px); }
.bgfx span { position: absolute; display: block; border-radius: 50%; opacity: 0.55; }
.bgfx .g1 { width: 46vw; height: 46vw; left: -8vw; top: 8vw; background: radial-gradient(circle, rgba(163,230,53,0.35), transparent 65%); animation: float1 24s ease-in-out infinite alternate; }
.bgfx .g2 { width: 50vw; height: 50vw; right: -10vw; top: 40vw; background: radial-gradient(circle, rgba(59,70,230,0.6), transparent 62%); animation: float2 30s ease-in-out infinite alternate; }
.bgfx .g3 { width: 40vw; height: 40vw; left: 25vw; bottom: -10vw; background: radial-gradient(circle, rgba(190,242,100,0.18), transparent 60%); animation: float3 28s ease-in-out infinite alternate; }
@keyframes float1 { to { transform: translate(8vw, 6vw) scale(1.15); } }
@keyframes float2 { to { transform: translate(-7vw, -5vw) scale(1.12); } }
@keyframes float3 { to { transform: translate(6vw, -6vw) scale(1.18); } }
.site-main > section { position: relative; z-index: 1; }

/* ---------- Flow-Raster ---------- */
.flow { display: grid; grid-template-columns: repeat(12, 1fr); gap: 28px; align-items: center; padding: clamp(130px, 22vh, 300px) 0; }
.flow.tight { padding: clamp(110px, 17vh, 240px) 0; }
.place-left { grid-column: 1 / 8; }
.col-3-9 { grid-column: 3 / 10; }
.col-2-8 { grid-column: 2 / 8; }
.col-2-10 { grid-column: 2 / 11; }
.col-map { grid-column: 1 / -1; }
@media (max-width: 820px) {
  .flow { grid-template-columns: 1fr; gap: 22px; padding: 64px 0; }
  .place-left, .col-3-9, .col-2-8, .col-2-10, .col-map { grid-column: 1 / -1; }
}

/* ---------- HERO mit Scroll-Reveal ---------- */
.hero.text-reveal { position: relative; height: 240vh; }
.tr-sticky { position: sticky; top: 0; height: 100vh; }
.tr-sticky .container { max-width: none; position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(64px, 12vh, 130px); }
.hero-flow { position: relative; z-index: 2; padding: 0; width: 100%; }

/* weißer Kreis (Animations-Platzhalter), rechts angeschnitten */
.hero-circle {
  position: absolute; top: 50%; right: -14vw; transform: translateY(-50%);
  width: clamp(340px, 44vw, 620px); height: clamp(340px, 44vw, 620px);
  z-index: 1; pointer-events: none; border-radius: 50%; background: #fff;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.35);
}
.hero-circle::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 2px dashed rgba(163,230,53,0.7); animation: spin 60s linear infinite; }
.hero-circle::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: breathe 6s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.0); } 50% { box-shadow: 0 0 60px 10px rgba(255,255,255,0.18); } }

/* Wortweises Aufdecken */
.tr-words {
  display: flex; flex-wrap: wrap; margin: 0;
  font-size: clamp(21px, 2.7vw, 36px); line-height: 1.3; font-weight: 600; letter-spacing: -0.015em;
  max-width: 30ch; color: var(--on-blue);
}
.tr-words.sub {
  font-size: clamp(14px, 1.45vw, 18px); font-weight: 400; line-height: 1.6;
  letter-spacing: 0; max-width: 54ch; margin-top: clamp(18px, 2.6vh, 32px);
}
.tr-word { position: relative; display: inline-block; margin-right: 0.26em; }
.tr-word .tr-base { position: absolute; left: 0; top: 0; opacity: 0.2; color: var(--on-blue); }
.tr-word .tr-top { position: relative; opacity: 0; color: var(--on-blue); }

@media (max-width: 820px) {
  .hero.text-reveal { height: auto; }
  .tr-sticky { position: static; height: auto; }
  .tr-sticky .container { height: auto; display: block; padding-top: 80px; padding-bottom: 60px; }
  .hero-circle { position: relative; right: auto; top: auto; transform: none; margin: 0 auto 28px; width: 220px; height: 220px; }
  .tr-words, .tr-words.sub { max-width: none; }
  .tr-word .tr-top { opacity: 1; }
}

/* ---------- Labels / Text auf Blau ---------- */
.eyebrow { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lime-bright); font-weight: 600; margin: 0 0 18px; display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--lime-bright); display: inline-block; }
.read-small { font-size: clamp(16px, 1.9vw, 21px); color: var(--on-blue); font-weight: 400; max-width: 44ch; margin: 0; }
.map-text { max-width: 64ch; margin: clamp(30px, 4.5vh, 48px) auto 0; text-align: center; color: var(--on-blue); }

/* ---------- Weltkarte (grau, Länder eingefärbt) ---------- */
.worldmap { position: relative; width: 100%; }
.worldmap svg, .worldmap img { width: 100%; height: auto; display: block; }
/* Platzhalter-Look bis echte Karte da ist */
.worldmap.placeholder {
  aspect-ratio: 2 / 1;
  background: radial-gradient(circle, rgba(255,255,255,0.5) 1px, transparent 1.5px) 0 0 / 16px 16px;
  -webkit-mask-image: radial-gradient(ellipse 78% 74% at 50% 50%, #000 56%, transparent 100%);
          mask-image: radial-gradient(ellipse 78% 74% at 50% 50%, #000 56%, transparent 100%);
  opacity: 0.8;
}
.map-caption { margin-top: 14px; font-size: 13px; color: var(--on-blue-mut); font-style: italic; text-align: center; }

/* ---------- Sektoren (Apeiron-Stil: Liste mit feinen Linien) ---------- */
.sectors-intro { font-size: clamp(20px, 2.6vw, 30px); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--on-blue); margin: 0 0 36px; max-width: 50ch; }
.sector-list { list-style: none; margin: 0; padding: 0; max-width: 540px; }
.sector-list li { font-size: clamp(17px, 2vw, 22px); color: var(--on-blue); padding: 18px 0; border-top: 1px solid var(--line-blue); transition: padding-left .25s ease, color .25s ease; }
.sector-list li:last-child { border-bottom: 1px solid var(--line-blue); }
.sector-list li:hover { padding-left: 10px; color: var(--lime-bright); }
.sector-list li.placeholder { color: var(--on-blue-mut); }

/* ---------- Sektoren: gestaffelter Reveal beim Reinscrollen ---------- */
.sectors-sec .eyebrow,
.sectors-sec .sectors-intro { opacity: 0; }
.sectors-sec.in .eyebrow { animation: secFade .6s ease forwards; }
.sectors-sec.in .sectors-intro { animation: secFade .6s ease .12s forwards; }

/* Trennlinien: border -> animierbare Pseudo-Elemente */
.sectors-sec .sector-list li { border-top: 0; position: relative; }
.sectors-sec .sector-list li:last-child { border-bottom: 0; }
.sectors-sec .sector-list li::before,
.sectors-sec .sector-list li:last-child::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: var(--line-blue); transform: scaleX(0); transform-origin: left;
}
.sectors-sec .sector-list li::before { top: 0; }
.sectors-sec .sector-list li:last-child::after { bottom: 0; }
.sectors-sec .sector-list li > span { display: inline-block; opacity: 0; }

.sectors-sec.in .sector-list li::before,
.sectors-sec.in .sector-list li:last-child::after { animation: secLine .6s cubic-bezier(.25,.7,.3,1) forwards; }
.sectors-sec.in .sector-list li > span { animation: secFade .55s ease forwards; }

/* Stagger: Linie zuerst, Text je +120ms danach */
.sectors-sec.in .sector-list li:nth-child(1)::before { animation-delay: .25s; }
.sectors-sec.in .sector-list li:nth-child(1) > span  { animation-delay: .37s; }
.sectors-sec.in .sector-list li:nth-child(2)::before { animation-delay: .36s; }
.sectors-sec.in .sector-list li:nth-child(2) > span  { animation-delay: .48s; }
.sectors-sec.in .sector-list li:nth-child(3)::before { animation-delay: .47s; }
.sectors-sec.in .sector-list li:nth-child(3) > span  { animation-delay: .59s; }
.sectors-sec.in .sector-list li:nth-child(4)::before { animation-delay: .58s; }
.sectors-sec.in .sector-list li:nth-child(4) > span  { animation-delay: .70s; }
.sectors-sec.in .sector-list li:nth-child(5)::before { animation-delay: .69s; }
.sectors-sec.in .sector-list li:nth-child(5) > span  { animation-delay: .81s; }
.sectors-sec.in .sector-list li:last-child::after    { animation-delay: .81s; }

@keyframes secFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes secLine { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .sectors-sec .eyebrow, .sectors-sec .sectors-intro,
  .sectors-sec .sector-list li > span { opacity: 1 !important; animation: none !important; }
  .sectors-sec .sector-list li::before,
  .sectors-sec .sector-list li:last-child::after { transform: scaleX(1) !important; animation: none !important; }
}

/* ---------- Button ---------- */
.btn { display: inline-block; background: var(--lime); color: var(--ink); border: 1px solid var(--lime); padding: 15px 34px; font-size: 15px; font-weight: 600; border-radius: 999px; transition: transform .2s ease, box-shadow .25s ease, background .2s ease; }
.btn:hover { transform: translateY(-2px); background: var(--lime-bright); box-shadow: 0 14px 32px -12px rgba(163,230,53,0.55); }

/* ---------- Footer (weiß, kräftige Linie) ---------- */
.site-footer { padding: 40px 0; background: #fff; border-top: 2.5px solid var(--rule); }
.site-footer .container { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.site-footer .copy { font-size: 14px; color: #5d6675; }
.site-footer nav { display: flex; gap: 24px; }
.site-footer nav a { font-size: 14px; color: #5d6675; transition: color .2s ease; }
.site-footer nav a:hover { color: var(--ink); }

/* ---------- Sub-pages (Contact / Imprint / Terms) ---------- */
.page { padding: clamp(128px, 18vh, 220px) 0 clamp(80px, 12vh, 150px); }
.page h1 { font-size: clamp(30px, 5vw, 52px); font-weight: 700; color: #fff; letter-spacing: -0.02em; margin: 0 0 16px; }
.page .lead { font-size: clamp(16px, 2vw, 20px); color: var(--on-blue-mut); max-width: 58ch; margin: 0 0 clamp(40px, 6vh, 64px); }
.page-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(36px, 6vw, 80px); align-items: start; }
@media (max-width: 760px) { .page-grid { grid-template-columns: 1fr; } }

/* Form */
.field { margin-bottom: 22px; }
.field label { display: block; font-size: 14px; color: var(--on-blue-mut); margin-bottom: 8px; }
.field input, .field textarea {
  width: 100%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25);
  padding: 13px 14px; font: inherit; font-size: 16px; color: #fff; border-radius: 8px; transition: border-color .2s ease;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,0.45); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--lime-bright); }
.field textarea { resize: vertical; min-height: 150px; }

/* Contact info */
.contact-info dl { margin: 0; }
.contact-info dt { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime-bright); margin-bottom: 4px; }
.contact-info dd { margin: 0 0 26px; font-size: 16px; color: #fff; line-height: 1.6; }
.ph { color: rgba(255,255,255,0.5); }

/* Legal text */
.legal-body { max-width: 74ch; }
.legal-body h2 { font-size: 20px; font-weight: 600; color: #fff; margin: 38px 0 10px; }
.legal-body p { color: var(--on-blue-mut); margin: 0 0 14px; }
.legal-body p.ph { font-style: italic; }

/* ---------- Reveal (Fade-up für Nicht-Text-Blöcke) ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .tr-word .tr-top { opacity: 1 !important; }
  .bgfx span, .hero-circle::before, .hero-circle::after { animation: none !important; }
  html { scroll-behavior: auto; }
}