/* ═══════════════════════════════════════════════════════
   DESIGN SYSTEM
   Palette: Deep Navy · Brand Blue · Pure White
   Type:    Bricolage Grotesque (display) · Instrument Sans (body)
   Motion:  Smooth, earned, purposeful
════════════════════════════════════════════════════════ */
:root {
  /* Core palette */
  --navy:      #0D1F3C;
  --navy-mid:  #162D54;
  --navy-soft: #1D3B6E;
  --blue:      #1E7FB3;
  --blue-lt:   #7EC4E8;
  --blue-pale: #EBF5FC;
  --white:     #FFFFFF;
  --grey-0:    #F7F9FC;
  --grey-1:    #EDF1F8;
  --grey-2:    #D3DCF0;
  --ink:       #0D1F3C;
  --ink-mid:   #3D5275;
  --ink-soft:  #7A8FAD;

  /* Shadows */
  --s1: 0 1px 3px rgba(13,31,60,.06), 0 4px 12px rgba(13,31,60,.06);
  --s2: 0 4px 16px rgba(13,31,60,.08), 0 12px 40px rgba(13,31,60,.08);
  --s3: 0 8px 24px rgba(13,31,60,.12), 0 24px 64px rgba(13,31,60,.10);
  --s-blue: 0 8px 32px rgba(75,163,211,.30);

  /* Radius */
  --r:    10px;
  --r-lg: 18px;
  --r-xl: 24px;
}

/* ─────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth; font-size: 16px; -webkit-font-smoothing: antialiased }
body {
  font-family: 'Instrument Sans', sans-serif;
  background: var(--white);
  color: var(--ink);
  overflow-x: hidden;
  line-height: 1.6;
}
a { text-decoration: none; color: inherit }
ul { list-style: none }
img { display: block; width: 100%; height: 100%; object-fit: cover }
button { font-family: inherit; cursor: pointer }

/* ─────────────────────────────────────────
   SCROLL REVEAL
───────────────────────────────────────── */
.sr {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1),
              transform .6s cubic-bezier(.16,1,.3,1);
}
.sr.up { opacity: 1; transform: none }
.sr[data-d="1"] { transition-delay: .08s }
.sr[data-d="2"] { transition-delay: .16s }
.sr[data-d="3"] { transition-delay: .24s }
.sr[data-d="4"] { transition-delay: .32s }
.sr[data-d="5"] { transition-delay: .40s }

/* ─────────────────────────────────────────
   LAYOUT UTILITIES
───────────────────────────────────────── */
.wrap { width: min(1200px, 90%); margin: 0 auto }
.sec  { padding: 100px 0 }

.label-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .7rem; font-weight: 600; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: .9rem;
}
.label-tag::before {
  content: ''; width: 20px; height: 2px;
  background: var(--blue); border-radius: 1px; flex-shrink: 0;
}

.headline {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(2.2rem, 3.8vw, 3.4rem);
  font-weight: 800; line-height: 1.06;
  letter-spacing: -.6px; color: var(--ink);
}
.headline em   { font-style: normal; color: var(--blue) }
.headline.inv  { color: var(--white) }
.headline.inv em { color: var(--blue-lt) }

.subline {
  font-size: 1.02rem; color: var(--ink-soft);
  line-height: 1.78; max-width: 540px;
}
.subline.inv { color: rgba(255,255,255,.52) }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: 'Instrument Sans', sans-serif;
  font-size: .9rem; font-weight: 600; border-radius: var(--r);
  border: none; cursor: pointer; transition: all .22s ease;
  padding: .85rem 2rem; white-space: nowrap;
}
.btn-navy {
  background: var(--navy); color: #fff;
  box-shadow: 0 4px 14px rgba(13,31,60,.25);
}
.btn-navy:hover { background: #1a2f50; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(13,31,60,.30) }
.btn-blue {
  background: var(--blue); color: #fff;
  box-shadow: var(--s-blue);
}
.btn-blue:hover { background: #3d90be; transform: translateY(-2px); box-shadow: 0 12px 36px rgba(75,163,211,.40) }
.btn-ghost {
  background: transparent; color: rgba(255,255,255,.82);
  border: 1.5px solid rgba(255,255,255,.22);
}
.btn-ghost:hover { border-color: rgba(255,255,255,.7); color: #fff; background: rgba(255,255,255,.06) }
.btn-outline-navy {
  background: transparent; color: var(--navy);
  border: 1.5px solid var(--grey-2);
}
.btn-outline-navy:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-pale) }

/* ═══════════════════════════════════════════════════════
   NAV
════════════════════════════════════════════════════════ */
#nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
  transition: background .35s, box-shadow .35s;
}
#nav.stuck {
  background: rgba(13, 31, 60, .96);
  box-shadow: 0 1px 0 rgba(255,255,255,.07), 0 4px 32px rgba(0,0,0,.25);
  backdrop-filter: blur(20px);
}
.nav-inner {
  width: min(1200px, 90%); margin: 0 auto;
  height: 76px; display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { display: flex; align-items: center; gap: 12px }
.nav-mark {
  width: 180px; height: auto; display: grid; place-items: center;
}
/* Window-pane mark — clean cross */
.nav-mark img { width: 180px; height: auto }
.nav-brand { display: flex; flex-direction: column; line-height: 1.15 }
.nav-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.1rem; font-weight: 800; color: #fff; letter-spacing: -.2px;
}
.nav-sub { font-size: .58rem; color: rgba(255,255,255,.35); letter-spacing: 2px; text-transform: uppercase }

.nav-links { display: flex; align-items: center; gap: 2rem }
.nav-links > a {
  color: rgba(255,255,255,.68); font-size: .86rem; font-weight: 500;
  letter-spacing: .2px; transition: color .2s; position: relative;
}
.nav-links > a::after {
  content: ''; position: absolute; bottom: -3px; left: 0;
  width: 0; height: 1.5px; background: var(--blue); transition: width .25s;
}
.nav-links > a:hover { color: #fff }
.nav-links > a:hover::after { width: 100% }
.nav-links .nav-cta-btn {
  background: var(--blue); color: #fff !important;
  padding: .55rem 1.4rem; border-radius: var(--r);
  font-weight: 600 !important; font-size: .83rem !important;
  box-shadow: 0 3px 12px rgba(75,163,211,.35);
  transition: background .2s, transform .2s, box-shadow .2s !important;
}
.nav-links .nav-cta-btn:hover { background: #3d90be !important; transform: translateY(-1px) !important; box-shadow: var(--s-blue) !important }
.nav-links .nav-cta-btn::after { display: none !important }

/* Mobile */
.hbg { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px }
.hbg span { width: 24px; height: 1.5px; background: rgba(255,255,255,.85); border-radius: 2px; transition: .25s; display: block }
.mob-nav {
  display: none; flex-direction: column;
  position: fixed; top: 76px; left: 0; right: 0; bottom: 0;
  background: var(--navy); padding: 2rem 5%; z-index: 999; overflow-y: auto;
}
.mob-nav.on { display: flex }
.mob-nav a {
  color: rgba(255,255,255,.7); font-size: 1.05rem; font-weight: 500;
  padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.06);
  transition: color .2s;
}
.mob-nav a:hover { color: var(--blue) }
.mob-nav .mob-cta {
  margin-top: 1.5rem; background: var(--blue); color: #fff !important;
  padding: 1rem 2rem; border-radius: var(--r); text-align: center;
  font-weight: 600; border: none;
}

/* ═══════════════════════════════════════════════════════
   CRYSTAL TEXTURE — Faceted glass / Kristall-Schliff
   SVG-based diagonal facets at multiple angles
   Like cut crystal catching light — subtle, premium
════════════════════════════════════════════════════════ */

/* The crystal SVG pattern as reusable CSS variable */
/* Facets: 3 diagonal line sets at 30°, 60°, 150° + thin horizontals */
:root {
  --crystal-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cdefs%3E%3Cpattern id='c' width='120' height='120' patternUnits='userSpaceOnUse'%3E%3C!-- Facet lines 30deg --%3E%3Cline x1='0' y1='120' x2='120' y2='0' stroke='rgba(255,255,255,0.035)' stroke-width='0.8'/%3E%3Cline x1='-60' y1='120' x2='60' y2='0' stroke='rgba(255,255,255,0.022)' stroke-width='0.5'/%3E%3Cline x1='60' y1='120' x2='180' y2='0' stroke='rgba(255,255,255,0.022)' stroke-width='0.5'/%3E%3C!-- Facet lines 60deg --%3E%3Cline x1='0' y1='0' x2='120' y2='120' stroke='rgba(255,255,255,0.028)' stroke-width='0.7'/%3E%3Cline x1='-60' y1='0' x2='60' y2='120' stroke='rgba(255,255,255,0.018)' stroke-width='0.4'/%3E%3Cline x1='60' y1='0' x2='180' y2='120' stroke='rgba(255,255,255,0.018)' stroke-width='0.4'/%3E%3C!-- Thin horizontal facet bands --%3E%3Cline x1='0' y1='40' x2='120' y2='40' stroke='rgba(255,255,255,0.016)' stroke-width='0.4'/%3E%3Cline x1='0' y1='80' x2='120' y2='80' stroke='rgba(255,255,255,0.016)' stroke-width='0.4'/%3E%3C!-- Vertical slim lines --%3E%3Cline x1='40' y1='0' x2='40' y2='120' stroke='rgba(255,255,255,0.012)' stroke-width='0.3'/%3E%3Cline x1='80' y1='0' x2='80' y2='120' stroke='rgba(255,255,255,0.012)' stroke-width='0.3'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='120' height='120' fill='url(%23c)'/%3E%3C/svg%3E");
}

/* Apply to all dark sections */
.tex::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: var(--crystal-bg);
  background-size: 120px 120px;
}
.tex > * { position: relative; z-index: 1 }

/* ═══════════════════════════════════════════════════════
   HERO
   Mesh gradient + subtle texture overlay
════════════════════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  background: var(--navy);
  background-image:
    radial-gradient(ellipse 70% 60% at 15% 50%,  rgba(75,163,211,.15) 0%, transparent 65%),
    radial-gradient(ellipse 50% 80% at 85% 20%,  rgba(29,59,110,.65) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 75% 85%,  rgba(75,163,211,.09) 0%, transparent 55%),
    radial-gradient(ellipse 35% 40% at 45% 5%,   rgba(126,196,232,.08) 0%, transparent 50%);
  display: grid; grid-template-columns: 1fr 1fr;
  position: relative; overflow: hidden;
}
/* Crystal texture on hero */
.hero::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: var(--crystal-bg);
  background-size: 120px 120px;
}

/* ── Hero glass trust bar — bottom of hero ── */
.hero-trust-bar {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 10;
  background: #0D1F3C;
  border-top: 1px solid rgba(75,163,211,.18);
  display: flex; flex-wrap: wrap;
}
.htb-item {
  flex: 1; min-width: 20%;
  display: flex; align-items: center; gap: .85rem;
  padding: 1.1rem 1.4rem;
  border-right: 1px solid rgba(255,255,255,.06);
}
.htb-item:last-child { border-right: none }
.htb-icon {
  width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0;
  background: rgba(75,163,211,.18); border: 1px solid rgba(75,163,211,.3);
  display: grid; place-items: center; font-size: 1rem;
}
.htb-val { font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.9); line-height: 1.2 }
.htb-lbl { font-size: .6rem; color: rgba(255,255,255,.35); letter-spacing: 1.5px; text-transform: uppercase }

.hero-left {
  display: flex; flex-direction: column; justify-content: center;
  padding: 130px 5% 130px 5%;
  max-width: 580px; margin: 0 auto 0 max(5%, calc(50% - 580px));
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(75,163,211,.12);
  border: 1px solid rgba(75,163,211,.28);
  padding: .38rem 1rem; border-radius: 50px;
  font-size: .7rem; font-weight: 600; color: var(--blue-lt);
  letter-spacing: 1.8px; text-transform: uppercase;
  margin-bottom: 1.8rem; width: fit-content;
}
.hero-badge .dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--blue);
  box-shadow: 0 0 6px var(--blue);
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.hero-h1 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(3rem, 5vw, 4.8rem);
  font-weight: 800; line-height: 1.02;
  letter-spacing: -.8px; color: #fff;
  margin-bottom: 1.5rem;
}
.hero-h1 .accent {
  color: var(--blue);
}

.hero-desc {
  font-size: 1.05rem; color: rgba(255,255,255,.5);
  line-height: 1.8; max-width: 440px;
  margin-bottom: 2.4rem; font-weight: 400;
}

.hero-btns { display: flex; gap: .85rem; flex-wrap: wrap; margin-bottom: 3.2rem }

.zertifikat {
  position: absolute;
  width: 240px;
  height: auto;
  bottom: 0;
  right: 20px;
  transition: 0.3s;
}

.zertifikat:hover { opacity: 0.7; }

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 90vw;
  height: auto;
  animation: zoom 0.6s;
}

#caption {
  margin: auto;
  display: block;
  width: 80%;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
}

@keyframes zoom {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover { color: #bbb; cursor: pointer; }

@media screen and (max-width: 700px) {
  .modal-content { width: 100%; }
}

@media (max-width: 770px) {
  .zertifikat {
    width: 160px;
  }
}

/* Micro-stats row */
.hero-kpis {
  display: flex; gap: 0;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r); overflow: hidden;
  width: fit-content;
}
.hkpi {
  padding: .95rem 1.6rem;
  border-right: 1px solid rgba(255,255,255,.07);
}
.hkpi:last-child { border-right: none }
.hkpi-num {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1;
  background: linear-gradient(135deg, #fff, var(--blue-lt));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.hkpi-lbl { font-size: .63rem; color: rgba(255,255,255,.32); letter-spacing: 1.5px; text-transform: uppercase; margin-top: .25rem }

/* Hero right — photo panel */
.hero-right {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

/* ── The premium photo frame ── */
.hero-photo-frame {
  position: absolute; inset: 60px 40px;
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--s3), 0 0 0 1px rgba(255,255,255,.06);
  background: linear-gradient(155deg, #1a3660 0%, #0d2044 60%, #162d54 100%);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .75rem;
}
.hero-photo-frame::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 30% 40%, rgba(75,163,211,.08), transparent),
    radial-gradient(ellipse 40% 60% at 80% 70%, rgba(29,59,110,.4), transparent);
}
.ph-placeholder {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center;
}
.ph-icon { font-size: 3.5rem; opacity: .2 }
.ph-text { font-size: .62rem; color: rgba(255,255,255,.18); letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600 }

/* Floating credential card */
.hero-cred {
  position: absolute; bottom: 80px; left: 0px; z-index: 10;
  background: rgba(13,31,60,.88);
  border: 1px solid rgba(75,163,211,.2);
  border-radius: var(--r-lg); padding: 1.1rem 1.4rem;
  backdrop-filter: blur(16px);
  box-shadow: var(--s2);
}
.hc-stars { color: #F9C74F; font-size: .9rem; letter-spacing: 2px; margin-bottom: .35rem }
.hc-score {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.8rem; font-weight: 800; color: #fff; line-height: 1;
}
.hc-label { font-size: .67rem; color: rgba(255,255,255,.38); letter-spacing: 1.5px; text-transform: uppercase; margin-top: .2rem }

/* Second floating card */
.hero-cert {
  position: absolute; top: 90px; right: -10px; z-index: 10;
  background: var(--blue);
  border-radius: var(--r-lg); padding: .9rem 1.2rem;
  box-shadow: 0 8px 28px rgba(75,163,211,.4);
  display: flex; align-items: center; gap: .65rem;
}
.hero-cert-icon { font-size: 1.2rem }
.hero-cert-txt { font-size: .75rem; font-weight: 600; color: #fff; line-height: 1.3 }
.hero-cert-sub { font-size: .62rem; color: rgba(255,255,255,.65) }

/* ═══════════════════════════════════════════════════════
   TRUST STRIP
════════════════════════════════════════════════════════ */
.trust-strip {
  background: var(--white);
  border-top: 3px solid var(--blue);
  border-bottom: 1px solid var(--grey-1);
}
.trust-row {
  width: min(1200px, 90%); margin: 0 auto;
  display: flex; align-items: stretch; flex-wrap: wrap;
}
.titem {
  flex: 1; min-width: 160px;
  display: flex; align-items: center; gap: .85rem;
  padding: 1.3rem 1.8rem 1.3rem 0;
  border-right: 1px solid var(--grey-1);
}
.titem:last-child { border-right: none }
.titem:first-child { padding-left: 0 }
.titem-icon {
  width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0;
  background: var(--grey-0); border: 1px solid var(--grey-1);
  display: grid; place-items: center; font-size: 1.1rem;
}
.titem-val { font-size: .9rem; font-weight: 600; color: var(--ink); line-height: 1.2 }
.titem-lbl { font-size: .62rem; color: var(--ink-soft); letter-spacing: 1.5px; text-transform: uppercase }

/* ═══════════════════════════════════════════════════════
   INTRO / QUICK STATS
════════════════════════════════════════════════════════ */
.intro-sec { background: var(--grey-0) }
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center }
.intro-numbers {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--grey-2); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--s1);
}
.in-num {
  background: var(--white); padding: 2rem 1.8rem;
}
.in-n {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 2.8rem; font-weight: 800; color: var(--navy);
  line-height: 1;
}
.in-n .cnt { display: inline }
.in-l { font-size: .7rem; color: var(--ink-soft); letter-spacing: 1.5px; text-transform: uppercase; margin-top: .5rem; font-weight: 500 }

/* ═══════════════════════════════════════════════════════
   SERVICES — VERTICAL CATEGORY LAYOUT (no tabs)
   Three stacked category groups, alternating bg
════════════════════════════════════════════════════════ */
.services-sec { background: var(--white) }

/* Category block */
.svc-cat {
  padding: 80px 0;
  border-bottom: 1px solid var(--grey-1);
}
.svc-cat:last-child { border-bottom: none }
.svc-cat.alt { background: var(--grey-0) }

/* Category header row */
.svc-cat-head {
  display: grid; grid-template-columns: auto 1fr auto; gap: 2rem;
  align-items: center; margin-bottom: 3rem;
}
.svc-cat-num {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 4.5rem; font-weight: 800; line-height: 1;
  color: var(--grey-1);
  letter-spacing: -3px; user-select: none;
  transition: color .3s;
}
.svc-cat:hover .svc-cat-num { color: var(--grey-2) }
.svc-cat-info { }
.svc-cat-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 800; color: var(--ink);
  letter-spacing: -.3px; margin-bottom: .4rem;
}
.svc-cat-desc { font-size: .92rem; color: var(--ink-soft); line-height: 1.75; max-width: 480px }
.svc-cat-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 700; color: var(--navy);
  padding: .7rem 1.4rem; border-radius: var(--r);
  border: 1.5px solid var(--grey-2); white-space: nowrap;
  transition: border-color .2s, color .2s, background .2s;
}
.svc-cat-cta:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-pale) }

/* Card grid inside category */
.svc-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem;
}

/* Service card */
.sc {
  background: var(--white);
  border: 1px solid var(--grey-1);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s;
  display: flex; flex-direction: column;
}
.sc:hover {
  transform: translateY(-6px);
  box-shadow: var(--s3);
  border-color: rgba(75,163,211,.25);
}

/* Photo zone */
.sc-photo {
  height: 205px; overflow: hidden; flex-shrink: 0; position: relative;
  background: var(--grey-0);
}
.sc-photo-inner {
  width: 100%; height: 100%;
  background-size: cover; background-position: center;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .5rem;
}
.sc:hover .sc-photo-inner { transform: scale(1.04) }

/* Gradient overlays per card — premium, no flat colors */
.g1 { background: linear-gradient(145deg, #0E2448 0%, #1D4680 50%, #2A6BAF 100%) }
.g2 { background: linear-gradient(145deg, #0A1E3C 0%, #133566 50%, #1D5C99 100%) }
.g3 { background: linear-gradient(145deg, #122B58 0%, #1A4A88 50%, #3378B8 100%) }
.g4 { background: linear-gradient(145deg, #0D2040 0%, #153060 50%, #2460A0 100%) }
.g5 { background: linear-gradient(145deg, #071830 0%, #0F2850 50%, #1B4A88 100%) }
.g6 { background: linear-gradient(145deg, #0F2444 0%, #1D3B6E 50%, #4076AA 100%) }
.g7 { background: linear-gradient(145deg, #162C56 0%, #1D3B6E 50%, #4BA3D3 100%) }
.g8 { background: linear-gradient(145deg, #0B1C38 0%, #142D58 50%, #1E4880 100%) }
.g9 { background: linear-gradient(145deg, #101E3C 0%, #1B3468 50%, #3872A8 100%) }

/* "Add photo" hint on hover */
.sc-photo::after {
  content: '📷  Foto einfügen';
  position: absolute; bottom: 10px; right: 10px;
  background: rgba(0,0,0,.6); color: rgba(255,255,255,.6);
  font-size: .6rem; padding: .28rem .7rem; border-radius: 4px;
  letter-spacing: .5px; opacity: 0; transition: opacity .25s;
  pointer-events: none; font-family: 'Instrument Sans', sans-serif;
}
.sc:hover .sc-photo::after { opacity: 1 }

.sc-ph { display: flex; flex-direction: column; align-items: center; gap: .5rem }
.sc-ph .ico { font-size: 2.4rem; opacity: .28 }
.sc-ph .lbl { font-size: .58rem; color: rgba(255,255,255,.22); letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600 }

/* Card body */
.sc-body { padding: 1.5rem 1.7rem 1.8rem; display: flex; flex-direction: column; flex: 1 }
.sc-cat {
  font-size: .64rem; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--blue); margin-bottom: .45rem;
}
.sc-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.12rem; font-weight: 700; color: var(--ink);
  margin-bottom: .55rem; line-height: 1.3;
}
.sc-desc { font-size: .84rem; color: var(--ink-soft); line-height: 1.72; margin-bottom: 1.2rem; flex: 1 }
.sc-cta {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .78rem; font-weight: 700; color: var(--navy);
  letter-spacing: .3px;
  padding-bottom: 2px; border-bottom: 1.5px solid var(--grey-2);
  width: fit-content; transition: gap .2s, color .2s, border-color .2s;
}
.sc-cta:hover { color: var(--blue); border-color: var(--blue); gap: .55rem }
.arrow { font-style: normal }

/* ═══════════════════════════════════════════════════════
   ABOUT SECTION
════════════════════════════════════════════════════════ */
.about-sec { background: var(--grey-0) }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center }

.about-photo-col { position: relative }
.about-img {
  aspect-ratio: 5/6; border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--s3); position: relative; z-index: 1;
  /* REPLACE: background-image:url('team.jpg');background-size:cover;background-position:center; */
  background: linear-gradient(155deg, #1D3B6E 0%, #2E6095 60%, #4BA3D3 100%);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .75rem;
}
.about-img .a-ico { font-size: 3.5rem; opacity: .18 }
.about-img .a-lbl { font-size: .6rem; color: rgba(255,255,255,.18); letter-spacing: 2.5px; text-transform: uppercase }

/* Badge overlay */
.about-badge {
  position: absolute; bottom: -12px; right: -18px; z-index: 2;
  background: var(--blue); border-radius: var(--r-lg);
  padding: 1.3rem 1.6rem; text-align: center;
  box-shadow: 0 10px 36px rgba(75,163,211,.45);
}
.ab-big {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 2.4rem; font-weight: 800; color: #fff; line-height: 1;
}
.ab-txt { font-size: .6rem; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.8); margin-top: .3rem; line-height: 1.4 }

/* Deco corner — no diagonals, just a quiet border square */
.about-photo-col::before {
  content: ''; position: absolute; top: -14px; left: -14px; z-index: 0;
  width: 52%; height: 52%;
  border-radius: var(--r-xl);
  border: 2px solid var(--grey-2);
}

.about-text .headline { margin-bottom: 1.25rem }
.about-text .subline  { margin-bottom: 1rem }

.feat-list { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 2.2rem }
.feat {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: 1.05rem 1.1rem; border-radius: var(--r);
  background: var(--white); border: 1px solid var(--grey-1);
  transition: border-color .25s, box-shadow .25s;
}
.feat:hover { border-color: rgba(75,163,211,.3); box-shadow: var(--s1) }
.feat-icon {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  background: var(--blue-pale); border: 1px solid rgba(75,163,211,.18);
  display: grid; place-items: center; font-size: .95rem;
}
.feat-title { font-size: .84rem; font-weight: 600; color: var(--ink); margin-bottom: .15rem }
.feat-desc  { font-size: .77rem; color: var(--ink-soft); line-height: 1.55 }

/* ═══════════════════════════════════════════════════════
   NUMBERS STRIP — Deep navy + texture + gradient numbers
════════════════════════════════════════════════════════ */
.numbers-sec {
  background: var(--navy);
  background-image:
    radial-gradient(ellipse 60% 80% at 10% 50%, rgba(75,163,211,.12), transparent),
    radial-gradient(ellipse 40% 60% at 90% 50%, rgba(75,163,211,.10), transparent);
  padding: 72px 0;
  position: relative;
}
/* Same window-pane texture */
.numbers-sec::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: var(--crystal-bg);
  background-size: 120px 120px;
}
.numbers-sec .wrap { position: relative; z-index: 1 }
.numbers-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 0;
}
.nitem {
  text-align: center; padding: 1.5rem 1rem;
  border-right: 1px solid rgba(255,255,255,.07);
  position: relative;
}
.nitem:last-child { border-right: none }
.nitem::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 24px; height: 2px; background: transparent;
  transition: background .3s, width .3s;
}
.nitem:hover::after { background: var(--blue); width: 40px }
.n-val {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 3rem; font-weight: 800; line-height: 1; margin-bottom: .5rem;
  background: linear-gradient(135deg, var(--white) 0%, var(--blue-lt) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.n-lbl { font-size: .68rem; color: rgba(255,255,255,.35); letter-spacing: 2px; text-transform: uppercase; font-weight: 500 }

/* ═══════════════════════════════════════════════════════
   PROCESS STEPS
════════════════════════════════════════════════════════ */
.process-sec { background: var(--white) }
.process-header { text-align: center; margin-bottom: 4rem }
.process-header .subline { margin: .75rem auto 0 }

.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; position: relative }
/* Connector line — elegant, not bulky */
.steps::before {
  content: ''; position: absolute;
  top: 44px; left: 8%; right: 8%;
  height: 1px; background: var(--grey-2); z-index: 0;
}
.step { text-align: center; position: relative; z-index: 1; padding: 0 .5rem }
.step-num-wrap {
  width: 88px; height: 88px; margin: 0 auto 1.5rem;
  position: relative;
}
.step-circle {
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--grey-2);
  display: grid; place-items: center;
  box-shadow: var(--s1);
  transition: border-color .3s, box-shadow .3s;
}
.step:hover .step-circle {
  border-color: var(--blue);
  box-shadow: 0 0 0 6px rgba(75,163,211,.1), var(--s1);
}
.step-n {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.4rem; font-weight: 800; color: var(--navy);
}
.step-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: .97rem; font-weight: 700; color: var(--ink); margin-bottom: .5rem }
.step-desc { font-size: .82rem; color: var(--ink-soft); line-height: 1.7 }

/* ═══════════════════════════════════════════════════════
   TESTIMONIALS
════════════════════════════════════════════════════════ */
.testi-sec { background: var(--grey-0) }
.testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 3rem }
.tc {
  background: var(--white); border: 1px solid var(--grey-1);
  border-radius: var(--r-xl); padding: 2rem;
  position: relative; overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s;
}
.tc:hover { transform: translateY(-5px); box-shadow: var(--s2); border-color: rgba(75,163,211,.2) }
/* Elegant quote mark */
.tc::before {
  content: '\201C';
  position: absolute; top: 8px; right: 18px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 7rem; line-height: 1; font-weight: 800;
  color: rgba(75,163,211,.06); pointer-events: none;
}
.tc-stars { color: #F9C74F; font-size: .95rem; letter-spacing: 2px; margin-bottom: 1rem }
.tc-text  { font-size: .88rem; color: var(--ink-mid); line-height: 1.75; margin-bottom: 1.5rem; font-style: italic }
.tc-footer { display: flex; align-items: center; gap: .85rem; padding-top: 1.2rem; border-top: 1px solid var(--grey-1) }
.tc-av {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue), var(--navy-soft));
  display: grid; place-items: center; color: #fff;
  font-family: 'Bricolage Grotesque', sans-serif; font-size: .82rem; font-weight: 800;
}
.tc-name { font-size: .88rem; font-weight: 600; color: var(--ink) }
.tc-role { font-size: .73rem; color: var(--ink-soft) }

/* ═══════════════════════════════════════════════════════
   CTA — Premium gradient + texture, no angle cuts
════════════════════════════════════════════════════════ */
.cta-sec {
  background: var(--navy-soft);
  background-image:
    radial-gradient(ellipse 65% 70% at 10% 50%, rgba(75,163,211,.18), transparent),
    radial-gradient(ellipse 50% 80% at 90% 30%, rgba(13,31,60,.60),   transparent),
    radial-gradient(ellipse 40% 50% at 50% 100%, rgba(75,163,211,.10), transparent);
  padding: 110px 0; text-align: center;
  position: relative;
}
.cta-sec::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: var(--crystal-bg);
  background-size: 120px 120px;
}
.cta-sec .wrap { position: relative; z-index: 1 }
.cta-inner { max-width: 720px; margin: 0 auto; padding: 0 5%; position: relative; z-index: 1 }
.cta-inner .label-tag { justify-content: center; color: rgba(255,255,255,.38) }
.cta-inner .label-tag::before { background: rgba(255,255,255,.2) }
.cta-h {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 800; color: #fff; line-height: 1.06;
  letter-spacing: -.5px; margin-bottom: 1.1rem;
}
.cta-h em { font-style: normal; color: var(--blue-lt) }
.cta-p { color: rgba(255,255,255,.48); font-size: 1rem; line-height: 1.8; margin-bottom: 2.8rem }

.cta-phone {
  display: inline-flex; align-items: center; gap: 1rem; margin-bottom: 2.8rem;
}
.cta-phone-ring {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(75,163,211,.15); border: 1.5px solid rgba(75,163,211,.3);
  display: grid; place-items: center; font-size: 1.2rem;
  animation: ringout 3.5s ease-in-out infinite;
}
@keyframes ringout {
  0%,100% { box-shadow: 0 0 0 0 rgba(75,163,211,.4) }
  50%      { box-shadow: 0 0 0 18px rgba(75,163,211,0) }
}
.cta-phone-num {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 2.4rem; font-weight: 800; color: #fff;
  letter-spacing: .5px;
}
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap }

/* ═══════════════════════════════════════════════════════
   CONTACT + FORM
════════════════════════════════════════════════════════ */
.contact-sec { background: var(--grey-0) }
.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 5rem; align-items: start }

.contact-col .headline { margin-bottom: 1rem }
.contact-col .subline  { margin-bottom: 2.5rem }

.cinfo {
  display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.3rem;
}
.cinfo-icon {
  width: 42px; height: 42px; border-radius: 9px; flex-shrink: 0;
  background: var(--white); border: 1px solid var(--grey-1);
  display: grid; place-items: center; font-size: 1rem;
  box-shadow: var(--s1);
}
.cinfo-lbl { font-size: .63rem; color: var(--ink-soft); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: .2rem }
.cinfo-val { font-weight: 600; font-size: .91rem; color: var(--ink) }

/* Form box */
.form-box {
  background: var(--white); border: 1px solid var(--grey-1);
  border-radius: var(--r-xl); padding: 2.5rem;
  box-shadow: var(--s2);
}
.form-box .label-tag { margin-bottom: 1.5rem }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem }
.fg { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .9rem }
.fg label {
  font-size: .68rem; font-weight: 600; color: var(--ink-mid);
  letter-spacing: .8px; text-transform: uppercase;
}
.fg input, .fg select, .fg textarea {
  border: 1.5px solid var(--grey-1); border-radius: var(--r);
  padding: .78rem 1rem; font-family: 'Instrument Sans', sans-serif;
  font-size: .9rem; color: var(--ink); background: var(--grey-0);
  outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
  -webkit-appearance: none; appearance: none;
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
  border-color: var(--blue); background: var(--white);
  box-shadow: 0 0 0 3px rgba(75,163,211,.12);
}
.fg textarea { min-height: 110px; resize: vertical; line-height: 1.6 }
.fg select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A8FAD' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 2.5rem;
  background-color: var(--grey-0); cursor: pointer;
}
.form-btn {
  width: 100%; padding: 1.05rem;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: .97rem; font-weight: 700; letter-spacing: .3px;
  background: var(--navy); color: #fff;
  border: none; border-radius: var(--r); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  box-shadow: 0 4px 14px rgba(13,31,60,.2);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.form-btn:hover { background: var(--blue); transform: translateY(-1px); box-shadow: var(--s-blue) }

/* ═══════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════ */
footer {
  background: var(--navy);
  background-image:
    radial-gradient(ellipse 50% 60% at 5% 100%, rgba(75,163,211,.07), transparent);
  border-top: 3px solid var(--navy-mid);
  padding: 72px 0 0;
  position: relative;
}
footer::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: var(--crystal-bg);
  background-size: 120px 120px;
}
footer .foot-grid, footer .foot-bottom { position: relative; z-index: 1 }
.foot-grid {
  width: min(1200px, 90%); margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.1fr;
  gap: 3rem; margin-bottom: 4rem;
}
.foot-brand-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.55rem; font-weight: 800; color: #fff;
  letter-spacing: -.2px; margin-bottom: .2rem;
}
.foot-brand-sub { font-size: .58rem; color: rgba(255,255,255,.28); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 1.2rem }
.foot-divider { width: 32px; height: 2px; background: var(--blue); margin-bottom: 1.3rem }
.foot-p { font-size: .83rem; color: rgba(255,255,255,.28); line-height: 1.8; max-width: 280px }

.foot-col h4 {
  font-size: .63rem; letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(255,255,255,.32); margin-bottom: 1.2rem; font-weight: 600;
}
.foot-col ul li { margin-bottom: .55rem }
.foot-col ul a { font-size: .84rem; color: rgba(255,255,255,.32); transition: color .2s }
.foot-col ul a:hover { color: var(--blue) }
.foot-contact-r { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .85rem }
.fci { color: var(--blue); font-size: .85rem; flex-shrink: 0; margin-top: 1px }
.fct { font-size: .82rem; color: rgba(255,255,255,.3); line-height: 1.6 }

.foot-bottom {
  width: min(1200px, 90%); margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 1.5rem 0;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
.foot-bottom p { font-size: .76rem; color: rgba(255,255,255,.18) }
.foot-legal { display: flex; gap: 1.5rem }
.foot-legal a { font-size: .76rem; color: rgba(255,255,255,.18); transition: color .2s }
.foot-legal a:hover { color: var(--blue) }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
   RESPONSIVE — PHONE · TABLET · LAPTOP · DESKTOP
   Tested: 320px → 2560px
════════════════════════════════════════════════════════ */

/* ── LARGE DESKTOP ≥1400px ── */
@media (min-width: 1400px) {
  .hero-h1 { font-size: 3.6rem }
  .hero-left { padding: 140px 6% 160px }
}

/* ── TABLET / SMALL LAPTOP ≤1060px ── */
@media (max-width: 1060px) {

  /* Hero: stack vertically */
  .hero {
    display: flex; flex-direction: column; min-height: auto;
  }
  .hero-left {
    width: 100%; margin: 0;
    padding: 110px 6% 40px;
  }
  /* Photo strip visible below hero text */
  .hero-right {
    display: flex;
    position: relative;
    height: 300px; width: 100%; flex-shrink: 0;
    overflow: hidden;
  }
  .hero-photo-frame {
    position: absolute; inset: 16px 24px;
    border-radius: var(--r-lg);
  }
  /* Hide floating badges — no space */
  .hero-cred, .hero-cert { display: none }

  /* Trust bar below photo, 2-col grid */
  .hero-trust-bar {
    position: relative; bottom: auto; left: auto; right: auto;
    display: grid; grid-template-columns: 1fr 1fr;
  }
  .htb-item {
    flex: none; min-width: 0;
    border-right: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .htb-item:nth-child(2) { border-right: none }
  .htb-item:nth-child(4) { border-right: none }
  .htb-item:nth-child(5) {
    grid-column: 1 / -1; border-bottom: none; justify-content: center;
  }

  /* Intro */
  .intro-grid     { grid-template-columns: 1fr; gap: 3rem }

  /* About — photo above text */
  .about-grid     { grid-template-columns: 1fr; gap: 3rem }
  .about-photo-col { max-width: 500px; margin: 0 auto; padding-bottom: 30px }

  /* Numbers 2-col */
  .numbers-grid   { grid-template-columns: repeat(2,1fr) }

  /* Services 2-col */
  .svc-grid       { grid-template-columns: repeat(2,1fr) }
  .svc-cat-head   { grid-template-columns: auto 1fr; gap: 1.5rem }
  .svc-cat-cta    { grid-column: 1 / -1 }

  /* Footer 2-col */
  .foot-grid      { grid-template-columns: 1fr 1fr }

  /* Contact single col */
  .contact-grid   { grid-template-columns: 1fr }
}

/* ── MOBILE ≤768px ── */
@media (min-width: 768px) {
  .hero-right { height: 920px }
}

/* ── MOBILE ≤768px ── */
@media (max-width: 768px) {
  .nav-links { display: none }
  .hbg { display: flex }

  .hero-left { padding: 96px 5% 36px }
  .hero-h1   { font-size: clamp(2.2rem, 8.5vw, 3.2rem) }
  .hero-desc { font-size: .95rem }
  .hero-right { height: 920px }

  .sec { padding: 64px 0 }

  .testi-grid { grid-template-columns: 1fr }
  .steps      { grid-template-columns: 1fr 1fr; gap: 2rem }
  .steps::before { display: none }
  .feat-list  { grid-template-columns: 1fr }
  .row2       { grid-template-columns: 1fr }

  .svc-cat-head { grid-template-columns: 1fr }
  .svc-cat-cta  { grid-column: auto }
  .svc-cat-num  { font-size: 3rem }

  .process-header .subline { max-width: 100% }
}

/* ── SMALL PHONE ≤480px ── */
@media (max-width: 480px) {
  .hero-left  { padding: 88px 5% 28px }
  .hero-h1    { font-size: clamp(2rem, 9vw, 2.8rem); letter-spacing: -.4px }
  .hero-btns  { flex-direction: column }
  .hero-btns .btn { text-align: center; justify-content: center }
  .hero-right { height: 520px }
  .hero-photo-frame { inset: 10px 14px; border-radius: var(--r) }

  /* Trust bar single column */
  .hero-trust-bar { grid-template-columns: 1fr }
  .htb-item {
    grid-column: auto; border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.06);
    justify-content: flex-start;
  }
  .htb-item:nth-child(5) {
    grid-column: auto; justify-content: flex-start; border-bottom: none;
  }
  .htb-item:nth-child(2),
  .htb-item:nth-child(4) { border-right: none }

  .sec { padding: 52px 0 }

  .svc-grid      { grid-template-columns: 1fr }
  .steps         { grid-template-columns: 1fr }
  .foot-grid     { grid-template-columns: 1fr }
  .numbers-grid  { grid-template-columns: 1fr 1fr }
  .intro-numbers { grid-template-columns: 1fr 1fr }
  .cta-phone-num { font-size: 1.6rem }
  .cta-phone-ring { width: 44px; height: 44px }
  .svc-cat-num   { display: none }
  .about-photo-col { max-width: 100% }
  .about-badge   { right: 4px; bottom: 4px }
  .feat-list     { grid-template-columns: 1fr }
  .testi-grid    { grid-template-columns: 1fr }
  .form-box      { padding: 1.5rem }
  .headline      { font-size: clamp(1.8rem, 7vw, 2.4rem) }
}

/* ── VERY SMALL ≤360px ── */
@media (max-width: 360px) {
  .hero-h1 { font-size: 1.85rem }
  .nav-name { font-size: .95rem }
  .htb-lbl { display: none }
  .htb-item { padding: .85rem 1rem }
}