/* ══════════════════════════════════════════════════════════════
   Schriften lokal eingebunden. Keine Verbindung zu Google.
   Manrope (Überschriften) und Inter (Fließtext), Subset latin.
   ══════════════════════════════════════════════════════════════ */
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;
  src:url("/assets/fonts/manrope-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/fonts/manrope-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;
  src:url("/assets/fonts/manrope-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
  src:url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
  src:url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2")}

/* ══════════════════════════════════════════════════════════════
   CS Invest Group
   Aufbau übernommen von der Holding-Seite (c-industries-intl.com),
   Farben aus der CS-Invest-Palette: #63B5E5 (Holding-Blau) #D8E1F4 #F4F5F8 #040219
   ══════════════════════════════════════════════════════════════ */
:root{
  --primary:#63B5E5;          /* Holding-Blau: Buttons, Akzente, auf Ink 9:1 */
  --primary-dark:#1E7BB0;     /* Links und Kicker auf Weiß (4,7:1) */
  --primary-darkest:#14567C;  /* Hover, kleine Schrift auf Paper (7,3:1) */
  --primary-lighter:#D8E1F4;

  --neutral-darkest:#040219;  /* dunkler Block, Überschriften */
  --neutral-dark:#2A2840;
  --neutral:#5E5C70;
  --neutral-mid:#C3CBDE;
  --neutral-light:#D8E1F4;
  --neutral-lighter:#F4F5F8;
  --white:#FFFFFF;
  --sky:#D8E1F4;
  --on-dark:#F4F5F8;

  --rounded-button:4px;
  --rounded-image:6px;

  --font-heading:"Manrope",-apple-system,"Segoe UI",Arial,sans-serif;
  --font-body:"Inter",-apple-system,"Segoe UI",Arial,sans-serif;
}

/* ══ Base ══ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--neutral-dark);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0}
p{margin:0}
img{max-width:100%}
a{color:var(--primary-dark);text-decoration:none}
a:hover{color:var(--primary-darkest)}
:focus-visible{outline:2px solid var(--primary-dark);outline-offset:3px}
/* Hellblau hat auf #040219 ca. 9:1 Kontrast, auf Weiß nur 2,3:1 */
.on-dark :focus-visible,.ft :focus-visible{outline-color:var(--primary)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--neutral-darkest);color:var(--white);padding:12px 20px;
}
.skip:focus{left:0;color:var(--white)}

.wrap{max-width:1280px;margin:0 auto}
.band{padding:clamp(72px,9vw,112px) 5%}

.eyebrow{
  display:block;font-size:.75rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--primary-dark);margin-bottom:16px;
}

/* ══ Buttons ══ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--rounded-button);padding:13px 26px;pointer-events:auto;
  font-size:1rem;font-weight:500;text-decoration:none;
  border:1px solid transparent;transition:all .2s ease-in-out;
}
.btn-sm{padding:9px 20px;font-size:.9375rem}
.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--neutral-darkest)}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:var(--white)}
/* auf dunklem Grund wird der Hover weiss statt dunkelblau */
.on-dark .btn-primary:hover{background:var(--white);border-color:var(--white);color:var(--neutral-darkest)}
.btn-outline{background:transparent;border-color:var(--neutral-dark);color:var(--neutral-darkest)}
.btn-outline:hover{background:var(--neutral-darkest);border-color:var(--neutral-darkest);color:var(--white)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

/* ══ Hero — gemeinsame Teile ══ */
.hero{position:relative;overflow:hidden;padding:0 5%}
.hero-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  /* 60% hebt das Motiv an: Horizont wandert von 52% auf 48% der Höhe,
     darunter bleibt mehr ruhiges Wasser für die Überschrift.
     Höhere Werte heben weiter, ab etwa 70% wird die Pylonspitze knapp. */
  object-position:center 60%;
  z-index:0;
}
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none}

.nav{
  position:absolute;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:96px;padding:0 5%;pointer-events:none;
}
/* Logo auf derselben Kante wie H1 und Liste: Die Navigation läuft über
   die volle Breite, der Inhalt sitzt in 1280 px. Gleicher Einzug wie
   .hero-inner, auf schmalen Fenstern bleibt es bei 5 %. */
.hero .nav{padding-left:max(5%,calc(50% - 640px));padding-right:max(5%,calc(50% - 640px))}
/* Optischer Ausgleich: Das B der H1 hat ca. 4 px Vorbreite, das runde C
   der Marke soll nur knapp (2 px) darüber hinausragen, nicht 4 px. */
@media(min-width:761px){.hero--ink .nav img{margin-left:2px}}
.nav a{display:block;pointer-events:auto}
.nav img{display:block}

.hero-inner{
  position:relative;z-index:10;max-width:1280px;margin:0 auto;
  display:flex;min-height:100svh;max-height:60rem;pointer-events:none;
}
.hero-copy{max-width:50rem;animation:rise .9s .15s cubic-bezier(.2,.7,.2,1) both}

/* CS Invest: Zweizeiler Bespoke / Investment Solutions. Längste Zeile ist
   kürzer als bei der Holding, deshalb 8.2vw statt 7.2vw.
   Holding-Kommentar: Dreizeiler Bespoke / Longevity Salutogenesis / Health Solutions
   Die Umbrueche stehen als <br> im HTML. Die Groessen sind so gewaehlt,
   dass "Longevity Salutogenesis" auf jeder Breite in eine Zeile passt.
   Gemessen in Manrope 800 bei -0.032em Laufweite.                       */
.hero h1{
  font-family:var(--font-heading);
  font-size:clamp(1.5rem,8.2vw,4rem);font-weight:800;
  letter-spacing:-.032em;line-height:1.06;margin-bottom:22px;
}
/* Drei feste Zeilen. Jede Zeile ist ein eigener Block und darf nicht
   umbrechen. Die Größe oben ist so gewählt, dass die längste Zeile
   ("Longevity Salutogenesis") in jede Breite passt, mit 6 Prozent Reserve
   für den Moment, in dem die Webschrift noch nicht geladen ist.
   Geprüft von 320 bis 1920 Pixeln. Wer die Größe erhöht, muss auch
   .hero-copy { max-width } mitziehen.                                  */
.hero h1 span{display:block;white-space:nowrap}
.hero .lead{
  font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.55;
  max-width:33ch;text-wrap:pretty;
}

/* ── Variante Ink: dunkel, Text unten links ── */
.hero--ink{background:var(--neutral-darkest)}
.hero--ink .hero-veil{
  background:
    linear-gradient(180deg,rgba(4,2,25,.62) 0%,rgba(4,2,25,.16) 230px,rgba(4,2,25,0) 430px),
    linear-gradient(74deg,rgba(4,2,25,.94) 0%,rgba(4,2,25,.76) 30%,rgba(4,2,25,.30) 58%,rgba(4,2,25,0) 78%),
    linear-gradient(0deg,rgba(4,2,25,.34) 0%,rgba(4,2,25,.14) 130px,rgba(4,2,25,0) 260px);
}
.hero--ink .hero-inner{align-items:flex-end;padding:124px 0 clamp(40px,5.5vh,72px)}
.hero--ink h1{color:var(--white)}
.hero--ink .lead{color:rgba(255,255,255,.76)}
.hero--ink .nav img{height:56px;width:auto}

/* ── Variante Veil: hell, Text mittig links ── */
.hero--veil{background:var(--sky)}
.hero--veil .hero-veil{
  background:
    linear-gradient(180deg,rgba(255,255,255,.84) 0%,rgba(255,255,255,.34) 130px,rgba(255,255,255,0) 270px),
    linear-gradient(96deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.66) 28%,rgba(255,255,255,.18) 52%,rgba(255,255,255,0) 68%);
}
.hero--veil .hero-inner{align-items:center;padding:124px 0}
.hero--veil h1{color:var(--neutral-darkest)}
.hero--veil .lead{color:var(--neutral-dark)}
.hero--veil .nav img{height:47px;width:126px}

/* ── Variante Plate: geteilt, Text links, Bild rechts ── */
.hero--plate{background:var(--white);padding:0 5% clamp(64px,7vw,104px);overflow:visible}
.hero--plate .nav{
  position:static;max-width:1280px;margin:0 auto;padding:0;
  border-bottom:1px solid var(--neutral-light);pointer-events:auto;
}
.hero--plate .nav img{height:34px;width:auto}
.plate-grid{
  max-width:1280px;margin:0 auto;padding-top:clamp(48px,6vw,88px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:clamp(36px,5vw,72px);align-items:center;
}
.hero--plate h1{
  color:var(--neutral-darkest);
  font-size:clamp(1.25rem,6.4vw,3rem);line-height:1.06;
}
.hero--plate .lead{color:var(--neutral-dark)}
.plate-figure{
  position:relative;width:100%;height:clamp(320px,58vh,600px);
  background:var(--sky);border-radius:var(--rounded-image);overflow:hidden;
}
.plate-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ══ Logo ══
   Dreizeilige Wortmarke, Seitenverhältnis 2675 : 1057 (ca. 2,53 : 1).
   Gesteuert wird nur die Höhe, die Breite ergibt sich.            */
.logo{display:block;width:auto}

#contact .eyebrow{color:var(--primary-darkest)}

/* ══ Investmentfelder im Hero: nummeriert 01–05 ══
   Nummern in Mist, beim Hover läuft eine Linie im Holding-Blau von links ein.
   .hero-inner steht auf pointer-events:none, deshalb hier wieder auto. */
.focus{
  list-style:none;margin:30px 0 0;padding:0;max-width:46rem;counter-reset:focus;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;
}
.focus li{
  counter-increment:focus;position:relative;pointer-events:auto;
  display:grid;grid-template-columns:2.25rem 1fr;align-items:baseline;
  border-top:1px solid rgba(244,245,248,.22);padding:13px 0;
  font-size:1rem;line-height:1.4;color:rgba(244,245,248,.88);text-wrap:pretty;
  transition:color .25s ease;
}
.focus li::before{
  content:counter(focus,decimal-leading-zero);
  font-family:var(--font-heading);font-weight:600;font-size:.8125rem;
  letter-spacing:.06em;color:var(--sky);opacity:.72;transition:opacity .25s ease;
}
.focus li::after{
  content:"";position:absolute;left:0;right:0;top:-1px;height:2px;
  background:var(--primary);transform:scaleX(0);transform-origin:left center;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
@media(hover:hover){
  .focus li:hover{color:var(--white)}
  .focus li:hover::after{transform:scaleX(1)}
  .focus li:hover::before{opacity:1}
}
@media(max-width:560px){
  .focus{grid-template-columns:1fr;margin-top:22px}
  .focus li{padding:11px 0;font-size:.9375rem;grid-template-columns:2rem 1fr}
}

/* ══ Registry ══ */
.registry{background:var(--neutral-darkest);color:var(--white);padding:clamp(30px,4vw,40px) 5%}
.registry dl{
  max-width:1280px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:24px clamp(24px,3vw,48px);
}
.registry dt{
  font-size:.6875rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sky);margin-bottom:6px;
}
.registry dd{margin:0;font-size:.9375rem;color:rgba(255,255,255,.92)}
.registry a{color:var(--sky);text-decoration:underline;text-underline-offset:4px}

/* ══ Company ══ */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:clamp(28px,5vw,80px)}
.split h2{
  font-family:var(--font-heading);
  font-size:clamp(2rem,3.6vw,2.75rem);font-weight:700;letter-spacing:-.028em;
  line-height:1.12;color:var(--neutral-darkest);text-wrap:balance;max-width:17ch;
}
.prose{display:flex;flex-direction:column;gap:20px;max-width:48ch}
.prose p{font-size:1.125rem;line-height:1.6;text-wrap:pretty}
.prose a{
  color:var(--primary-dark);text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1px;
}
.prose a:hover{color:var(--primary-darkest)}

/* ══ Contact ══ */
.contact-head{
  font-family:var(--font-heading);
  font-size:clamp(2rem,3.6vw,2.75rem);font-weight:700;letter-spacing:-.028em;
  line-height:1.12;color:var(--neutral-darkest);text-wrap:balance;
  max-width:22ch;margin-bottom:clamp(44px,6vw,72px);
}
/* Feste Dreiteilung statt auto-fit: Die E-Mail-Zeile spannt mit
   grid-column 1/-1 über alle Spuren, dadurch gilt keine Spur als leer
   und auto-fit würde eine vierte, leere Spalte stehen lassen.        */
.contact-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,3.4vw,52px);
}
@media(max-width:980px){.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.contact-grid{grid-template-columns:1fr}}

/* Linie laeuft ueber alle drei Spalten, der Text bleibt schmal. */
.ccol--email{grid-column:1 / -1;max-width:none}
.ccol--email > *{max-width:34rem}
/* CS Invest: zwei Spalten, links E-Mail, rechts Office.
   Beide Hauptzeilen gleich groß, damit sie auf einer Linie stehen. */
.contact-grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.contact-grid--two .ccol--email{grid-column:auto}
.contact-grid--two .ccol-lead{font-size:clamp(1.25rem,1.7vw,1.5rem);line-height:1.24;letter-spacing:-.018em;margin-bottom:2px}
.contact-grid--two p.ccol-lead{margin-top:0}
@media(max-width:560px){.contact-grid--two{grid-template-columns:1fr}}
.ccol{
  border-top:1px solid var(--neutral-mid);padding-top:22px;
  display:flex;flex-direction:column;
}
.ccol h3{
  font-size:.75rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--neutral);margin-bottom:14px;
}
.ccol-lead{
  display:inline-block;font-family:var(--font-heading);
  font-size:1.125rem;font-weight:600;letter-spacing:-.012em;color:var(--neutral-darkest);
}
a.ccol-lead{
  color:var(--primary-dark);text-decoration:underline;
  text-underline-offset:5px;text-decoration-thickness:1px;
}
a.ccol-lead:hover{color:var(--primary-darkest)}
.ccol p.ccol-lead{color:var(--neutral-darkest)}
.ccol-lead.place{
  font-size:clamp(1.25rem,1.7vw,1.5rem);line-height:1.24;
  letter-spacing:-.018em;margin-bottom:2px;
}
.ccol-sub{font-size:.9375rem;color:var(--neutral);margin-top:4px}
.ccol p{font-size:.9375rem;color:var(--neutral);margin-top:12px;max-width:34ch;text-wrap:pretty}
.ccol-regions{
  font-size:.75rem;font-weight:600;letter-spacing:.10em;text-transform:uppercase;
  color:var(--neutral-dark);margin-top:auto;padding-top:12px;
  max-width:34ch;line-height:1.7;
}
.link{text-decoration:underline;text-underline-offset:4px;font-weight:500}

/* ══ Footer ══ */
.ft{background:var(--neutral-darkest);color:var(--white);padding:clamp(48px,6vw,64px) 5% 32px}
.ft img{height:60px;width:auto;display:block;margin-bottom:24px}
.ft-top{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:32px;align-items:end;padding-bottom:40px;
}
.ft p{color:rgba(255,255,255,.68);font-size:.9375rem;max-width:44ch}
.ft-nav{display:flex;gap:26px;flex-wrap:wrap;font-size:.9375rem}
.ft-nav a{color:rgba(255,255,255,.75)}
.ft-nav a:hover{color:var(--white)}
.ft-line{height:1px;background:rgba(255,255,255,.16)}
.ft-bot{
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
  padding-top:24px;font-size:.875rem;color:rgba(255,255,255,.6);
}
.ft-legal{display:flex;gap:20px}
.ft-bot a{color:rgba(255,255,255,.6);text-decoration:underline;text-underline-offset:3px}
.ft-bot a:hover{color:var(--white)}

/* ══ Rechtsseiten ══ */
.doc-nav{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:78px;max-width:1280px;margin:0 auto;padding:0 5%;
  border-bottom:1px solid var(--neutral-light);
}
.doc-nav img{height:44px;width:auto;display:block}
.doc{max-width:70ch;margin:0 auto;padding:clamp(48px,7vw,88px) 5%}
.doc h1{
  font-family:var(--font-heading);
  font-size:clamp(1.9rem,3.6vw,2.6rem);font-weight:700;letter-spacing:-.028em;
  line-height:1.12;color:var(--neutral-darkest);margin-bottom:10px;
}
.doc .sub{color:var(--neutral);font-size:.9375rem;margin-bottom:34px}
.doc h2{
  font-family:var(--font-heading);font-size:1.2rem;font-weight:700;
  color:var(--neutral-darkest);margin:34px 0 10px;letter-spacing:-.015em;
}
.doc p{margin-bottom:13px}
.doc a{text-decoration:underline;text-underline-offset:4px}
.doc .back{display:inline-block;margin-bottom:30px;font-size:.9375rem}
.fill{
  background:var(--primary-lighter);border-bottom:1px dashed var(--primary-dark);
  color:var(--primary-darkest);font-weight:500;padding:0 3px;
}

/* ══ Kleine Bildschirme ══ */
@media(max-width:760px){
  /* Hochformat wird seitlich beschnitten, senkrechte Verschiebung wirkungslos.
     Deshalb hier nur der Textblock tiefer.                                   */
  .hero-img{object-position:center center}
  .hero--ink .hero-inner{padding:96px 0 clamp(28px,4vh,48px)}
  .hero--ink .nav img{height:46px;width:auto}
  .hero--veil .nav img{height:38px;width:103px}
  .ft img{height:50px;width:auto}
}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}