/* ═══════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════ */
:root {
  --blue:    #247abc;
  --blue-d:  #1a6aa8;
  --blue-lt: #5eb3f0;
  --blue-xl: #a8d4f5;
  --blue-bg: #e8f2fb;
  --gray-dk: #474748;

  --navy:    #0a1929;
  --navy2:   #0f2236;
  --white:   #ffffff;
  --gray:    #f0f5fa;
  --gray2:   #d4e3f0;
  --text:    #0f1f2e;
  --text-2:  #445566;
  --text-3:  #7a90a4;

  --transition: .3s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Inter', sans-serif; color:var(--text); line-height:1.6; background:var(--white); overflow-x:hidden; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; height:auto; }

/* ── Scroll-Fortschrittsbalken ── */
.scroll-bar {
  position:fixed; top:0; left:0; width:0%; height:3px;
  background:linear-gradient(90deg, var(--blue), var(--blue-lt));
  z-index:200; transition:width .1s linear;
}

/* ── Navigation ── */
.nav {
  position:sticky; top:0; z-index:100;
  background:var(--navy);
  border-bottom:1px solid rgba(36,122,188,.15);
  padding:.85rem 0;
  transition:box-shadow var(--transition);
}
.nav.scrolled { box-shadow:0 4px 24px rgba(0,0,0,.35); }
.nav-inner {
  max-width:1280px; margin:0 auto; padding:0 3rem;
  display:flex; justify-content:space-between; align-items:center;
}
.nav-logo { display:flex; align-items:center; }
.nav-logo img { height:36px; width:auto; display:block; }
.nav-links { display:flex; gap:0; list-style:none; }
.nav-links a {
  display:block; padding:.5rem 1.1rem; font-size:.875rem;
  font-weight:500; color:rgba(255,255,255,.55); transition:color var(--transition);
  position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:0; left:1.1rem; right:1.1rem; height:2px;
  background:var(--blue); transform:scaleX(0); transition:transform var(--transition);
  transform-origin:left;
}
.nav-links a:hover, .nav-links a.active { color:var(--white); }
.nav-links a.active::after { transform:scaleX(1); }
.nav-cta {
  padding:.5rem 1.4rem !important; background:var(--blue) !important;
  color:var(--white) !important; font-weight:600 !important;
  transition:background var(--transition) !important;
}
.nav-cta::after { display:none !important; }
.nav-cta:hover { background:var(--blue-d) !important; }
.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:.4rem; color:var(--white); }
.nav-toggle-icon { display:block; width:22px; position:relative; height:16px; }
.nav-toggle-icon span {
  position:absolute; left:0; width:100%; height:2px;
  background:var(--white); border-radius:2px;
  transition:transform .3s, opacity .3s, top .3s;
}
.nav-toggle-icon span:nth-child(1) { top:0; }
.nav-toggle-icon span:nth-child(2) { top:7px; }
.nav-toggle-icon span:nth-child(3) { top:14px; }
.nav-toggle.open .nav-toggle-icon span:nth-child(1) { top:7px; transform:rotate(45deg); }
.nav-toggle.open .nav-toggle-icon span:nth-child(2) { opacity:0; }
.nav-toggle.open .nav-toggle-icon span:nth-child(3) { top:7px; transform:rotate(-45deg); }
.nav-controls { display:flex; align-items:center; gap:.5rem; }
.lang-toggle {
  background:transparent;
  border:1.5px solid rgba(255,255,255,.25);
  color:rgba(255,255,255,.65);
  font-family:'Inter', sans-serif;
  font-size:.75rem; font-weight:700; letter-spacing:.08em;
  padding:.3rem .75rem; cursor:pointer;
  transition:border-color var(--transition), color var(--transition), background var(--transition);
}
.lang-toggle:hover { border-color:var(--blue); color:var(--white); background:rgba(36,122,188,.1); }

/* ── Hero ── */
.hero {
  background:var(--navy); position:relative; overflow:hidden;
  padding:7rem 3rem 10rem; min-height:90vh; display:flex; align-items:center;
}
.hero-dots {
  position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(36,122,188,.18) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}
.hero-ring1 {
  position:absolute; top:-180px; right:-180px; width:600px; height:600px; border-radius:50%;
  border:90px solid rgba(36,122,188,.06); pointer-events:none;
  animation:spinSlow 60s linear infinite;
}
.hero-ring2 {
  position:absolute; top:20px; right:20px; width:320px; height:320px; border-radius:50%;
  border:2px solid rgba(36,122,188,.2); pointer-events:none;
  animation:spinSlow 40s linear infinite reverse;
}
.hero-ring3 {
  position:absolute; bottom:-220px; left:-80px; width:450px; height:450px; border-radius:50%;
  border:60px solid rgba(36,122,188,.04); pointer-events:none;
}
@keyframes spinSlow { to { transform:rotate(360deg); } }
.hero::after {
  content:''; position:absolute; bottom:-1px; left:0; right:0; height:120px;
  background:var(--white); clip-path:polygon(0 100%, 100% 0, 100% 100%);
}
.hero-inner { max-width:1280px; margin:0 auto; width:100%; position:relative; z-index:1; }
.hero-overline {
  display:inline-flex; align-items:center; gap:.75rem;
  font-size:.72rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--blue-lt); margin-bottom:2.5rem;
  opacity:0; animation:fadeUp .6s .1s forwards;
}
.hero-overline::before { content:''; display:block; width:32px; height:2px; background:var(--blue); }
.hero-overline::after  { content:''; display:block; width:8px; height:8px; background:var(--blue); border-radius:50%; animation:blink 2.5s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.hero h1 {
  font-family:'Archivo Black', sans-serif;
  font-size:clamp(2.8rem, 7vw, 6rem);
  line-height:1; letter-spacing:-.03em; color:var(--white);
  margin-bottom:2.5rem; max-width:900px;
  opacity:0; animation:fadeUp .7s .2s forwards;
}
.hero h1 .hi { color:transparent; -webkit-text-stroke:2px var(--blue-lt); }
.hero-grid {
  display:grid; grid-template-columns:1.2fr 1fr; gap:5rem; align-items:end;
  opacity:0; animation:fadeUp .7s .35s forwards;
}
.hero-desc { font-size:1.05rem; color:rgba(255,255,255,.65); line-height:1.8; max-width:520px; margin-bottom:2.5rem; }
.hero-btns { display:flex; gap:1rem; flex-wrap:wrap; }
.btn-primary {
  padding:.9rem 2.4rem; background:var(--blue); color:var(--white);
  font-size:.9rem; font-weight:700; display:inline-block; letter-spacing:.04em;
  transition:all var(--transition); position:relative; overflow:hidden;
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.btn-primary:hover { background:var(--blue-d); transform:translateY(-2px); box-shadow:0 8px 24px rgba(36,122,188,.4); color:var(--white); }
.btn-outline-wh {
  padding:.9rem 2.4rem; background:transparent; color:var(--white);
  font-size:.9rem; font-weight:600; display:inline-block;
  border:1.5px solid rgba(255,255,255,.2); letter-spacing:.02em; transition:all var(--transition);
}
.btn-outline-wh:hover { border-color:var(--blue); color:var(--blue-lt); background:rgba(36,122,188,.08); }
.hero-badges { display:flex; flex-direction:column; gap:.7rem; align-self:center; }
.hero-badge {
  display:flex; align-items:center; gap:1rem; padding:1rem 1.5rem;
  background:rgba(36,122,188,.08); border:1px solid rgba(36,122,188,.18);
  transition:all var(--transition);
}
.hero-badge:hover { background:rgba(36,122,188,.15); border-color:rgba(36,122,188,.35); transform:translateX(-4px); }
.hero-badge-ico { font-size:1.25rem; flex-shrink:0; }
.hero-badge h4 { font-size:.72rem; color:var(--blue-lt); font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.15rem; }
.hero-badge p  { font-size:.85rem; color:rgba(255,255,255,.7); }
.hero-scroll {
  position:absolute; bottom:5rem; left:3rem; z-index:1;
  display:flex; align-items:center; gap:.75rem;
  font-size:.72rem; color:rgba(255,255,255,.35); letter-spacing:.1em; text-transform:uppercase;
}
.hero-scroll-line { width:40px; height:1px; background:rgba(36,122,188,.4); position:relative; overflow:hidden; }
.hero-scroll-line::after {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:var(--blue-lt); animation:scrollLine 2s 1s infinite;
}
@keyframes scrollLine { to { left:100%; } }
@keyframes fadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }

/* ── Gemeinsam ── */
.wrap { max-width:1280px; margin:0 auto; }
.s-label {
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue); margin-bottom:.5rem; display:flex; align-items:center; gap:.5rem;
}
.s-label::before { content:''; display:block; width:16px; height:2px; background:var(--blue); }
.s-title { font-family:'Archivo Black', sans-serif; font-size:clamp(2rem,4vw,3rem); line-height:1.05; letter-spacing:-.025em; }
.reveal { opacity:0; transform:translateY(32px); transition:opacity .65s var(--transition), transform .65s var(--transition); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }
.reveal-delay-4 { transition-delay:.4s; }

/* ── Services ── */
#services { background:var(--white); padding:6rem 3rem; }
.s-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:3.5rem; flex-wrap:wrap; gap:1.5rem; }
.s-link { font-size:.875rem; font-weight:600; color:var(--text-2); display:flex; align-items:center; gap:.4rem; transition:color var(--transition); white-space:nowrap; }
.s-link:hover { color:var(--blue); }
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--gray2); border:2px solid var(--gray2); }
.svc-cell {
  background:var(--white); padding:2.5rem 2rem;
  position:relative; overflow:hidden; transition:background var(--transition);
}
.svc-cell::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--blue); transform:scaleX(0); transition:transform var(--transition); transform-origin:left;
}
.svc-cell:hover::before { transform:scaleX(1); }
.svc-cell:hover { background:var(--navy); }
.svc-cell:hover .svc-h3 { color:var(--blue-lt); }
.svc-cell:hover .svc-p  { color:rgba(255,255,255,.6); }
.svc-cell:hover .svc-num-bg { color:rgba(36,122,188,.07); }
.svc-num-bg {
  position:absolute; top:-1.5rem; right:.75rem; font-family:'Archivo Black', sans-serif;
  font-size:6rem; color:rgba(0,0,0,.035); line-height:1; pointer-events:none; transition:color var(--transition);
}
.svc-ico { font-size:1.5rem; margin-bottom:1.25rem; }
.svc-h3 { font-family:'Archivo Black', sans-serif; font-size:1.05rem; margin-bottom:.75rem; transition:color var(--transition); }
.svc-p  { font-size:.875rem; color:var(--text-2); line-height:1.7; transition:color var(--transition); }

/* ── About ── */
#about { background:var(--gray); padding:7rem 3rem; position:relative; }
#about::before {
  content:''; position:absolute; top:-60px; left:0; right:0; height:61px;
  background:var(--gray); clip-path:polygon(0 100%, 0 0, 100% 100%);
}
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; }
.about-body { font-size:1.02rem; color:var(--text-2); line-height:1.8; margin-bottom:1.5rem; }
.feat-list { list-style:none; margin-top:2.5rem; }
.feat-li {
  display:flex; align-items:center; gap:1rem; padding:1rem 0;
  border-bottom:1px solid var(--gray2); font-size:.9rem; font-weight:500; transition:padding-left var(--transition);
}
.feat-li:first-child { border-top:1px solid var(--gray2); }
.feat-li:hover { padding-left:.5rem; }
.feat-check {
  width:28px; height:28px; background:var(--blue); border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; color:var(--white); font-weight:800; transition:transform var(--transition);
}
.feat-li:hover .feat-check { transform:scale(1.15); }
.num-cards { display:grid; grid-template-columns:1fr 1fr; gap:1.5px; background:var(--gray2); border:1.5px solid var(--gray2); }
.num-card { background:var(--white); padding:2rem; transition:background var(--transition); }
.num-card:hover { background:var(--blue-bg); }
.num-card-num { font-family:'Archivo Black', sans-serif; font-size:3.5rem; line-height:1; color:var(--navy); margin-bottom:.4rem; }
.num-card-num span { color:var(--blue); }
.num-card-lbl { font-size:.82rem; color:var(--text-3); font-weight:500; }
.about-cta-box { margin-top:2rem; background:var(--navy); padding:2.5rem; color:var(--white); }
.about-cta-box h4 { font-family:'Archivo Black', sans-serif; font-size:1.2rem; margin-bottom:.75rem; }
.about-cta-box p  { font-size:.875rem; color:rgba(255,255,255,.6); margin-bottom:1.5rem; line-height:1.7; }
.btn-primary-sm {
  padding:.7rem 1.6rem; background:var(--blue); color:var(--white);
  font-size:.85rem; font-weight:700; display:inline-block; transition:all var(--transition); letter-spacing:.03em;
}
.btn-primary-sm:hover { background:var(--blue-d); transform:translateY(-1px); box-shadow:0 6px 20px rgba(36,122,188,.35); color:var(--white); }

/* ── Experience ── */
#experience { background:var(--navy); padding:7rem 3rem; position:relative; }
#experience::before {
  content:''; position:absolute; top:-60px; left:0; right:0; height:61px;
  background:var(--navy); clip-path:polygon(100% 0, 100% 100%, 0 100%);
}
.exp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.exp-card {
  border:1px solid rgba(36,122,188,.12); padding:2.5rem; position:relative; overflow:hidden;
  transition:border-color var(--transition), background var(--transition), transform var(--transition);
}
.exp-card:hover { border-color:var(--blue); background:rgba(36,122,188,.07); transform:translateY(-4px); }
.exp-card::before {
  content:''; position:absolute; top:0; left:0; width:3px; height:100%;
  background:linear-gradient(to bottom, var(--blue), transparent);
}
.exp-big-num {
  font-family:'Archivo Black', sans-serif; font-size:5rem; line-height:1;
  color:rgba(36,122,188,.12); margin-bottom:.5rem; transition:color var(--transition);
}
.exp-card:hover .exp-big-num { color:rgba(36,122,188,.22); }
.exp-card h3   { font-family:'Archivo Black', sans-serif; font-size:1.05rem; color:var(--white); margin-bottom:.9rem; }
.exp-card p    { font-size:.875rem; color:rgba(255,255,255,.55); line-height:1.75; margin-bottom:1.25rem; }
.exp-tech      { font-size:.78rem; color:var(--blue-lt); font-weight:600; line-height:1.9; }

/* ── Contact ── */
#contact { background:var(--white); padding:7rem 3rem; position:relative; }
#contact::before {
  content:''; position:absolute; top:-60px; left:0; right:0; height:61px;
  background:var(--white); clip-path:polygon(0 0, 100% 100%, 0 100%);
}
.contact-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:5rem; align-items:start; }
.c-overline { font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-bottom:.75rem; }
.c-title { font-family:'Archivo Black', sans-serif; font-size:clamp(1.8rem,4vw,2.8rem); line-height:1.1; letter-spacing:-.02em; margin-bottom:1.5rem; }
.c-desc  { font-size:1rem; color:var(--text-2); line-height:1.8; margin-bottom:2.5rem; }
.c-item {
  display:flex; align-items:center; gap:1.25rem; margin-bottom:1.25rem; padding:1.25rem;
  background:var(--gray); border-left:3px solid transparent; transition:border-color var(--transition), background var(--transition);
}
.c-item:hover { border-color:var(--blue); background:var(--blue-bg); }
.c-item-ico { width:44px; height:44px; background:var(--blue); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; font-style:normal; color:var(--white); }
.c-item h4 { font-size:.72rem; color:var(--text-3); font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-bottom:.2rem; }
.c-item a, .c-item p { font-size:.95rem; font-weight:600; color:var(--text); }
.c-item a:hover { color:var(--blue); }
.form-box { background:var(--navy); padding:3rem; }
.form-box-title { font-family:'Archivo Black', sans-serif; font-size:1.2rem; color:var(--white); margin-bottom:2rem; }
.fg { margin-bottom:1.25rem; }
.fg label { display:block; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:.5rem; }
.fg input, .fg textarea {
  width:100%; padding:.9rem 1.1rem;
  background:rgba(255,255,255,.05); border:1px solid rgba(36,122,188,.2);
  color:var(--white); font-size:.9rem; font-family:inherit; transition:border-color var(--transition), box-shadow var(--transition);
}
.fg input::placeholder, .fg textarea::placeholder { color:rgba(255,255,255,.2); }
.fg input:focus, .fg textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(36,122,188,.18); }
.fg textarea { resize:vertical; min-height:130px; }
.submit-btn {
  width:100%; padding:1rem; background:var(--blue); color:var(--white);
  border:none; font-family:'Archivo Black', sans-serif; font-size:.95rem;
  letter-spacing:.05em; cursor:pointer; transition:background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.submit-btn:hover { background:var(--blue-d); transform:translateY(-2px); box-shadow:0 8px 24px rgba(36,122,188,.4); }

/* ── Footer ── */
footer { background:#060e1a; color:rgba(255,255,255,.5); padding:4rem 3rem 2rem; }
.f-inner { max-width:1280px; margin:0 auto; }
.f-top {
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:4rem;
  padding-bottom:3rem; margin-bottom:2rem; border-bottom:1px solid rgba(36,122,188,.15);
}
.f-logo { margin-bottom:.9rem; }
.f-logo img { height:40px; width:auto; display:block; }
.f-tag  { font-size:.85rem; line-height:1.75; }
.f-col h4 { font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:1.1rem; }
.f-col ul { list-style:none; }
.f-col li { margin-bottom:.5rem; }
.f-col a { font-size:.875rem; color:rgba(255,255,255,.4); transition:color var(--transition); }
.f-col a:hover { color:var(--blue-lt); }
.f-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; font-size:.8rem; }
.f-bottom a { color:rgba(255,255,255,.3); transition:color var(--transition); }
.f-bottom a:hover { color:var(--blue-lt); }
.footer-link-btn {
  background:none;
  border:none;
  color:rgba(255,255,255,.3);
  font:inherit;
  cursor:pointer;
  padding:0;
  transition:color var(--transition);
}
.footer-link-btn:hover { color:var(--blue-lt); }

/* ── Consent Banner ── */
.cookie-banner {
  position:fixed;
  left:1rem;
  right:1rem;
  bottom:1rem;
  z-index:210;
  background:var(--navy);
  border:1px solid rgba(36,122,188,.35);
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  padding:1rem 1.2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.cookie-banner[hidden] { display:none; }
.cookie-banner-text {
  color:rgba(255,255,255,.8);
  font-size:.86rem;
  line-height:1.6;
  max-width:760px;
}
.cookie-banner-actions {
  display:flex;
  align-items:center;
  gap:.55rem;
  flex-shrink:0;
}
.cookie-btn {
  border:none;
  cursor:pointer;
  font-family:'Inter', sans-serif;
  font-size:.82rem;
  font-weight:600;
  padding:.6rem 1rem;
  transition:background var(--transition), color var(--transition);
}
.cookie-btn-primary { background:var(--blue); color:var(--white); }
.cookie-btn-primary:hover { background:var(--blue-d); }
.cookie-btn-secondary { background:rgba(255,255,255,.08); color:rgba(255,255,255,.85); }
.cookie-btn-secondary:hover { background:rgba(255,255,255,.15); }

/* ── Scroll-to-Top ── */
.back-top {
  position:fixed; bottom:2rem; right:2rem; z-index:90;
  width:44px; height:44px; background:var(--blue); color:var(--white);
  border:none; cursor:pointer; font-size:1.1rem; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity var(--transition), transform var(--transition), background var(--transition);
  clip-path:polygon(50% 0%, 100% 30%, 100% 100%, 0 100%, 0 30%);
}
.back-top.visible { opacity:1; pointer-events:auto; }
.back-top:hover { background:var(--blue-d); transform:translateY(-3px); }

/* ── Responsive ── */
@media(max-width:1000px) {
  .hero-grid, .about-grid, .contact-grid { grid-template-columns:1fr; gap:3rem; }
  .svc-grid, .exp-grid { grid-template-columns:1fr 1fr; }
  .f-top { grid-template-columns:1fr 1fr; gap:2.5rem; }
}
@media(max-width:768px) {
  .nav-links {
    display:none; flex-direction:column; gap:0; position:absolute;
    top:100%; left:0; right:0; background:var(--navy2);
    border-top:1px solid rgba(36,122,188,.15); border-bottom:1px solid rgba(36,122,188,.15);
  }
  .nav-links.open { display:flex; }
  .nav-links a { padding:.85rem 2rem; border-bottom:1px solid rgba(255,255,255,.05); }
  .nav-links a::after { display:none; }
  .nav-inner { position:relative; }
  .nav-toggle { display:block; }
  .nav-cta { margin:1rem 2rem !important; }
  #services, #about, #experience, #contact { padding-left:1.5rem; padding-right:1.5rem; }
  .hero { padding:5rem 1.5rem 8rem; min-height:auto; }
  .svc-grid, .exp-grid { grid-template-columns:1fr; }
  .num-cards { grid-template-columns:1fr 1fr; }
  .f-top { grid-template-columns:1fr; gap:2rem; }
  .s-head { flex-direction:column; align-items:flex-start; }
  .hero-scroll { display:none; }
  .cookie-banner {
    left:.6rem;
    right:.6rem;
    bottom:.6rem;
    padding:.9rem;
    align-items:flex-start;
    flex-direction:column;
  }
  .cookie-banner-actions { width:100%; }
  .cookie-btn { flex:1; }
}
@media(max-width:480px) {
  .hero h1 { font-size:2.4rem; }
  .num-cards { grid-template-columns:1fr; }
}