* {
  margin:0;
  padding:0;
  box-sizing:border-box
}

html,body {
  scroll-behavior: smooth;
  height:100%;
  font-family:"Poppins",sans-serif;
  background:#000;color:#fff
}

.nav {
  position:fixed;
  top:0;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 28px;
  z-index:5000;
  background:#fff;
  backdrop-filter:blur(12px)
}

.nav-logo img {
  height:40px;
  width:auto;
  border-radius:8px
}

.nav-links {
  display:flex;
  gap:28px
}

.nav-links a {
  text-decoration:none;
  color:#111;
  font-weight:500
}

.hero {
  position:relative;
  height:100vh;
  overflow:hidden
}

.hero-bg {
  position:absolute;
  inset:0;
  z-index:1000
}

.hero-bg spline-viewer,.hero-bg video {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  background:#fff0
}

.hero-overlay {
  position:absolute;
  inset:0;
  z-index:1500;
  pointer-events:none;
  background:linear-gradient(90deg,rgb(0 0 0 / .65) 0%,#fff0 60%)
}

.hero-content {
  pointer-events:none;
  position:relative;
  z-index:2000;
  max-width:640px;
  margin-left:7vw;
  padding-top:22vh
}

.hero-content a,.hero-content button {
  pointer-events:auto
}

.hero-content h1 {
  font-size:clamp(2rem, 5vw, 3.5rem);
  line-height:1.1;
  font-weight:700;
  margin-bottom:20px
}

.hero-content .accent {
  color:#00d4ff
}

.hero-content p {
  color:rgb(255 255 255 / .9);
  margin-bottom:26px;
  font-size:1.1rem;
  max-width:50ch
}

.hero-actions {
  display:flex;
  gap:16px;
  align-items:center
}

.liquid-btn {
  border:0;
  padding:14px 26px;
  border-radius:999px;
  font-weight:600;
  font-size:1rem;
  background:linear-gradient(135deg,#0070f3 0%,#00d4ff 100%);
  color:#fff;cursor:pointer;
  position:relative;
  overflow:hidden;
  box-shadow:0 8px 30px rgb(0 0 0 / .25);
  transition:transform 0.25s ease,box-shadow 0.25s ease
}

.liquid-btn:hover {
  transform:translateY(-3px);
  box-shadow:0 14px 40px rgb(0 0 0 / .35)
}

.ghost-link {
  color:#fff;
  text-decoration:none;
  font-weight:600
}

.social-icons {
  position:absolute;
  bottom:24px;
  left:7vw;
  z-index:2000;
  display:flex;
  gap:18px;
  font-size:1.3rem
}

.social-icons a {
  color:rgb(255 255 255 / .9);
  transition:color 0.2s
}

.social-icons a:hover {
  color:#00d4ff
}

#site-loader {
  position:fixed;
  inset:0;
  background:#000;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  z-index:99999;
  transition:opacity 0.6s ease;
  font-family:"Poppins",sans-serif
}

#site-loader.hidden {
  opacity:0;
  pointer-events:none
}

#site-loader .loader-inner {
  text-align:center
}

#site-loader .loader-percent {
  font-size:clamp(2rem, 6vw, 3.5rem);
  font-weight:700;
  margin-bottom:14px
}

#site-loader .loader-phrase {
  font-size:1rem;
  opacity:.85;
  min-height:28px
}

.case-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  padding:80px 7vw
}

.case-item {
  position:relative;
  overflow:hidden;
  border-radius:16px;
  box-shadow:0 8px 30px rgb(0 0 0 / .15);
  opacity:0;
  transition:transform 0.9s ease-out,opacity 0.9s ease-out;
  will-change:transform,opacity
}

.case-item.from-top {
  transform:translateY(-80px)
}

.case-item.from-bottom {
  transform:translateY(80px)
}

.case-item.show {
  opacity:1;
  transform:translateY(0)
}

.case-item img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.6s ease
}

.case-item:hover img {
  transform:scale(1.05)
}

@media (max-width:1024px){.case-grid{grid-template-columns:repeat(2,1fr)}}

@media (max-width:768px){.nav-links{display:none}
.hero-content{margin-left:6vw;padding-top:18vh}
.hero-content h1{font-size:clamp(1.6rem, 6vw, 2.2rem)}
.hero-content p{font-size:1rem}}

@media (max-width:600px){.case-grid{grid-template-columns:1fr}}

.problem-solution{background:#fff;color:#111;padding:100px 7vw}

.problem-solution .container{max-width:1200px;margin:0 auto}

.problem-solution h2{font-size:clamp(2rem, 5vw, 3rem);text-align:center;margin-bottom:60px;font-weight:700;color:#000}

.ps-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}

.ps-item{background:#f7f7f7;padding:40px;border-radius:16px;box-shadow:0 8px 25px rgb(0 0 0 / .08);transition:transform 0.3s ease,box-shadow 0.3s ease}

.ps-item:hover{transform:translateY(-6px);box-shadow:0 14px 40px rgb(0 0 0 / .12)}

.ps-item h3{margin-bottom:18px;font-size:1.5rem;color:#0070f3}

.ps-item.problem h3{color:#e63946}

.ps-item.solution h3{color: #2a9d8f} 

.ps-item p{font-size:1.1rem;line-height:1.6}

@media (max-width:900px){.ps-grid{grid-template-columns:1fr}}

.case-item{position:relative;overflow:hidden;border-radius:20px;box-shadow:0 12px 40px rgb(0 0 0 / .15);opacity:0;transform:scale(.95) translateY(40px);transition:transform 1s cubic-bezier(.22,1,.36,1),opacity 0.9s ease-out,box-shadow 0.4s ease}

.case-item.show{opacity:1;transform:scale(1) translateY(0)}

.case-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.19,1,.22,1)}

.case-item:hover{box-shadow:0 20px 60px rgb(0 0 0 / .25);transform:scale(1.03) translateY(-6px)}

.case-item:hover img{transform:scale(1.08)}

.ps-item{background:#f7f7f7;padding:40px;border-radius:18px;box-shadow:0 12px 35px rgb(0 0 0 / .08);transition:transform 0.6s cubic-bezier(.22,1,.36,1),box-shadow 0.6s ease,background 0.4s ease}

.ps-item:hover{transform:translateY(-10px) scale(1.03);box-shadow:0 18px 60px rgb(0 0 0 / .18);background:#fff}

.ps-item h3{position:relative}

.ps-item h3::after{content:"";position:absolute;left:0;bottom:-8px;width:40px;height:3px;background:currentColor;border-radius:2px;transition:width 0.4s ease}

.ps-item:hover h3::after{width:80px}

.fade-in{opacity:0;transform:translateY(40px);transition:opacity 1s ease-out,transform 1s cubic-bezier(.22,1,.36,1)}

.fade-in.show{opacity:1;transform:translateY(0)}

:root{--visor-size:28px;--inner-size:10px}

.mouse-visor{position:fixed;left:0;top:0;width:var(--visor-size);height:var(--visor-size);pointer-events:none;z-index:99999;transform:translate3d(-50%,-50%,0);border:2px solid var(--visor-color,#fff);border-radius:6px;background:#fff0;mix-blend-mode:difference;transition:transform 0.15s ease-out,border-color 0.3s ease}

.mouse-visor.active{transform:translate3d(-50%,-50%,0) scale(1.25);border-color:#00d4ff}

.contact-section{background:#000;color:#fff;padding:120px 7vw;text-align:center}

.contact-container h2{font-size:clamp(2rem, 6vw, 3rem);font-weight:700;margin-bottom:20px}

.contact-container p{font-size:1.2rem;opacity:.85;margin-bottom:50px}

.contact-links{display:flex;justify-content:center;gap:28px;flex-wrap:wrap}

.contact-item{display:flex;align-items:center;gap:12px;padding:16px 32px;border-radius:999px;border:2px solid #fff;color:#fff;font-weight:600;font-size:1.1rem;text-decoration:none;transition:all 0.4s cubic-bezier(.22,1,.36,1);backdrop-filter:blur(8px)}.contact-item:hover{background:#00d4ff;border-color:#00d4ff;color:#000;transform:translateY(-4px);box-shadow:0 10px 40px rgb(0 212 255 / .3)}

.contact-item i{font-size:1.3rem}

.nav-links a{position:relative;text-decoration:none;color:#111;font-weight:500;transition:color 0.3s ease}

.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0%;height:2px;background:#00d4ff;transition:width 0.3s ease}

.nav-links a:hover{color:#00d4ff}

.nav-links a:hover::after{width:100%}

.footer{background:#000;color:#fff;padding:50px 7vw;font-size:.95rem;border-top:1px solid rgb(255 255 255 / .1)}

.footer-container{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:40px}

.footer-left p{margin-top:12px;opacity:.7;font-size:.9rem}

.footer-logo{height:40px;width:auto;border-radius:8px}

.footer-center,.footer-right{display:flex;flex-direction:column;gap:10px}

.footer a{color:rgb(255 255 255 / .8);text-decoration:none;transition:color 0.3s ease}

.footer a:hover{color:#00d4ff}

@media (max-width:768px){.footer-container{flex-direction:column;align-items:center;text-align:center}}

.kontakt{background:#000;color:#fff;padding:140px 10vw;text-align:center}

.kontakt h2{font-size:1rem;text-transform:uppercase;letter-spacing:3px;color:rgb(255 255 255 / .5);margin-bottom:40px}

.kontakt .big-text{font-size:clamp(1.6rem, 2vw + 1rem, 2.4rem);margin-bottom:40px;font-weight:600}

.kontakt-info p{margin:14px 0;font-size:1.2rem}

.kontakt-info a{color:#00d4ff;text-decoration:none;font-weight:600}

.kontakt-info a:hover{text-decoration:underline}html{scroll-behavior:smooth}

.footer{background:#111;color:#aaa;text-align:center;padding:40px 20px;font-size:.9rem}

.footer a{color:#aaa;text-decoration:none;margin:0 6px}

.footer a:hover{color:#00d4ff}.about{background:#000;color:#fff;padding:160px 10vw}

.about-inner{max-width:1100px;margin:0 auto}

.about h2{font-size:1rem;letter-spacing:3px;text-transform:uppercase;color:rgb(255 255 255 / .5);margin-bottom:50px}

.big-text{font-size:clamp(1.6rem, 2vw + 1rem, 2.6rem);font-weight:600;line-height:1.5;margin-bottom:60px;color:#fff}

.big-text .highlight{color:#00d4ff;font-weight:700}

.fade-in{opacity:0;transform:translateY(40px);transition:opacity 0.9s ease-out,transform 0.9s ease-out}

.fade-in.show{opacity:1;transform:translateY(0)}

@media (max-width:800px){.big-text{font-size:1.4rem;margin-bottom:40px}}

.angebot{background:#f7f7f7;color:#111;padding:160px 10vw}

.angebot-inner{max-width:1100px;margin:0 auto}

.angebot h2{font-size:1rem;letter-spacing:3px;text-transform:uppercase;color:rgb(0 0 0 / .5);margin-bottom:50px}

.angebot .big-text{font-size:clamp(1.5rem, 2vw + 1rem, 2.4rem);font-weight:600;line-height:1.5;margin-bottom:60px;color:#111}

.angebot .highlight{color:#0070f3;font-weight:700}

.fade-in{opacity:0;transform:translateY(40px);transition:opacity 0.9s ease-out,transform 0.9s ease-out}

.fade-in.show{opacity:1;transform:translateY(0)}

@media (max-width:800px){.angebot .big-text{font-size:1.3rem;margin-bottom:40px}}

:root{--visor-size:25px;--inner-size:8px}

.mouse-visor{position:fixed;left:0;top:0;width:var(--visor-size);height:var(--visor-size);pointer-events:none;z-index:99999;transform:translate3d(-50%,-50%,0);transition:transform .1s ease-out,opacity .15s linear;border:1.5px solid rgb(255 255 255 / .95);border-radius:4px;background:#fff0;will-change:transform,left,top,opacity}

.visor-inner{position:absolute;left:50%;top:50%;width:var(--inner-size);height:var(--inner-size);transform:translate(-50%,-50%);background:#fff;mix-blend-mode:difference} 

.mouse-visor.active{transform:translate3d(-50%,-50%,0) scale(1.25);border-color:rgb(0 212 255)}

@media (pointer:coarse){.mouse-visor{display:none}} 

.nav-burger { display: none; font-size: 1.6rem; color: #111; cursor: pointer; } 

@media (max-width: 768px) { .nav-links { display: flex; flex-direction: column; gap: 20px; position: absolute; top: 70px; right: 20px; background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.15); transform: translateY(-20px); opacity: 0; pointer-events: none; transition: all 0.3s ease; } 

.nav-links.active { transform: translateY(0); opacity: 1; pointer-events: auto; }

.nav-burger { display: block; } } 

.liquid-btn { text-decoration: none; /* Unterstrich entfernen */ display: inline-block; /* optional für bessere Button-Optik */ } 

.hero-bg { position:absolute; inset:0; z-index:1000; } 

.hero-fallback { width:100%; height:100%; object-fit:cover; display:block; } 

.hero-content { position:relative; z-index:2000; max-width:640px; margin-left:7vw; padding-top:22vh; pointer-events:none; } 

.hero-content a { pointer-events:auto; } 

.liquid-btn { text-decoration:none; display:inline-block; } 

.hero-overlay { position: absolute; inset: 0; z-index: 1500; pointer-events: none; background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 60%); } /* Webpitch Section – schwarzer Hintergrund, weiße Schrift */ 

.webpitch { padding: 160px 10vw; background: #000; color: #fff; } 

.webpitch-inner { max-width: 1100px; margin: 0 auto; }

.webpitch h2 { font-size: 1rem; letter-spacing: 3px; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 50px; } 

.webpitch .big-text { font-size: clamp(1.6rem, 2vw + 1rem, 2.6rem); font-weight: 600; line-height: 1.5; margin-bottom: 60px; color: #fff; } 

.webpitch .highlight { color: #00d4ff; font-weight: 700; } /* GB vs Webseite Section – weißer Hintergrund, dunkle Schrift */ 

.gb-vs-web { padding: 160px 10vw; background: #f7f7f7; color: #111; } 

.gb-vs-web-inner { max-width: 1100px; margin: 0 auto; } 

.gb-vs-web h2 { font-size: 1rem; letter-spacing: 3px; text-transform: uppercase; color: rgba(0,0,0,0.5); margin-bottom: 50px; } 

.gb-vs-web .big-text { font-size: clamp(1.6rem, 2vw + 1rem, 2.6rem); font-weight: 600; line-height: 1.5; margin-bottom: 60px; color: #111; } 

.gb-vs-web .highlight { color: #00d4ff; font-weight: 700; } /* Fade-In Animation */ 

.fade-in { opacity: 0; transform: translateY(40px); transition: opacity 0.9s ease-out, transform 0.9s ease-out; } 

.fade-in.show { opacity: 1; transform: translateY(0); } 

.highlight-offer { background-color: #00dcff; /* Türkis */ color: #000; /* schwarzer Text */ padding: 120px 10vw; text-align: center; } 

.highlight-offer h2 { color: #000; /* Überschrift schwarz */ font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 60px; font-weight: 700; } 

.services-grid { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; } 

.service-box { background: #fff; /* Weiß bleibt */ padding: 40px 30px; border-radius: 20px; flex: 1 1 280px; max-width: 320px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,0.15); transition: transform 0.4s cubic-bezier(.22,1,.36,1), box-shadow 0.4s cubic-bezier(.22,1,.36,1); cursor: pointer; } 

.service-box:hover { transform: translateY(-12px) scale(1.05) rotateZ(0.5deg); box-shadow: 0 25px 70px rgba(0,0,0,0.3); } 

.service-box:active { transform: translateY(-4px) scale(0.98); box-shadow: 0 8px 30px rgba(0,0,0,0.2); } 

.cta-btn { background: #000; color: #fff; padding: 16px 40px; border-radius: 999px; font-weight: 600; text-decoration: none; transition: transform 0.25s, box-shadow 0.25s; } 

.cta-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } 

.fade-in, .case-item, .ps-item, .service-box { opacity: 0; transform: translateY(40px); transition: opacity 0.9s ease-out, transform 0.9s cubic-bezier(.22,1,.36,1); } 

.fade-in.show, .case-item.show, .ps-item.show, .service-box.show { opacity: 1; transform: translateY(0); } 

.gradient-section { background: linear-gradient(180deg, #f7f7f7 0%, #00dcff 100%); padding: 120px 10vw; color: #111; } /* Überschrift */ 

.leistungen-title { font-size: clamp(2rem, 5vw, 3rem); text-align: center; font-weight: 700; color: #000; margin-bottom: 80px; } 

.menu-toggle { transition: transform 0.3s ease, background 0.3s ease; } 

.menu-toggle:hover { transform: scale(1.2) rotate(10deg); background: #1abc9c; } 

.nav-links li { opacity: 0; transform: translateY(-20px); transition: opacity 0.5s ease, transform 0.5s ease; } 

.nav-links.active li { opacity: 1; transform: translateY(0); } 

.nav-links.active li:nth-child(1) { transition-delay: 0.1s; } 

.nav-links.active li:nth-child(2) { transition-delay: 0.2s; } 

.nav-links.active li:nth-child(3) { transition-delay: 0.3s; }  

/* ===== Burger Hover ===== */ 

.nav-burger { transition: transform 0.3s ease, scale 0.3s ease; } 

.nav-burger:hover { transform: scale(1.2) rotate(5deg); } 

/* ===== Service-Box 3D Hover ===== */ 

.service-box { transition: transform 0.4s cubic-bezier(.22,1,.36,1), box-shadow 0.4s cubic-bezier(.22,1,.36,1); } 

.service-box:hover { transform: translateY(-10px) scale(1.05) rotateX(2deg) rotateY(2deg); box-shadow: 0 25px 60px rgba(0,0,0,0.25); } 

/* ===== Liquid / Pulsing Buttons ===== */

.liquid-btn { position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } 

.liquid-btn::after { content: ""; position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; background: rgba(0,212,255,0.2); border-radius: 50%; transform: scale(0); transition: transform 0.4s ease; } 

.liquid-btn:hover::after { transform: scale(1); }

.liquid-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.2); } /* ===== Fade-In On Scroll ===== */

.fade-in { opacity: 0; transform: translateY(40px); transition: opacity 0.9s ease-out, transform 0.9s cubic-bezier(.22,1,.36,1); } 

.fade-in.show { opacity: 1; transform: translateY(0); } 

/* ===== Typed Text ===== */ 

.hero-typed { color: #00d4ff; font-weight: 700; display: inline-block; }


.nav-burger {
  width: 30px;
  height: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 5001;
}

.nav-burger span {
  display: block;
  height: 3px;
  width: 100%;
  background: #111;
  border-radius: 2px;
  transition: all 0.4s ease;
}

/* Burger wird X */
.nav-burger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav-burger.active span:nth-child(2) {
  opacity: 0;
}

.nav-burger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

.nav-burger {
  display: none; /* Desktop ausblenden */
}

@media (max-width: 768px) {
  .nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 24px;
    cursor: pointer;
    z-index: 5001;
  }
  
  .nav-links {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: absolute;
    top: 70px;
    right: 20px;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
  }
  
  .nav-links.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}


.partner-logos {
  padding: 60px 20px;
  background: #111;
  overflow: hidden;
}
.partner-logos h2 {
  text-align: center;
  color: #fff;
  margin-bottom: 30px;
}
.logo-slider {
  overflow: hidden;
  position: relative;
}
.slide-track {
  display: flex;
  width: calc(250px * 10); /* Anzahl Logos * Größe */
  animation: scroll 25s linear infinite;
}
.slide-track img {
  height: 60px;
  margin: 0 40px;
  filter: brightness(0) invert(1); /* alles weiß */
  opacity: 0.8;
  transition: 0.3s;
}
.slide-track img:hover {
  opacity: 1;
  transform: scale(1.1);
}
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.slide-track img {
  height: 40px;
  margin: 0 30px;
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: 0.3s;
}
.slide-track img:hover {
  opacity: 1;
  transform: scale(1.05);
}



/* Parallax Effekt im Hero */
.hero-content {
  transform: translateY(0);
  transition: transform 0.2s ease-out;
  will-change: transform;
}

/* Magnet Button */
.magnet-btn {
  position: relative;
  display: inline-block;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  background: linear-gradient(135deg,#0070f3 0%,#00d4ff 100%);
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 8px 30px rgb(0 0 0 / .25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
}

.magnet-btn:hover {
  box-shadow: 0 14px 40px rgb(0 0 0 / .35);
}

.magnet-btn span {
  position: relative;
  z-index: 2;
}

.magnet-btn::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: inherit;
  background: rgba(255,255,255,0.15);
  opacity: 0;
  transition: opacity 0.3s;
}

.magnet-btn:hover::after {
  opacity: 1;
}

/* Vibrations-Animation */
@keyframes vibrate {
  0%   { transform: translate(0); }
  20%  { transform: translate(-2px, 2px); }
  40%  { transform: translate(-2px, -2px); }
  60%  { transform: translate(2px, 2px); }
  80%  { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

.social-icons a:hover i,
.contact-item:hover i {
  animation: vibrate 0.25s linear;
}

.partner-logos img {
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
}

.partner-logos img:hover {
  transform: rotateY(15deg) scale(1.05);
}



.service-box {
  background: #fff;
  padding: 40px 30px;
  border-radius: 20px;
  flex: 1 1 280px;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(.22,1,.36,1),
              box-shadow 0.4s cubic-bezier(.22,1,.36,1);
}

/* Premium Hover Effekt */
.service-box::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, #0070f3, #00d4ff);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}

.service-box:hover::after {
  opacity: 0.1; /* leichter Glow */
}

.service-box:hover {
  transform: translateY(-12px) scale(1.05);
  box-shadow: 0 25px 70px rgba(0,0,0,0.25);
}

.service-box i,
.service-box h3,
.service-box p {
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.service-box:hover h3 {
  color: #0070f3;
}

.service-box:hover i {
  color: #00d4ff;
}

.ps-item {
  background: #f7f7f7;
  padding: 40px;
  border-radius: 18px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
  transition: transform 0.6s cubic-bezier(.22,1,.36,1),
              box-shadow 0.6s ease,
              background 0.4s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* Premium Hover Layer */
.ps-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}

.ps-item:hover::after {
  opacity: 0.1;
}

.ps-item h3,
.ps-item p {
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}



.ps-item:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  background: #fff;
}