/* ============================================================
   BCIS-SMUELLER — Veränderung, die wirksam ist
   CI-Palette: Türkis primär, Orange Akzent, Schiefergrau, Weiß. Montserrat.
   ============================================================ */

:root{
  --bg:    #ffffff;        /* weißer CI-Hintergrund */
  --surface: #f2f6f6;      /* sehr helles Türkisgrau, Panel */
  --ink:   #3F4A50;        /* Schiefergrau — Text + dunkle Flächen */
  --dark:  #26333A;        /* tiefe Schieferfläche (dunkle Sektionen) */
  --muted: #7F8585;        /* Steuerung-Grau */
  --accent: #009CA6;       /* Primär-Türkis */
  --accent2: #F26B2A;      /* Akzent-Orange */
  --soft:  #8ED8DC;        /* Hell-Türkis */
  --line:  rgba(63,74,80,0.12);

  --maxw: 1240px;
  --pad: clamp(1.25rem, 5vw, 5rem);
  --font-display: "Montserrat", system-ui, sans-serif;
  --font-body: "Montserrat", system-ui, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3{ font-family:var(--font-display); font-weight:700; line-height:1.02; letter-spacing:-0.02em; }

.accent{ color:var(--accent2); }
.eyebrow{
  font-family:var(--font-body); font-weight:600;
  text-transform:uppercase; letter-spacing:0.18em;
  font-size:0.74rem; color:var(--muted);
}

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-body); font-weight:600; font-size:0.98rem;
  color:var(--bg); background:var(--ink);
  padding:0.9em 1.5em; border-radius:999px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), background .35s;
  will-change:transform;
}
.btn::after{ content:"→"; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.btn:hover{ background:var(--accent); color:#fff; transform:translateY(-2px); }
.btn:hover::after{ transform:translateX(4px); }
.btn--lg{ font-size:1.05rem; padding:1.05em 1.8em; }

/* ---- NAV ---- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--pad);
  transition:background .4s, backdrop-filter .4s, padding .4s, box-shadow .4s;
  color:oklch(0.97 0.01 248);
}
.nav.is-stuck{
  background:oklch(0.962 0.008 248 / 0.85);
  backdrop-filter:saturate(1.2) blur(10px);
  box-shadow:0 1px 0 var(--line);
  color:var(--ink); padding:0.7rem var(--pad);
}
.nav__brand{ display:flex; align-items:center; gap:.6rem; }
.nav__mark{ height:34px; width:auto; }
.nav__wordmark{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; letter-spacing:.13em; text-transform:uppercase; }
.nav__links{ display:flex; align-items:center; gap:clamp(1rem,2.5vw,2.2rem); }
.nav__links a{ font-weight:500; font-size:0.95rem; }
.nav__links a:not(.nav__cta){ opacity:.85; }
.nav__links a:not(.nav__cta):hover{ opacity:1; }
.nav__cta{
  border:1px solid currentColor; padding:.5em 1.05em; border-radius:999px;
  font-weight:600; transition:background .3s, color .3s, border-color .3s;
}
.nav.is-stuck .nav__cta:hover{ background:var(--ink); color:var(--bg); }
.nav:not(.is-stuck) .nav__cta:hover{ background:oklch(1 0 0 / .12); }

/* ---- 1 HERO ---- */
.hero{ position:relative; height:100svh; min-height:600px; display:flex; align-items:flex-end; overflow:hidden; }
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero__halo{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 90% at 22% 78%, oklch(0.18 0.03 256 / .80), transparent 60%),
    linear-gradient(to top, oklch(0.16 0.03 256 / .70), transparent 45%),
    linear-gradient(to bottom, oklch(0.14 0.03 256 / .60), transparent 22%);
}
.hero__inner{
  position:relative; z-index:2; color:oklch(0.98 0.006 248);
  padding:0 var(--pad) clamp(3rem,8vh,6rem);
  max-width:var(--maxw); width:100%; margin-inline:auto;
}
.hero__inner .eyebrow{ color:oklch(0.90 0.015 248); text-shadow:0 1px 16px oklch(0.15 0.03 256 / .6); }
.nav:not(.is-stuck){ color:oklch(0.99 0.004 248); }
.nav:not(.is-stuck) .nav__brand, .nav:not(.is-stuck) .nav__links{ text-shadow:0 1px 18px oklch(0.12 0.03 256 / .75), 0 0 3px oklch(0.12 0.03 256 / .55); }
.nav:not(.is-stuck) .nav__role{ opacity:.92; }
.hero__title{
  font-size:clamp(2.6rem, 1.4rem + 5.6vw, 6rem);
  font-weight:800; margin:.5rem 0 1.1rem; max-width:16ch;
  text-shadow:0 2px 40px oklch(0.15 0.03 256 / .55);
}
.hero__lede{ max-width:46ch; font-size:clamp(1.02rem,0.95rem+0.4vw,1.22rem); color:oklch(0.92 0.012 248); margin-bottom:1.8rem; }
.hero__cue{ position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%); z-index:2; width:1px; height:54px; background:oklch(1 0 0 / .35); overflow:hidden; }
.hero__cue span{ position:absolute; inset:0; background:var(--accent); transform:translateY(-100%); animation:cue 2.4s cubic-bezier(.7,0,.3,1) infinite; }
@keyframes cue{ 0%{transform:translateY(-100%)} 55%,100%{transform:translateY(100%)} }

/* ---- 2 THESIS ---- */
.thesis{ padding:clamp(5rem,12vh,8.5rem) var(--pad) clamp(3rem,7vh,5rem); max-width:var(--maxw); margin-inline:auto; }
.thesis__line{ font-size:clamp(2.4rem,1rem+7vw,7rem); font-weight:800; max-width:14ch; }
.thesis__sub{ margin-top:1.6rem; font-size:clamp(1.05rem,1rem+0.5vw,1.4rem); color:var(--muted); max-width:40ch; }
.word{ display:inline-block; }

/* ---- 2b LEISTUNGEN ---- */
.leist{ max-width:var(--maxw); margin-inline:auto; padding:clamp(1rem,2vh,2rem) var(--pad) clamp(4rem,10vh,7rem); }
.leist__head{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.5rem,5vw,5rem); align-items:end; padding-bottom:2rem; border-bottom:1px solid var(--line); }
.leist__kicker{ font-family:var(--font-body); font-weight:600; text-transform:uppercase; letter-spacing:.18em; font-size:.76rem; color:var(--muted); }
.leist__intro{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.3rem,1rem+1.7vw,2.2rem); line-height:1.14; letter-spacing:-.02em; max-width:30ch; }
.leist__item{ display:grid; grid-template-columns:auto 13rem 1fr; column-gap:clamp(1.5rem,4vw,4rem); row-gap:.3rem; align-items:baseline; padding:clamp(1.4rem,3.2vh,2.3rem) 0; border-bottom:1px solid var(--line); }
.leist__no{ font-family:var(--font-display); font-weight:700; color:var(--accent); font-size:1.05rem; }
.leist__item h3{ font-size:clamp(1.3rem,1rem+1.4vw,2rem); }
.leist__item p{ grid-column:3; color:var(--muted); max-width:50ch; font-size:clamp(1rem,.98rem+.3vw,1.15rem); }

/* ---- 3 FEATURES ---- */
.features{ max-width:var(--maxw); margin-inline:auto; padding:0 var(--pad); display:flex; flex-direction:column; gap:clamp(5rem,12vh,9rem); }
.feature{ display:grid; grid-template-columns:1.05fr 0.95fr; align-items:center; gap:clamp(2rem,5vw,5rem); }
.feature--flip .feature__media{ order:2; }
.feature__media{ position:relative; border-radius:14px; overflow:hidden; }
.feature__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; transform:scale(1.04); will-change:transform; }
.feature__body h3{ font-size:clamp(1.7rem,1.2rem+2vw,2.9rem); margin-bottom:1rem; }
.feature__body p{ font-size:clamp(1.02rem,1rem+0.3vw,1.2rem); color:var(--muted); max-width:38ch; }

.caption{
  position:absolute; left:1rem; bottom:1rem;
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  color:oklch(0.98 0.006 248); text-shadow:0 1px 18px oklch(0.15 0.03 256 / .7);
  letter-spacing:-0.01em;
}

/* ---- 4 BAND ---- */
.band{ max-width:var(--maxw); margin:clamp(5rem,12vh,9rem) auto 0; padding:0 var(--pad); display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(1rem,2vw,1.6rem); align-items:stretch; }
.band figure{ position:relative; border-radius:14px; overflow:hidden; }
.band__still img{ width:100%; height:100%; object-fit:cover; aspect-ratio:3/4; }
.band__motion{ min-height:100%; }
.band__motion video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---- 5 ROWS ---- */
.rows{ max-width:var(--maxw); margin-inline:auto; padding:clamp(6rem,15vh,11rem) var(--pad); }
.rows__kicker{ font-family:var(--font-body); font-weight:600; text-transform:uppercase; letter-spacing:0.18em; font-size:0.76rem; color:var(--muted); margin-bottom:2.5rem; }
.rows__track{ position:relative; height:2px; background:var(--line); margin-bottom:2.5rem; }
.rows__progress{ position:absolute; left:0; top:0; height:100%; width:0; background:var(--accent); }
.row{ display:grid; grid-template-columns:auto 1fr; column-gap:clamp(1.5rem,4vw,4rem); row-gap:.4rem; align-items:baseline; padding:clamp(1.6rem,3.5vh,2.6rem) 0; border-bottom:1px solid var(--line); }
.row__num{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.4rem,1rem+1.6vw,2.2rem); color:var(--accent); }
.row__head{ font-size:clamp(1.5rem,1.1rem+1.8vw,2.4rem); }
.row__text{ grid-column:2; color:var(--muted); max-width:54ch; font-size:clamp(1rem,0.98rem+0.3vw,1.16rem); }

/* ---- 6 CTA ---- */
.cta{ background:var(--ink); color:oklch(0.97 0.008 248); padding:clamp(6rem,16vh,12rem) var(--pad); text-align:center; }
.cta__line{ font-size:clamp(2rem,1rem+5vw,4.6rem); font-weight:800; max-width:18ch; margin-inline:auto; }
.cta__sub{ margin:1.4rem auto 2.4rem; color:oklch(0.78 0.02 248); max-width:46ch; font-size:clamp(1.02rem,1rem+0.3vw,1.2rem); }
.cta .btn{ background:var(--accent); color:#fff; }
.cta .btn:hover{ background:oklch(0.97 0.008 248); color:var(--ink); }

/* ---- 7 FOOTER ---- */
.foot{ background:var(--surface); padding-top:clamp(3rem,7vh,5rem); overflow:hidden; }
.foot__marquee{ border-block:1px solid var(--line); padding:1.1rem 0; }
.foot__track{ display:flex; width:max-content; gap:0; animation:marq 38s linear infinite; will-change:transform; }
.foot__group{ display:flex; align-items:center; gap:1.4rem; padding-right:1.4rem; white-space:nowrap; flex:none; font-family:var(--font-display); font-weight:700; font-size:clamp(1.2rem,1rem+1.5vw,2rem); color:var(--ink); }
.foot__group .dot{ color:var(--accent); }
@keyframes marq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.foot__grid{ max-width:var(--maxw); margin-inline:auto; padding:clamp(3rem,7vh,5rem) var(--pad); display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2rem; }
.foot__col{ display:flex; flex-direction:column; gap:.5rem; }
.foot__big{ font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,1rem+4vw,3.6rem); line-height:1; letter-spacing:-0.02em; max-width:12ch; }
.foot__label{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.16em; color:var(--muted); }
.foot__col a:hover{ color:var(--accent); }
.foot__note{ font-size:0.8rem; color:var(--muted); }
.foot__base{ max-width:var(--maxw); margin-inline:auto; padding:1.4rem var(--pad); display:flex; justify-content:space-between; border-top:1px solid var(--line); font-size:0.85rem; color:var(--muted); }

/* ---- reveal states (JS adds .in) ---- */
[data-reveal], [data-reveal-words] .word{ opacity:0; transform:translateY(28px); }
[data-reveal].in, [data-reveal-words].in .word{ opacity:1; transform:none; transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }

/* ---- responsive ---- */
@media (max-width:900px){
  .feature{ grid-template-columns:1fr; gap:1.4rem; }
  .feature--flip .feature__media{ order:0; }
  .feature__media img{ aspect-ratio:16/10; }
  .band{ grid-template-columns:1fr; }
  .band__still img{ aspect-ratio:16/10; }
  .band__motion{ aspect-ratio:16/9; }
  .leist__head{ grid-template-columns:1fr; align-items:start; gap:.8rem; }
  .leist__item{ grid-template-columns:auto 1fr; }
  .leist__item p{ grid-column:2; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .nav__role{ display:none; }
  .nav__links a:not(.nav__cta){ display:none; }
  .row{ grid-template-columns:1fr; }
  .row__text{ grid-column:1; }
  .leist__item{ grid-template-columns:1fr; }
  .leist__item p{ grid-column:1; }
  .foot__grid{ grid-template-columns:1fr; }
  .foot__base{ flex-direction:column; gap:.4rem; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  [data-reveal], [data-reveal-words] .word{ opacity:1; transform:none; }
  .hero__cue{ display:none; }
}