/* Fajardo Theme v2.0 – Exclusive Premium Design */
:root{
  --fj-primary:#006C77;
  --fj-primary-hover:#008894;
  --fj-primary-2:#003F4C;
  --fj-accent:#CE6339;
  --fj-accent-hover:#E07345;
  --fj-ink:#07151A;
  --fj-muted:#5C6B73;
  --fj-bg:#F7F9FA;
  --fj-card:#FFFFFF;
  --fj-border:rgba(0,0,0,.08);
  --fj-shadow:0 20px 60px rgba(0,108,119,.12);
  --fj-shadow-hover:0 28px 80px rgba(0,108,119,.18);
  --fj-radius:24px;
  --fj-transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--fj-ink);
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(0,108,119,.10), transparent 60%),
    radial-gradient(900px 500px at 95% 10%, rgba(206,99,57,.08), transparent 55%),
    linear-gradient(180deg, #ffffff, var(--fj-bg));
  position: relative;
}

main{
  position: relative;
  z-index: 1;
}

h1,h2,h3,h4,h5{
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  letter-spacing: -0.3px;
}

p{color:var(--fj-muted);}

/* Premium Navbar */
.fj-navbar{
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(20px);
  border-bottom:1px solid var(--fj-border);
  box-shadow:0 4px 24px rgba(0,0,0,.04);
  transition: var(--fj-transition);
  z-index: 9999;
  position: relative;
}
.fj-navbar .navbar-brand img{
  height:48px;
  transition: var(--fj-transition);
}
.fj-navbar .navbar-brand:hover img{
  transform:scale(1.05);
}
.fj-navbar .nav-link{
  color:var(--fj-ink) !important;
  font-weight:600;
  padding:8px 14px !important;
  border-radius:12px;
  transition: var(--fj-transition);
  position:relative;
}
.fj-navbar .nav-link:hover{
  color:var(--fj-primary) !important;
  background:rgba(0,108,119,.06);
}
/* Active nav states */
.nav-link.active,
.nav-link[aria-current="page"],
.dropdown-item.active{
  color:var(--fj-primary) !important;
  background:rgba(0,108,119,.10);
}
.nav-link.active::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:6px;
  height:3px;
  background:linear-gradient(90deg, var(--fj-primary), #00A0A8);
  border-radius:3px;
  box-shadow:0 2px 8px rgba(0,108,119,.3);
}
.dropdown-item.active{
  background:rgba(0,108,119,.12);
}

/* Premium Buttons */
.btn-fj{
  border-radius:999px;
  padding:14px 32px;
  font-weight:700;
  font-size:1rem;
  letter-spacing:0.3px;
  border:2px solid transparent;
  transition: var(--fj-transition);
  position:relative;
  overflow:hidden;
}
.btn-fj::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition:left 0.5s;
}
.btn-fj:hover::before{
  left:100%;
}
.btn-fj-primary{
  background: linear-gradient(135deg, var(--fj-primary) 0%, #00A0A8 100%);
  color:#fff;
  box-shadow: 0 16px 48px rgba(0,108,119,.28);
}
.btn-fj-primary:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 24px 70px rgba(0,108,119,.35);
  background: linear-gradient(135deg, var(--fj-primary-hover) 0%, #00B5BE 100%);
  color:#fff;
}
.btn-fj-outline{
  background: rgba(255,255,255,.85);
  border-color: var(--fj-primary);
  color:var(--fj-primary);
}
.btn-fj-outline:hover{
  transform: translateY(-3px) scale(1.02);
  background: var(--fj-primary);
  border-color: var(--fj-primary);
  color:#fff;
  box-shadow: 0 16px 48px rgba(0,108,119,.28);
}
.btn-fj-secondary{
  background: rgba(255,255,255,.90);
  border-color: rgba(0,108,119,.30);
  color:var(--fj-primary-2);
}
.btn-fj-secondary:hover{
  transform: translateY(-3px) scale(1.02);
  border-color: var(--fj-primary);
  background:#fff;
  color:var(--fj-primary-2);
  box-shadow: 0 12px 36px rgba(0,108,119,.18);
}
40px;
  padding-bottom: 88px;
  position: relative;
  overflow:hidden;
}
.fj-hero::before{
  content:"";
  position:absolute;
  inset:-120px -120px auto -120px;
  height: 520px;
  background:
    radial-gradient(closest-side at 20% 40%, rgba(0,108,119,.22), transparent 70%),
    radial-gradient(closest-side at 75% 55%, rgba(206,99,57,.14), transparent 72%);
  z-index:-1absolute;
  inset:-120px -120px auto -120px;
  height: 520px;
  background:
    radial-gradient(closest-side at 20% 40%, rgba(0,108,119,.22), transparent 70%),
    radial-gradient(closest-side at 75% 55%, rgba(206,99,57,.14), transparent 72%);
  z-index:0;
}
.fj-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: none;
  opacity: 0;
  pointer-events:none;
}

.fj-hero .container{position:relative; z-index:1;}

.fj-kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:10px 18px;
  border-radius:999px;
  background: linear-gradient(135deg, rgba(0,108,119,.12), rgba(0,160,168,.08));
  border:1px solid rgba(0,108,119,.22);
  color:var(--fj-primary-2);
  font-weight:700;
  font-size:.95rem;
  box-shadow:0 4px 12px rgba(0,108,119,.08);
}

.fj-card{
  background: rgba(255,255,255,.90);
  backdrop-filter:blur(10px);
  border: 1px solid var(--fj-border);
  border-radius: var(--fj-radius);
  box-shadow: var(--fj-shadow);
  transition: var(--fj-transition);
}
.fj-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--fj-shadow-hover);
  border-color: rgba(0,108,119,.15);
}

.fj-card-solid{
  background: var(--fj-card);
  border: 1px solid var(--fj-border);
  border-radius: var(--fj-radius);
  box-shadow: var(--fj-shadow);
}

.fj-icon{
  width:56px;
  height:56px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(0,108,119,.14), rgba(0,160,168,.08));
  color: var(--fj-primary-2);
  font-size:1.5rem;
  box-shadow:0 6px 20px rgba(0,108,119,.12);
  transition: var(--fj-transition);
}
.fj-icon:hover{
  transform:scale(1.1) rotate(5deg);
  box-shadow:0 8px 28px rgba(0,108,119,.18);
}

.fj-badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  font-weight:700;
  color:var(--fj-primary-2);
  font-size:.9rem;
}

/* Section Spacing System */
section.py-5{
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}

.fj-section-tight{
  padding-top: 80px;
  padding-bottom: 80px;
}

.fj-surface{
  background: rgba(255,255,255,.60);
  border-top: 1px solid var(--fj-border);
  border-bottom: 1px solid var(--fj-border);
}

/* Portfolio tiles */
.fj-tile{
  overflow:hidden;
  border-radius: 22px;
  border: 1px solid var(--fj-border);
  background: #fff;
  box-shadow: 0 18px 60px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.fj-tile:hover{transform: translateY(-4px); box-shadow: 0 26px 80px rgba(0,0,0,.10);}
.fj-tile img{width:100%; height:220px; object-fit:cover;}

/* Footer */
.fj-footer{
  background: linear-gradient(135deg, rgba(0,63,76,1), rgba(0,108,119,1));
  color: rgba(255,255,255,.92);
  position:relative;
  overflow:hidden;
}
.fj-footer::before{
  content:'';
  position:absolute;
  top:-50%;
  right:-10%;
  width:600px;
  height:600px;
  background:radial-gradient(circle, rgba(0,160,168,.15), transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
.fj-footer .container{
  position:relative;
  z-index:1;
}
.fj-footer a{
  color: rgba(255,255,255,.92);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.25);
  transition: var(--fj-transition);
}
.fj-footer a:hover{
  color:#fff;
  border-bottom-color: rgba(255,255,255,.8);
  transform:translateX(3px);
}
.fj-footer .fa-brands{
  font-size:1.5rem;
  padding:12px;
  background:rgba(255,255,255,.1);
  border-radius:50%;
  transition: var(--fj-transition);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
}
.fj-footer .fa-brands:hover{
  background:rgba(255,255,255,.2);
  transform:translateY(-4px) scale(1.1);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}

/* Premium Form Controls */
.form-control:focus{
  border-color:var(--fj-primary);
  box-shadow:0 0 0 4px rgba(0,108,119,.12);
}
.form-control-lg{
  border-radius:16px;
  padding:14px 20px;
  border:2px solid var(--fj-border);
  transition: var(--fj-transition);
}
.form-control-lg:hover{
  border-color:rgba(0,108,119,.20);
}

/* Text helpers */
.text-fj{color: var(--fj-primary) !important;}
.text-ink{color: var(--fj-ink) !important;}

/* Premium Mobile Optimizations */
@media (max-width: 991px){
  .fj-navbar{
    padding:12px 0;
  }
  .fj-hero{
    padding-top: 100px;
    padding-bottom: 60px;
  }
  .fj-hero h1{
    font-size: 2rem;
  }
  .btn-fj{
    padding:12px 24px;
    font-size:0.95rem;
  }
  .fj-card{
    margin-bottom:16px;
  }
  section{
    padding: 60px 0;
  }
  .fj-section-tight{
    padding: 44px 0;
  }
}

@media (max-width: 575px){
  .fj-hero h1{
    font-size: 1.75rem;
  }
  .fj-icon{
    width:48px;
    height:48px;
    font-size:1.25rem;
  }
  .btn-fj{
    padding:11px 20px;
    font-size:0.9rem;
  }
}

/* Smooth Scrolling */
html{
  scroll-behavior: smooth;
}

/* Loading animation for images */
img{
  transition: opacity 0.3s ease;
}
img:not([src]){
  opacity: 0;
}

/* Premium gradient text effect */
.gradient-text{
  background: linear-gradient(135deg, var(--fj-primary), #00A0A8, var(--fj-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Utility: Premium glow effect */
.glow-effect{
  box-shadow: 0 0 40px rgba(0,108,119,.3), 0 0 80px rgba(0,108,119,.15);
}

/* Utility: Glass effect */
.glass-effect{
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.5);
}

/* Premium Accordion */
.fj-accordion .accordion-item{
  background: rgba(255,255,255,.90);
  backdrop-filter:blur(10px);
  border: 1px solid var(--fj-border);
  border-radius: 18px !important;
  margin-bottom:12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.05);
  overflow:hidden;
  transition: var(--fj-transition);
}
.fj-accordion .accordion-item:hover{
  box-shadow: 0 12px 36px rgba(0,0,0,.10);
  transform:translateY(-3px);
  border-color: rgba(0,108,119,.12);
}
.fj-accordion .accordion-button{
  background: transparent;
  color: var(--fj-ink);
  font-weight:700;
  padding:20px 26px;
  border:none;
  font-size:1.05rem;
  transition: var(--fj-transition);
}
.fj-accordion .accordion-button:hover{
  background: rgba(0,108,119,.04);
}
.fj-accordion .accordion-button:focus{
  box-shadow: none;
  border:none;
}
.fj-accordion .accordion-button:not(.collapsed){
  background: linear-gradient(135deg, rgba(0,108,119,.12), rgba(0,160,168,.08));
  color:var(--fj-primary);
  box-shadow:inset 0 0 0 2px rgba(0,108,119,.18);
}
.fj-accordion .accordion-button::after{
  background-size:1.3rem;
  filter:brightness(0) saturate(100%) invert(21%) sepia(48%) saturate(1654%) hue-rotate(156deg) brightness(96%) contrast(101%);
  transition: var(--fj-transition);
}
.fj-accordion .accordion-button:not(.collapsed)::after{
  transform:rotate(180deg);
}
.fj-accordion .accordion-body{
  padding:20px 26px 26px;
  background:rgba(255,255,255,.5);
}

/* Reveal animation with premium effect */
.fj-reveal{
  opacity:0;
  transform: translateY(40px) scale(0.97);
  transition: opacity .8s cubic-bezier(0.4, 0, 0.2, 1), transform .8s cubic-bezier(0.4, 0, 0.2, 1);
}
.fj-reveal.fj-in{
  opacity:1;
  transform: translateY(0) scale(1);
}

/* Stagger animation for multiple reveals */
.fj-reveal:nth-child(1){transition-delay: 0.1s;}
.fj-reveal:nth-child(2){transition-delay: 0.2s;}
.fj-reveal:nth-child(3){transition-delay: 0.3s;}
.fj-reveal:nth-child(4){transition-delay: 0.4s;}
.fj-reveal:nth-child(5){transition-delay: 0.5s;}
.fj-reveal.fj-in{opacity:1; transform: translateY(0);}

/* Accessibility */
:focus-visible{outline: 3px solid rgba(0,108,119,.45); outline-offset: 3px;}

/* Page background image: großes Gesamtbild nur im Hauptbereich (außer Header/Footer) */
/* Hintergrundbild auf der gesamten Seite (body) platzieren */
body{
  /* dezentes Weiß-Overlay über dem Bild reduziert Kontrast */
  background-image: linear-gradient(rgba(255,255,255,0.82), rgba(255,255,255,0.82));
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  background-blend-mode: normal;
  background-color: var(--fj-bg);
}

@media (max-width: 992px){
  section{padding: 72px 0;}
  .fj-hero{padding-top: 108px;}
}


/* --- Utilities (email + verantwortung pages) --- */
.fj-eyebrow{
  display:inline-block;
  padding:.35rem .6rem;
  border-radius: 999px;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fj-ink);
  background: rgba(34, 211, 238, .14);
  border: 1px solid rgba(34, 211, 238, .25);
}
.btn-fj-outline{
  color: var(--fj-ink);
  background: transparent;
  border: 1px solid rgba(15, 23, 42, .18);
}
.btn-fj-outline:hover{
  background: rgba(15, 23, 42, .04);
}


.fj-icon{
  width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(34, 211, 238, .14);
  border: 1px solid rgba(34, 211, 238, .20);
  color: var(--fj-ink);
}