/* ============ Fonts (self-hosted) ============ */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/space-grotesk-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/space-grotesk-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/space-grotesk-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-latin-600-normal.woff2') format('woff2');}

:root{
  --navy:#061A33;      /* Deep Navy */
  --brand:#002F7A;     /* Brand Blue */
  --accent:#2E62B0;    /* Accent Blue */
  --offwhite:#F7F9FC;
  --lightgrey:#EEF2F6;
  --white:#FFFFFF;
  --ink:#152033;
}

*{-webkit-font-smoothing:antialiased;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;overflow-x:hidden;}
::selection{background:var(--accent);color:#fff;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--offwhite);}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:0;}
.font-display{font-family:'Space Grotesk',sans-serif;}

/* ============ Nav ============ */
.nav-scrolled{background:rgba(247,249,252,.92)!important;backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(21,32,51,.06);}
.nav-scrolled .nav-link{color:var(--ink)!important;}
.nav-scrolled #mobile-toggle{color:var(--ink)!important;}
.nav-cta-static{background:var(--brand);color:#fff;}

/* ============ Hero ============ */
.hero-wrap{position:relative;min-height:100svh;background:radial-gradient(ellipse 90% 60% at 15% 0%, #0C2A50 0%, var(--navy) 55%);overflow:hidden;}
.hero-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px 500px at 78% 20%, rgba(46,98,176,.35), transparent 70%);}
.hero-portrait-wrap{position:absolute; right:0; bottom:0; top:0; width:52%; clip-path:polygon(14% 0, 100% 0, 100% 100%, 0% 100%);}
@media(max-width:767px){ .hero-portrait-wrap{ position:relative; width:100%; height:38vh; clip-path:none; margin-top:0; order:0; flex-shrink:0;} }
.hero-portrait{width:100%;height:100%;object-fit:cover;object-position:top center;filter:grayscale(1) contrast(1.12) brightness(.95);}
.hero-portrait-tint{position:absolute; inset:0; background:linear-gradient(200deg, rgba(6,26,51,.05) 10%, rgba(6,20,45,.65) 60%, var(--navy) 100%), linear-gradient(90deg, var(--navy), transparent 40%); mix-blend-mode:multiply;}
.hero-portrait-tint2{position:absolute; inset:0; background:linear-gradient(120deg, rgba(46,98,176,.4), transparent 55%); mix-blend-mode:screen;}

/* quiet transition out of hero, into the light statement section */
.hero-fade{position:absolute;left:0;right:0;bottom:0;height:180px;background:linear-gradient(to bottom, transparent, var(--offwhite));pointer-events:none;z-index:5;}

.line-mask{overflow:hidden;display:block;}
.line-inner{display:block;will-change:transform;}
.scrollcue{animation:bob 2.2s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(10px);}}

/* ============ Statement (light) ============ */
.statement-text .word{display:inline-block;opacity:.15;}

/* ============ Leistungen panels ============ */
.panel{position:relative;overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.panel:hover{transform:translateY(-6px);}
.panel-ghost{font-family:'Space Grotesk',sans-serif;font-weight:700;position:absolute; top:-.15em; right:.1em; font-size:11rem; line-height:1; color:rgba(255,255,255,.07); pointer-events:none; user-select:none;}

/* ============ Training Explorer (Themen) ============ */
.tab-btn{position:relative;padding:12px 4px;font-size:.95rem;color:#5A6B85;border-bottom:2px solid transparent;transition:color .25s, border-color .25s;white-space:nowrap;}
.tab-btn.active{color:var(--brand);border-color:var(--accent);font-weight:600;}
.tab-panel{display:none !important;}
.tab-panel.active{display:grid !important;}
.training-chip{
  position:relative;background:#fff;border:1px solid #E1E8F2;padding:24px 22px 22px;transition:all .3s cubic-bezier(.2,.7,.2,1);cursor:default;overflow:hidden;
}
.training-chip::before{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent);transition:width .35s cubic-bezier(.2,.7,.2,1);}
.training-chip:hover::before{width:100%;}
.training-chip:hover{border-color:var(--accent);box-shadow:0 16px 40px -18px rgba(6,26,51,.25);transform:translateY(-3px);}
.training-chip h4{color:var(--navy);}
.training-chip p{color:#5A6B85;}

.sketch-chip{background:#fff;border:1px solid #E1E8F2;overflow:hidden;transition:all .3s cubic-bezier(.2,.7,.2,1);}
.sketch-chip:hover{border-color:var(--accent);box-shadow:0 16px 40px -18px rgba(6,26,51,.25);transform:translateY(-3px);}
.sketch-chip img{width:100%;height:180px;object-fit:cover;object-position:top;display:block;}
.sketch-chip figcaption{padding:14px 16px;font-size:.82rem;color:#5A6B85;border-top:1px solid #EEF2F6;}

.panel-photo{position:absolute;inset:0;object-fit:cover;object-position:center 20%;opacity:.28;}
.panel-photo-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(6,26,51,.75), rgba(6,26,51,.94));}

.szene-figure{position:relative;overflow:hidden;}
.szene-figure img{width:100%;height:220px;object-fit:cover;display:block;filter:grayscale(.1);transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.szene-figure:hover img{transform:scale(1.05);}

.format-pill{background:#fff;border:1px solid #E1E8F2;padding:18px 20px;transition:all .3s;}
.format-pill:hover{border-color:var(--accent);transform:translateY(-2px);}

/* ============ About stack photos ============ */
.photo-stack{position:relative;}
.photo-stack .p1{position:relative;z-index:2;}
.photo-stack .p2{position:absolute;z-index:3;width:52%;right:-8%;bottom:-8%;border:6px solid var(--navy); box-shadow:0 20px 60px -10px rgba(0,0,0,.5);transform:rotate(-4deg);}
@media(max-width:760px){ .photo-stack .p2{ width:48%; right:-4%; bottom:-6%;} }
.counter{font-family:'Space Grotesk',sans-serif;font-weight:700;}

/* ============ Gallery — horizontal carousel ============ */
.gallery-track{
  display:flex;gap:16px;overflow-x:auto;overflow-y:visible;
  padding:56px 12px;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.gallery-track::-webkit-scrollbar{height:6px;}
.gallery-item{
  position:relative;flex:0 0 auto;height:290px;overflow:visible;
  scroll-snap-align:start;cursor:pointer;z-index:1;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), z-index 0s;
}
.gallery-item:hover{transform:scale(1.35);z-index:10;}
.gallery-item img{
  height:100%;width:auto;max-width:none;display:block;
  object-fit:contain;filter:grayscale(.15);
  box-shadow:0 10px 30px -18px rgba(6,26,51,.35);
  transition:filter .4s, box-shadow .35s;
}
.gallery-item:hover img{filter:grayscale(0);box-shadow:0 30px 70px -18px rgba(6,26,51,.5);}
.gallery-item figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:8px 10px;
  background:linear-gradient(to top, rgba(6,20,45,.95), transparent);
  color:#fff;font-size:.68rem;line-height:1.25;opacity:0;transition:opacity .3s;
}
.gallery-item:hover figcaption{opacity:1;}
@media(max-width:640px){ .gallery-item{height:215px;} .gallery-item:hover{transform:scale(1.25);} }

/* ============ Client ticker ============ */
.client-ticker-wrap{overflow:hidden;}
.client-ticker-track{display:flex;white-space:nowrap;width:max-content;animation:marquee 75s linear infinite;}
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.client-ticker-wrap:hover .client-ticker-track{animation-play-state:paused;}

/* ============ Testimonials ============ */
.testi-slide{display:none;}
.testi-slide.active{display:block;}
.testi-dot{width:8px;height:8px;border-radius:0;background:rgba(255,255,255,.25);transition:background .2s, width .2s;}
.testi-dot.active{background:var(--accent);width:26px;}

/* ============ Contact CTA underline ============ */
.cta-underline{position:relative;display:inline-block;}
.cta-underline::after{content:'';position:absolute;left:0;bottom:-6px;height:2px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.2,1);}
.cta-underline:hover::after{transform:scaleX(1);}

.reveal{opacity:0;transform:translateY(28px);}
.reveal.is-in{opacity:1;transform:translateY(0);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .scrollcue{animation:none;}
  .reveal{opacity:1;transform:none;}
}