/* ===== Design tokens ===== */
:root{
  --bg:#232427;
  --surface:#2C2E32;
  --surface-2:#383A3F;
  --ink:#F5F6F8;
  --ink-soft:#9BA2AE;
  --accent:#4C6EFF;
  --accent-hover:#6B85FF;
  --accent-soft:#1B2440;
  --border:#44464C;
  --radius:16px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --font-head:'Inter',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-serif:Arial,sans-serif;
  --font-logo:'Playfair Display',serif;
  --container:1440px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.5;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
ul{list-style:none;}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:800;letter-spacing:-1px;line-height:1.1;}
p{font-family:var(--font-serif);}
section{position:relative;}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(28px) scale(.97);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);}
.reveal.visible{opacity:1;transform:translateY(0) scale(1);}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-head);font-weight:600;font-size:15px;
  padding:16px 22px 16px 28px;border-radius:12px;
  cursor:pointer;border:none;
  transition:transform .45s var(--ease-spring),background .3s,box-shadow .3s;
  white-space:nowrap;
}
.btn svg{
  flex:none;box-sizing:content-box;padding:5px;border-radius:50%;
  background:rgba(255,255,255,.16);
  transition:transform .4s var(--ease-spring),background .3s;
}
.btn:hover svg{transform:translateX(2px) scale(1.08);background:rgba(255,255,255,.26);}
.btn:active{transform:scale(.97);}
.btn-small svg{padding:3px;}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 0 0 rgba(76,110,255,0);}
.btn-primary:hover{background:var(--accent-hover);box-shadow:0 10px 30px -8px rgba(76,110,255,.55);transform:translateY(-2px);}
.btn-ghost{background:#FFFFFF0D;color:var(--ink);border:1px solid var(--border);}
.btn-ghost:hover{background:#FFFFFF1A;border-color:#5b5f68;transform:translateY(-2px);}
.btn-white{background:#fff;color:var(--accent);}
.btn-white:hover{background:#eef1ff;transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(0,0,0,.25);}
.btn-white svg{background:rgba(76,110,255,.12);}
.btn-white:hover svg{background:rgba(76,110,255,.2);}
.btn-small{padding:12px 16px 12px 20px;font-size:14px;}

/* ===== Header ===== */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:78px;
  background:rgba(11,12,15,.9);
  border-bottom:1px solid var(--border);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  transition:box-shadow .3s,background .3s;
}
.header.scrolled{box-shadow:0 10px 30px -12px rgba(0,0,0,.5);background:rgba(11,12,15,.97);}
.header-inner{
  max-width:var(--container);margin:0 auto;height:100%;
  padding:0 64px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.logo{display:flex;align-items:center;gap:10px;}
.logo-mark{width:28px;height:28px;object-fit:contain;}
.logo-word{display:flex;align-items:center;gap:7px;font-family:var(--font-logo);font-size:25px;font-weight:700;letter-spacing:-.3px;}
.logo-schewz{color:var(--ink);}
.logo-media{color:var(--accent);}
.nav-links{
  position:fixed;top:0;left:0;right:0;height:78px;z-index:101;
  display:flex;align-items:center;justify-content:center;gap:34px;
  pointer-events:none;
}
.nav-links a{pointer-events:auto;}
.nav-links a{font-size:15px;font-weight:500;color:var(--ink-soft);position:relative;transition:color .25s;padding:6px 0;}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--accent);transition:width .3s cubic-bezier(.16,1,.3,1);}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after{width:100%;}
.nav-links a.active{color:var(--accent);font-weight:600;}
.nav-links a.active::after{width:100%;}
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;}
.nav-burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;}

/* ===== Hero ===== */
.hero{padding:82px 64px 140px;max-width:var(--container);margin:0 auto;position:relative;overflow:hidden;}
.hero-watermark{
  position:absolute;top:-40px;left:-90px;width:520px;height:520px;
  background:radial-gradient(circle at 30% 30%, var(--accent), transparent 70%);
  opacity:.05;border-radius:50%;pointer-events:none;
}
.hero-inner{display:flex;gap:166px;align-items:center;justify-content:flex-start;position:relative;}
.hero-left{flex:0 0 500px;display:flex;flex-direction:column;gap:30px;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent-soft);color:var(--accent);
  padding:7px 14px;border-radius:20px;
  font-family:var(--font-head);font-size:13px;font-weight:600;letter-spacing:.3px;
  transform:rotate(-2deg);width:fit-content;
}
.hero-headline{font-size:94px;letter-spacing:-2.8px;color:var(--ink);position:relative;}
.underline-wrap{position:relative;display:inline-block;color:var(--ink);white-space:nowrap;}
.underline-svg{position:absolute;left:-2px;right:-2px;bottom:-9px;width:calc(100% + 4px);height:20px;overflow:visible;}
.underline-svg path{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1.1s cubic-bezier(.16,1,.3,1) .5s;}
.reveal.visible .underline-svg path{stroke-dashoffset:0;}
.hero-intro{color:var(--ink-soft);font-size:20px;line-height:1.6;}
.hero-buttons{display:flex;align-items:center;gap:14px;margin-top:4px;}
.hero-buttons .btn{font-size:16.5px;padding:18px 31px;}
.hero-right{
  flex:none;width:480px;aspect-ratio:9/16;height:auto;
  border-radius:28px;overflow:hidden;position:relative;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
}
.hero-video{width:100%;height:100%;object-fit:cover;display:block;}

/* ===== Brand band ===== */
.brand-band{
  background:var(--surface-2);height:300px;overflow:hidden;
  display:flex;align-items:center;
}
.brand-band-shape{
  position:absolute;top:-120px;right:-40px;width:560px;height:560px;
  border-radius:50%;background:#fff;opacity:.05;
}
.brand-band-mark{
  position:absolute;left:calc((100vw - var(--container))/2 - 40px);top:50%;
  transform:translateY(-50%) rotate(-6deg);width:220px;height:auto;
  opacity:.85;pointer-events:none;
}
.typing-headline::after{content:"";display:inline-block;width:3px;height:.85em;margin-left:4px;background:var(--accent);vertical-align:-2px;animation:typing-blink .9s steps(1) infinite;}
.typing-headline.typing-done::after{display:none;}
@keyframes typing-blink{50%{opacity:0;}}
@media (min-width:1101px){.typing-headline,.nowrap-lg{white-space:nowrap;}}
.brand-band-inner{max-width:720px;margin-left:calc((100vw - var(--container))/2 + 210px);padding:0 24px;position:relative;}
.brand-band-inner h2{font-size:52px;letter-spacing:-1.2px;color:#fff;margin-bottom:12px;}
.brand-band-inner p{font-size:17px;color:#AEB6C4;max-width:640px;line-height:1.6;}

/* ===== Services ===== */
.services{background:var(--surface);padding:120px 64px;max-width:var(--container);margin:0 auto;}
.section-head{max-width:640px;margin-bottom:48px;}
.kicker{display:block;color:var(--accent);font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:1px;margin-bottom:14px;}
.section-head h2, .portfolio-head h2{font-size:46px;letter-spacing:-1px;color:var(--ink);}
.path-connector{width:100%;height:360px;margin-bottom:-6px;pointer-events:none;}
.path-connector-svg{width:100%;height:100%;display:block;overflow:visible;}
.path-connector-svg path{fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;}
.path-trunk,.path-branch{transition:stroke-dashoffset .15s linear;}
.path-arrow{opacity:0;transition:opacity .3s var(--ease-out);}
.path-arrow.arrow-visible{opacity:1;}
@media (prefers-reduced-motion:reduce){.path-trunk,.path-branch{stroke-dashoffset:0 !important;transition:none;}.path-arrow{opacity:1;transition:none;}}
@media (max-width:860px){.path-connector{display:none;}}
.services-grid{display:flex;gap:32px;}
.service-card.service-card-mobile-only{display:none;}
@media (max-width:860px){.service-card.service-card-mobile-only{display:flex;}}
.service-card{
  flex:1;background:var(--surface-2);border:1px solid var(--border);border-radius:20px;
  padding:36px;display:flex;flex-direction:column;gap:22px;
  transition:transform .5s var(--ease-spring),border-color .4s,box-shadow .4s;
}
.service-card:hover{transform:translateY(-6px);border-color:#5b5f68;box-shadow:0 20px 40px -20px rgba(0,0,0,.5);}
.icon-box{
  width:56px;height:56px;border-radius:14px;background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;color:var(--accent);
  transition:transform .5s var(--ease-spring);
}
.service-card:hover .icon-box{transform:scale(1.08) rotate(-4deg);}
.service-card h3{font-size:26px;letter-spacing:-.5px;}
.service-card p{color:var(--ink-soft);font-size:16px;line-height:1.6;}
.check-list{display:flex;flex-direction:column;gap:10px;}
.check-list li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink);}
.check-list li::before{
  content:"";flex:0 0 18px;height:18px;width:18px;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.service-card .btn{align-self:flex-start;margin-top:4px;}
.service-card .btn-ghost{
  position:relative;background:var(--accent-soft);color:var(--accent);border:1px solid rgba(76,110,255,.35);
  box-shadow:0 0 0 1px rgba(76,110,255,.08),0 8px 24px -12px rgba(76,110,255,.5);
}
.service-card .btn-ghost:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.service-card .btn-ghost{animation:btn-hop 2.6s ease-in-out infinite;}
.service-card .btn-ghost .mehr-ring{position:absolute;top:-13px;left:-18.7px;width:calc(100% + 39px);height:calc(100% + 27px);overflow:visible;pointer-events:none;transform:rotate(2.5deg);transform-origin:0 0;display:block;padding:0;margin:0;background:none;border-radius:0;box-sizing:border-box;flex:none;}
.mehr-ring path{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;stroke-dasharray:520;stroke-dashoffset:520;transition:stroke-dashoffset 1.3s cubic-bezier(.16,1,.3,1) .6s;}
.reveal.visible .mehr-ring path{stroke-dashoffset:0;}
@keyframes btn-hop{0%,35%,100%{transform:translateY(0);}17%{transform:translateY(-6px);}}
@media (prefers-reduced-motion:reduce){.service-card .btn-ghost{animation:none;}.mehr-ring path{stroke-dashoffset:0;transition:none;}}

/* ===== Portfolio ===== */
.portfolio{padding:120px 64px;max-width:var(--container);margin:0 auto;}
.portfolio-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px;flex-wrap:wrap;}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;}
.portfolio-card.offset{margin-top:48px;}
.portfolio-video-wrap{
  border-radius:20px;overflow:hidden;aspect-ratio:9/16;background:var(--surface-2);
  position:relative;box-shadow:0 20px 45px -20px rgba(0,0,0,.55);
  clip-path:inset(0 0 100% 0 round 20px);
  transition:clip-path 1s cubic-bezier(.65,0,.35,1) .15s;
}
.portfolio-card.visible .portfolio-video-wrap{clip-path:inset(0 0 0% 0 round 20px);}
.portfolio-video{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1);}
.portfolio-card:hover .portfolio-video{transform:scale(1.05);}
.case-grid .portfolio-card.reveal{
  opacity:0;transform:perspective(1000px) rotateX(-10deg) translateY(-64px) scale(.93);
  transform-origin:center top;
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);
}
.case-grid .portfolio-card.reveal.visible{opacity:1;transform:none;}
.portfolio-meta{padding-top:14px;display:flex;flex-direction:column;gap:3px;}
.portfolio-meta h4{font-size:18px;font-weight:700;color:var(--ink);}
.portfolio-meta span{font-size:14px;color:var(--ink-soft);}

/* ===== Client strip (marquee) ===== */
.client-strip{
  background:var(--surface);padding:80px 0;
  display:flex;flex-direction:column;align-items:center;gap:40px;
}
.client-label{color:var(--ink-soft);font-family:var(--font-head);font-size:13px;font-weight:600;letter-spacing:1px;padding:0 64px;text-align:center;}
.client-marquee{
  width:100%;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.client-track{
  display:flex;align-items:center;gap:76px;width:max-content;
  animation:client-marquee 34s linear infinite;
}
.client-marquee:hover .client-track{animation-play-state:paused;}
.client-track img{
  height:74px;width:auto;object-fit:contain;flex:none;
  filter:grayscale(1);opacity:.55;
  transition:opacity .35s,filter .35s,transform .35s;
}
.client-track img:hover{filter:grayscale(0);opacity:1;transform:translateY(-3px) scale(1.04);}
@keyframes client-marquee{
  from{transform:translateX(-50%);}
  to{transform:translateX(0);}
}
@media (max-width:860px){
  .client-strip{padding:56px 0;}
  .client-track{gap:44px;}
  .client-track img{height:48px;}
}

/* ===== CTA band ===== */
.cta-band{padding:100px 64px;max-width:var(--container);margin:0 auto;}
.cta-inner{
  background:var(--accent);border-radius:24px;padding:56px;
  display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;
  position:relative;overflow:hidden;
}
.cta-text h2{font-size:44px;color:#fff;letter-spacing:-1px;margin-bottom:14px;}
.cta-text p{color:#DCE2FB;font-size:17px;max-width:560px;line-height:1.6;}

/* ===== Footer ===== */
.footer{background:var(--surface-2);padding:84px 64px 32px;position:relative;overflow:hidden;}
.footer-watermark{position:absolute;top:-70px;right:80px;width:600px;height:600px;border-radius:50%;background:#fff;opacity:.09;}
.footer-top{max-width:var(--container);margin:0 auto 56px;display:flex;justify-content:space-between;gap:60px;flex-wrap:wrap;position:relative;}
.footer-brand{width:360px;display:flex;flex-direction:column;gap:18px;}
.footer-logo{display:flex;align-items:center;gap:13px;}
.footer-slogan{color:#fff;font-family:var(--font-head);font-size:19px;font-weight:600;}
.footer-desc{color:#9AA3B2;font-size:14px;line-height:1.6;}
.socials{display:flex;gap:10px;}
.socials a{
  width:40px;height:40px;border-radius:50%;background:#FFFFFF14;
  display:flex;align-items:center;justify-content:center;color:#fff;
  transition:background .3s,transform .4s var(--ease-spring);
}
.socials a:hover{background:var(--accent);transform:translateY(-3px);}
.footer-col{display:flex;flex-direction:column;gap:14px;}
.footer-title{color:#6B7486;font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:.6px;}
.footer-col a{color:#C7CDD8;font-size:15px;transition:color .25s;}
.footer-col a:hover{color:#fff;}
.footer-bottom{
  max-width:var(--container);margin:0 auto;padding-top:22px;border-top:1px solid #FFFFFF1A;
  display:flex;justify-content:space-between;color:#7B8394;font-size:13px;flex-wrap:wrap;gap:8px;
  position:relative;
}

/* ===== Responsive ===== */
@media (max-width:1100px){
  .hero-inner{flex-direction:column;align-items:flex-start;gap:56px;}
  .hero-left{flex:none;width:100%;}
  .hero-right{width:100%;max-width:380px;margin:0 auto;}
  .brand-band-inner{margin-left:64px;}
  .portfolio-grid{grid-template-columns:1fr 1fr;}
  .portfolio-card.offset{margin-top:0;}
}
@media (max-width:860px){
  .header-inner{padding:0 24px;}
  .header{background:#0B0C0F;}
  .header.scrolled{background:#0B0C0F;}
  .header .btn-primary{display:none;}
  .nav-burger{display:flex;z-index:110;}
  .nav-links{
    position:fixed;top:78px;left:0;right:0;bottom:0;height:auto;z-index:105;
    background:#0B0C0F;flex-direction:column;justify-content:center;
    gap:28px;transform:translateX(100%);transition:transform .4s cubic-bezier(.16,1,.3,1);
    pointer-events:auto;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{font-size:20px;}
  .nav-burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-burger.active span:nth-child(2){opacity:0;}
  .nav-burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .nav-burger span{transition:transform .3s,opacity .3s;}
  .hero{padding:120px 24px 80px;}
  .hero-inner{gap:40px;}
  .hero-headline{font-size:44px;}
  .hero-right{width:100%;max-width:420px;}
  .services,.portfolio,.client-strip,.cta-band,.footer{padding-left:24px;padding-right:24px;}
  .services-grid{flex-direction:column;}
  .portfolio-grid{grid-template-columns:1fr;gap:36px;}
  .cta-inner{padding:36px;}
  .cta-text h2{font-size:32px;}
  .brand-band{height:auto;padding:60px 24px;}
  .brand-band-inner{margin-left:0;}
  .hero-buttons{flex-direction:column;align-items:stretch;gap:12px;}
  .hero-buttons .btn{font-size:15px;padding:15px 24px;justify-content:center;width:100%;}
  .footer-brand{width:100%;}
  .footer-top{gap:36px;}
  .underline-svg{bottom:-6px;height:16px;}
  .underline-svg path{stroke-width:5;}
  .mehr-ring path{stroke-width:5;}
}
@media (max-width:480px){
  .hero{padding:110px 20px 60px;}
  .hero-headline{font-size:38px;}
  .hero-right{width:100%;max-width:400px;border-radius:22px;}
  .hero-intro{font-size:16px;}
  .eyebrow{font-size:12px;}
  .btn{padding:14px 22px;font-size:14px;}
  .hero-buttons .btn{font-size:14px;padding:14px 20px;}
  .section-head h2,.portfolio-head h2{font-size:32px;}
  .cta-text h2{font-size:26px;}
}

/* Zaehler-Zahl in Headlines: feste Breite, damit umgebender Text (z.B. bei
   text-align:right) waehrend der Hochzaehl-Animation nicht mitwandert */
.headline-count{display:inline-block;min-width:1.9em;text-align:left;}

/* ================================================================
   SUB-PAGE HERO (Videografie / Marketing / Über uns)
   ================================================================ */
.sub-hero{padding:172px 64px 130px;max-width:var(--container);margin:0 auto;position:relative;overflow-x:hidden;}
.sub-hero.videografie-hero{padding-top:82px;}
.sub-hero.marketing-hero{padding-top:82px;}
.sub-hero-inner{display:flex;gap:66px;align-items:center;justify-content:flex-start;position:relative;}
.sub-hero-text{flex:0 0 700px;display:flex;flex-direction:column;gap:24px;}
.sub-hero-text.center{flex:none;width:100%;max-width:760px;margin:0 auto;align-items:center;text-align:center;}
.sub-hero h1{font-size:94px;letter-spacing:-2.8px;color:var(--ink);}
.sub-hero:has(.sub-hero-media) h1{font-size:94px;letter-spacing:-2.8px;}
.sub-hero p.lead{color:var(--ink-soft);font-size:20px;line-height:1.65;max-width:620px;}
.sub-hero:has(.sub-hero-media) p.lead{font-size:20px;}
.sub-hero-media{
  flex:none;width:480px;aspect-ratio:9/16;height:auto;
  border-radius:26px;overflow:hidden;position:relative;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
}
.sub-hero-media video{width:100%;height:100%;object-fit:cover;display:block;}
.sub-hero.no-media .sub-hero-text{flex:none;width:100%;max-width:820px;}
.sub-hero.no-media{padding-bottom:60px;}

@media (max-width:1100px){
  .sub-hero-inner{flex-direction:column;align-items:flex-start;gap:48px;}
  .sub-hero-text{flex:none;width:100%;}
  .sub-hero-media{width:100%;max-width:320px;margin:0 auto;}
  .sub-hero.no-media{padding-bottom:50px;}
}
@media (max-width:860px){
  .sub-hero{padding:120px 24px 80px;}
  .sub-hero h1,.sub-hero:has(.sub-hero-media) h1{font-size:38px;letter-spacing:-1px;}
  .sub-hero:has(.sub-hero-media) p.lead{font-size:17px;}
  .sub-hero-media{width:100%;max-width:420px;}
  .sub-hero.no-media{padding-bottom:40px;}
}
@media (max-width:480px){
  .sub-hero{padding:110px 20px 60px;}
  .sub-hero h1{font-size:28px;letter-spacing:-.6px;}
  .sub-hero:has(.sub-hero-media) h1{font-size:32px;letter-spacing:-.8px;}
  .sub-hero:has(.sub-hero-media) p.lead{font-size:16px;}
  .sub-hero-media{width:100%;max-width:400px;border-radius:20px;}
  .sub-hero.no-media{padding-bottom:30px;}
}

/* ================================================================
   FULL-WIDTH MEDIA BAND (centered hero pages)
   ================================================================ */
.hero-media-band{
  max-width:var(--container);margin:0 auto 60px;padding:0 64px;
  display:flex;justify-content:center;
}
.hero-media-band .frame{
  width:360px;aspect-ratio:9/16;height:auto;border-radius:28px;overflow:hidden;position:relative;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
}
.hero-media-band video{width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:860px){.hero-media-band{padding:0 24px;margin-bottom:40px;} .hero-media-band .frame{width:100%;max-width:280px;border-radius:20px;}}
@media (max-width:480px){.hero-media-band .frame{max-width:230px;}}

/* ================================================================
   FORMATS / LEISTUNGEN GRID (3 cols)
   ================================================================ */
.formats{padding:30px 64px 120px;max-width:var(--container);margin:0 auto;}
.formats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.format-card{
  background:var(--surface);border:1px solid var(--border);border-radius:20px;
  padding:32px;display:flex;flex-direction:column;gap:16px;
  transition:transform .5s var(--ease-spring),border-color .4s,box-shadow .4s;
}
.format-card:hover{transform:translateY(-6px);border-color:#5b5f68;box-shadow:0 20px 40px -20px rgba(0,0,0,.5);}
.format-card h3{font-size:20px;letter-spacing:-.3px;}
.format-card p{color:var(--ink-soft);font-size:15px;line-height:1.6;}
@media (max-width:1100px){.formats-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:860px){.formats{padding:10px 24px 80px;} .formats-grid{grid-template-columns:1fr;gap:20px;}}
@media (max-width:480px){.formats{padding:10px 20px 60px;}}

/* ================================================================
   PROCESS STEPS (4-step flow)
   ================================================================ */
.process{background:var(--surface);padding:120px 64px;}
.process-inner{max-width:var(--container);margin:0 auto;}
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:68px;position:relative;align-items:start;}
.process-step{display:flex;flex-direction:column;gap:14px;position:relative;padding-top:10px;z-index:1;}
.process-step-down{margin-top:180px;}
.process-path{position:absolute;top:-30px;left:0;width:100%;height:240px;pointer-events:none;z-index:0;}
.process-path-svg{width:100%;height:100%;display:block;}
.process-path-line{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset .15s linear;}
/* Kurve und Kreise duerfen sich waehrend des Reveals nicht unabhaengig voneinander bewegen (sonst
   driften sie durch die gestaffelten transition-delays kurzzeitig auseinander) - nur Opacity-Fade,
   keine eigene Transform-Bewegung mehr fuer diese Elemente. */
.process-steps .process-path.reveal,
.process-steps .process-path.reveal.visible,
.process-steps .process-step.reveal,
.process-steps .process-step.reveal.visible{transform:none;}
@media (prefers-reduced-motion:reduce){.process-path-line{stroke-dashoffset:0 !important;transition:none;}}
@media (max-width:1100px){.process-path{display:none;} .process-step-down{margin-top:0;}}
.process-num{
  width:44px;height:44px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:16px;
  position:relative;z-index:1;
}
.process-step h4{font-size:19px;letter-spacing:-.3px;color:var(--ink);}
.process-step p{color:var(--ink-soft);font-size:14.5px;line-height:1.6;}
.process-step-text{display:flex;flex-direction:column;gap:14px;}
.process-num-check{display:none;}
@media (max-width:1100px){.process-steps{grid-template-columns:1fr 1fr;}}
@media (max-width:860px){
  .process{padding:80px 24px;}
  .process-steps{grid-template-columns:1fr;gap:28px;}
  .process-tracking .process-steps{gap:0;}
  .process-tracking .process-step{flex-direction:row;align-items:flex-start;gap:16px;padding-bottom:28px;}
  .process-tracking .process-step:last-child{padding-bottom:0;}
  .process-tracking .process-num{flex:none;transition:background .5s var(--ease-out),color .5s var(--ease-out);}
  .process-tracking .process-num::after{
    content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
    width:2px;height:28px;background:var(--border);transition:background .5s var(--ease-out);
  }
  .process-tracking .process-step:last-child .process-num::after{display:none;}
  .process-tracking .process-num-text{transition:opacity .3s ease;}
  .process-tracking .process-num-check{
    display:block;position:absolute;inset:0;margin:auto;width:20px;height:20px;
    opacity:0;transform:scale(.5);transition:opacity .4s var(--ease-spring),transform .4s var(--ease-spring);
  }
  .process-tracking .process-step.pt-done .process-num{background:var(--accent);color:#fff;}
  .process-tracking .process-step.pt-done .process-num::after{background:var(--accent);}
  .process-tracking .process-step.pt-done .process-num-check{opacity:1;transform:scale(1);}
  .process-tracking .process-step.pt-done .process-num-text{opacity:0;}
}
@media (max-width:480px){.process{padding:60px 20px;}}

/* ================================================================
   PROCESS STEPS WITH IMAGE (Videografie)
   ================================================================ */
.process-steps-media{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:48px;}
.process-step-media{display:flex;flex-direction:column;gap:12px;border-top:2px solid var(--border);padding-top:26px;}
.process-step-media-img{width:100%;aspect-ratio:306/240;border-radius:12px;overflow:hidden;background:var(--surface-2);}
.process-step-media-img img{width:100%;height:100%;object-fit:cover;display:block;}
.process-num-media{color:var(--accent);font-family:var(--font-head);font-weight:800;font-size:15px;letter-spacing:1px;}
.process-step-media h4{font-size:22px;letter-spacing:-.3px;color:var(--ink);}
.process-step-media p{color:var(--ink-soft);font-size:15px;line-height:1.55;}
@media (max-width:1100px){.process-steps-media{grid-template-columns:1fr 1fr;}}
@media (max-width:860px){.process-steps-media{grid-template-columns:1fr;gap:28px;}}

/* ================================================================
   STATS ROW (Über uns)
   ================================================================ */
.stats{padding:90px 64px;max-width:var(--container);margin:0 auto;}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
.stat-card{
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:30px 24px;text-align:center;transition:transform .45s var(--ease-spring),border-color .35s;
}
.stat-card:hover{transform:translateY(-4px);border-color:#5b5f68;}
.stat-num{font-family:var(--font-head);font-weight:800;font-size:38px;color:var(--accent);letter-spacing:-1px;}
.stat-label{color:var(--ink-soft);font-size:13.5px;font-weight:600;margin-top:6px;letter-spacing:.3px;}
@media (max-width:860px){.stats{padding:50px 24px;} .stats-row{grid-template-columns:1fr 1fr;gap:18px;}}
@media (max-width:480px){.stats{padding:40px 20px;} .stats-row{grid-template-columns:1fr;}}

/* ================================================================
   TEAM
   ================================================================ */
.team{padding:30px 64px 120px;max-width:var(--container);margin:0 auto;}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.team-card{
  background:var(--surface);border:1px solid var(--border);border-radius:20px;overflow:hidden;
  transition:transform .5s var(--ease-spring),border-color .4s;
}
.team-card:hover{transform:translateY(-6px);border-color:#5b5f68;}
.team-photo{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--surface-2);}
.team-photo[src*="christina-schewz"]{object-position:50% 45.5%;}
.team-photo.placeholder{display:flex;align-items:center;justify-content:center;color:var(--ink-soft);}
.team-info{padding:22px 24px 26px;}
.team-info h4{font-size:19px;letter-spacing:-.3px;color:var(--ink);}
.team-info span{display:block;color:var(--accent);font-size:14px;font-weight:600;margin-top:4px;}
@media (max-width:1100px){.team-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:860px){.team{padding:10px 24px 80px;} .team-grid{grid-template-columns:1fr;gap:20px;}}
@media (max-width:480px){.team{padding:10px 20px 60px;}}

/* ================================================================
   TESTIMONIALS
   ================================================================ */
.testimonials{background:var(--surface);padding:120px 64px;}
.testimonials-inner{max-width:var(--container);margin:0 auto;}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px;}
.testimonial-card{
  background:var(--surface-2);border:1px solid var(--border);border-radius:20px;
  padding:30px;display:flex;flex-direction:column;gap:18px;
  transition:transform .5s var(--ease-spring);
}
.testimonial-card:hover{transform:translateY(-6px);}
.testimonial-quote{color:var(--ink);font-size:15.5px;line-height:1.65;}
.testimonial-quote::before{content:"\201C";color:var(--accent);font-family:var(--font-head);font-size:32px;line-height:0;display:inline-block;transform:translateY(8px);margin-right:2px;}
.testimonial-who{display:flex;flex-direction:column;gap:2px;}
.testimonial-name{font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--ink);}
.testimonial-role{color:var(--ink-soft);font-size:13px;}
@media (max-width:1100px){.testimonials-grid{grid-template-columns:1fr;}}
@media (max-width:860px){.testimonials{padding:80px 24px;} .testimonials-grid{gap:20px;}}
@media (max-width:480px){.testimonials{padding:60px 20px;}}

/* ================================================================
   PORTFOLIO DETAIL (client case-study sections)
   ================================================================ */
.case-study{padding:90px 64px;max-width:var(--container);margin:0 auto;scroll-margin-top:90px;}
.case-study + .case-study{border-top:1px solid var(--border);}
.case-tag{
  display:inline-block;background:var(--accent-soft);color:var(--accent);
  font-family:var(--font-head);font-size:12.5px;font-weight:700;letter-spacing:.6px;
  padding:6px 14px;border-radius:20px;margin-bottom:14px;
}
.case-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:40px;}
.case-head h3{font-size:34px;letter-spacing:-.8px;color:var(--ink);}
.case-head p{color:var(--ink-soft);font-size:15.5px;line-height:1.6;max-width:520px;margin-top:8px;}
.case-count{color:var(--ink-soft);font-size:14px;font-weight:600;white-space:nowrap;}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
@media (max-width:1100px){.case-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:860px){.case-study{padding:60px 24px;} .case-grid{grid-template-columns:1fr;gap:20px;}}
@media (max-width:480px){.case-study{padding:44px 20px;} .case-head h3{font-size:26px;}}

/* ================================================================
   PORTFOLIO STACK CAROUSEL (draggable stacked video deck)
   ================================================================ */
.stack-carousel{position:relative;width:100%;height:560px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:8px 0 4px;touch-action:pan-y;}
.stack-stage{position:relative;width:100%;flex:1;}
.stack-drag{position:absolute;inset:0;z-index:50;cursor:grab;}
.stack-drag:active{cursor:grabbing;}
.stack-card{
  position:absolute;top:50%;left:50%;width:260px;aspect-ratio:9/16;border-radius:20px;overflow:hidden;
  background:var(--surface-2);box-shadow:0 20px 45px -20px rgba(0,0,0,.55);
  transform:translate(-50%,-50%);
  transition:transform .6s cubic-bezier(.34,1.56,.64,1),opacity .5s ease;
  pointer-events:none;
}
.stack-card.dragging{transition:none;}
.stack-video{width:100%;height:100%;object-fit:cover;display:block;}
.stack-nav{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:22px;}
.stack-btn{
  flex:none;width:40px;height:40px;border-radius:50%;background:var(--surface-2);
  border:1px solid var(--border);color:var(--ink);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .25s,border-color .25s,transform .3s var(--ease-spring);
}
.stack-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px);}
.stack-dots{display:flex;align-items:center;gap:9px;}
.stack-dot{width:7px;height:7px;border-radius:50%;background:var(--border);transition:background .3s,transform .3s;cursor:pointer;padding:0;border:none;}
.stack-dot.active{background:var(--accent);transform:scale(1.4);}
@media (max-width:1100px){.stack-carousel{height:480px;} .stack-card{width:220px;}}
@media (max-width:860px){.stack-carousel{height:400px;margin-top:0;} .stack-card{width:180px;} .stack-nav{margin-top:16px;gap:16px;} .stack-btn{width:36px;height:36px;}}
@media (max-width:480px){.stack-carousel{height:330px;} .stack-card{width:145px;}}

/* ================================================================
   PORTFOLIO GLOBUS (interaktiv, ziehbar, pulsierende Marker) - als
   grosses, transparentes Hintergrund-Element hinter der Hero-Headline
   ================================================================ */
.portfolio-hero{position:relative;overflow:hidden;}
.portfolio-hero .sub-hero-text{position:relative;z-index:1;pointer-events:none;}
.globe-pulse-canvas{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:680px;height:680px;z-index:0;cursor:grab;opacity:0;
  transition:opacity 1.2s ease;touch-action:none;pointer-events:auto;
}
.globe-pulse-canvas.visible{opacity:.38;}
.globe-pulse-canvas.dragging{cursor:grabbing;}
@media (max-width:1100px){.globe-pulse-canvas{width:520px;height:520px;}}
@media (max-width:860px){.globe-pulse-canvas{width:360px;height:360px;}}
/* Mobil/Tablet: Erde unter der Headline anzeigen (normaler Fluss statt Overlay) */
@media (max-width:1100px){
  .sub-hero.no-media.portfolio-hero{
    padding-bottom:60px;display:flex;flex-direction:column;align-items:center;
  }
  .portfolio-hero .sub-hero-text{order:1;}
  /* cobe erzeugt zur Laufzeit einen eigenen position:relative-Wrapper (Inline-Style,
     100% Breite/Hoehe) um das Canvas; hier auf den tatsaechlichen Inhalt zurueckstutzen,
     damit die Erde als normales Element nach der Headline erscheint. */
  .portfolio-hero > div:not([class]){
    position:static !important;width:auto !important;height:auto !important;
    order:2;text-align:center;margin-top:8px;
  }
  .portfolio-hero .globe-pulse-canvas{
    position:static;transform:none;display:block;margin:0 auto;
  }
}

/* Desktop: Globus links, Text rechts nebeneinander statt zentriert übereinander */
@media (min-width:1101px){
  .sub-hero.no-media.portfolio-hero{
    padding-bottom:60px;display:flex;align-items:center;min-height:640px;
  }
  .portfolio-hero .sub-hero-text{
    text-align:right;align-items:flex-end;max-width:620px;margin:0 0 0 auto;
  }
  .portfolio-hero .sub-hero-text p.lead{margin:0 !important;text-align:right;}
  /* cobe erzeugt zur Laufzeit einen eigenen position:relative-Wrapper um das
     Canvas; den auf static zuruecksetzen, damit .portfolio-hero (nicht der
     cobe-Wrapper) das Containing Block fuer die absolute Positionierung ist. */
  .portfolio-hero > div:not([class]){position:static !important;}
  .portfolio-hero .globe-pulse-canvas{
    left:-40px;right:auto;transform:translateY(-50%);
  }
  .portfolio-hero .globe-pulse-canvas.dragging{transform:translateY(-50%);}
}

/* ================================================================
   PORTFOLIO SCROLL EXPERIENCE (progress bar, dot nav)
   ================================================================ */
.scroll-progress{position:fixed;top:0;left:0;width:100%;height:3px;background:rgba(255,255,255,.06);z-index:200;pointer-events:none;}
.scroll-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),#8aa0ff);}
.section-dots{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:150;display:flex;flex-direction:column;gap:16px;}
.section-dot{
  width:10px;height:10px;border-radius:50%;background:transparent;
  border:2px solid rgba(255,255,255,.28);cursor:pointer;padding:0;position:relative;
  transition:background .3s,border-color .3s,transform .3s var(--ease-spring);
}
.section-dot:hover{border-color:var(--accent);}
.section-dot.active{background:var(--accent);border-color:var(--accent);transform:scale(1.35);}
.section-dot .dot-label{
  position:absolute;right:22px;top:50%;transform:translateY(-50%);white-space:nowrap;
  font-family:var(--font-head);font-size:12.5px;font-weight:600;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--border);padding:6px 12px;border-radius:8px;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.section-dot.active .dot-label{opacity:1;}
@media (max-width:860px){
  .section-dots{right:12px;gap:12px;}
  .section-dot{width:8px;height:8px;}
  .section-dot .dot-label{display:none;}
}

/* ================================================================
   CONTACT PAGE
   ================================================================ */
.contact-body{padding:20px 64px 120px;max-width:var(--container);margin:0 auto;}
.contact-grid{display:flex;gap:32px;align-items:flex-start;}
.contact-form{
  flex:1;background:var(--surface-2);border:1px solid var(--border);border-radius:22px;
  padding:40px;display:flex;flex-direction:column;gap:22px;
}
.form-row{display:flex;gap:18px;}
.form-group{flex:1;display:flex;flex-direction:column;gap:8px;}
.form-group label{font-family:var(--font-head);font-size:14px;font-weight:600;color:var(--ink);}
.form-group input,.form-group textarea,.form-group select{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:14px 16px;color:var(--ink);font-family:var(--font-body);font-size:15px;
  transition:border-color .25s,box-shadow .25s;width:100%;
}
.form-group input::placeholder,.form-group textarea::placeholder{color:#98A2B0;}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(76,110,255,.2);
}
.form-group textarea{resize:vertical;min-height:120px;font-family:var(--font-body);}
.chip-group{display:flex;gap:10px;}
.chip{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:13px 16px;font-family:var(--font-head);font-size:14px;font-weight:600;color:var(--ink-soft);
  cursor:pointer;transition:all .25s;
}
.chip svg{width:17px;height:17px;}
.chip.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);}
.contact-form .btn{width:100%;justify-content:center;margin-top:4px;}
.direct-contact{
  width:380px;flex:none;background:var(--surface-2);border-radius:22px;padding:36px;
  display:flex;flex-direction:column;gap:22px;
}
.direct-contact h3{color:#fff;font-size:22px;letter-spacing:-.4px;}
.direct-contact > p{color:#AEB6C4;font-size:14.5px;line-height:1.6;}
.direct-row{display:flex;gap:14px;align-items:center;}
.direct-icon{
  width:44px;height:44px;border-radius:12px;background:#FFFFFF14;flex:none;
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.direct-meta{display:flex;flex-direction:column;gap:2px;}
.direct-meta .l{color:#7B8394;font-size:11.5px;font-weight:600;letter-spacing:.5px;}
.direct-meta .v{color:#fff;font-family:var(--font-head);font-size:15.5px;font-weight:600;}
.direct-divider{height:1px;background:#FFFFFF1A;}
.direct-follow-label{color:#7B8394;font-family:var(--font-head);font-size:12.5px;font-weight:700;letter-spacing:.6px;}
.direct-socials{display:flex;gap:10px;}
.direct-socials a{
  display:flex;align-items:center;gap:8px;background:#FFFFFF14;color:#fff;border-radius:12px;
  padding:11px 16px;font-family:var(--font-head);font-size:14px;font-weight:600;transition:background .3s,transform .3s;
}
.direct-socials a:hover{background:var(--accent);transform:translateY(-2px);}
@media (max-width:1100px){.contact-grid{flex-direction:column;gap:24px;align-items:stretch;} .direct-contact{width:100%;}}
@media (max-width:860px){.contact-body{padding:10px 24px 80px;} .contact-form{padding:26px;} .form-row{flex-direction:column;gap:22px;}}
@media (max-width:480px){.contact-body{padding:10px 20px 60px;} .contact-form,.direct-contact{padding:22px;}}

/* ================================================================
   LEGAL PAGES (Impressum / Datenschutz)
   ================================================================ */
.legal-header{padding:172px 64px 30px;max-width:var(--container);margin:0 auto;}
.legal-header h1{font-size:44px;letter-spacing:-1.2px;color:var(--ink);margin-top:10px;}
.legal-body{padding:10px 64px 120px;max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:32px;}
.legal-intro{color:var(--ink-soft);font-size:16px;line-height:1.7;}
.legal-note{
  display:flex;align-items:center;gap:10px;background:var(--accent-soft);color:var(--accent);
  border-radius:12px;padding:14px 18px;font-size:14px;line-height:1.5;
}
.legal-note svg{flex:none;}
.legal-block h3{font-size:20px;color:var(--ink);margin-bottom:8px;}
.legal-block p{color:var(--ink-soft);font-size:15px;line-height:1.7;white-space:pre-line;}
@media (max-width:860px){.legal-header{padding:120px 24px 20px;} .legal-body{padding:10px 24px 60px;}}