/* ---------- tokens: colors ---------- */
:root {
  --navy-900: #0D2137;
  --navy-700: #16354F;
  --navy-500: #2B5170;
  --blue-500: #4A7FB5;
  --blue-300: #7FA5CB;
  --blue-100: #D5E2EE;
  --green-500: #3ECF8E;
  --green-700: #2CA46F;
  --green-100: #DCF5EA;
  --fog-100: #EEF1F4;
  --fog-050: #F7F9FA;
  --white: #FFFFFF;
  --red-500: #D64545;
  --amber-500: #D69A3E;
  --text-primary: var(--navy-900);
  --text-secondary: #4C5F70;
  --text-muted: #8494A2;
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: #AFC2D2;
  --text-link: var(--blue-500);
  --text-link-hover: var(--navy-700);
  --surface-app: var(--fog-050);
  --surface-card: var(--white);
  --surface-sunken: var(--fog-100);
  --surface-dark: var(--navy-900);
  --surface-dark-raised: var(--navy-700);
  --border: #DCE3E9;
  --border-strong: #C2CDD6;
  --border-on-dark: rgba(255, 255, 255, 0.14);
  --accent: var(--blue-500);
  --accent-hover: var(--navy-700);
  --accent-active: var(--navy-900);
  --success: var(--green-500);
  --success-strong: var(--green-700);
  --danger: var(--red-500);
  --warning: var(--amber-500);
  --focus-ring: var(--green-500);

  /* tokens: spacing / radius / shadow / motion */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(13, 33, 55, 0.06), 0 4px 16px rgba(13, 33, 55, 0.08);
  --shadow-raised: 0 8px 24px rgba(13, 33, 55, 0.14);
  --shadow-focus: 0 0 0 3px rgba(62, 207, 142, 0.35);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;

  /* tokens: typography */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --text-display-xl: clamp(2.75rem, 5vw, 4.5rem);
  --text-display-l: clamp(2.25rem, 3.5vw, 3.25rem);
  --text-display-m: 2rem;
  --text-display-s: 1.5rem;
  --text-body-l: 1.125rem;
  --text-body-m: 1rem;
  --text-body-s: 0.875rem;
  --text-caption: 0.75rem;
  --lh-display: 1.08;
  --lh-body: 1.55;
  --ls-display: -0.01em;
}

/* ---------- self-hosted fonts (DSGVO: no Google Fonts CDN) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/space-grotesk-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/space-grotesk-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/space-grotesk-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- base ---------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth
}

body {
  background: var(--surface-app);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: var(--lh-body)
}

a {
  color: var(--text-link);
  text-decoration: none
}

a:hover {
  color: var(--text-link-hover)
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6)
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text-primary)
}

section {
  padding: var(--space-9) 0
}

section[id] {
  scroll-margin-top: 80px
}

@media (max-width:720px) {
  section {
    padding: var(--space-7) 0
  }

  .wrap {
    padding: 0 var(--space-5)
  }
}

@media (max-width:480px) {
  .wrap {
    padding: 0 20px
  }
}

/* ---------- component: button ---------- */
.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body-m);
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.btn:active {
  transform: scale(0.97)
}

.btn-s {
  padding: 7px 14px;
  font-size: var(--text-body-s)
}

.btn-primary {
  background: var(--navy-900);
  color: var(--white)
}

.btn-primary:hover {
  background: var(--navy-700);
  color: var(--white)
}

.btn-secondary {
  background: var(--white);
  color: var(--navy-900);
  border-color: var(--border-strong)
}

.btn-secondary:hover {
  background: var(--fog-100);
  color: var(--navy-900)
}

.btn-ghost {
  background: transparent;
  color: var(--navy-900)
}

.btn-ghost:hover {
  background: var(--fog-100);
  color: var(--navy-900)
}

.btn-accent {
  background: var(--green-500);
  color: var(--navy-900)
}

.btn-accent:hover {
  background: var(--green-700);
  color: var(--white)
}

.btn:disabled {
  opacity: .45;
  cursor: not-allowed
}

/* ---------- component: badge ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-caption);
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill)
}

.badge-neutral {
  background: var(--fog-100);
  color: var(--text-secondary)
}

.badge-info {
  background: var(--blue-100);
  color: var(--navy-700)
}

.badge-success {
  background: var(--green-100);
  color: var(--green-700)
}

.badge-dark {
  background: var(--navy-900);
  color: var(--white)
}

.badge-warning {
  background: var(--warning);
  color: var(--white)
}

.badge-danger {
  background: var(--danger);
  color: var(--white)
}

/* ---------- component: card ---------- */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  font-family: var(--font-body);
  color: var(--text-primary)
}

.card-elevated {
  box-shadow: var(--shadow-raised)
}

/* ---------- component: check badge ---------- */
.check-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green-100);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-5)
}

.check-badge svg {
  width: 26px;
  height: 26px
}

/* ---------- component: icon (Lucide via CSS mask) ---------- */
.icon {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  flex-shrink: 0
}

.icon-map-pin {
  -webkit-mask-image: url(icons/map-pin.svg);
  mask-image: url(icons/map-pin.svg)
}

.icon-shield-check {
  -webkit-mask-image: url(icons/shield-check.svg);
  mask-image: url(icons/shield-check.svg)
}

.icon-layers {
  -webkit-mask-image: url(icons/layers.svg);
  mask-image: url(icons/layers.svg)
}

.icon-users {
  -webkit-mask-image: url(icons/users.svg);
  mask-image: url(icons/users.svg)
}

.icon-code-2 {
  -webkit-mask-image: url(icons/code-2.svg);
  mask-image: url(icons/code-2.svg)
}

.icon-zap {
  -webkit-mask-image: url(icons/zap.svg);
  mask-image: url(icons/zap.svg)
}

.icon-cloud {
  -webkit-mask-image: url(icons/cloud.svg);
  mask-image: url(icons/cloud.svg)
}

.icon-message-square-text {
  -webkit-mask-image: url(icons/message-square-text.svg);
  mask-image: url(icons/message-square-text.svg)
}

.icon-layout-template {
  -webkit-mask-image: url(icons/layout-template.svg);
  mask-image: url(icons/layout-template.svg)
}

.icon-life-buoy {
  -webkit-mask-image: url(icons/life-buoy.svg);
  mask-image: url(icons/life-buoy.svg)
}

.icon-handshake {
  -webkit-mask-image: url(icons/handshake.svg);
  mask-image: url(icons/handshake.svg)
}

.icon-file-search {
  -webkit-mask-image: url(icons/file-search.svg);
  mask-image: url(icons/file-search.svg)
}

.icon-building-2 {
  -webkit-mask-image: url(icons/building-2.svg);
  mask-image: url(icons/building-2.svg)
}

.icon-mail {
  -webkit-mask-image: url(icons/mail.svg);
  mask-image: url(icons/mail.svg)
}

.icon-phone {
  -webkit-mask-image: url(icons/phone.svg);
  mask-image: url(icons/phone.svg)
}

.icon-check {
  -webkit-mask-image: url(icons/check.svg);
  mask-image: url(icons/check.svg)
}

/* ---------- header ---------- */
header.site {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(247, 249, 250, .92);
  border-bottom: 1px solid var(--border)
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0
}

header.site .wrap {
  padding-left: max(20px, var(--space-6));
  padding-right: max(20px, var(--space-6))
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6)
}

.nav-links a {
  color: var(--text-secondary);
  font-size: var(--text-body-m);
  font-weight: 500
}

.nav-links a:hover {
  color: var(--text-primary)
}

.nav-row .btn {
  white-space: nowrap;
  flex-shrink: 0
}

.logo-img {
  height: 28px;
  display: block
}

@media (max-width:720px) {
  .nav-links {
    display: none
  }

  .nav-row {
    padding: 20px 0;
    min-height: 64px
  }
}

/* ---------- hero ---------- */
.hero {
  background: var(--surface-dark);
  color: var(--text-on-dark);
  padding: var(--space-9) 0
}

@media (max-width:720px) {
  .hero {
    padding: var(--space-6) 0
  }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-8);
  align-items: center
}

.hero h1 {
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  color: #fff;
  max-width: 16ch
}

.hero p.lead {
  font-size: var(--text-body-l);
  color: var(--text-on-dark-muted);
  max-width: 48ch;
  margin-top: var(--space-4)
}

.hero-cta-row {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-6);
  flex-wrap: wrap
}

.hero-badges {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap
}

.hero-visual {
  border-radius: var(--radius-l);
  overflow: hidden;
  aspect-ratio: 4/3
}

.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--white);
  display: block
}

@media (max-width:900px) {
  .hero-grid {
    grid-template-columns: 1fr
  }

  .hero-visual {
    max-width: 480px
  }
}

/* ---------- trust strip ---------- */
.trust-strip {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border)
}

.trust-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  flex-wrap: wrap
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 220px
}

.trust-item h4 {
  font-family: var(--font-body);
  font-size: var(--text-body-m);
  font-weight: 600;
  color: var(--text-primary)
}

.trust-item p {
  font-size: var(--text-body-s);
  color: var(--text-secondary)
}

.trust-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-m);
  background: var(--fog-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

/* ---------- section headers ---------- */
.section-head {
  max-width: 60ch;
  margin-bottom: var(--space-7)
}

.eyebrow {
  display: inline-block;
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin-bottom: var(--space-3)
}

.section-head h2 {
  font-size: var(--text-display-l)
}

.section-head p {
  margin-top: var(--space-4);
  font-size: var(--text-body-l);
  color: var(--text-secondary)
}

/* ---------- services grid ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5)
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%
}

.service-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-m);
  background: var(--fog-100);
  display: flex;
  align-items: center;
  justify-content: center
}

.service-card h3 {
  font-size: var(--text-display-s)
}

.service-card p {
  color: var(--text-secondary);
  font-size: var(--text-body-m)
}

@media (max-width:900px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width:640px) {
  .services-grid {
    grid-template-columns: 1fr
  }
}

/* ---------- why us ---------- */
.why-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-8);
  align-items: center
}

.why-visual {
  border-radius: var(--radius-l);
  overflow: hidden;
  aspect-ratio: 1/1
}

.why-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--white);
  display: block
}

.why-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5)
}

.why-point {
  display: flex;
  gap: var(--space-4)
}

.why-point h4 {
  font-size: var(--text-body-l);
  font-weight: 600;
  margin-bottom: var(--space-1)
}

.why-point p {
  color: var(--text-secondary);
  font-size: var(--text-body-m)
}

@media (max-width:900px) {
  .why-grid {
    grid-template-columns: 1fr
  }

  .why-visual {
    max-width: 420px
  }
}

/* ---------- contact ---------- */
.contact {
  background: var(--surface-sunken);
  overflow-x: hidden
}

.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-6)
}

.contact-grid>* {
  min-width: 0
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-6)
}

.contact-info-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start
}

.contact-info-item h4 {
  font-size: var(--text-body-m);
  font-weight: 600
}

.contact-info-item p {
  color: var(--text-secondary);
  font-size: var(--text-body-m);
  word-break: break-word
}

.contact-link {
  color: inherit
}

.contact-link:hover {
  color: var(--navy-900);
  text-decoration: underline
}

.form-card {
  padding: var(--space-5)
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3)
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0
}

.form-field.full {
  grid-column: 1/-1
}

.form-field label {
  font-size: var(--text-body-s);
  font-weight: 600;
  color: var(--text-primary)
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-m);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  background: var(--white);
  color: var(--text-primary);
  resize: vertical
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--green-500);
  box-shadow: var(--shadow-focus)
}

.form-note {
  font-size: var(--text-caption);
  color: var(--text-muted)
}

.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 0;
  width: 0;
  overflow: hidden
}

.form-actions {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap
}

.form-error {
  margin-top: var(--space-3);
  font-size: var(--text-body-s);
  color: var(--danger)
}

.form-success {
  padding: var(--space-6) var(--space-5);
  text-align: center
}

.form-success h3 {
  font-size: var(--text-display-s)
}

.form-success p {
  color: var(--text-secondary);
  margin-top: var(--space-2)
}

.form-success .btn {
  margin-top: var(--space-5)
}

@media (max-width:900px) {
  .contact-grid {
    grid-template-columns: 1fr
  }
}

@media (max-width:560px) {
  .form-grid {
    grid-template-columns: 1fr
  }

  .form-card {
    padding: var(--space-4)
  }
}

/* ---------- cta band ---------- */
.cta-band {
  background: var(--surface-dark);
  color: #fff;
  text-align: center
}

.cta-band h2 {
  color: #fff;
  font-size: var(--text-display-l);
  max-width: 24ch;
  margin: 0 auto
}

.cta-band p {
  color: var(--text-on-dark-muted);
  margin-top: var(--space-4);
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto
}

.cta-band .btn-wrap {
  margin-top: var(--space-6);
  display: flex;
  justify-content: center
}

/* ---------- footer ---------- */
footer {
  background: var(--surface-dark);
  color: var(--text-on-dark-muted);
  padding-top: var(--space-8)
}

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--border-on-dark);
  flex-wrap: wrap
}

.footer-cols {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap
}

.footer-col h5 {
  color: #fff;
  font-size: var(--text-body-s);
  font-weight: 600;
  margin-bottom: var(--space-3)
}

.footer-col a {
  display: block;
  color: var(--text-on-dark-muted);
  font-size: var(--text-body-s);
  margin-bottom: var(--space-2)
}

.footer-col a:hover {
  color: #fff
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding: var(--space-5) 0;
  font-size: var(--text-caption);
  flex-wrap: wrap;
  gap: var(--space-3)
}

/* ---------- standalone confirmation page (danke.html) ---------- */
.confirm-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5)
}

.confirm-page .logo-img {
  margin: 0 auto var(--space-6);
  width: 170px;
  height: auto
}

.confirm-card {
  max-width: 440px;
  width: 100%;
  text-align: center;
  padding: var(--space-8) var(--space-6)
}

.confirm-card h1 {
  font-size: var(--text-display-s)
}

.confirm-card p {
  color: var(--text-secondary);
  margin-top: var(--space-3)
}

.confirm-card .btn {
  margin-top: var(--space-6)
}

/* ---------- legal pages (Impressum, Datenschutz) ---------- */
.legal-content {
  max-width: 720px;
  margin: 0 auto
}

.legal-content h1 {
  font-size: var(--text-display-l)
}

.legal-content .legal-lead {
  color: var(--text-secondary);
  margin-top: var(--space-3)
}

.legal-content h2 {
  font-size: var(--text-display-s);
  margin-top: var(--space-7)
}

.legal-content p {
  color: var(--text-secondary);
  font-size: var(--text-body-m);
  margin-top: var(--space-3)
}

.legal-content p a {
  color: var(--blue-500);
  text-decoration: underline
}

.legal-content p a:hover {
  color: var(--navy-700)
}