/* =========================================================
   Yemane InfoTech - Creative About Hero
   gebaut als echtes HTML/CSS-Layout, nicht als Hintergrundbild
   ========================================================= */

.about-page{
  padding-top:0!important;
}

.about-hero-modern.yi-about-creative{
  position:relative!important;
  width:100%!important;
  max-width:1180px!important;
  margin:0 auto 32px!important;
  padding:clamp(42px,6vw,76px) clamp(22px,5vw,74px)!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 13% 18%, rgba(0,229,255,.16), transparent 30%),
    radial-gradient(circle at 86% 20%, rgba(107,77,255,.15), transparent 28%),
    linear-gradient(135deg, #06101f 0%, #081a31 48%, #050b14 100%)!important;
}

.about-hero-modern.yi-about-creative::before,
.about-hero-modern.yi-about-creative::after{
  display:none!important;
  content:none!important;
}

.yi-about-creative .about-creative-head{
  display:grid!important;
  grid-template-columns:minmax(0,1.03fr) minmax(300px,.86fr)!important;
  gap:clamp(24px,5vw,72px)!important;
  align-items:center!important;
  margin-bottom:clamp(28px,4vw,50px)!important;
}

.yi-about-creative .about-copy{
  text-align:left!important;
  max-width:720px!important;
}

.yi-about-creative .about-kicker{
  display:inline-flex!important;
  align-items:center!important;
  gap:12px!important;
  margin:0 0 18px!important;
  color:#00e5ff!important;
  letter-spacing:.42em!important;
  text-transform:uppercase!important;
  font-weight:900!important;
  font-size:clamp(.85rem,1vw,1rem)!important;
  text-shadow:0 0 18px rgba(0,229,255,.45)!important;
}

.yi-about-creative .about-kicker::after{
  content:""!important;
  width:150px!important;
  height:2px!important;
  background:linear-gradient(90deg,#00e5ff,transparent)!important;
  box-shadow:0 0 16px rgba(0,229,255,.65)!important;
}

.yi-about-creative h1{
  margin:0 0 24px!important;
  color:#fff!important;
  font-size:clamp(4.2rem,9vw,8.4rem)!important;
  line-height:.9!important;
  letter-spacing:-.075em!important;
  font-weight:950!important;
  text-shadow:0 18px 46px rgba(0,0,0,.48)!important;
}

.yi-about-creative h1 span{
  color:transparent!important;
  background:linear-gradient(135deg,#00e5ff 0%,#2f80ff 48%,#8b5cff 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  text-shadow:none!important;
}

.yi-about-creative .about-lead{
  max-width:680px!important;
  margin:0!important;
  color:rgba(244,249,255,.94)!important;
  font-size:clamp(1.06rem,1.8vw,1.55rem)!important;
  line-height:1.65!important;
}

/* Built orbit illustration */
.yi-about-creative .about-orbit-built{
  position:relative!important;
  width:min(380px,34vw)!important;
  aspect-ratio:1!important;
  min-width:300px!important;
  margin-left:auto!important;
  isolation:isolate!important;
}

.yi-about-creative .orbit-core{
  position:absolute!important;
  inset:28%!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  background:radial-gradient(circle,rgba(0,229,255,.24),rgba(47,128,255,.12) 48%,rgba(3,9,18,.34) 70%)!important;
  border:2px solid rgba(0,229,255,.54)!important;
  box-shadow:0 0 34px rgba(0,158,255,.38), inset 0 0 32px rgba(0,229,255,.16)!important;
  z-index:3!important;
}

.yi-about-creative .orbit-user-icon{
  width:56%!important;
  height:56%!important;
  fill:none!important;
  stroke:#2f80ff!important;
  stroke-width:1.9!important;
  filter:drop-shadow(0 0 18px rgba(47,128,255,.65))!important;
}

.yi-about-creative .orbit-ring{
  position:absolute!important;
  border-radius:50%!important;
  inset:12%!important;
  border:1px solid rgba(47,128,255,.28)!important;
  box-shadow:inset 0 0 24px rgba(47,128,255,.12)!important;
}

.yi-about-creative .ring-one{
  inset:7%!important;
  border-style:dashed!important;
  animation:yiOrbitSpin 32s linear infinite!important;
}

.yi-about-creative .ring-two{
  inset:20%!important;
  border-color:rgba(0,229,255,.25)!important;
}

@keyframes yiOrbitSpin{to{transform:rotate(360deg)}}

.yi-about-creative .orbit-node{
  position:absolute!important;
  width:72px!important;
  height:72px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  z-index:4!important;
  border:1px solid currentColor!important;
  background:rgba(3,9,18,.72)!important;
  box-shadow:0 0 30px color-mix(in srgb, currentColor 32%, transparent)!important;
}

.yi-about-creative .orbit-node svg{
  width:34px!important;
  height:34px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2.25!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

.yi-about-creative .node-blue{color:#00b7ff!important;left:8%;top:5%}
.yi-about-creative .node-purple{color:#8b5cff!important;right:4%;top:8%}
.yi-about-creative .node-green{color:#00f0aa!important;left:2%;bottom:12%}
.yi-about-creative .node-orange{color:#ff9f1c!important;right:8%;bottom:8%}

/* Creative cards */
.yi-about-creative .creative-stats{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:clamp(18px,2.6vw,28px)!important;
  width:100%!important;
}

.yi-about-creative .creative-card{
  position:relative!important;
  min-height:160px!important;
  display:grid!important;
  grid-template-columns:112px 1px minmax(0,1fr) 26px!important;
  align-items:center!important;
  gap:30px!important;
  padding:26px 34px!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,rgba(7,19,36,.78),rgba(3,9,18,.72))!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 20px 56px rgba(0,0,0,.25)!important;
  overflow:hidden!important;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease!important;
}

.yi-about-creative .creative-card:hover{
  transform:translateY(-4px)!important;
}

.yi-about-creative .stat-icon-box{
  width:86px!important;
  height:86px!important;
  border-radius:22px!important;
  display:grid!important;
  place-items:center!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid currentColor!important;
  box-shadow:0 0 28px color-mix(in srgb, currentColor 25%, transparent)!important;
}

.yi-about-creative .stat-icon-box svg{
  width:44px!important;
  height:44px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2.25!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

.yi-about-creative .stat-divider{
  width:1px!important;
  height:74px!important;
  background:linear-gradient(180deg,transparent,currentColor,transparent)!important;
  opacity:.7!important;
}

.yi-about-creative .creative-card strong{
  display:block!important;
  color:#fff!important;
  font-size:clamp(2.7rem,4vw,4.4rem)!important;
  line-height:.9!important;
  margin:0 0 10px!important;
  letter-spacing:-.05em!important;
}

.yi-about-creative .creative-card span{
  color:rgba(245,249,255,.95)!important;
  font-size:clamp(1rem,1.45vw,1.35rem)!important;
  line-height:1.3!important;
  font-weight:500!important;
}

.yi-about-creative .creative-card b{
  color:currentColor!important;
  font-weight:900!important;
}

.yi-about-creative .card-line{
  position:absolute!important;
  left:22px!important;
  right:22px!important;
  bottom:14px!important;
  height:3px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,currentColor,transparent 82%)!important;
  box-shadow:0 0 16px currentColor!important;
  opacity:.9!important;
}

.yi-about-creative .card-blue{color:#00b7ff!important;border-color:rgba(0,183,255,.36)!important}
.yi-about-creative .card-purple{color:#8b5cff!important;border-color:rgba(139,92,255,.34)!important}
.yi-about-creative .card-green{color:#00f0aa!important;border-color:rgba(0,240,170,.34)!important}
.yi-about-creative .card-orange{color:#ff9f1c!important;border-color:rgba(255,159,28,.32)!important}

@media(max-width:980px){
  .yi-about-creative .about-creative-head{
    grid-template-columns:1fr!important;
    text-align:left!important;
  }
  .yi-about-creative .about-orbit-built{
    display:none!important;
  }
}

@media(max-width:760px){
  .about-hero-modern.yi-about-creative{
    padding:34px 18px!important;
  }
  .yi-about-creative .creative-stats{
    grid-template-columns:1fr!important;
  }
  .yi-about-creative .creative-card{
    grid-template-columns:84px 1px minmax(0,1fr)!important;
    min-height:128px!important;
    padding:22px!important;
    gap:18px!important;
  }
  .yi-about-creative .stat-icon-box{
    width:68px!important;
    height:68px!important;
    border-radius:18px!important;
  }
  .yi-about-creative .stat-icon-box svg{
    width:34px!important;
    height:34px!important;
  }
}

@media(max-width:480px){
  .yi-about-creative h1{
    font-size:3.6rem!important;
  }
  .yi-about-creative .creative-card{
    grid-template-columns:1fr!important;
    text-align:left!important;
  }
  .yi-about-creative .stat-divider{
    display:none!important;
  }
}


/* =========================================================
   CENTER + RESPONSIVE + SMALLER CARDS FIX
   Ziel:
   - Über-mich Hero zentriert und fest
   - 4 Karten kleiner/professioneller
   - auf Desktop, Tablet und Handy sauber responsive
   ========================================================= */

.about-hero-modern.yi-about-creative{
  max-width:1120px!important;
  margin:0 auto 30px!important;
  padding:clamp(34px,5vw,58px) clamp(22px,4vw,56px)!important;
  display:block!important;
  text-align:center!important;
}

.yi-about-creative .about-creative-head{
  display:block!important;
  max-width:900px!important;
  margin:0 auto clamp(24px,3vw,36px)!important;
}

.yi-about-creative .about-copy{
  max-width:900px!important;
  margin:0 auto!important;
  text-align:center!important;
}

.yi-about-creative .about-kicker{
  justify-content:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.yi-about-creative .about-kicker::after{
  width:110px!important;
}

.yi-about-creative h1{
  font-size:clamp(3.4rem,6.2vw,6rem)!important;
  text-align:center!important;
  margin-bottom:18px!important;
}

.yi-about-creative .about-lead{
  max-width:820px!important;
  margin:0 auto!important;
  font-size:clamp(1rem,1.35vw,1.25rem)!important;
  line-height:1.55!important;
  text-align:center!important;
}

/* Orbit-Grafik ausblenden, damit der Bereich ruhig und zentriert bleibt */
.yi-about-creative .about-orbit-built{
  display:none!important;
}

/* Karten-Bereich zentriert und kompakter */
.yi-about-creative .creative-stats{
  width:min(100%,880px)!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(250px,1fr))!important;
  gap:18px!important;
  justify-content:center!important;
  align-items:stretch!important;
}

.yi-about-creative .creative-card{
  min-height:118px!important;
  max-height:none!important;
  grid-template-columns:72px 1px minmax(0,1fr)!important;
  gap:18px!important;
  padding:20px 22px!important;
  border-radius:17px!important;
  text-align:left!important;
}

.yi-about-creative .stat-icon-box{
  width:58px!important;
  height:58px!important;
  border-radius:16px!important;
}

.yi-about-creative .stat-icon-box svg{
  width:30px!important;
  height:30px!important;
}

.yi-about-creative .stat-divider{
  height:52px!important;
}

.yi-about-creative .creative-card strong{
  font-size:clamp(2rem,2.8vw,3rem)!important;
  margin-bottom:5px!important;
  line-height:.95!important;
}

.yi-about-creative .creative-card span{
  font-size:clamp(.9rem,1vw,1.02rem)!important;
  line-height:1.25!important;
}

.yi-about-creative .card-line{
  left:18px!important;
  right:18px!important;
  bottom:10px!important;
  height:2px!important;
  opacity:.75!important;
}

/* Tablet */
@media(max-width:900px){
  .about-hero-modern.yi-about-creative{
    max-width:calc(100% - 28px)!important;
    padding:32px 20px!important;
  }

  .yi-about-creative .creative-stats{
    width:min(100%,720px)!important;
    grid-template-columns:repeat(2,minmax(220px,1fr))!important;
    gap:16px!important;
  }

  .yi-about-creative .creative-card{
    min-height:110px!important;
    grid-template-columns:64px 1px minmax(0,1fr)!important;
    gap:14px!important;
    padding:18px!important;
  }

  .yi-about-creative .stat-icon-box{
    width:52px!important;
    height:52px!important;
  }
}

/* Handy */
@media(max-width:620px){
  .about-hero-modern.yi-about-creative{
    max-width:calc(100% - 20px)!important;
    padding:28px 14px!important;
    margin-bottom:22px!important;
  }

  .yi-about-creative h1{
    font-size:clamp(2.7rem,13vw,3.8rem)!important;
  }

  .yi-about-creative .about-lead{
    font-size:.96rem!important;
  }

  .yi-about-creative .creative-stats{
    grid-template-columns:1fr!important;
    width:100%!important;
    max-width:420px!important;
    gap:14px!important;
  }

  .yi-about-creative .creative-card{
    min-height:96px!important;
    grid-template-columns:54px 1px minmax(0,1fr)!important;
    gap:12px!important;
    padding:16px!important;
  }

  .yi-about-creative .stat-icon-box{
    width:48px!important;
    height:48px!important;
    border-radius:14px!important;
  }

  .yi-about-creative .stat-icon-box svg{
    width:25px!important;
    height:25px!important;
  }

  .yi-about-creative .stat-divider{
    height:44px!important;
  }

  .yi-about-creative .creative-card strong{
    font-size:2rem!important;
  }

  .yi-about-creative .creative-card span{
    font-size:.9rem!important;
  }
}

@media(max-width:380px){
  .yi-about-creative .creative-card{
    grid-template-columns:1fr!important;
    text-align:center!important;
    justify-items:center!important;
  }

  .yi-about-creative .stat-divider{
    display:none!important;
  }
}


/* =========================================================
   FINAL RESPONSIVE + HOME TYPOGRAPHY + PROFILE LINE FIX
   - Karten auf Handy richtig responsive
   - "Technologien im Einsatz" passt sauber
   - Profil-Linie unter PROFIL, nicht daneben
   - Überschrift-Schrift wie Home: großer moderner Gradient
   - dezente professionelle Animation
   ========================================================= */

/* Gesamtbereich sauber zentrieren */
.about-hero-modern.yi-about-creative{
  width:min(100% - 32px, 1120px)!important;
  max-width:1120px!important;
  margin:0 auto 30px!important;
  padding:clamp(34px,5vw,58px) clamp(18px,4vw,56px)!important;
  text-align:center!important;
  overflow:visible!important;
}

/* PROFIL oben: Linie unter dem Wort */
.yi-about-creative .about-kicker{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  margin:0 auto 14px!important;
  letter-spacing:.42em!important;
  text-align:center!important;
  width:max-content!important;
  max-width:100%!important;
}

.yi-about-creative .about-kicker::after{
  content:""!important;
  display:block!important;
  width:118px!important;
  height:2px!important;
  margin:0 auto!important;
  background:linear-gradient(90deg,transparent,#00e5ff,transparent)!important;
  box-shadow:0 0 16px rgba(0,229,255,.65)!important;
}

/* Überschrift wie Home: groß, modern, Gradient + Animation */
.yi-about-creative h1{
  display:block!important;
  text-align:center!important;
  font-size:clamp(3.4rem,8vw,7.2rem)!important;
  line-height:.9!important;
  letter-spacing:-.075em!important;
  font-weight:950!important;
  margin:0 0 20px!important;
  color:transparent!important;
  background:linear-gradient(90deg,#ffffff 0%,#f8fbff 28%,#21d4ff 52%,#2f80ff 72%,#8b5cff 100%)!important;
  background-size:260% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  text-shadow:none!important;
  animation:aboutTitleGradientMove 7s ease-in-out infinite!important;
}

.yi-about-creative h1 span{
  color:inherit!important;
  background:inherit!important;
  background-size:inherit!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
}

@keyframes aboutTitleGradientMove{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}

.yi-about-creative .about-lead{
  max-width:820px!important;
  margin:0 auto!important;
  text-align:center!important;
  font-size:clamp(1rem,1.25vw,1.18rem)!important;
  line-height:1.6!important;
}

/* Karten kompakter, aber desktop weiter 2x2 */
.yi-about-creative .creative-stats{
  width:min(100%,860px)!important;
  margin:0 auto!important;
  grid-template-columns:repeat(2,minmax(260px,1fr))!important;
  gap:18px!important;
}

.yi-about-creative .creative-card{
  min-height:110px!important;
  grid-template-columns:62px 1px minmax(0,1fr)!important;
  gap:16px!important;
  padding:18px 20px 22px!important;
  border-radius:16px!important;
  align-items:center!important;
}

.yi-about-creative .stat-icon-box{
  width:52px!important;
  height:52px!important;
  border-radius:14px!important;
}

.yi-about-creative .stat-icon-box svg{
  width:26px!important;
  height:26px!important;
}

.yi-about-creative .stat-divider{
  height:46px!important;
}

.yi-about-creative .creative-card strong{
  font-size:clamp(1.85rem,2.35vw,2.55rem)!important;
  line-height:1!important;
  margin:0 0 3px!important;
  white-space:nowrap!important;
}

.yi-about-creative .creative-card span{
  display:block!important;
  font-size:clamp(.86rem,.92vw,.98rem)!important;
  line-height:1.28!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}

.yi-about-creative .creative-card b{
  display:inline!important;
  white-space:normal!important;
}

.yi-about-creative .card-line{
  height:2px!important;
  bottom:10px!important;
  left:18px!important;
  right:18px!important;
}

/* Dezente Animation nur bei Desktop */
@media (prefers-reduced-motion:no-preference){
  .yi-about-creative .creative-card{
    animation:aboutCardFloat 7s ease-in-out infinite!important;
  }
  .yi-about-creative .creative-card:nth-child(2){animation-delay:.4s!important;}
  .yi-about-creative .creative-card:nth-child(3){animation-delay:.8s!important;}
  .yi-about-creative .creative-card:nth-child(4){animation-delay:1.2s!important;}
}

@keyframes aboutCardFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-3px);}
}

/* Tablet */
@media(max-width:900px){
  .about-hero-modern.yi-about-creative{
    width:min(100% - 24px, 760px)!important;
    padding:30px 18px!important;
  }

  .yi-about-creative h1{
    font-size:clamp(3rem,10vw,5.2rem)!important;
  }

  .yi-about-creative .creative-stats{
    width:min(100%,640px)!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
  }

  .yi-about-creative .creative-card{
    width:100%!important;
    max-width:520px!important;
    margin:0 auto!important;
    min-height:96px!important;
    grid-template-columns:56px 1px minmax(0,1fr)!important;
    gap:14px!important;
    padding:16px 18px 20px!important;
  }
}

/* iPhone / kleine Geräte: keine zerbrochenen Texte */
@media(max-width:520px){
  .about-hero-modern.yi-about-creative{
    width:calc(100% - 18px)!important;
    padding:24px 12px!important;
    margin-bottom:22px!important;
    border-radius:12px!important;
  }

  .yi-about-creative .about-kicker{
    font-size:.78rem!important;
    letter-spacing:.34em!important;
  }

  .yi-about-creative .about-kicker::after{
    width:92px!important;
  }

  .yi-about-creative h1{
    font-size:clamp(2.65rem,14vw,3.6rem)!important;
    letter-spacing:-.07em!important;
    margin-bottom:16px!important;
  }

  .yi-about-creative .about-lead{
    font-size:.94rem!important;
    line-height:1.55!important;
    max-width:96%!important;
  }

  .yi-about-creative .creative-stats{
    width:100%!important;
    max-width:360px!important;
    gap:12px!important;
  }

  .yi-about-creative .creative-card{
    max-width:100%!important;
    min-height:86px!important;
    grid-template-columns:48px 1px minmax(0,1fr)!important;
    gap:11px!important;
    padding:14px 14px 18px!important;
    border-radius:14px!important;
  }

  .yi-about-creative .stat-icon-box{
    width:42px!important;
    height:42px!important;
    border-radius:12px!important;
  }

  .yi-about-creative .stat-icon-box svg{
    width:22px!important;
    height:22px!important;
  }

  .yi-about-creative .stat-divider{
    height:38px!important;
  }

  .yi-about-creative .creative-card strong{
    font-size:1.7rem!important;
    margin-bottom:2px!important;
  }

  .yi-about-creative .creative-card span{
    font-size:.78rem!important;
    line-height:1.22!important;
  }

  .yi-about-creative .card-line{
    left:14px!important;
    right:14px!important;
    bottom:8px!important;
  }
}

/* Sehr schmale Geräte */
@media(max-width:360px){
  .yi-about-creative .creative-card{
    grid-template-columns:42px 1px minmax(0,1fr)!important;
    gap:9px!important;
    padding:12px 12px 17px!important;
  }

  .yi-about-creative .stat-icon-box{
    width:38px!important;
    height:38px!important;
  }

  .yi-about-creative .creative-card strong{
    font-size:1.55rem!important;
  }

  .yi-about-creative .creative-card span{
    font-size:.74rem!important;
  }
}


/* =========================================================
   FINAL: 4 Boxen wie Referenzbild + responsive
   ========================================================= */

/* Container der vier Karten */
.yi-about-creative .creative-stats{
  width:min(100%,860px)!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(260px,1fr))!important;
  gap:18px 22px!important;
  justify-content:center!important;
  align-items:stretch!important;
}

/* Karte: flach, breit, wie Bild 2 */
.yi-about-creative .creative-card{
  position:relative!important;
  min-height:104px!important;
  height:auto!important;
  display:grid!important;
  grid-template-columns:72px 1px minmax(0,1fr)!important;
  align-items:center!important;
  gap:18px!important;
  padding:16px 18px 22px!important;
  border-radius:15px!important;
  background:linear-gradient(145deg,rgba(8,23,42,.92),rgba(4,12,24,.92))!important;
  border:1px solid rgba(255,255,255,.075)!important;
  box-shadow:0 14px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.035)!important;
  overflow:hidden!important;
  text-align:left!important;
}

/* Hover nur leicht, nicht Layout verschieben */
.yi-about-creative .creative-card:hover{
  transform:translateY(-2px)!important;
}

/* Icon Box wie Bild: kleiner, quadratisch, weiße Outline */
.yi-about-creative .stat-icon-box{
  width:52px!important;
  height:52px!important;
  min-width:52px!important;
  border-radius:12px!important;
  display:grid!important;
  place-items:center!important;
  background:rgba(255,255,255,.035)!important;
  border:1.5px solid rgba(255,255,255,.82)!important;
  box-shadow:0 0 22px rgba(255,255,255,.13)!important;
  color:#f4fbff!important;
}

.yi-about-creative .stat-icon-box svg{
  width:27px!important;
  height:27px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2.2!important;
}

/* Mittlere vertikale Linie */
.yi-about-creative .stat-divider{
  width:1px!important;
  height:48px!important;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.42),transparent)!important;
  opacity:1!important;
}

/* Text */
.yi-about-creative .creative-card strong{
  display:block!important;
  color:#fff!important;
  font-size:clamp(1.75rem,2.4vw,2.35rem)!important;
  line-height:1!important;
  margin:0 0 3px!important;
  font-weight:950!important;
  letter-spacing:-.035em!important;
  white-space:nowrap!important;
}

.yi-about-creative .creative-card span{
  display:block!important;
  color:#fff!important;
  font-size:clamp(.78rem,.95vw,.92rem)!important;
  line-height:1.25!important;
  font-weight:800!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
}

.yi-about-creative .creative-card b{
  color:#fff!important;
  font-weight:900!important;
}

/* Untere Cyan-Linie wie Bild */
.yi-about-creative .card-line{
  position:absolute!important;
  left:18px!important;
  right:18px!important;
  bottom:9px!important;
  height:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#12eaff 0%,rgba(18,234,255,.55) 48%,rgba(0,0,0,.25) 100%)!important;
  box-shadow:0 0 12px rgba(18,234,255,.45)!important;
  opacity:.9!important;
}

/* Farben nur als sanfter Glow, Text bleibt wie Bild weiß */
.yi-about-creative .card-blue{color:#12cfff!important;background:linear-gradient(145deg,rgba(8,32,52,.92),rgba(4,12,24,.94))!important}
.yi-about-creative .card-purple{color:#8b5cff!important;background:linear-gradient(145deg,rgba(22,22,58,.92),rgba(4,12,24,.94))!important}
.yi-about-creative .card-green{color:#00e6bf!important;background:linear-gradient(145deg,rgba(8,42,45,.92),rgba(4,12,24,.94))!important}
.yi-about-creative .card-orange{color:#ffb020!important;background:linear-gradient(145deg,rgba(40,35,25,.92),rgba(4,12,24,.94))!important}

/* Animation professionell, aber sehr dezent */
@media (prefers-reduced-motion:no-preference){
  .yi-about-creative .card-line{
    animation:yiAboutLinePulse 3.6s ease-in-out infinite!important;
  }
}

@keyframes yiAboutLinePulse{
  0%,100%{filter:brightness(1);opacity:.78;}
  50%{filter:brightness(1.35);opacity:1;}
}

/* Tablet */
@media(max-width:900px){
  .yi-about-creative .creative-stats{
    width:min(100%,680px)!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
  }

  .yi-about-creative .creative-card{
    width:100%!important;
    max-width:520px!important;
    margin:0 auto!important;
    min-height:96px!important;
    grid-template-columns:64px 1px minmax(0,1fr)!important;
    gap:14px!important;
    padding:15px 17px 20px!important;
  }

  .yi-about-creative .stat-icon-box{
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
  }

  .yi-about-creative .stat-icon-box svg{
    width:24px!important;
    height:24px!important;
  }
}

/* Handy: Text darf nicht brechen wie vorher */
@media(max-width:520px){
  .yi-about-creative .creative-stats{
    max-width:350px!important;
    width:100%!important;
    gap:12px!important;
  }

  .yi-about-creative .creative-card{
    min-height:88px!important;
    grid-template-columns:52px 1px minmax(0,1fr)!important;
    gap:11px!important;
    padding:13px 14px 18px!important;
    border-radius:14px!important;
  }

  .yi-about-creative .stat-icon-box{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    border-radius:11px!important;
  }

  .yi-about-creative .stat-icon-box svg{
    width:21px!important;
    height:21px!important;
  }

  .yi-about-creative .stat-divider{
    height:40px!important;
  }

  .yi-about-creative .creative-card strong{
    font-size:1.7rem!important;
    margin-bottom:2px!important;
  }

  .yi-about-creative .creative-card span{
    font-size:.76rem!important;
    line-height:1.2!important;
  }

  .yi-about-creative .card-line{
    left:13px!important;
    right:13px!important;
    bottom:8px!important;
  }
}

/* Sehr kleine Geräte */
@media(max-width:360px){
  .yi-about-creative .creative-card{
    grid-template-columns:44px 1px minmax(0,1fr)!important;
    gap:9px!important;
    padding:12px 11px 17px!important;
  }

  .yi-about-creative .stat-icon-box{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
  }

  .yi-about-creative .creative-card strong{
    font-size:1.45rem!important;
  }

  .yi-about-creative .creative-card span{
    font-size:.7rem!important;
  }
}


/* =========================================================
   MODERN PROFESSIONAL CARD ICONS FINAL
   - Server / Layers / Clipboard Check / Shield User
   - moderne Glas-Iconboxen
   - responsive unverändert
   ========================================================= */

.yi-about-creative .stat-icon-box{
  position:relative!important;
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  border-radius:15px!important;
  display:grid!important;
  place-items:center!important;
  background:
    radial-gradient(circle at 30% 18%,rgba(255,255,255,.16),transparent 36%),
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025))!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 24px color-mix(in srgb,currentColor 24%,transparent)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  color:currentColor!important;
}

.yi-about-creative .stat-icon-box::after{
  content:""!important;
  position:absolute!important;
  inset:7px!important;
  border-radius:11px!important;
  border:1px solid color-mix(in srgb,currentColor 38%,transparent)!important;
  pointer-events:none!important;
}

.yi-about-creative .stat-icon-box svg{
  position:relative!important;
  z-index:2!important;
  width:28px!important;
  height:28px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  filter:drop-shadow(0 0 8px color-mix(in srgb,currentColor 55%,transparent))!important;
}

/* Individuelle professionelle Akzentfarben */
.yi-about-creative .card-blue .stat-icon-box{color:#25cfff!important;}
.yi-about-creative .card-purple .stat-icon-box{color:#9b7cff!important;}
.yi-about-creative .card-green .stat-icon-box{color:#14f0b7!important;}
.yi-about-creative .card-orange .stat-icon-box{color:#ffb020!important;}

@media(max-width:520px){
  .yi-about-creative .stat-icon-box{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    border-radius:12px!important;
  }
  .yi-about-creative .stat-icon-box::after{
    inset:6px!important;
    border-radius:9px!important;
  }
  .yi-about-creative .stat-icon-box svg{
    width:22px!important;
    height:22px!important;
  }
}

@media(max-width:360px){
  .yi-about-creative .stat-icon-box{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
  }
  .yi-about-creative .stat-icon-box svg{
    width:19px!important;
    height:19px!important;
  }
}


/* ICONS FEST ZENTRIERT - KEINE BEWEGUNG */
.stat-icon-box,
.yi-about-creative .stat-icon-box{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:relative !important;
    overflow:hidden !important;
}

.stat-icon-box svg,
.yi-about-creative .stat-icon-box svg{
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    transform:translate(-50%,-50%) !important;
    margin:0 !important;
    animation:none !important;
    transition:none !important;
}

.stat-icon-box:hover svg,
.yi-about-creative .stat-icon-box:hover svg{
    transform:translate(-50%,-50%) !important;
}


/* Header brand color like footer */
.brand{
 color:#ffffff !important;
}
.brand .accent,
.brand-highlight,
.brand span:last-child{
 background:linear-gradient(135deg,#00e5ff,#2dd4ff) !important;
 -webkit-background-clip:text !important;
 -webkit-text-fill-color:transparent !important;
 color:transparent !important;
 font-weight:800 !important;
}