/* ============================================
   ELSERVORSORGE.DE – Global Stylesheet FINAL
   Dark Navy · Blue Accent · Modern Premium
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --bg:        #050D1A;
  --bg2:       #060F1F;
  --bg3:       #071C40;
  --blue:      #4B9EFF;
  --blue-dim:  rgba(75,158,255,0.1);
  --blue-bd:   rgba(75,158,255,0.2);
  --white:     #FFFFFF;
  --t1:        rgba(255,255,255,0.92);
  --t2:        rgba(255,255,255,0.48);
  --t3:        rgba(255,255,255,0.28);
  --border:    rgba(255,255,255,0.06);
  --border2:   rgba(255,255,255,0.10);
  --font:      'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --r:         8px;
  --r2:        12px;
  --r3:        20px;
  --tr:        0.22s ease;
  --max:       1180px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font);background:var(--bg);color:var(--t1);line-height:1.6;overflow-x:hidden;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}

h1{font-size:clamp(2.2rem,4vw,3.4rem);font-weight:700;line-height:1.1;letter-spacing:-0.02em;}
h2{font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:700;line-height:1.15;letter-spacing:-0.02em;}
h3{font-size:1rem;font-weight:600;}
p{color:var(--t2);line-height:1.78;}
.accent{color:var(--blue);}
.eyebrow{font-size:0.68rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:12px;}

.container{max-width:var(--max);margin:0 auto;padding:0 44px;}
.section{padding:56px 0;}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:var(--r);font-family:var(--font);font-size:0.84rem;font-weight:600;cursor:pointer;transition:all var(--tr);border:none;letter-spacing:0.02em;}
.btn-white{background:#fff;color:var(--bg);}
.btn-white:hover{background:rgba(255,255,255,0.88);transform:translateY(-2px);}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.24);}
.btn-ghost:hover{border-color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.05);}
.btn-blue{background:var(--blue-dim);color:var(--blue);border:1px solid var(--blue-bd);}
.btn-blue:hover{background:rgba(75,158,255,0.18);}

/* NAV */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(5,13,26,0.96);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 44px;transition:all var(--tr);}
.navbar.scrolled{background:rgba(5,13,26,0.99);box-shadow:0 4px 24px rgba(0,0,0,0.3);}
.nav-logo{display:flex;align-items:center;gap:8px;cursor:pointer;flex-shrink:0;margin-right:52px;}
.nav-logo-icon{width:24px;height:24px;background:linear-gradient(135deg,#1A4FBF,#4B9EFF);border-radius:5px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.nav-logo-text{font-size:0.72rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.9);}
.nav-links{display:flex;align-items:center;gap:32px;flex:1;}
.nav-links a{font-size:0.8rem;color:var(--t2);letter-spacing:0.03em;transition:color var(--tr);position:relative;white-space:nowrap;}
.nav-links a::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;background:var(--blue);transition:width var(--tr);}
.nav-links a:hover,.nav-links a.active{color:#fff;}
.nav-links a.active::after,.nav-links a:hover::after{width:100%;}
.nav-cta{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.26);padding:8px 18px;font-size:0.76rem;font-weight:500;cursor:pointer;border-radius:var(--r);font-family:var(--font);transition:all var(--tr);flex-shrink:0;}
.nav-cta:hover{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.5);}

/* Mobile hamburger */
.nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px;}
.nav-toggle span{display:block;width:20px;height:1.5px;background:rgba(255,255,255,0.65);border-radius:2px;transition:all var(--tr);}
.nav-toggle.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px);}
.nav-mobile{display:none;flex-direction:column;background:rgba(5,13,26,0.98);border-top:1px solid var(--border);padding:18px 44px 24px;}
.nav-mobile.open{display:flex;}
.nav-mobile a{font-size:0.9rem;color:var(--t2);padding:12px 0;border-bottom:1px solid var(--border);transition:color var(--tr);}
.nav-mobile a:hover{color:#fff;}
.nav-mobile .btn{margin-top:18px;width:100%;justify-content:center;}

/* HERO */
.hero{min-height:100vh;padding-top:62px;background:radial-gradient(ellipse 80% 70% at 65% 40%,#0A2463 0%,#071440 40%,#050D1A 70%);position:relative;overflow:hidden;display:flex;flex-direction:column;}
.hero-glow{position:absolute;top:-10%;right:5%;width:500px;height:500px;background:radial-gradient(circle,rgba(30,100,255,0.17),transparent 65%);pointer-events:none;}
.glass-shapes{position:absolute;top:50%;right:7%;transform:translateY(-52%);width:400px;height:400px;pointer-events:none;}
.g-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-54%);width:230px;height:230px;border-radius:50%;border:22px solid rgba(120,180,255,0.28);box-shadow:0 0 50px rgba(80,150,255,0.14);animation:floatRing 6s ease-in-out infinite;}
@keyframes floatRing{0%,100%{transform:translate(-50%,-54%) rotate(0deg);}50%{transform:translate(-50%,-58%) rotate(3deg);}}
.g-cube{position:absolute;top:12%;right:6%;width:82px;height:98px;background:linear-gradient(135deg,rgba(100,170,255,0.2),rgba(60,130,220,0.05));border:1px solid rgba(150,200,255,0.24);border-radius:11px;transform:rotate(-8deg);animation:floatCube 7s ease-in-out infinite;}
@keyframes floatCube{0%,100%{transform:rotate(-8deg) translateY(0);}50%{transform:rotate(-6deg) translateY(-10px);}}
.g-sphere{position:absolute;bottom:24%;left:38%;width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(180,220,255,0.55),rgba(60,120,220,0.2));border:1px solid rgba(150,200,255,0.27);animation:floatSphere 5s ease-in-out infinite 1s;}
@keyframes floatSphere{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.g-shard{position:absolute;bottom:18%;right:2%;width:140px;height:78px;background:linear-gradient(120deg,rgba(100,170,255,0.14),rgba(60,130,220,0.04));border:1px solid rgba(150,200,255,0.17);border-radius:9px;transform:rotate(6deg);animation:floatShard 8s ease-in-out infinite 2s;}
@keyframes floatShard{0%,100%{transform:rotate(6deg) translateY(0);}50%{transform:rotate(6deg) translateY(-7px);}}

.hero-content{position:relative;z-index:2;max-width:460px;padding:68px 44px 48px;}
.hero h1{margin-bottom:16px;}
.hero-sub{font-size:0.9rem;color:var(--t2);line-height:1.75;margin-bottom:28px;}
.hero-trust{display:flex;border-top:1px solid var(--border);margin-top:auto;}
.ht-item{flex:1;display:flex;gap:11px;align-items:flex-start;padding:18px 44px;}
.ht-item+.ht-item{border-left:1px solid var(--border);}
.ht-icon svg{width:18px;height:18px;stroke:rgba(150,200,255,0.6);fill:none;stroke-width:1.5;}
.ht-label{font-size:0.79rem;font-weight:600;margin-bottom:2px;}
.ht-desc{font-size:0.69rem;color:var(--t3);line-height:1.5;}

/* SERVICE GRID */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border-radius:14px;overflow:hidden;}
.svc-card{background:var(--bg2);padding:26px 22px;cursor:pointer;transition:background var(--tr);}
.svc-card:hover{background:#0B1A30;}
.svc-icon{width:36px;height:36px;background:var(--blue-dim);border:1px solid var(--blue-bd);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:0.9rem;margin-bottom:13px;}
.svc-title{font-size:0.87rem;font-weight:600;margin-bottom:6px;}
.svc-desc{font-size:0.76rem;color:var(--t2);line-height:1.62;margin:0;}
.svc-link{display:inline-block;margin-top:10px;font-size:0.73rem;color:var(--blue);font-weight:500;}

/* PROCESS */
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border-radius:14px;overflow:hidden;}
.proc-step{background:var(--bg2);padding:26px 20px;}
.proc-num{font-size:1.7rem;font-weight:700;color:rgba(75,158,255,0.17);margin-bottom:13px;}

/* TESTIMONIALS */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.testi{background:#071C40;border:1px solid rgba(75,158,255,0.1);border-radius:12px;padding:24px;}
.testi-stars{color:var(--blue);font-size:0.74rem;margin-bottom:12px;}
.testi-text{font-size:0.8rem;color:rgba(255,255,255,0.63);line-height:1.78;margin-bottom:0;}
.testi-author{display:flex;gap:9px;align-items:center;border-top:1px solid rgba(255,255,255,0.06);padding-top:13px;margin-top:14px;}
.testi-av{width:34px;height:34px;border-radius:50%;background:rgba(75,158,255,0.15);border:1px solid var(--blue-bd);display:flex;align-items:center;justify-content:center;font-size:0.69rem;font-weight:600;color:var(--blue);flex-shrink:0;}
.testi-name{font-size:0.79rem;font-weight:600;}
.testi-role{font-size:0.68rem;color:var(--t3);}

/* FAQ */
.faq-item{border-bottom:1px solid var(--border);}
.faq-btn{width:100%;display:flex;align-items:center;justify-content:space-between;padding:18px 0;background:none;border:none;cursor:pointer;text-align:left;font-family:var(--font);font-size:0.87rem;font-weight:500;color:var(--t1);transition:color var(--tr);}
.faq-btn:hover{color:var(--blue);}
.faq-icon{width:22px;height:22px;border-radius:50%;border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:0.95rem;color:var(--blue);flex-shrink:0;transition:all var(--tr);font-style:normal;}
.faq-btn.open .faq-icon{background:var(--blue-dim);border-color:var(--blue-bd);transform:rotate(45deg);}
.faq-body{display:none;padding:0 32px 18px 0;font-size:0.82rem;color:var(--t2);line-height:1.82;}
.faq-body.open{display:block;}

/* PAGE HERO */
.page-hero{background:radial-gradient(ellipse 80% 100% at 50% 0%,#0A2463 0%,#071440 50%,#050D1A 100%);padding:110px 0 56px;border-bottom:1px solid var(--border);}
.page-hero h1{margin:10px 0 14px;}
.page-hero p{font-size:0.88rem;max-width:540px;margin-bottom:24px;}

/* BREADCRUMB */
.breadcrumb{background:rgba(255,255,255,0.02);border-bottom:1px solid var(--border);padding:11px 0;}
.breadcrumb ol{display:flex;align-items:center;gap:8px;font-size:0.78rem;color:var(--t3);}
.breadcrumb li::after{content:'/';margin-left:8px;}
.breadcrumb li:last-child::after{content:'';}
.breadcrumb a{color:var(--t2);transition:color var(--tr);}
.breadcrumb a:hover{color:var(--blue);}
.breadcrumb li:last-child{color:var(--t1);}

/* ABOUT */
.about-photo{background:linear-gradient(135deg,#071C40,#0A2463);border-radius:16px;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border:1px solid rgba(75,158,255,0.1);}
.about-badge{position:absolute;bottom:15px;left:13px;right:13px;background:rgba(5,13,26,0.85);backdrop-filter:blur(12px);border:1px solid var(--blue-bd);border-radius:9px;padding:12px 14px;}
.about-badge-name{font-size:0.86rem;font-weight:700;}
.about-badge-sub{font-size:0.7rem;color:var(--blue);margin-top:3px;}
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0;}
.about-stat-num{font-size:1.25rem;font-weight:700;color:var(--blue);}
.about-stat-label{font-size:0.63rem;color:var(--t3);text-transform:uppercase;letter-spacing:0.06em;margin-top:3px;}

/* CONTACT FORM */
.form-group{margin-bottom:10px;}
.form-label{font-size:0.64rem;color:var(--t3);margin-bottom:4px;text-transform:uppercase;letter-spacing:0.05em;display:block;}
.form-field{width:100%;background:rgba(255,255,255,0.04);border:1px solid var(--border2);border-radius:6px;padding:9px 11px;font-family:var(--font);font-size:0.8rem;color:var(--t1);outline:none;transition:border-color var(--tr);}
.form-field:focus{border-color:var(--blue);}
.form-field::placeholder{color:var(--t3);}
select.form-field option{background:#0A1628;}
textarea.form-field{min-height:70px;resize:vertical;}
.form-check{display:flex;gap:10px;align-items:flex-start;font-size:0.76rem;color:var(--t2);margin:12px 0;}
.form-check input{width:14px;height:14px;accent-color:var(--blue);flex-shrink:0;margin-top:2px;}

/* INFO CARDS */
.info-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:28px;transition:border-color var(--tr);}
.info-card:hover{border-color:var(--blue-bd);}
.value-card{background:#071C40;border:1px solid rgba(75,158,255,0.1);border-radius:var(--r);padding:16px 14px;}

/* CTA SECTION */
.cta-section{background:linear-gradient(135deg,#071C40,#0A2463);text-align:center;position:relative;overflow:hidden;border-top:1px solid rgba(75,158,255,0.1);}
.cta-section h2{color:#fff;margin-bottom:11px;}
.cta-section p{max-width:440px;margin:0 auto 24px;}
.cta-btns{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;}

/* RENTENLÜCKE BOXES */
.gap-box{border-radius:6px;padding:12px 14px;}
.gap-box-label{font-size:0.66rem;color:var(--t3);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:3px;}

/* FOOTER */
footer{background:#03080F;padding:38px 0 22px;border-top:1px solid var(--border);}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px;margin-bottom:24px;}
.footer-logo{font-size:0.7rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:10px;}
.footer-col-title{font-size:0.61rem;font-weight:600;letter-spacing:0.13em;text-transform:uppercase;color:var(--t3);margin-bottom:10px;}
.footer-col a{display:block;font-size:0.76rem;color:rgba(255,255,255,0.35);margin-bottom:8px;transition:color var(--tr);}
.footer-col a:hover{color:#fff;}
.footer-contact{font-size:0.75rem;color:rgba(255,255,255,0.32);margin-bottom:8px;display:flex;gap:7px;}
.footer-contact .fc-icon{color:var(--blue);flex-shrink:0;}
.footer-bottom{border-top:1px solid var(--border);padding-top:16px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:0.7rem;color:var(--t3);}
.footer-bottom a{color:rgba(255,255,255,0.3);margin-left:18px;transition:color var(--tr);}
.footer-bottom a:hover{color:#fff;}

/* COOKIE */
#cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:9999;background:#0A1628;border-top:1px solid rgba(75,158,255,0.2);padding:18px 44px;display:none;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;box-shadow:0 -8px 32px rgba(0,0,0,0.4);}
#cookie-banner p{font-size:0.83rem;color:var(--t2);}
#cookie-banner a{color:var(--blue);}
.cookie-btns{display:flex;gap:10px;flex-shrink:0;}

/* SCROLL ANIMATIONS */
.fade-in{opacity:0;transform:translateY(18px);transition:opacity 0.55s ease,transform 0.55s ease;}
.fade-in.visible{opacity:1;transform:translateY(0);}
.delay-1{transition-delay:0.1s;}
.delay-2{transition-delay:0.2s;}
.delay-3{transition-delay:0.3s;}

/* GRID HELPERS */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;}
.section-header{margin-bottom:36px;}
.section-header.center{text-align:center;}
.section-header.center .sec-divider{margin:12px auto;}
.sec-divider{width:32px;height:1.5px;background:var(--blue);opacity:0.6;margin:12px 0;}

/* RESPONSIVE */
@media(max-width:1024px){
  .container{padding:0 32px;}
  .navbar{padding:0 32px;}
  .hero-content{padding:60px 32px 40px;}
  .ht-item{padding:16px 32px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .proc-grid{grid-template-columns:1fr 1fr;}
  .testi-grid{grid-template-columns:1fr 1fr;}
  .grid-4{grid-template-columns:1fr 1fr;}
}
@media(max-width:768px){
  .section{padding:44px 0;}
  .container{padding:0 22px;}
  .navbar{padding:0 22px;height:58px;}
  .nav-links,.nav-cta{display:none;}
  .nav-toggle{display:flex;}
  .nav-mobile{padding:16px 22px 22px;}
  .hero-content{padding:52px 22px 36px;}
  .hero-trust{flex-direction:column;}
  .ht-item{padding:14px 22px;}
  .ht-item+.ht-item{border-left:none;border-top:1px solid var(--border);}
  .svc-grid{grid-template-columns:1fr;}
  .proc-grid{grid-template-columns:1fr 1fr;}
  .testi-grid{grid-template-columns:1fr;}
  .grid-2,.two-col{grid-template-columns:1fr;gap:32px;}
  .grid-3{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:28px;}
  .footer-bottom{flex-direction:column;text-align:center;}
  #cookie-banner{padding:16px 22px;}
  .page-hero{padding:80px 0 44px;}
}
@media(max-width:480px){
  .proc-grid{grid-template-columns:1fr;}
  .grid-4{grid-template-columns:1fr;}
  .cta-btns{flex-direction:column;align-items:center;}
}