/* Cloud-specific Premium Design v2.0 */

.fj-card-mini{
  border-radius: 18px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.fj-card-mini:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 36px rgba(0,0,0,.08);
}

#produkte .fj-card ul li,
#loesungen .fj-card ul li{
  margin-bottom: .3rem;
  padding-left:4px;
}

footer.fj-footer a{
  text-decoration: none;
}

footer.fj-footer a:hover{
  text-decoration: none;
}


/* --- Premium Visual Effects --- */
.fj-hero{
  position: relative;
  overflow: hidden;
}
.fj-hero::before{
  content:"";
  position:absolute;
  inset:-25%;
  background:
    radial-gradient(closest-side at 18% 22%, rgba(34, 211, 238, .22), transparent 65%),
    radial-gradient(closest-side at 82% 28%, rgba(34, 197, 94, .18), transparent 65%),
    radial-gradient(closest-side at 55% 88%, rgba(14, 165, 233, .14), transparent 70%);
  pointer-events:none;
  filter: blur(50px);
  animation:heroGlow 18s ease-in-out infinite;
}
@keyframes heroGlow{
  0%, 100%{opacity:.75; transform:scale(1) rotate(0deg);}
  50%{opacity:1; transform:scale(1.12) rotate(3deg);}
}
.fj-hero .container{position:relative; z-index:1;}

.fj-card{
  box-shadow: 0 12px 40px rgba(2, 6, 23, .10);
  border: 1px solid rgba(15, 23, 42, .08);
}

picture img.img-fluid{
  display:block;
  width:100%;
  height:auto;
}

.fj-hero picture img{
  border-radius: 1.5rem;
  box-shadow: 0 24px 70px rgba(2, 6, 23, .18);
  border: 1px solid rgba(15, 23, 42, .10);
  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
}
.fj-hero picture img:hover{
  transform:scale(1.02);
  box-shadow: 0 32px 90px rgba(2, 6, 23, .22);
}

/* Premium focus rings */
a:focus-visible, button:focus-visible{
  outline: 3px solid rgba(34, 211, 238, .6);
  outline-offset: 4px;
  border-radius:8px;
}

/* Responsive heading sizes */
@media (min-width: 992px){
  .fj-hero h1{
    letter-spacing:-.03em;
    font-size: clamp(2.5rem, 3vw, 3.5rem);
  }
}


/* --- Premium Illustration Effects --- */
.fj-illustration-full{
  display:block;
  width:100%;
  height:100%;
  position:relative;
}

.fj-illustration-full img.fj-img-fill{
  width:100%;
  height:100%;
  object-fit: cover;
  border-radius: 1.75rem;
  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
}
.fj-illustration-full:hover img.fj-img-fill{
  transform:scale(1.03);
}

/* Hero image fills */
.fj-hero picture,
.fj-hero picture img{
  width:100%;
  height:100%;
}

/* Image cards */
.fj-card picture{
  margin:-1.5rem;
  border-radius: 1.75rem;
  overflow:hidden;
}


/* --- Webmail Premium Effects --- */
.fj-webmail-hero{
  position: relative;
}
.fj-webmail-hero::after{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(closest-side at 12% 18%, rgba(34, 211, 238, .26), transparent 66%),
    radial-gradient(closest-side at 88% 25%, rgba(34, 197, 94, .20), transparent 66%),
    radial-gradient(closest-side at 58% 92%, rgba(14, 165, 233, .14), transparent 72%);
  pointer-events:none;
  filter: blur(60px);
  z-index:0;
  animation:webmailPulse 16s ease-in-out infinite;
}
@keyframes webmailPulse{
  0%, 100%{opacity:.7; transform:scale(1) rotate(0deg);}
  50%{opacity:1; transform:scale(1.18) rotate(8deg);}
}
.fj-webmail-hero .container{position:relative; z-index:1;}
.fj-hero-media{
  box-shadow: 0 28px 90px rgba(2, 6, 23, .22);
  border:2px solid rgba(255,255,255,.5);
  backdrop-filter:blur(20px);
}

.fj-nav-cta .btn{width:100%;}
@media (min-width: 992px){
  .fj-nav-cta .btn{width:auto;}
}

.fj-card-featured{
  border: 2px solid rgba(34, 211, 238, .48) !important;
  box-shadow: 0 24px 70px rgba(34, 211, 238, .20), 0 0 0 1px rgba(34, 211, 238, .12) inset;
  position:relative;
  overflow:hidden;
}
.fj-card-featured::before{
  content:'';
  position:absolute;
  top:-50%;
  right:-50%;
  width:200%;
  height:200%;
  background:linear-gradient(45deg, transparent 30%, rgba(34, 211, 238, .10) 50%, transparent 70%);
  animation:shimmer 3.5s infinite;
}
@keyframes shimmer{
  0%{transform:translateX(-100%) translateY(-100%) rotate(0deg);}
  100%{transform:translateX(100%) translateY(100%) rotate(360deg);}
}

/* Eyebrow premium style */
.fj-eyebrow{
  display:inline-block;
  padding:10px 20px;
  border-radius:999px;
  background: linear-gradient(135deg, rgba(0,108,119,.14), rgba(34, 211, 238,.12));
  border:1px solid rgba(0,108,119,.28);
  color:var(--fj-primary);
  font-weight:700;
  font-size:.9rem;
  letter-spacing:1.2px;
  text-transform:uppercase;
  box-shadow:0 4px 16px rgba(0,108,119,.12);
}