/* ══════════════════════════════════════════════════════════════
   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")}

/* ══════════════════════════════════════════════════════════════
   C-Industries International Holding
   Werte übernommen aus dem Claude-Design-Export.
   ══════════════════════════════════════════════════════════════ */
:root{
  --primary:#63B5E5;
  --primary-dark:#1E7BB0;
  --primary-darkest:#14567C;
  --primary-lighter:#F0F8FD;

  --neutral-darkest:#21231F;
  --neutral-dark:#373A36;
  --neutral:#6C6F69;
  --neutral-mid:#C9CBC6;
  --neutral-light:#DDDEDB;
  --neutral-lighter:#F3F4F1;
  --white:#FFFFFF;
  --sky:#DCE7EE;

  --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);outline-offset:3px}

.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:78px;padding:0 5%;pointer-events:none;
}
.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}

/* 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.35rem,7.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(33,35,31,.62) 0%,rgba(33,35,31,.16) 230px,rgba(33,35,31,0) 430px),
    linear-gradient(74deg,rgba(33,35,31,.94) 0%,rgba(33,35,31,.76) 30%,rgba(33,35,31,.30) 58%,rgba(33,35,31,0) 78%),
    linear-gradient(0deg,rgba(33,35,31,.34) 0%,rgba(33,35,31,.14) 130px,rgba(33,35,31,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:55px;width:149px}

/* ── 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}

/* ══ 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(--primary);margin-bottom:6px;
}
.registry dd{margin:0;font-size:.9375rem;color:rgba(255,255,255,.92)}
.registry a{color:var(--primary);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}

/* ══ 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);
}
.contact-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(28px,3.4vw,56px);
}
.ccol{border-top:1px solid var(--neutral-mid);padding-top:22px}
.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-lead.place{
  font-size:clamp(1.25rem,2vw,1.625rem);line-height:1.22;
  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:30ch;text-wrap:pretty}
.ccol-regions{
  font-size:.75rem;font-weight:600;letter-spacing:.10em;text-transform:uppercase;
  color:var(--neutral-dark);margin-top:8px;max-width:30ch;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:58px;width:158px;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(--primary)}
.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(--primary)}

/* ══ 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:34px;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:42px;width:113px}
  .hero--veil .nav img{height:38px;width:103px}
  .ft img{height:44px;width:120px}
}

@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}
}