/* ============================================================
   Vaultbrook Capital — Design-System
   Hand-geschriebenes CSS (Design-Tokens), kein Build-Tool.
   Schriften selbst gehostet (Jost + Inter). DSGVO: keine externen Requests.
   ============================================================ */

/* ---------- Schriften (lokal) ---------- */
@font-face { font-family:"Jost";  font-style:normal; font-weight:400; font-display:swap; src:url("fonts/jost-400.woff2")  format("woff2"); }
@font-face { font-family:"Jost";  font-style:normal; font-weight:500; font-display:swap; src:url("fonts/jost-500.woff2")  format("woff2"); }
@font-face { font-family:"Jost";  font-style:normal; font-weight:600; font-display:swap; src:url("fonts/jost-600.woff2")  format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/inter-700.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root{
  /* Anthrazit / dunkel */
  --bg:        #16181B;
  --bg-elev:   #1C1F23;
  --ink:       #0E0F11;
  /* Helle Sektionen (warmes Off-White / Beige) */
  --paper:     #F4F2EE;
  --paper-2:   #ECE9E3;
  /* Text auf dunkel */
  --text:      #F5F5F3;
  --text-2:    #B6B8BD;
  --text-3:    #84878D;
  /* Text auf hell */
  --ink-1:     #1A1C1F;
  --ink-2:     #4C4F54;
  --ink-3:     #797C82;
  /* Akzent: Beige / Sand */
  --sand:      #C9B79C;   /* Akzent auf dunkel */
  --bronze:    #957743;   /* Akzent-Text auf hell (besserer Kontrast) */
  /* Linien */
  --line:      rgba(255,255,255,.12);
  --line-2:    rgba(255,255,255,.18);
  --line-ink:  rgba(0,0,0,.12);
  /* Maße */
  --maxw:      1180px;
  --pad:       clamp(20px, 5vw, 40px);
  --sec-y:     clamp(76px, 11vw, 150px);
  --r:         12px;
  --r-lg:      20px;
  --pill:      999px;
  /* Fonts */
  --display:   "Jost", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans:      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Reset / Basis ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:clamp(1.05rem, 1rem + .3vw, 1.15rem);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--display); font-weight:500; letter-spacing:-.01em; line-height:1.08; margin:0; }
p{ margin:0; }
::selection{ background:var(--sand); color:var(--ink); }

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

.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:var(--sec-y); }
.section--dark{ background:var(--bg); color:var(--text); }
.section--ink{ background:var(--ink); color:var(--text); }
.section--paper{ background:var(--paper); color:var(--ink-1); }

.kicker{
  font-family:var(--display);
  font-size:.84rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  color:var(--sand); margin:0 0 18px;
}
.section--paper .kicker{ color:var(--bronze); }

.section-title{ font-size:clamp(2rem, 1.3rem + 2.6vw, 3.1rem); }
.section--paper .section-title{ color:var(--ink-1); }

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center;
  height:72px;
  background:rgba(18,20,23,.55);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease;
}
.site-header.is-scrolled{ background:rgba(15,16,19,.86); border-bottom-color:var(--line); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; }

.brand{ display:inline-flex; align-items:center; gap:12px; }
.brand img{ height:34px; width:auto; }
.brand-word{
  font-family:var(--display); font-weight:500; font-size:1.05rem;
  letter-spacing:.16em; text-transform:uppercase; color:#fff; white-space:nowrap;
}

.nav{ display:flex; align-items:center; gap:26px; }
.nav a{
  font-size:.95rem; color:var(--text-2); letter-spacing:.01em;
  transition:color .2s ease; position:relative; padding-block:6px;
}
.nav a:hover{ color:#fff; }
.nav .ig{ color:var(--text-2); display:inline-flex; }
.nav .ig:hover{ color:var(--sand); }
.nav .ig svg{ width:20px; height:20px; }

.burger{
  display:none; width:42px; height:42px; border:1px solid var(--line);
  background:transparent; border-radius:10px; cursor:pointer; padding:0;
  color:#fff;
}
.burger span{ display:block; width:18px; height:1.5px; background:currentColor; margin:4px auto; transition:transform .25s ease, opacity .25s ease; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--display); font-weight:500; font-size:1rem; letter-spacing:.02em;
  padding:15px 30px; border-radius:var(--pill); cursor:pointer;
  border:1px solid transparent; transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn-primary{ background:#F5F3EF; color:var(--ink); }
.btn-primary:hover{ transform:translateY(-2px); background:#fff; }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--sand); color:#fff; transform:translateY(-2px); }
.btn .arrow{ transition:transform .25s ease; }
.btn:hover .arrow{ transform:translateX(4px); }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:120px var(--pad) 80px;
  background:
    radial-gradient(120% 80% at 50% -10%, #23262B 0%, var(--bg) 45%, var(--ink) 100%);
  overflow:hidden;
}
.hero::after{ /* feiner Lichtschimmer unten */
  content:""; position:absolute; left:50%; bottom:-40%; width:90vw; height:70vh;
  transform:translateX(-50%); z-index:1;
  background:radial-gradient(closest-side, rgba(201,183,156,.10), transparent 70%);
  pointer-events:none;
}
/* Subtiler Architektur-/Skyline-Akzent (rein dekorativ) */
.hero-accent{
  position:absolute; inset:auto 0 0 0; width:100%;
  height:min(60%, 520px); z-index:0; color:var(--sand); opacity:.12;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to top, transparent 0%, #000 34%, #000 72%, transparent 100%);
          mask-image:linear-gradient(to top, transparent 0%, #000 34%, #000 72%, transparent 100%);
}
.hero-inner{ position:relative; z-index:2; max-width:880px; }
.hero-logo{ height:clamp(210px, 33vw, 330px); width:auto; margin:0 auto clamp(30px,4vw,48px); }
.hero-title{
  font-weight:400;
  font-size:clamp(1.5rem, 1rem + 2.2vw, 2.55rem);
  line-height:1.22; letter-spacing:.005em; color:#fff;
  text-wrap:balance;
}
.hero-title .dim{ color:var(--text-2); }
.hero-cta{ margin-top:clamp(34px,5vw,52px); display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.scroll-hint{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:2;
  color:var(--text-3); font-size:.72rem; letter-spacing:.25em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.scroll-hint::after{ content:""; width:1px; height:42px; background:linear-gradient(var(--text-3), transparent); }

/* ---------- Intro / Lead ---------- */
.lead{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.6rem, 1.1rem + 1.9vw, 2.5rem);
  line-height:1.2; letter-spacing:-.01em; color:var(--ink-1);
  max-width:20ch; margin:0 0 36px;
}
.prose{ max-width:64ch; }
.prose p + p{ margin-top:1.3em; }
.section--paper .prose p{ color:var(--ink-2); font-size:1.15rem; }

/* ---------- Investmentphilosophie ---------- */
.pillars{ list-style:none; margin:48px 0 0; padding:0; }
.pillar{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,56px);
  padding:38px 0; border-top:1px solid var(--line);
}
.pillar:last-child{ border-bottom:1px solid var(--line); }
.pillar-num{
  font-family:var(--display); font-weight:400; font-size:clamp(1.4rem, 1rem + 1.4vw, 2rem);
  color:var(--sand); letter-spacing:.02em; line-height:1; padding-top:4px;
}
.pillar h3{ font-size:clamp(1.2rem, 1rem + .8vw, 1.6rem); color:#fff; margin:0 0 14px; font-weight:500; }
.pillar p{ color:var(--text-2); max-width:62ch; }
.pillar em{ color:var(--sand); font-style:italic; }

/* ---------- Etymologie ---------- */
.etymology-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,80px); align-items:start;
  margin-top:52px;
}
.etymology-mark{
  position:sticky; top:120px; display:flex; justify-content:center;
}
.etymology-mark img{ width:min(460px,100%); height:auto; opacity:.92; }
.etymology-text > p:first-child{ font-size:1.12rem; color:var(--ink-2); max-width:52ch; }
.etymology-item{ margin-top:34px; padding-top:26px; border-top:1px solid var(--line-ink); }
.etymology-item h3{ font-size:1.18rem; color:var(--ink-1); margin:0 0 10px; font-weight:500; letter-spacing:0; }
.etymology-item h3 .accent{ color:var(--bronze); }
.etymology-item p{ color:var(--ink-2); max-width:52ch; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:var(--text-2); padding:clamp(56px,8vw,88px) 0 40px; border-top:1px solid var(--line); }
.footer-top{ display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; align-items:flex-start; }
.footer-brand{ display:flex; align-items:center; gap:12px; }
.footer-brand img{ height:34px; }
.footer-brand .brand-word{ color:#fff; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:14px 30px; }
.footer-nav a{ font-size:.95rem; color:var(--text-2); transition:color .2s ease; }
.footer-nav a:hover{ color:var(--sand); }
.footer-disclaimer{
  margin-top:44px; padding-top:26px; border-top:1px solid var(--line);
  font-size:.82rem; line-height:1.6; color:var(--text-3); max-width:75ch;
}
.footer-meta{ margin-top:22px; display:flex; flex-wrap:wrap; gap:8px 18px; font-size:.8rem; color:var(--text-3); }

/* ---------- Reveal-Animation ---------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- Mobile ---------- */
@media (max-width:860px){
  .burger{ display:block; }
  .brand img{ height:32px; }
  .brand-word{ font-size:1rem; }
  .nav{
    position:fixed; inset:72px 0 auto 0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:rgba(14,15,17,.98); backdrop-filter:blur(12px);
    padding:8px var(--pad) 24px; border-bottom:1px solid var(--line);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:transform .25s ease, opacity .25s ease;
  }
  .nav.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav a{ width:100%; padding:15px 0; border-bottom:1px solid var(--line); font-size:1.05rem; }
  .nav .ig{ padding-top:18px; }
  .etymology-grid{ grid-template-columns:1fr; }
  .etymology-mark{ position:static; }
  .etymology-mark img{ width:280px; }
  .pillar{ grid-template-columns:1fr; gap:8px; }
  .pillar-num{ padding-top:0; }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{ transition:none!important; animation:none!important; scroll-behavior:auto!important; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- Subpages / Rechtstexte ---------- */
.page{ padding-top:clamp(104px,14vh,140px); padding-bottom:var(--sec-y); min-height:72vh; }
.container--narrow{ max-width:760px; }
.back-link{ display:inline-flex; align-items:center; gap:8px; font-size:.9rem; color:var(--text-2); margin-bottom:30px; transition:color .2s ease; }
.back-link:hover{ color:var(--sand); }
.back-link svg{ width:16px; height:16px; }
.page h1{ font-size:clamp(2rem, 1.4rem + 2vw, 2.9rem); color:#fff; margin:0 0 12px; }
.page .lead-sub{ color:var(--text-3); margin:0 0 34px; }
.placeholder{ background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(28px,5vw,46px); }
.placeholder .tag{ display:inline-block; font-family:var(--display); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sand); border:1px solid var(--line-2); border-radius:var(--pill); padding:5px 14px; margin-bottom:20px; }
.placeholder p{ color:var(--text-2); max-width:60ch; }
.legal-content h2{ font-size:1.12rem; color:#fff; margin:30px 0 10px; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content p{ color:var(--text-2); margin:0 0 10px; }
.legal-content a{ color:var(--sand); text-decoration:underline; text-underline-offset:2px; }

/* ---------- Buttons (dunkel, für helle Sektionen) ---------- */
.btn-dark{ background:var(--ink-1); color:#F5F3EF; }
.btn-dark:hover{ background:#000; transform:translateY(-2px); }
.inline-link{ color:var(--bronze); text-decoration:underline; text-underline-offset:2px; transition:color .2s ease; }
.inline-link:hover{ color:var(--ink-1); }

/* ---------- Etymologie-Zusatz ---------- */
.etymology-item h3 .sub{ color:var(--ink-3); font-weight:400; font-size:.88em; letter-spacing:0; }

/* ---------- Gründer ---------- */
.founder{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,5vw,64px); align-items:center; margin-top:clamp(22px,3vw,38px); }
.founder-photo{
  position:relative; aspect-ratio:4/5; max-width:380px; width:100%;
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  background:radial-gradient(120% 120% at 30% 20%, #262A2F, #121417 72%);
  display:grid; place-items:center;
}
.founder-photo img.ph-mark{ width:38%; height:auto; opacity:.42; }
.founder-photo .ph-note{ position:absolute; bottom:16px; left:0; right:0; text-align:center; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-3); }
.founder-body .kicker{ margin-bottom:16px; }
.founder-name{ font-family:var(--display); font-weight:500; font-size:clamp(1.9rem, 1.3rem + 2vw, 2.7rem); color:#fff; margin:0 0 10px; letter-spacing:-.01em; }
.founder-role{ font-family:var(--display); color:var(--sand); font-size:clamp(1rem, .95rem + .4vw, 1.2rem); letter-spacing:.02em; margin:0; }

/* ---------- Karten (Finanzierungsarchitektur) ---------- */
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2.2vw,24px); margin-top:50px; }
.card{ background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:var(--r-lg); padding:clamp(24px,3vw,36px); transition:transform .3s ease, box-shadow .3s ease; }
.card:hover{ transform:translateY(-3px); box-shadow:0 20px 44px -26px rgba(0,0,0,.4); }
.card-ico{ width:32px; height:32px; color:var(--bronze); margin-bottom:18px; }
.card h3{ font-family:var(--display); font-size:1.22rem; color:var(--ink-1); margin:0 0 12px; font-weight:500; letter-spacing:0; }
.card p{ color:var(--ink-2); margin:0; font-size:1.075rem; }

/* ---------- Statement (Unser Ansatz) ---------- */
.statement{ max-width:62ch; margin:22px 0 0; font-family:var(--display); font-weight:400; font-size:clamp(1.45rem, 1.05rem + 1.5vw, 2.15rem); line-height:1.4; color:#fff; letter-spacing:-.005em; }
.statement .hl{ color:var(--sand); }

/* ---------- Ankaufsprofil-CTA ---------- */
.ankauf-cta{ margin-top:36px; }

/* ---------- FAQ-Akkordeon ---------- */
.faq{ margin-top:48px; max-width:880px; }
.faq-item{ border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-item summary{
  list-style:none; cursor:pointer; position:relative;
  padding:26px 56px 26px 0; font-family:var(--display); font-weight:500;
  font-size:clamp(1.05rem, 1rem + .45vw, 1.32rem); color:#fff; transition:color .2s ease;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--sand); }
.faq-item summary::before,
.faq-item summary::after{ content:""; position:absolute; right:6px; top:50%; width:14px; height:1.6px; background:var(--sand); transition:transform .3s ease; }
.faq-item summary::after{ transform:rotate(90deg); }
.faq-item[open] summary::after{ transform:rotate(0); }
.faq-answer{ padding:0 56px 28px 0; }
.faq-answer p{ color:var(--text-2); margin:0; max-width:72ch; }

/* ---------- Mobile (neue Komponenten) ---------- */
@media (max-width:760px){
  .founder{ grid-template-columns:1fr; }
  .founder-photo{ max-width:260px; }
  .cards{ grid-template-columns:1fr; }
  .faq-item summary{ padding-right:44px; }
  .faq-answer{ padding-right:6px; }
}

/* ---------- Rechtstext-Listen ---------- */
.legal-content ul{ margin:8px 0 16px; padding-left:22px; }
.legal-content li{ color:var(--text-2); margin:9px 0; }
.legal-content li::marker{ color:var(--sand); }
.legal-content li strong{ color:#fff; font-weight:600; }
.legal-content .crit-sub{ color:var(--text-3); font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; margin:0 0 26px; }
.legal-content .box{ background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r); padding:18px 22px; color:var(--text-2); }
.legal-content .upper{ font-size:.82rem; line-height:1.7; color:var(--text-3); }
.legal-stand{ margin-top:30px; font-size:.82rem; color:var(--text-3); }

/* ---------- Kontakt ---------- */
.contact-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2.4vw,24px); margin-top:44px; max-width:780px; }
.contact-item{ display:flex; align-items:center; gap:18px; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:var(--r-lg); padding:22px 26px; transition:transform .3s ease, box-shadow .3s ease; }
.contact-item:hover{ transform:translateY(-3px); box-shadow:0 20px 44px -26px rgba(0,0,0,.4); }
.contact-item .ci-ico{ flex:0 0 auto; width:46px; height:46px; display:grid; place-items:center; border-radius:12px; background:var(--paper-2); color:var(--bronze); }
.contact-item .ci-ico svg{ width:22px; height:22px; }
.contact-item .ci-label{ display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:3px; }
.contact-item .ci-value{ font-family:var(--display); font-size:1.1rem; color:var(--ink-1); overflow-wrap:anywhere; }
@media (max-width:640px){ .contact-grid{ grid-template-columns:1fr; } }

/* ---------- Gründerfoto + Link ---------- */
.founder-photo img.portrait{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 35%; filter:grayscale(.45) contrast(1.03) brightness(.97); transition:filter .45s ease; }
.founder-photo::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 90% at 50% 32%, transparent 46%, rgba(22,24,27,.42) 100%), linear-gradient(180deg, transparent 56%, rgba(22,24,27,.58) 100%); }
.founder-photo:hover img.portrait{ filter:grayscale(.12) contrast(1.02); }
.founder-role a{ color:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; transition:color .2s ease; }
.founder-role a:hover{ color:#fff; }

/* ---------- Skip-Link (Barrierefreiheit) ---------- */
.skip-link{ position:fixed; left:16px; top:-64px; z-index:200; background:#F5F3EF; color:var(--ink); font-family:var(--display); font-weight:500; font-size:.95rem; padding:11px 18px; border-radius:10px; box-shadow:0 10px 30px -8px rgba(0,0,0,.5); transition:top .2s ease; }
.skip-link:focus{ top:16px; outline:2px solid var(--sand); outline-offset:2px; }
#main:focus{ outline:none; }

/* ---------- Investmentphilosophie: Sticky-Scroll (wie Etymologie) ---------- */
.philo-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,6vw,72px); align-items:start; }
.philo-head{ position:sticky; top:120px; }
.philo-head .section-title{ margin:0; }
.philo-grid .pillars{ margin-top:0; }
.philo-grid .pillar:first-child{ border-top:none; padding-top:0; }
@media (max-width:860px){
  .philo-grid{ grid-template-columns:1fr; }
  .philo-head{ position:sticky; top:72px; z-index:5; background:var(--bg); padding:14px 0 16px; box-shadow:0 1px 0 var(--line); }
  .philo-grid .pillars{ margin-top:0; }
  .philo-grid .pillar:first-child{ border-top:1px solid var(--line); padding-top:34px; }
}

/* ===================== UI-Feinschliff ===================== */

/* Scroll-Fortschrittslinie */
.scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--sand); z-index:60; pointer-events:none; }

/* Animierte Nav-Unterstreichung */
.nav a:not(.ig)::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1.5px; background:var(--sand); transform:scaleX(0); transform-origin:left; transition:transform .28s ease; }
.nav a:not(.ig):hover::after,
.nav a:not(.ig)[aria-current="page"]::after{ transform:scaleX(1); }

/* FAQ: sanftes Aufklappen */
.faq-item[open] .faq-answer{ animation:faqIn .32s ease; }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* Gestaffelte Einblendung der Finanzierungs-Kacheln */
.cards .card.reveal{ transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease; }
.cards .card.reveal:nth-child(2){ transition-delay:.1s; }
.cards .card.reveal:nth-child(3){ transition-delay:.2s; }
.cards .card.reveal:nth-child(4){ transition-delay:.3s; }
.cards .card.reveal:hover{ transition-delay:0s; transition-duration:.3s; }

/* Kernmärkte-Chips */
.markets{ list-style:none; display:flex; flex-wrap:wrap; gap:12px; margin:32px 0 0; padding:0; }
.markets li{ display:inline-flex; align-items:center; gap:9px; font-family:var(--display); font-weight:500; font-size:.98rem; letter-spacing:.02em; color:var(--ink-1); border:1px solid var(--line-ink); border-radius:999px; padding:9px 18px; transition:border-color .25s ease, transform .25s ease; }
.markets li:hover{ border-color:var(--bronze); transform:translateY(-2px); }
.markets li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--bronze); flex:0 0 auto; }

/* Brook-Wellen-Trenner */
.wave-divider{ margin-top:clamp(44px, 7vw, 80px); color:var(--bronze); opacity:.55; }
.wave-divider svg{ display:block; width:100%; height:30px; }
.section--dark .wave-divider, .section--ink .wave-divider{ color:var(--sand); }

/* Nach-oben-Button */
.to-top{ position:fixed; right:clamp(18px, 3vw, 30px); bottom:clamp(18px, 3vw, 30px); z-index:55; width:46px; height:46px; border-radius:50%; border:1px solid var(--line-2); background:rgba(20,22,26,.85); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#fff; cursor:pointer; display:grid; place-items:center; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .3s ease, transform .3s ease, background .25s ease, border-color .25s ease, color .25s ease; }
.to-top svg{ width:20px; height:20px; }
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background:var(--sand); color:var(--ink); border-color:var(--sand); }

/* Instagram im Footer */
.footer-ig{ display:inline-flex; align-items:center; color:var(--text-2); transition:color .2s ease; }
.footer-ig svg{ width:20px; height:20px; }
.footer-ig:hover{ color:var(--sand); }

@media (max-width:860px){
  .nav a:not(.ig)::after{ display:none; }
}