:root {
  --canvas: #FFFFFF;
  --surface: #FFFFFF;
  --surface-alt: #FAFAF8;
  --border: #17160F;
  --border-light: #E4E2DB;
  --border-w: 1.5px;
  --text: #17160F;
  --text-secondary: #55504A;
  --text-tertiary: #8A8781;
  --accent: #6EC832;
  --accent-dim: rgba(110, 200, 50, 0.14);
  --on-accent: #10190A;
  --font-sans: 'Outfit',-apple-system,sans-serif;
  --r-card: 10px;
  --r-btn: 8px;
  --unit: 8px;
  --maxw: 1200px;
  --side-pad: 24px;
  --gap-section: 88px;
  --pad-card: 24px
}
*,
::after,
::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden
}
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }
  *,
  ::after,
  ::before {
    animation-duration: 0s!important;
    animation-iteration-count: 1!important;
    transition-duration: 0s!important
  }
}
body {
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden
}
a {
  color: inherit;
  text-decoration: none
}
ol,
ul {
  list-style: none
}
img {
  max-width: 100%;
  display: block
}
:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--text);
  color: var(--canvas);
  padding: 10px 16px;
  z-index: 999;
  border-radius: 0 0 var(--r-btn) 0;
  font-weight: 600
}
.skip-link:focus {
  left: 0
}
.section-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--side-pad)
}
footer,
header,
main {
  position: relative;
  z-index: 1
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 18px
}
.eyebrow-center {
  justify-content: center
}
.eyebrow-precise {
  letter-spacing: .04em
}
.eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -.005em;
  border-radius: var(--r-btn);
  padding: 12px 20px;
  font-size: .92rem;
  border: var(--border-w) solid var(--border);
  cursor: pointer;
  transition: opacity .15s ease,background .15s ease,color .15s ease;
  white-space: nowrap
}
.btn:hover {
  opacity: .86
}
.btn-primary {
  background: var(--text);
  color: var(--canvas);
  border-color: var(--text)
}
.btn-ghost {
  background: var(--surface);
  color: var(--text)
}
.btn-ghost:hover {
  background: var(--surface-alt);
  opacity: 1
}
.btn-lg {
  padding: 14px 26px;
  font-size: .98rem
}
.btn-sm {
  padding: 9px 16px;
  font-size: .86rem
}
.arrow-down {
  display: inline-block;
  margin-left: 2px
}
.btn-signature {
  outline: 3px solid var(--accent);
  outline-offset: 3px
}
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: var(--border-w) solid var(--border-light)
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px var(--side-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px
}
.brand-word {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.01em
}
.brand-accent {
  color: var(--accent)
}
.nav-links {
  display: flex;
  gap: 28px
}
.nav-links a {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  transition: color .15s ease
}
.nav-links a:hover {
  color: var(--text)
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px
}
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--r-btn);
  cursor: pointer
}
.nav-toggle span {
  display: block;
  width: 16px;
  height: 2px;
  margin: 0 auto;
  background: var(--text);
  transition: transform .2s ease,opacity .2s ease
}
.nav-toggle[aria-expanded=true] span:first-child {
  transform: translateY(7px) rotate(45deg)
}
.nav-toggle[aria-expanded=true] span:nth-child(2) {
  opacity: 0
}
.nav-toggle[aria-expanded=true] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg)
}
.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 10px var(--side-pad) 20px;
  border-top: var(--border-w) solid var(--border-light)
}
.mobile-menu a {
  padding: 10px 4px;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-weight: 600;
  font-size: .85rem
}
.mobile-menu .btn {
  margin-top: 10px;
  align-self: flex-start
}
.mobile-menu.open {
  display: flex
}
.hero {
  padding: 56px 0 0;
  overflow-x: hidden
}
.hero-copy {
  max-width: 760px;
  margin: 0 auto 32px;
  text-align: center
}
.hero-headline {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin-bottom: 16px
}
.text-accent {
  color: var(--text)
}
@media (max-width:639px) {
  .hero-break {
    display: none
  }
}
.hero-sub {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 52ch;
  margin: 0 auto 26px;
  line-height: 1.5
}
.hero-video {
  max-width: 520px;
  margin: 0 auto 26px;
}
.hero-video img {
  width: 100%;
  height: auto;
  display: block;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px
}
.hero-trust {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .03em;
  color: var(--text-tertiary);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  text-transform: uppercase
}
.dot-sep {
  color: var(--border-light)
}
.hero-anim {
  opacity: 0;
  transform: translateY(16px);
  animation: heroIn 1.8s cubic-bezier(.16,1,.3,1) forwards
}
.hero-anim.d1 {
  animation-delay: .1s
}
.hero-anim.d2 {
  animation-delay: .28s
}
.hero-anim.d3 {
  animation-delay: .46s
}
.hero-anim.d4 {
  animation-delay: .65s
}
.hero-anim.d5 {
  animation-delay: .85s
}
.hero-anim.d6 {
  animation-delay: 1.04s
}
@keyframes heroIn {
  to {
    opacity: 1;
    transform: none
  }
}
@media (prefers-reduced-motion:reduce) {
  .hero-anim {
    opacity: 1;
    transform: none;
    animation: none
  }
}
.hero-visual {
  display: flex;
  justify-content: center
}
.dashboard-panel {
  width: min(calc(var(--maxw) - var(--side-pad) * 2),94vw)
}
.panel-frame {
  border: var(--border-w) solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  line-height: 0
}
.panel-screenshot {
  width: 100%;
  height: auto;
  display: block
}
.funktion-layout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 56px;
  align-items: stretch
}
.funktion-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 28px
}
.funktion-mockup-img {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 340px;
  width: auto;
  aspect-ratio: 725/903;
  object-fit: contain;
  display: block
}
.funktion-mockup-caption {
  flex: 0 0 auto;
  margin-top: 12px;
  transform: translateX(22px);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-tertiary)
}
.flow-steps {
  display: flex;
  flex-direction: column;
  max-width: 640px;
  margin: 32px 0 0
}
.flow-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-areas: "num heading" "num text";
  column-gap: 24px;
  text-align: left
}
.flow-num {
  grid-area: num;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  width: 44px;
  height: 44px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  background: var(--canvas);
  border: var(--border-w) solid var(--border);
  border-radius: 50%;
  position: relative;
  z-index: 1
}
.flow-step:last-child .flow-num {
  border-color: var(--accent);
  color: var(--accent)
}
.flow-step h3 {
  grid-area: heading;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 10px
}
.flow-step p {
  grid-area: text;
  color: var(--text-secondary);
  font-size: .94rem;
  line-height: 1.55;
  max-width: 56ch
}
.flow-connector {
  width: 44px;
  height: 40px;
  margin: 2px 0;
  position: relative
}
.flow-connector::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: var(--border-w);
  background: var(--border-light);
  transform: translateX(-50%)
}
.flow-connector::after {
  content: '↓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: var(--canvas);
  color: var(--text-tertiary);
  font-size: .9rem;
  padding: 4px 0;
  line-height: 1
}
section:not(.hero):not(.cta-final) {
  padding: var(--gap-section) 0
}
.section-heading {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  max-width: 26ch;
  margin-bottom: 20px
}
.section-heading.center {
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center
}
.section-lede {
  font-size: 1.03rem;
  color: var(--text-secondary);
  max-width: 60ch;
  margin-bottom: 40px
}
.section-lede.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto
}
.solution-lede {
  color: var(--text);
  font-size: 1.18rem;
  line-height: 1.6;
  max-width: 40ch;
  margin-bottom: 26px;
  font-weight: 500
}
.card-grid {
  display: grid;
  gap: 20px
}
.card-grid-3 {
  grid-template-columns: repeat(3,1fr)
}
.card {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--r-card);
  padding: var(--pad-card)
}
.card h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.08rem;
  margin-bottom: 10px
}
.card p {
  color: var(--text-secondary);
  font-size: .93rem;
  line-height: 1.5
}
.card-index {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--text-tertiary);
  font-size: .8rem;
  letter-spacing: .03em;
  margin-bottom: 14px
}
.check-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  color: var(--text-secondary);
  font-size: .95rem
}
.check-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--text-tertiary);
  font-weight: 700
}
.step-num {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--text-tertiary);
  font-size: .82rem;
  transition: color .15s ease
}
.how-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  border-top: var(--border-w) solid var(--border-light);
  border-bottom: var(--border-w) solid var(--border-light)
}
.how-item {
  padding: 40px 32px;
  border-left: var(--border-w) solid var(--border-light)
}
.how-item:last-child {
  border-right: var(--border-w) solid var(--border-light)
}
.how-icon-box {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border-w) solid var(--border);
  border-radius: 12px;
  background: var(--surface-alt);
  margin-bottom: 22px
}
.how-icon-box svg {
  width: 22px;
  height: 22px;
  color: var(--accent)
}
.how-item h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.35;
  margin-bottom: 10px
}
.how-item p {
  color: var(--text-secondary);
  font-size: .9rem;
  line-height: 1.55
}
.usp-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 20px;
  margin-top: 8px
}
.usp-card {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--r-card);
  padding: 28px 26px
}
.usp-icon {
  color: var(--text);
  width: 26px;
  height: 26px;
  margin-bottom: 18px
}
.usp-card h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 10px
}
.usp-card p {
  color: var(--text-secondary);
  font-size: .93rem;
  line-height: 1.5
}
.cta-photo {
  position: relative;
  overflow: hidden;
  padding: var(--gap-section) 0
}
.cta-photo-media {
  position: absolute;
  inset: -100px 0;
  z-index: 0
}
.cta-photo-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10,12,8,.5)
}
.cta-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform
}
.cta-photo-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center
}
.cta-photo-content .solution-lede {
  color: #fff;
  font-size: 1.55rem;
  line-height: 1.5;
  max-width: 34ch
}
.cta-photo-content .check-list {
  margin-top: 22px
}
.cta-photo-content .check-list li {
  color: rgba(255,255,255,.9);
  font-size: 1.08rem;
  padding-left: 28px
}
.cta-photo-content .check-list li::before {
  color: var(--accent)
}
.cta-photo-content .mid-cta {
  margin-top: 34px
}
.cta-photo-content .mid-cta-note {
  color: rgba(255,255,255,.62)
}
.mid-cta {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px
}
.mid-cta-note {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .03em;
  color: var(--text-tertiary);
  text-transform: uppercase
}
.trust-strip {
  padding: 56px 0!important;
  border-top: var(--border-w) solid var(--border-light);
  border-bottom: var(--border-w) solid var(--border-light)
}
.trust-strip-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 32px
}
.trust-item {
  display: flex;
  flex-direction: column;
  gap: 6px
}
.trust-item strong {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .95rem
}
.trust-item span {
  color: var(--text-secondary);
  font-size: .85rem
}
.faq-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  align-items: start
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px
}
.faq-item {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--r-card);
  padding: 4px 22px
}
.faq-item summary {
  cursor: pointer;
  padding: 18px 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .98rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between
}
.faq-item summary::-webkit-details-marker {
  display: none
}
.faq-item summary::after {
  content: '+';
  color: var(--text-tertiary);
  font-weight: 700;
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-left: 16px;
  transition: transform .2s ease
}
.faq-item[open] summary::after {
  transform: rotate(45deg)
}
.faq-item p {
  color: var(--text-secondary);
  font-size: .93rem;
  padding-bottom: 20px;
  max-width: 62ch
}
.cta-final {
  position: relative;
  overflow: hidden;
  padding: var(--gap-section) 0 128px
}
.cta-final-inner {
  position: relative;
  z-index: 1;
  border: var(--border-w) solid var(--border);
  border-radius: 14px;
  padding: 64px 40px;
  text-align: center;
  max-width: 800px;
  background: var(--surface)
}
.cta-final-inner.reveal-scale {
  transition: transform .35s cubic-bezier(.16, 1, .3, 1),opacity .65s cubic-bezier(.16, 1, .3, 1)
}
.cta-final-inner.reveal-scale:hover {
  transform: scale(1.02)
}
.cta-dotgrid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: auto;
  -webkit-mask-image: linear-gradient(to bottom,transparent,black 22%,black 78%,transparent);
  mask-image: linear-gradient(to bottom,transparent,black 22%,black 78%,transparent)
}
.cta-dotgrid svg {
  display: block;
  width: 100%;
  height: 100%
}
.cta-dotgrid circle {
  transition: r .12s ease-out,opacity .12s ease-out
}
.cta-dotgrid circle.dot-idle {
  transform-box: fill-box;
  transform-origin: center;
  animation: dotPulse var(--dur,3.8s) ease-in-out infinite;
  animation-delay: var(--delay, 0s)
}
@keyframes dotPulse {
  0%,
  100% {
    transform: scale(1)
  }
  50% {
    transform: scale(1.6)
  }
}
@media (prefers-reduced-motion:reduce) {
  .cta-dotgrid circle {
    transition: none
  }
  .cta-dotgrid circle.dot-idle {
    animation: none
  }
  .cta-final-inner {
    transition: none
  }
}
.cta-final .section-heading {
  margin: 0 auto 18px
}
.cta-sub {
  color: var(--text-secondary);
  max-width: 46ch;
  margin: 0 auto 32px
}
.cta-steps {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 26px;
  margin-bottom: 30px
}
.cta-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color .15s ease
}
.cta-steps li:hover {
  color: var(--accent)
}
.cta-steps li:hover .step-num {
  color: var(--accent)
}
.cta-microcopy {
  margin-top: 18px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .03em;
  color: var(--text-tertiary);
  text-transform: uppercase
}
.site-footer {
  padding: 56px 0 30px;
  border-top: var(--border-w) solid var(--border-light)
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 10px
}
.footer-brand .brand-word {
  display: flex;
  align-items: center;
  gap: 8px
}
.footer-brand p {
  color: var(--text-tertiary);
  font-size: .85rem;
  max-width: 26ch
}
.footer-heading {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 14px
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px
}
.footer-col a {
  color: var(--text-secondary);
  font-size: .88rem
}
.footer-col a:hover {
  color: var(--text)
}
.footer-copy {
  text-align: center;
  font-size: .78rem;
  color: var(--text-tertiary);
  padding-top: 24px;
  border-top: var(--border-w) solid var(--border-light);
  margin: 0 32px
}
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--canvas);
  border-top: var(--border-w) solid var(--border);
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom))
}
.sticky-cta.show {
  display: flex
}
.sticky-cta-text {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .86rem
}
@media (min-width:721px) {
  .sticky-cta {
    display: none!important
  }
}
.reveal,
.reveal-down,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  transition: opacity .65s cubic-bezier(.16, 1, .3, 1),transform .65s cubic-bezier(.16, 1, .3, 1)
}
.reveal {
  transform: translateY(20px)
}
.reveal-left {
  transform: translateX(-36px)
}
.reveal-right {
  transform: translateX(36px)
}
.reveal-down {
  transform: translateY(-18px)
}
.reveal-scale {
  transform: scale(.94)
}
.reveal-down.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal.is-visible {
  opacity: 1;
  transform: none
}
.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1)
}
.flow-step:first-child {
  transition-delay: 0s
}
.flow-step:nth-child(3) {
  transition-delay: 90ms
}
.flow-step:nth-child(5) {
  transition-delay: 180ms
}
.how-item:first-child {
  transition-delay: 0s
}
.how-item:nth-child(2) {
  transition-delay: 90ms
}
.how-item:nth-child(3) {
  transition-delay: 180ms
}
.problem .card:first-child {
  transition-delay: 0s
}
.problem .card:nth-child(2) {
  transition-delay: 90ms
}
.problem .card:nth-child(3) {
  transition-delay: 180ms
}
.usp-grid .usp-card:first-child {
  transition-delay: 0s
}
.usp-grid .usp-card:nth-child(2) {
  transition-delay: 60ms
}
.usp-grid .usp-card:nth-child(3) {
  transition-delay: 120ms
}
.usp-grid .usp-card:nth-child(4) {
  transition-delay: 180ms
}
.trust-item:first-child {
  transition-delay: 0s
}
.trust-item:nth-child(2) {
  transition-delay: 0.1s
}
.trust-item:nth-child(3) {
  transition-delay: 0.2s
}
.faq-list .faq-item:first-child {
  transition-delay: 0s
}
.faq-list .faq-item:nth-child(2) {
  transition-delay: 60ms
}
.faq-list .faq-item:nth-child(3) {
  transition-delay: 120ms
}
.faq-list .faq-item:nth-child(4) {
  transition-delay: 180ms
}
.faq-list .faq-item:nth-child(5) {
  transition-delay: 240ms
}
@media (prefers-reduced-motion:reduce) {
  .reveal,
  .reveal-down,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none
  }
}
@media (max-width:980px) {
  .faq-grid {
    grid-template-columns: 1fr
  }
  .card-grid-3 {
    grid-template-columns: repeat(2,1fr)
  }
  .footer-inner {
    grid-template-columns: 1fr 1fr
  }
  .how-grid {
    grid-template-columns: 1fr;
    border-left: var(--border-w) solid var(--border-light);
    border-right: var(--border-w) solid var(--border-light)
  }
  .how-item {
    border-left: none;
    border-top: var(--border-w) solid var(--border-light)
  }
  .how-item:first-child {
    border-top: none
  }
  .how-item:last-child {
    border-right: none
  }
  .funktion-layout {
    grid-template-columns: 1fr
  }
  .funktion-visual {
    margin-top: 32px
  }
  .funktion-mockup-img {
    flex: none;
    height: auto;
    width: 240px;
    max-width: 62vw
  }
}
@media (max-width:720px) {
  .nav-links {
    display: none
  }
  .nav-actions .btn-sm {
    display: none
  }
  .nav-toggle {
    display: flex
  }
  .card-grid-3,
  .usp-grid {
    grid-template-columns: 1fr
  }
  .hero {
    padding: 28px 0 0
  }
  .hero-copy {
    margin-bottom: 22px
  }
  .hero-headline {
    margin-bottom: 12px
  }
  .hero-sub {
    max-width: 75%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 18px
  }
  .hero-actions {
    margin-bottom: 14px
  }
  .hero-trust {
    display: none
  }
  .hero-visual {
    justify-content: flex-start
  }
  .dashboard-panel {
    width: 150vw;
    max-width: none;
    flex-shrink: 0
  }
  section:not(.hero):not(.cta-final) {
    padding: 64px 0
  }
  .cta-final {
    padding: 64px 0 96px
  }
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 28px
  }
  .section-inner {
    padding: 0 20px
  }
  .cta-final-inner {
    padding: 44px 22px
  }
  .trust-strip-grid {
    grid-template-columns: 1fr;
    gap: 24px
  }
  .cta-steps {
    flex-direction: column;
    align-items: center;
    gap: 10px
  }
}
@media (max-width:480px) {
  .footer-inner {
    grid-template-columns: 1fr
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch
  }
  .hero-actions .btn {
    width: 100%
  }
}