/* IT-Beratung Ralf Bub | Shared responsive stylesheet | 16.10.2026 */

    :root {
  --ink:#123342;
  --body:#49606a;
  --teal:#087a79;
  --teal-dark:#06605f;
  --lime:#c5d200;
  --paper:#f6f6f1;
  --line:#dce3df;
  --white:#fff;
  --radius:8px;
  --max:1200px
}

    *,*::before,*::after {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:112px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Segoe UI",Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased
}

h1,h2,h3,p {
  margin:0
}

h1,h2,h3 {
  line-height:1.12;
  font-weight:600
}

a {
  color:inherit;
  text-decoration:none
}

button,input,select,textarea {
  font:inherit
}

button,a,input,select,textarea,summary {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

img {
  display:block;
  max-width:100%
}

a,button {
  touch-action:manipulation
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--teal);
  outline-offset:5px
}

input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:3px solid var(--teal);
  outline-offset:2px
}

[hidden] {
  display:none!important
}

.wrap {
  width:min(var(--max),calc(100% - 80px));
  margin-inline:auto
}

.section {
  padding:104px 0
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:23px;
  font-size:12px;
  line-height:1.5;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:700
}

.eyebrow::before {
  content:"";
  width:26px;
  height:2px;
  background:var(--teal)
}

.section-title {
  font-size:clamp(34px,3.7vw,48px);
  letter-spacing:-.04em;
  max-width:690px
}

.lead {
  color:var(--body);
  max-width:580px;
  font-size:18px;
  line-height:1.7
}

.arrow {
  width:19px;
  height:19px;
  flex-shrink:0
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  min-height:51px;
  padding:12px 23px;
  border:1px solid transparent;
  border-radius:4px;
  background:var(--teal);
  color:white;
  font-size:14px;
  font-weight:600;
  transition:background .2s,transform .2s
}

.button:hover {
  background:var(--teal-dark);
  transform:translateY(-2px)
}

.button.secondary {
  color:var(--ink);
  background:transparent;
  border-color:#bccac5
}

.button.secondary:hover {
  background:white
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-size:14px;
  font-weight:600;
  color:var(--teal);
  padding:8px 0;
  border-bottom:1px solid currentColor
}

.skip-link {
  position:fixed;
  left:16px;
  top:-70px;
  z-index:200;
  background:var(--ink);
  color:white;
  padding:10px 18px
}

.skip-link:focus {
  top:12px
}

.icon {
  width:26px;
  height:26px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}

.sprite {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}

    .utility {
  background:var(--ink);
  color:#dbe7e8;
  font-size:12px
}

.utility .wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:35px
}

.utility-links {
  display:flex;
  align-items:center;
  gap:23px
}

.utility a:hover {
  color:white;
  text-decoration:underline
}

.utility .phone {
  display:flex;
  align-items:center;
  gap:7px
}

.utility .icon {
  width:13px;
  height:13px
}

.site-header {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(246,246,241,.97);
  border-bottom:1px solid var(--line)
}

.header-main {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  height:87px
}

.brand {
  display:block;
  flex-shrink:0
}

.brand img {
  width:302px;
  height:auto
}

.brand-subline {
  display:block;
  margin-top:9px;
  font-size:9px;
  letter-spacing:.18em;
  font-weight:600;
  color:var(--body)
}

.nav {
  display:flex;
  align-items:center;
  gap:25px
}

.nav>a {
  font-size:13px;
  font-weight:600;
  white-space:nowrap
}

.nav>a:not(.button):hover {
  color:var(--teal)
}

.nav .button {
  min-height:43px;
  padding:9px 17px;
  font-size:12px
}

.menu-toggle {
  display:none;
  align-items:center;
  gap:9px;
  border:1px solid var(--line);
  border-radius:4px;
  background:white;
  padding:8px 12px;
  font-size:13px;
  color:var(--ink)
}

    .hero {
  padding:66px 0 74px;
  overflow:hidden
}

.hero-grid {
  display:grid;
  grid-template-columns:1fr 1.02fr;
  align-items:center;
  gap:55px
}

.hero .eyebrow {
  color:var(--teal);
  margin-bottom:26px;
  letter-spacing:.11em
}

.hero h1 {
  font-size:clamp(46px,4.9vw,68px);
  letter-spacing:-.055em;
  line-height:1.055;
  max-width:550px
}

.hero h1 span {
  color:var(--teal)
}

.hero-copy>.lead {
  margin-top:27px;
  font-size:17px;
  max-width:480px
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:32px
}

.hero-footnote {
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:24px;
  font-size:12px;
  color:var(--body)
}

.hero-footnote .icon {
  width:15px;
  height:15px;
  color:var(--teal)
}

.hero-visual {
  position:relative;
  isolation:isolate;
  min-width:0;
  padding:0 0 40px 20px
}

.hero-visual::before {
  content:"";
  position:absolute;
  inset:31px -20px 60px 57px;
  z-index:-1;
  border-radius:6px;
  background:#dae8e0
}

.hero-image {
  width:100%;
  height:540px;
  object-fit:cover;
  object-position:55% center;
  border-radius:6px
}

.image-note {
  position:absolute;
  right:13px;
  top:12px;
  color:#fff;
  font-size:9px;
  letter-spacing:.06em;
  background:#123342b0;
  padding:3px 7px;
  border-radius:2px
}

.connected-card {
  position:absolute;
  bottom:0;
  left:-17px;
  right:37px;
  padding:22px 25px;
  background:white;
  border:1px solid #e1e7e2;
  border-radius:6px;
  box-shadow:0 14px 35px #12334213
}

.card-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px
}

.card-heading strong {
  font-size:17px;
  font-weight:600;
  letter-spacing:-.02em
}

.card-heading>span {
  font-size:10px;
  font-weight:600;
  color:var(--teal);
  display:flex;
  align-items:center;
  gap:5px
}

.card-heading>span::before {
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--teal)
}

.connected-modules {
  display:flex;
  margin-top:18px;
  justify-content:space-between;
  position:relative;
  gap:6px
}

.connected-modules::before {
  content:"";
  height:1px;
  background:var(--line);
  left:30px;
  right:30px;
  position:absolute;
  top:18px;
  z-index:0
}

.mini-module {
  flex:1;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-size:10px;
  letter-spacing:.03em;
  background:white;
  min-width:0
}

.mini-module .icon {
  width:38px;
  height:38px;
  background:#edf5f1;
  border-radius:8px;
  padding:9px;
  color:var(--teal)
}

    .proof {
  background:white;
  border-block:1px solid var(--line)
}

.proof .wrap {
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  align-items:center;
  padding-block:27px;
  gap:34px
}

.partner-logo {
  width:185px;
  height:auto
}

.proof-item {
  border-left:1px solid var(--line);
  padding-left:25px
}

.proof-item strong {
  display:block;
  font-size:15px;
  font-weight:600
}

.proof-item span {
  display:block;
  color:var(--body);
  font-size:12px;
  margin-top:4px
}

    .section-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:50px;
  margin-bottom:46px
}

.section-head>.lead {
  font-size:15px;
  max-width:340px
}

.solutions {
  background:white
}

.solutions .eyebrow {
  margin-bottom:17px
}

.solution-grid {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden
}

.solution-card {
  grid-column:span 2;
  padding:31px 25px 25px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  border-right:1px solid var(--line);
  background:white;
  transition:background .2s
}

.solution-card:nth-child(-n+3) {
  border-bottom:1px solid var(--line)
}

.solution-card:nth-child(3) {
  border-right:0
}

.solution-card:nth-child(n+4) {
  grid-column:span 3
}

.solution-card:last-child {
  border:0
}

.solution-card:hover {
  background:#f4f8f5
}

.solution-card>.icon {
  width:33px;
  height:33px;
  color:var(--teal);
  margin-bottom:28px
}

.solution-card .number {
  font-size:10px;
  letter-spacing:.15em;
  color:#61776e;
  margin-bottom:10px
}

.solution-card h3 {
  font-size:23px;
  letter-spacing:-.025em;
  margin-bottom:17px
}

.solution-card p {
  font-size:14px;
  color:var(--body);
  margin-bottom:25px
}

.solution-card a {
  margin-top:auto;
  font-size:12px;
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  color:var(--teal)
}

.solution-card a:hover {
  text-decoration:underline
}

.solution-card a .arrow {
  width:14px;
  height:14px
}

.more-modules {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:27px;
  font-size:13px;
  color:var(--body)
}

.module-tags {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}

.module-tags span {
  border:1px solid var(--line);
  border-radius:3px;
  padding:5px 11px;
  font-size:11px
}

.more-modules>.text-link {
  font-size:12px;
  flex-shrink:0
}

    .services-grid {
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:110px
}

.services-copy .lead {
  margin-top:25px;
  font-size:16px
}

.services-copy .text-link {
  margin-top:24px
}

.service-list {
  display:flex;
  flex-direction:column
}

.service-row {
  display:grid;
  grid-template-columns:35px 1fr;
  gap:20px;
  padding:26px 0;
  border-bottom:1px solid #cdd8d2
}

.service-row:first-child {
  padding-top:0
}

.service-row .index {
  font-size:12px;
  font-weight:600;
  color:var(--teal);
  padding-top:4px
}

.service-row h3 {
  font-size:23px;
  letter-spacing:-.025em;
  margin-bottom:12px
}

.service-row p {
  font-size:14px;
  color:var(--body)
}

    .platform {
  background:var(--ink);
  color:#fff;
  overflow:hidden
}

.platform .eyebrow {
  color:#b9d7d3
}

.platform .eyebrow::before {
  background:var(--lime)
}

.platform-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:75px;
  align-items:center
}

.platform .lead {
  font-size:16px;
  color:#b6cbcf;
  margin-top:26px
}

.platform .button {
  margin-top:30px;
  background:var(--lime);
  color:var(--ink)
}

.platform .button:hover {
  background:#d6e314
}

.hosting-options {
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid #ffffff26;
  border-radius:6px
}

.hosting-option {
  padding:32px 25px;
  position:relative
}

.hosting-option:first-child {
  border-right:1px solid #ffffff26
}

.hosting-option>.icon {
  color:#83c5bf;
  width:36px;
  height:36px;
  margin-bottom:30px
}

.hosting-option h3 {
  font-size:26px;
  letter-spacing:-.025em;
  margin-bottom:15px
}

.hosting-option p {
  font-size:13px;
  color:#b6cbcf
}

.hosting-option a {
  font-size:12px;
  color:#ceebde;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:24px
}

.hosting-option a:hover {
  text-decoration:underline
}

.platform-small {
  font-size:11px;
  color:#a1bbc1;
  margin-top:19px;
  display:flex;
  gap:8px;
  align-items:center
}

.platform-small .icon {
  width:15px;
  height:15px
}

    .process {
  background:#fff
}

.process-head {
  display:flex;
  align-items:center;
  gap:75px
}

.process-head .lead {
  font-size:15px;
  max-width:355px
}

.process-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
  margin-top:53px
}

.process-step {
  position:relative;
  border-top:1px solid var(--line);
  padding-top:30px
}

.process-step::before {
  content:"";
  height:7px;
  width:7px;
  border-radius:50%;
  background:var(--teal);
  position:absolute;
  left:0;
  top:-4px
}

.step-index {
  font-size:11px;
  letter-spacing:.14em;
  color:var(--teal);
  margin-bottom:15px
}

.process-step h3 {
  font-size:22px;
  letter-spacing:-.025em;
  margin-bottom:13px
}

.process-step p {
  font-size:14px;
  color:var(--body)
}

    .about-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:100px;
  align-items:center
}

.portrait-wrap {
  position:relative;
  padding:0 30px 30px 0;
  width:100%;
  max-width:365px;
  margin:auto
}

.portrait-wrap::before {
  content:"";
  position:absolute;
  inset:30px 0 0 30px;
  background:#e2e9e0;
  border-radius:6px
}

.portrait {
  position:relative;
  width:100%;
  height:430px;
  object-fit:cover;
  border-radius:6px;
  object-position:50% 35%
}

.portrait-caption {
  position:absolute;
  bottom:5px;
  left:16px;
  right:15px;
  background:white;
  border:1px solid var(--line);
  padding:18px 23px;
  border-radius:4px
}

.portrait-caption strong {
  font-size:18px;
  display:block;
  font-weight:600
}

.portrait-caption span {
  font-size:11px;
  color:var(--body)
}

.about-copy .lead {
  font-size:16px;
  margin-top:25px
}

.about-points {
  display:flex;
  gap:35px;
  margin-top:31px;
  padding-top:24px;
  border-top:1px solid #cbd7d0
}

.about-points strong {
  display:block;
  font-size:28px;
  letter-spacing:-.04em;
  line-height:1.1;
  font-weight:600
}

.about-points span {
  font-size:11px;
  color:var(--body);
  display:block;
  margin-top:8px
}

.about-copy .text-link {
  margin-top:27px
}

    .faq {
  background:#fff
}

.faq-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:95px
}

.faq-copy .lead {
  font-size:15px;
  margin-top:23px
}

.faq-list {
  border-top:1px solid var(--line)
}

.faq-list details {
  border-bottom:1px solid var(--line)
}

.faq-list summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:22px 0;
  font-size:16px;
  font-weight:600;
  line-height:1.5
}

.faq-list summary::-webkit-details-marker {
  display:none
}

.faq-list summary::after {
  content:"+";
  font-size:24px;
  font-weight:400;
  color:var(--teal)
}

.faq-list details[open] summary::after {
  content:"−"
}

.faq-list details p {
  padding-bottom:23px;
  color:var(--body);
  font-size:14px;
  max-width:540px
}

    .contact {
  background:#e7eeE7
}

.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:95px
}

.contact .section-title {
  font-size:clamp(38px,4vw,54px)
}

.contact-copy>.lead {
  margin-top:23px;
  font-size:16px
}

.contact-person {
  display:flex;
  align-items:center;
  gap:15px;
  margin:31px 0 25px
}

.contact-person img {
  width:51px;
  height:51px;
  border-radius:50%;
  object-fit:cover;
  object-position:50% 22%
}

.contact-person strong {
  display:block;
  font-size:14px;
  font-weight:600
}

.contact-person span {
  font-size:12px;
  color:var(--body)
}

.contact-link {
  display:flex;
  align-items:center;
  gap:13px;
  font-size:21px;
  font-weight:600;
  letter-spacing:-.03em;
  margin-top:12px;
  word-break:break-word
}

.contact-link.mail {
  font-size:17px;
  font-weight:400;
  letter-spacing:0
}

.contact-link .icon {
  width:19px;
  height:19px;
  color:var(--teal);
  flex-shrink:0
}

.contact-link:hover {
  color:var(--teal)
}

.location {
  font-size:12px;
  color:var(--body);
  margin-top:27px;
  display:flex;
  align-items:center;
  gap:9px
}

.location .icon {
  width:16px;
  height:16px
}

.contact-form {
  background:white;
  border:1px solid #d4dfd6;
  border-radius:6px;
  padding:32px
}

.contact-form h3 {
  font-size:23px;
  letter-spacing:-.03em;
  margin-bottom:23px
}

.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px
}

.field {
  display:block;
  margin-bottom:16px
}

.field span {
  display:block;
  font-size:12px;
  font-weight:600;
  margin-bottom:6px
}

.field input,.field select,.field textarea {
  width:100%;
  max-width:100%;
  min-height:44px;
  background:#f8faf7;
  border:1px solid #d1dbd4;
  border-radius:3px;
  padding:10px 11px;
  color:var(--ink);
  font-size:13px
}

.field textarea {
  resize:vertical;
  min-height:108px
}

.field input::placeholder,.field textarea::placeholder {
  color:#647a78
}

.contact-form .button {
  width:100%;
  margin-top:2px;
  justify-content:space-between
}

.form-note {
  font-size:11px;
  line-height:1.6;
  color:var(--body);
  margin-top:13px
}

.form-note a {
  text-decoration:underline
}

.form-status {
  font-size:12px;
  margin-top:12px;
  color:var(--teal);
  font-weight:600
}

.required-note {
  font-size:10px;
  color:var(--body);
  margin-top:-8px;
  margin-bottom:14px
}

    .footer {
  background:var(--ink);
  color:#b9cbd0;
  padding:49px 0 22px
}

.footer-main {
  display:grid;
  grid-template-columns:1.8fr 1fr 1fr;
  gap:65px;
  padding-bottom:39px
}

.footer-brand {
  font-size:24px;
  color:white;
  letter-spacing:-.04em;
  font-weight:600;
  line-height:1.1
}

.footer-brand span {
  color:var(--lime)
}

.footer-desc {
  font-size:12px;
  margin-top:16px;
  max-width:310px
}

.footer-title {
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#fff;
  font-weight:600;
  margin-bottom:17px
}

.footer-nav {
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:12px
}

.footer a:hover {
  color:white;
  text-decoration:underline
}

.footer address {
  font-style:normal;
  font-size:12px;
  line-height:1.9
}

.footer-bottom {
  border-top:1px solid #ffffff20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:22px;
  font-size:10px
}

.footer-bottom-links {
  display:flex;
  gap:22px
}

.back-top {
  display:flex;
  align-items:center;
  gap:7px
}

.back-top .arrow {
  width:13px;
  height:13px;
  transform:rotate(-90deg)
}

    @media(min-width:1500px) {
  .hero {
  padding-block:80px
}

.hero-image {
  height:570px
}

}

    @media(max-width:1100px) {
  .wrap {
  width:calc(100% - 56px)
}

.brand img {
  width:247px
}

.nav {
  gap:17px
}

.nav>a {
  font-size:12px
}

.hero-grid {
  gap:38px
}

.hero h1 {
  font-size:55px
}

.hero-image {
  height:520px
}

.services-grid {
  gap:65px
}

.solution-card {
  padding-inline:20px
}

.solution-card h3 {
  font-size:21px
}

.platform-grid {
  gap:45px
}

.about-grid {
  gap:65px
}

.faq-grid,.contact-grid {
  gap:55px
}

}

    @media(max-width:900px) {
  html {
  scroll-padding-top:100px
}

.header-main {
  height:76px
}

.menu-toggle {
  display:flex
}

.nav {
  gap:17px;
  position:absolute;
  top:76px;
  left:0;
  right:0;
  display:none;
  background:var(--paper);
  padding:24px 28px;
  border-bottom:1px solid var(--line);
  box-shadow:0 18px 22px #1233420d
}

.nav.is-open {
  display:flex;
  flex-direction:column;
  align-items:stretch
}

.nav>a {
  font-size:15px;
  padding:5px
}

.nav .button {
  font-size:14px
}

.hero {
  padding:45px 0 56px
}

.hero-grid {
  gap:26px
}

.hero h1 {
  font-size:46px
}

.hero-copy>.lead {
  font-size:15px
}

.hero-image {
  height:460px
}

.hero-visual {
  padding-left:0
}

.hero-actions .button {
  padding-inline:17px;
  font-size:12px
}

.connected-card {
  left:-10px;
  right:12px;
  padding:17px
}

.card-heading strong {
  font-size:14px
}

.card-heading>span {
  font-size:9px
}

.hero .eyebrow {
  font-size:10px
}

.proof .wrap {
  gap:19px;
  grid-template-columns:1.1fr 1fr 1fr 1fr
}

.partner-logo {
  width:150px
}

.proof-item {
  padding-left:16px
}

.proof-item strong {
  font-size:12px
}

.proof-item span {
  font-size:10px
}

.section {
  padding:76px 0
}

.section-head {
  gap:30px
}

.section-head>.lead {
  max-width:260px
}

.solution-grid {
  grid-template-columns:1fr 1fr
}

.solution-card,.solution-card:nth-child(n+4) {
  grid-column:span 1;
  padding:27px
}

.solution-card:nth-child(3) {
  border-right:1px solid var(--line)
}

.solution-card:nth-child(even) {
  border-right:0
}

.solution-card:nth-child(-n+4) {
  border-bottom:1px solid var(--line)
}

.solution-card:last-child {
  grid-column:1/-1;
  border:0
}

.solution-card>.icon {
  margin-bottom:23px
}

.services-grid {
  gap:45px
}

.platform-grid {
  grid-template-columns:1fr;
  gap:40px
}

.platform .section-title {
  max-width:620px
}

.platform .lead {
  max-width:620px
}

.hosting-options {
  max-width:650px
}

.process-head {
  gap:35px
}

.process-grid {
  gap:23px
}

.process-step h3 {
  font-size:19px
}

.about-grid {
  gap:45px
}

.portrait {
  height:390px
}

.about-points {
  gap:23px
}

.about-points strong {
  font-size:25px
}

.faq-grid {
  gap:38px
}

.contact-grid {
  gap:38px
}

.contact-form {
  padding:24px
}

.form-row {
  grid-template-columns:1fr;
  gap:0
}

.footer-main {
  gap:40px
}

}

    @media(max-width:650px) {
  html {
  scroll-padding-top:88px
}

.wrap {
  width:calc(100% - 40px)
}

.utility .wrap {
  min-height:32px
}

.utility-location {
  display:none
}

.utility-links {
  gap:16px;
  width:100%;
  justify-content:space-between
}

.utility-links a {
  font-size:10px
}

.utility .phone {
  font-size:10px
}

.header-main {
  height:72px;
  gap:15px
}

.brand img {
  width:225px
}

.brand-subline {
  font-size:8px;
  margin-top:6px;
  letter-spacing:.13em
}

.menu-toggle {
  font-size:0;
  gap:0;
  padding:8px
}

.menu-toggle .icon {
  width:21px;
  height:21px
}

.nav {
  top:72px;
  padding:21px 20px
}

.hero {
  padding:37px 0 40px
}

.hero-grid {
  grid-template-columns:1fr;
  gap:36px
}

.hero h1 {
  font-size:clamp(43px,11.5vw,61px);
  max-width:550px
}

.hero .eyebrow {
  font-size:10px;
  margin-bottom:20px;
  letter-spacing:.09em
}

.hero-copy>.lead {
  font-size:16px;
  margin-top:21px;
  max-width:490px
}

.hero-actions {
  margin-top:25px
}

.hero-actions .button {
  font-size:13px;
  padding:12px 18px
}

.hero-footnote {
  font-size:11px;
  margin-top:19px
}

.hero-visual {
  padding:0 5px 40px 0
}

.hero-visual::before {
  inset:20px -10px 60px 20px
}

.hero-image {
  height:340px;
  object-position:50% 50%
}

.image-note {
  right:17px
}

.connected-card {
  left:13px;
  right:19px;
  bottom:0;
  padding:18px 20px
}

.card-heading strong {
  font-size:16px
}

.card-heading>span {
  font-size:10px
}

.proof .wrap {
  grid-template-columns:1fr 1fr;
  padding-block:25px;
  gap:24px 15px
}

.partner-logo {
  width:160px
}

.proof-item {
  padding-left:15px
}

.proof-item strong {
  font-size:13px
}

.proof-item span {
  font-size:11px
}

.proof-item:nth-child(3) {
  padding-left:0;
  border-left:0
}

.section {
  padding:60px 0
}

.eyebrow {
  font-size:10px;
  margin-bottom:16px
}

.section-title {
  font-size:37px;
  letter-spacing:-.045em
}

.section-head {
  display:block;
  margin-bottom:31px
}

.section-head>.lead {
  max-width:none;
  font-size:15px;
  margin-top:20px
}

.solution-card {
  padding:24px 19px
}

.solution-card>.icon {
  width:29px;
  height:29px;
  margin-bottom:23px
}

.solution-card h3 {
  font-size:21px
}

.solution-card p {
  font-size:13px;
  margin-bottom:20px
}

.solution-card a {
  font-size:11px;
  gap:5px
}

.more-modules {
  align-items:flex-start;
  flex-direction:column;
  gap:13px
}

.module-tags span {
  font-size:10px;
  padding:4px 8px
}

.services-grid {
  grid-template-columns:1fr;
  gap:38px
}

.services-copy .lead {
  font-size:15px;
  margin-top:20px
}

.service-row {
  gap:13px;
  padding-block:22px;
  grid-template-columns:28px 1fr
}

.service-row h3 {
  font-size:22px
}

.platform-grid {
  gap:33px
}

.platform .lead {
  font-size:15px;
  margin-top:21px
}

.hosting-option {
  padding:25px 19px
}

.hosting-option h3 {
  font-size:24px
}

.hosting-option p {
  font-size:12px
}

.hosting-option>.icon {
  margin-bottom:25px;
  width:30px;
  height:30px
}

.hosting-option a {
  font-size:11px
}

.platform-small {
  font-size:10px
}

.process-head {
  display:block
}

.process-head .lead {
  margin-top:20px;
  max-width:none
}

.process-grid {
  grid-template-columns:1fr 1fr;
  gap:35px 25px;
  margin-top:35px
}

.process-step {
  padding-top:22px
}

.process-step h3 {
  font-size:21px
}

.process-step p {
  font-size:13px
}

.about-grid {
  grid-template-columns:1fr;
  gap:42px
}

.portrait-wrap {
  max-width:330px
}

.portrait {
  height:377px
}

.about-points strong {
  font-size:28px
}

.about-copy .lead {
  font-size:15px;
  margin-top:21px
}

.about-points {
  gap:35px
}

.faq-grid {
  grid-template-columns:1fr;
  gap:28px
}

.faq-copy .lead {
  font-size:15px;
  margin-top:20px
}

.faq-list summary {
  font-size:15px;
  padding-block:19px
}

.faq-list details p {
  font-size:13px
}

.contact-grid {
  grid-template-columns:1fr;
  gap:34px
}

.contact .section-title {
  font-size:43px
}

.contact-copy>.lead {
  font-size:15px
}

.contact-person {
  margin-top:27px
}

.contact-form {
  padding:25px 22px
}

.form-row {
  grid-template-columns:1fr 1fr;
  gap:12px
}

.contact-link {
  font-size:22px
}

.contact-link.mail {
  font-size:17px
}

.footer {
  padding-top:40px
}

.footer-main {
  grid-template-columns:1fr 1fr;
  gap:32px 20px;
  padding-bottom:30px
}

.footer-main>div:first-child {
  grid-column:1/-1
}

.footer-brand {
  font-size:26px
}

.footer-desc {
  max-width:340px
}

.footer-bottom {
  flex-wrap:wrap;
  gap:15px;
  font-size:10px
}

.footer-bottom-links {
  gap:17px
}

.back-top {
  margin-left:auto
}

}

    @media(max-width:380px) {
  .wrap {
  width:calc(100% - 32px)
}

.brand img {
  width:208px
}

.hero h1 {
  font-size:43px
}

.hero-actions {
  gap:10px
}

.hero-actions .button {
  font-size:12px;
  padding-inline:13px
}

.solution-card {
  padding:21px 15px
}

.solution-card h3 {
  font-size:19px
}

.form-row {
  grid-template-columns:1fr;
  gap:0
}

.card-heading>span {
  font-size:9px
}

.connected-card {
  padding:17px 15px
}

.mini-module {
  min-width:0
}

.hosting-option {
  padding-inline:15px
}

.hosting-option h3 {
  font-size:22px
}

}

    @media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}

*,*::before,*::after {
  transition:none!important;
  animation:none!important
}

}

    @media print {
  .utility,.site-header,.hero-actions,.contact-form,.back-top {
  display:none
}

.section {
  padding:30px 0
}

.wrap {
  width:100%
}

.hero {
  padding:20px 0
}

.hero-image {
  height:320px
}

.hero h1 {
  font-size:44px
}

.platform,.footer {
  background:white;
  color:var(--ink)
}

.platform p,.footer p,.footer address {
  color:var(--body)
}

a {
  text-decoration:underline
}

.solution-grid,.process-grid,.hosting-options {
  break-inside:avoid
}

.footer-brand,.footer-title {
  color:var(--ink)
}

}

  
/* Shared additions for all pages, navigation and forms. */
.nav-group {
  position:relative
}

.nav-group>summary {
  display:flex;
  align-items:center;
  gap:7px;
  list-style:none;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  padding:10px 0
}

.nav-group>summary::-webkit-details-marker {
  display:none
}

.nav-group>summary::after {
  content:"";
  width:5px;
  height:5px;
  transform:rotate(45deg);
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  margin-top:-3px;
  transition:transform .2s
}

.nav-group[open]>summary::after {
  transform:rotate(225deg);
  margin-top:3px
}

.nav-group[open]>summary,.nav-group.is-active>summary,.nav a[aria-current="page"] {
  color:var(--teal)
}

.nav-panel {
  position:absolute;
  top:calc(100% + 13px);
  left:-22px;
  min-width:270px;
  background:white;
  padding:12px;
  border:1px solid var(--line);
  border-radius:5px;
  box-shadow:0 16px 35px #12334218;
  max-height:calc(100vh - 170px);
  overflow:auto
}

.nav-panel a {
  display:block;
  padding:9px 11px;
  border-radius:3px;
  font-size:12px;
  line-height:1.5;
  font-weight:500;
  white-space:nowrap
}

.nav-panel a:hover,.nav-panel a[aria-current="page"] {
  background:#edf4ee;
  color:var(--teal)
}

.nav-panel a:first-child {
  font-weight:700;
  border-bottom:1px solid var(--line);
  margin-bottom:4px;
  padding-bottom:13px
}

.footer-main {
  grid-template-columns:1.3fr 1fr 1fr 1.1fr;
  gap:38px
}

.footer-bottom-links {
  flex-wrap:wrap;
  gap:15px
}

.page-breadcrumb {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:28px;
  color:var(--body);
  font-size:11px;
  line-height:1.6
}

.page-breadcrumb a:hover {
  color:var(--teal);
  text-decoration:underline
}

.page-breadcrumb .separator {
  color:#82958f
}

.page-hero {
  padding:35px 0 68px;
  border-bottom:1px solid var(--line)
}

.page-hero-grid {
  display:grid;
  grid-template-columns:1.55fr .65fr;
  gap:85px;
  align-items:center
}

.page-hero h1 {
  font-size:clamp(40px,4.6vw,63px);
  letter-spacing:-.05em;
  line-height:1.08;
  max-width:800px
}

.page-hero .eyebrow {
  margin-bottom:20px
}

.page-hero .lead {
  font-size:17px;
  margin-top:25px;
  max-width:740px
}

.page-hero .hero-actions {
  margin-top:27px
}

.page-emblem {
  padding:37px 28px;
  border:1px solid #d3e0d7;
  background:#e6eee6;
  border-radius:7px;
  position:relative;
  text-align:center;
  min-height:246px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center
}

.page-emblem::after {
  content:"";
  position:absolute;
  inset:13px;
  border:1px solid #cbdacf;
  border-radius:4px;
  pointer-events:none
}

.page-emblem>.icon {
  width:58px;
  height:58px;
  color:var(--teal);
  margin-bottom:22px;
  stroke-width:1.1
}

.page-emblem strong {
  display:block;
  font-size:23px;
  letter-spacing:-.04em;
  font-weight:600;
  line-height:1.25;
  overflow-wrap:anywhere
}

.page-emblem span {
  display:block;
  font-size:11px;
  color:var(--body);
  margin-top:9px
}

.page-content {
  background:white
}

.content-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 285px;
  gap:75px;
  align-items:start
}

.content-main {
  min-width:0
}

.content-main>h2,.editorial>h2 {
  font-size:clamp(28px,3vw,38px);
  letter-spacing:-.04em;
  line-height:1.17;
  margin-bottom:23px
}

.content-main>p,.editorial>p {
  font-size:16px;
  color:var(--body);
  margin-bottom:27px;
  max-width:800px
}

.content-main .feature-grid {
  margin-top:35px
}

.feature-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px
}

.feature {
  border-top:1px solid var(--line);
  padding-top:23px;
  min-width:0
}

.feature-index {
  color:var(--teal);
  font-size:10px;
  letter-spacing:.12em;
  margin-bottom:13px;
  display:block;
  font-weight:600
}

.feature h3 {
  font-size:22px;
  letter-spacing:-.025em;
  line-height:1.25;
  margin-bottom:13px
}

.feature p {
  color:var(--body);
  font-size:14px;
  line-height:1.75
}

.feature>a {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--teal);
  font-weight:600;
  margin-top:17px;
  padding-bottom:3px;
  border-bottom:1px solid currentColor
}

.feature>a .arrow {
  width:15px;
  height:15px
}

.content-followup {
  margin-top:49px;
  padding:29px 30px;
  background:var(--paper);
  border-left:3px solid var(--teal);
  border-radius:0 4px 4px 0
}

.content-followup h2 {
  font-size:26px;
  letter-spacing:-.035em;
  margin-bottom:15px;
  line-height:1.25
}

.content-followup p {
  font-size:15px;
  color:var(--body)
}

.content-followup .text-link {
  margin-top:15px;
  font-size:12px
}

.page-sidebar {
  position:sticky;
  top:117px
}

.advice-card {
  padding:29px 25px;
  border:1px solid var(--line);
  border-radius:5px;
  background:var(--paper)
}

.advice-card .eyebrow {
  font-size:10px;
  letter-spacing:.1em;
  margin-bottom:18px
}

.advice-card h2 {
  font-size:25px;
  letter-spacing:-.035em;
  line-height:1.2;
  margin-bottom:16px
}

.advice-card p {
  font-size:13px;
  color:var(--body)
}

.advice-card .button {
  width:100%;
  margin-top:23px;
  font-size:12px;
  padding-inline:15px;
  justify-content:space-between
}

.advice-phone {
  display:block;
  font-size:13px;
  margin-top:15px;
  text-align:center;
  color:var(--teal);
  font-weight:600
}

.related-pages {
  margin-top:30px
}

.related-pages h2 {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:700;
  margin-bottom:13px
}

.related-pages a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  border-bottom:1px solid var(--line);
  padding:11px 0;
  font-size:12px;
  color:var(--body);
  line-height:1.5
}

.related-pages a:hover,.related-pages a[aria-current="page"] {
  color:var(--teal)
}

.related-pages a[aria-current="page"] {
  font-weight:700
}

.related-pages .arrow {
  width:13px;
  height:13px
}

.page-cta {
  background:var(--ink);
  color:white;
  padding:54px 0
}

.page-cta-grid {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:45px
}

.page-cta h2 {
  font-size:clamp(29px,3vw,39px);
  letter-spacing:-.04em;
  line-height:1.15
}

.page-cta p {
  font-size:14px;
  color:#c5d6d7;
  margin-top:14px;
  max-width:650px
}

.page-cta .button {
  background:var(--lime);
  color:var(--ink);
  flex-shrink:0
}

.page-cta .button:hover {
  background:#d6e314
}

.page-link-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px
}

.page-link-card {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:17px;
  padding:27px;
  border:1px solid var(--line);
  background:white;
  border-radius:5px;
  min-width:0;
  transition:background .2s
}

.page-link-card:hover {
  background:#f3f7f1
}

.page-link-card>.icon {
  color:var(--teal);
  width:32px;
  height:32px;
  margin-bottom:5px
}

.page-link-card h3 {
  font-size:23px;
  line-height:1.2;
  letter-spacing:-.035em
}

.page-link-card p {
  font-size:14px;
  color:var(--body)
}

.page-link-card .text-link {
  margin-top:auto;
  font-size:12px
}

.industry-links {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px
}

.industry-links a {
  font-size:12px;
  padding:8px 13px;
  border:1px solid var(--line);
  border-radius:3px;
  color:var(--teal);
  font-weight:600
}

.industry-links a:hover {
  background:#edf4ee
}

.reference-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-top:36px
}

.reference-card {
  padding:25px;
  border:1px solid var(--line);
  border-radius:5px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  background:white;
  min-height:170px
}

.reference-card img {
  max-height:80px;
  max-width:100%;
  object-fit:contain;
  width:190px;
  height:80px
}

.reference-card h3 {
  font-size:14px;
  font-weight:600;
  margin-top:23px
}

.download-card {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  border:1px solid var(--line);
  background:var(--paper);
  padding:28px;
  border-radius:5px;
  margin-top:35px
}

.download-card h3 {
  font-size:22px;
  letter-spacing:-.025em;
  margin-bottom:10px
}

.download-card p {
  color:var(--body);
  font-size:14px
}

.download-card .button {
  flex-shrink:0
}

.profile-layout {
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:65px;
  align-items:start
}

.profile-layout .portrait-wrap {
  max-width:320px
}

.profile-layout .portrait {
  height:400px
}

.profile-copy h2 {
  font-size:37px;
  letter-spacing:-.04em;
  margin-bottom:24px
}

.profile-copy p {
  font-size:16px;
  color:var(--body);
  margin-bottom:22px
}

.contact-content .contact-grid {
  gap:80px
}

.contact-content .contact-copy h2 {
  font-size:37px;
  letter-spacing:-.04em
}

.contact-address {
  border-top:1px solid var(--line);
  margin-top:31px;
  padding-top:23px;
  font-style:normal;
  color:var(--body);
  font-size:14px;
  line-height:1.9
}

.form-column .contact-form {
  background:var(--paper)
}

.form-column>.form-intro {
  font-size:14px;
  color:var(--body);
  margin-bottom:20px
}

.support-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:23px;
  margin-top:33px
}

.support-card {
  padding:27px;
  border:1px solid var(--line);
  border-radius:5px;
  display:flex;
  align-items:flex-start;
  flex-direction:column;
  gap:18px;
  background:white
}

.support-card>.icon {
  color:var(--teal);
  width:35px;
  height:35px
}

.support-card h3 {
  font-size:25px;
  letter-spacing:-.035em
}

.support-card p {
  font-size:14px;
  color:var(--body)
}

.support-card .button {
  margin-top:auto;
  width:100%;
  font-size:12px;
  justify-content:space-between;
  gap:10px;
  padding-inline:14px
}

.support-steps {
  margin-top:37px;
  padding:29px;
  background:var(--paper);
  border-left:3px solid var(--teal)
}

.support-steps h2 {
  font-size:28px;
  letter-spacing:-.035em;
  margin-bottom:20px
}

.support-steps ol {
  padding-left:23px;
  margin-bottom:0;
  color:var(--body);
  font-size:15px
}

.support-steps li {
  padding-left:7px;
  margin-bottom:13px
}

.vacancy-status {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:var(--teal);
  font-weight:600;
  margin-bottom:25px
}

.vacancy-status::before {
  content:"";
  width:7px;
  height:7px;
  background:var(--teal);
  border-radius:50%
}

.legal-layout {
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:70px;
  align-items:start
}

.legal-nav {
  position:sticky;
  top:117px;
  border:1px solid var(--line);
  border-radius:4px;
  padding:22px
}

.legal-nav h2 {
  font-size:16px;
  margin-bottom:17px
}

.legal-nav a {
  display:block;
  font-size:12px;
  color:var(--body);
  padding:9px 0;
  border-bottom:1px solid var(--line)
}

.legal-nav a:hover {
  color:var(--teal)
}

.legal-copy {
  max-width:800px;
  overflow-wrap:anywhere
}

.legal-copy h2 {
  font-size:29px;
  letter-spacing:-.035em;
  margin:36px 0 19px;
  line-height:1.25
}

.legal-copy h2:first-child {
  margin-top:0
}

.legal-copy h3 {
  font-size:21px;
  letter-spacing:-.025em;
  margin:28px 0 15px;
  line-height:1.3
}

.legal-copy p,.legal-copy address {
  font-size:15px;
  color:var(--body);
  margin-bottom:18px;
  line-height:1.85;
  font-style:normal
}

.legal-copy a {
  color:var(--teal);
  text-decoration:underline
}

.legal-facts {
  display:grid;
  grid-template-columns:180px 1fr;
  gap:15px 25px;
  font-size:14px;
  margin:25px 0
}

.legal-facts dt {
  font-weight:600
}

.legal-facts dd {
  margin:0;
  color:var(--body)
}

.sitemap-group h2 {
  font-size:28px;
  letter-spacing:-.035em;
  margin-bottom:22px
}

.sitemap-group+.sitemap-group {
  margin-top:45px
}

.sitemap-list {
  list-style:none;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 30px
}

.sitemap-list a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  border-bottom:1px solid var(--line);
  padding:14px 0;
  font-size:14px;
  color:var(--body)
}

.sitemap-list a:hover {
  color:var(--teal)
}

.sitemap-list .arrow {
  width:15px;
  height:15px
}

.primary-steps {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px;
  margin-top:36px
}

.primary-step {
  border-top:1px solid var(--line);
  padding-top:22px
}

.primary-step h3 {
  font-size:22px;
  letter-spacing:-.03em;
  margin:13px 0
}

.primary-step p {
  font-size:14px;
  color:var(--body)
}

@media(max-width:1100px) {
  .nav-group>summary {
  font-size:12px
}

.content-grid {
  gap:45px;
  grid-template-columns:minmax(0,1fr) 260px
}

.page-hero-grid {
  gap:50px
}

.footer-main {
  gap:25px
}

.profile-layout {
  gap:45px
}

.contact-content .contact-grid {
  gap:45px
}

.page-link-card {
  padding:23px
}

.page-link-card h3 {
  font-size:22px
}

.legal-layout {
  gap:45px;
  grid-template-columns:210px 1fr
}

}

@media(max-width:900px) {
  .header-main {
  height:auto;
  min-height:76px;
  flex-wrap:wrap;
  padding-block:16px
}

.menu-toggle {
  display:none
}

.nav {
  display:flex;
  position:static;
  width:100%;
  padding:10px 0 0;
  border:0;
  box-shadow:none;
  align-items:stretch;
  flex-direction:column
}

.js .header-main {
  height:76px;
  flex-wrap:nowrap;
  padding-block:0
}

.js .menu-toggle {
  display:flex
}

.js .nav {
  display:none;
  position:absolute;
  top:76px;
  left:0;
  right:0;
  padding:18px 28px 25px;
  border-bottom:1px solid var(--line);
  box-shadow:0 18px 22px #1233420d;
  max-height:calc(100dvh - 76px);
  overflow-y:auto;
  gap:4px
}

.js .nav.is-open {
  display:flex
}

.nav-group>summary {
  font-size:15px;
  padding:12px 0;
  justify-content:space-between
}

.nav-panel {
  position:static;
  box-shadow:none;
  border:0;
  background:#edf3ec;
  border-radius:3px;
  margin-bottom:12px;
  padding:9px 12px;
  min-width:0;
  max-height:none;
  overflow:visible
}

.nav-panel a {
  font-size:13px;
  white-space:normal;
  padding:9px
}

.nav>a:not(.button) {
  font-size:15px;
  padding:12px 0
}

.nav .button {
  margin-top:10px
}

.footer-main {
  grid-template-columns:1.2fr 1fr 1fr;
  gap:35px
}

.footer-main>div:last-child {
  grid-column:1/-1;
  border-top:1px solid #ffffff20;
  padding-top:25px
}

.page-hero {
  padding-bottom:55px
}

.page-hero-grid {
  gap:35px;
  grid-template-columns:1.7fr .7fr
}

.page-hero h1 {
  font-size:47px
}

.page-emblem {
  min-height:216px;
  padding:32px 21px
}

.page-emblem strong {
  font-size:21px
}

.content-grid {
  grid-template-columns:minmax(0,1fr) 235px;
  gap:35px
}

.advice-card {
  padding:24px 20px
}

.advice-card h2 {
  font-size:23px
}

.content-main>p {
  font-size:15px
}

.feature-grid {
  gap:24px 20px
}

.feature h3 {
  font-size:20px
}

.page-link-grid {
  grid-template-columns:1fr 1fr
}

.reference-grid {
  grid-template-columns:1fr 1fr
}

.profile-layout {
  grid-template-columns:260px minmax(0,1fr);
  gap:35px
}

.profile-layout .portrait {
  height:350px
}

.profile-copy h2 {
  font-size:32px
}

.download-card {
  flex-direction:column;
  align-items:flex-start
}

.support-grid {
  gap:15px
}

.support-card {
  padding:23px 19px
}

.support-card h3 {
  font-size:23px
}

.legal-layout {
  grid-template-columns:190px minmax(0,1fr);
  gap:35px
}

.legal-nav {
  padding:18px
}

.sitemap-list {
  grid-template-columns:1fr 1fr
}

}

@media(max-width:650px) {
  .header-main {
  min-height:72px;
  gap:15px
}

.js .header-main {
  height:72px
}

.js .nav {
  top:72px;
  padding:15px 20px 23px;
  max-height:calc(100dvh - 72px)
}

.footer-main {
  grid-template-columns:1fr 1fr;
  gap:31px 23px
}

.footer-main>div:first-child,.footer-main>div:last-child {
  grid-column:1/-1
}

.footer-main>div:last-child {
  padding-top:23px
}

.footer-bottom {
  align-items:flex-start
}

.footer-bottom-links {
  gap:12px
}

.page-hero {
  padding:24px 0 43px
}

.page-breadcrumb {
  margin-bottom:26px;
  font-size:10px;
  gap:6px
}

.page-hero-grid {
  grid-template-columns:1fr;
  gap:30px
}

.page-hero h1 {
  font-size:clamp(39px,10vw,51px)
}

.page-hero .lead {
  font-size:16px;
  margin-top:21px
}

.page-hero .hero-actions {
  margin-top:24px
}

.page-emblem {
  min-height:0;
  flex-direction:row;
  justify-content:flex-start;
  text-align:left;
  gap:20px;
  padding:27px 25px
}

.page-emblem>.icon {
  width:38px;
  height:38px;
  margin:0;
  flex-shrink:0
}

.page-emblem strong {
  font-size:22px
}

.page-emblem span {
  margin-top:4px
}

.content-grid {
  grid-template-columns:1fr;
  gap:41px
}

.page-sidebar {
  position:static
}

.content-main>h2,.editorial>h2 {
  font-size:31px;
  margin-bottom:20px
}

.content-main>p {
  font-size:15px
}

.feature-grid {
  gap:28px 22px
}

.feature h3 {
  font-size:21px
}

.feature p {
  font-size:13px
}

.content-followup {
  padding:25px;
  margin-top:35px
}

.content-followup h2 {
  font-size:24px
}

.content-followup p {
  font-size:14px
}

.related-pages {
  display:none
}

.advice-card {
  padding:27px
}

.advice-card h2 {
  font-size:27px
}

.advice-card .button {
  max-width:320px
}

.advice-phone {
  text-align:left
}

.page-cta {
  padding-block:43px
}

.page-cta-grid {
  display:block
}

.page-cta h2 {
  font-size:32px
}

.page-cta p {
  font-size:13px
}

.page-cta .button {
  margin-top:24px
}

.page-link-grid {
  grid-template-columns:1fr
}

.page-link-card {
  padding:26px
}

.page-link-card h3 {
  font-size:25px
}

.page-link-card p {
  font-size:14px
}

.reference-grid {
  gap:15px
}

.reference-card {
  padding:23px 16px;
  min-height:155px
}

.reference-card img {
  height:65px
}

.reference-card h3 {
  font-size:12px;
  text-align:center;
  margin-top:20px
}

.download-card {
  padding:25px;
  gap:23px
}

.download-card h3 {
  font-size:24px
}

.download-card p {
  font-size:13px
}

.profile-layout {
  grid-template-columns:1fr;
  gap:39px
}

.profile-layout .portrait-wrap {
  width:100%;
  max-width:320px
}

.profile-layout .portrait {
  height:380px
}

.profile-copy h2 {
  font-size:33px
}

.profile-copy p {
  font-size:15px
}

.contact-content .contact-grid {
  gap:36px
}

.contact-content .contact-copy h2 {
  font-size:33px
}

.contact-address {
  font-size:13px
}

.form-column>.form-intro {
  font-size:13px
}

.support-grid {
  grid-template-columns:1fr;
  gap:18px
}

.support-card {
  padding:27px
}

.support-card h3 {
  font-size:26px
}

.support-card .button {
  max-width:350px;
  font-size:13px
}

.support-steps {
  padding:25px
}

.support-steps h2 {
  font-size:26px
}

.support-steps ol {
  font-size:14px
}

.legal-layout {
  grid-template-columns:1fr;
  gap:33px
}

.legal-nav {
  position:static;
  padding:23px
}

.legal-copy h2 {
  font-size:28px;
  margin-top:31px
}

.legal-copy h3 {
  font-size:21px
}

.legal-copy p,.legal-copy address {
  font-size:14px
}

.legal-facts {
  grid-template-columns:1fr;
  gap:5px
}

.legal-facts dd {
  margin-bottom:14px
}

.sitemap-list {
  grid-template-columns:1fr;
  gap:0
}

.sitemap-list a {
  font-size:14px
}

.primary-steps {
  grid-template-columns:1fr;
  gap:27px
}

.primary-step h3 {
  font-size:24px
}

.primary-step p {
  font-size:14px
}

}

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

.page-emblem {
  padding:27px 22px;
  gap:16px
}

.page-emblem strong {
  font-size:21px
}

.page-hero h1 {
  font-size:39px
}

.reference-grid {
  grid-template-columns:1fr
}

}

@media print {
  .nav-group,.page-sidebar,.page-emblem,.page-cta,.legal-nav,.contact-form {
  display:none
}

.content-grid,.page-hero-grid,.legal-layout {
  display:block
}

.page-hero {
  padding-block:20px
}

.page-hero h1 {
  font-size:38px
}

.page-hero .lead {
  font-size:14px
}

.page-content {
  background:white
}

.feature,.reference-card {
  break-inside:avoid
}

.footer-main {
  grid-template-columns:repeat(3,1fr)
}

.page-cta {
  background:white;
  color:var(--ink)
}

}

/* Fehlerseite / Nicht gefunden */
/* Ergänzungen nur für die Fehlerseite; Basis: /styles.css. */
.error-page { padding:clamp(56px,7vw,104px) 0 72px; }
.error-page__grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(36px,7vw,100px); align-items:center; }
.error-page__copy { max-width:650px; }
.error-page__title { font-size:clamp(38px,4.8vw,66px); line-height:1.08; letter-spacing:-.045em; margin:0 0 24px; }
.error-page__intro { max-width:540px; font-size:18px; line-height:1.75; color:var(--body); }
.error-page__intro + .error-page__intro { margin-top:12px; }
.error-page__actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:32px; }
.error-page__secondary { background:transparent; color:var(--ink); border-color:var(--line); }
.error-page__secondary:hover { background:#eaf0eb; color:var(--ink); }
.error-page__visual { position:relative; display:grid; place-items:center; min-height:360px; padding:36px 24px; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg,#fff 0%,#eef2e8 100%); }
.error-page__visual::before,.error-page__visual::after { content:""; position:absolute; width:290px; height:290px; border:1px solid #cdd9cc; border-radius:50%; pointer-events:none; }
.error-page__visual::before { top:-145px; right:-60px; }
.error-page__visual::after { bottom:-180px; left:-65px; }
.error-page__number { position:relative; font-size:clamp(104px,12vw,180px); line-height:1; font-weight:650; letter-spacing:-.075em; color:var(--ink); }
.error-page__number span { color:var(--teal); }
.error-page__visual-label { position:absolute; bottom:27px; display:flex; align-items:center; gap:9px; font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--body); }
.error-page__visual-label::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--lime); }
.error-page__next { margin-top:clamp(48px,6vw,80px); padding-top:32px; border-top:1px solid var(--line); }
.error-page__next h2 { margin:0 0 22px; font-size:22px; letter-spacing:-.025em; }
.error-page__links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.error-page__card { display:flex; align-items:flex-start; gap:16px; min-height:140px; padding:24px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); transition:border-color .2s,background .2s; }
.error-page__card:hover { border-color:var(--teal); background:#f1f7f2; }
.error-page__card > .icon { width:25px; height:25px; flex-shrink:0; margin-top:2px; color:var(--teal); }
.error-page__card strong { display:block; margin-bottom:7px; font-size:17px; line-height:1.35; font-weight:600; }
.error-page__card small { display:block; font-size:14px; line-height:1.65; color:var(--body); }
@media (max-width:900px) {
  .error-page__grid { grid-template-columns:minmax(0,1fr) minmax(0,.7fr); gap:30px; }
  .error-page__visual { min-height:290px; }
  .error-page__card { padding:20px; gap:12px; }
}
@media (max-width:700px) {
  .error-page { padding:48px 0; }
  .error-page__grid { grid-template-columns:minmax(0,1fr); gap:32px; }
  .error-page__visual { min-height:190px; padding:24px 20px 48px; }
  .error-page__number { font-size:112px; }
  .error-page__visual-label { bottom:17px; }
  .error-page__intro { font-size:16px; }
  .error-page__links { grid-template-columns:minmax(0,1fr); gap:12px; }
  .error-page__card { min-height:0; padding:22px; }
}
@media (max-width:420px) {
  .error-page__actions { align-items:stretch; flex-direction:column; }
  .error-page__actions .button { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  .error-page__card,.error-page__actions .button { transition:none; }
}

/* Weboptimiertes Logo: Ralf Bub mittig, 20.10.2026.
   PNG auf den verwendeten Ausschnitt zugeschnitten, 720 x 115 Pixel.
   Die Bilddatei enthält bereits den vollständigen sichtbaren Ausschnitt. */
.logo-image-frame {
  display:block;
  width:302px;
  max-width:100%;
  aspect-ratio:720 / 115;
  background:#fff;
}
.logo-image-frame > img {
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  margin:0;
}
.brand .logo-image-frame {
  mix-blend-mode:multiply;
}
.footer-brand-logo {
  display:block;
  width:min(100%,280px);
  padding:14px 12px;
  margin:0 0 18px;
  border-radius:8px;
  background:#fff;
}
.footer-brand-logo .logo-image-frame {
  width:100%;
}
@media(max-width:1100px) {
  .brand .logo-image-frame { width:247px; }
}
@media(max-width:650px) {
  .brand .logo-image-frame { width:225px; }
}
@media(max-width:380px) {
  .brand .logo-image-frame { width:208px; }
}

/* Kundenreferenzen: hochgeladene Logos, 20.10.2026.
   Dateien unverändert; Rahmen blenden nur äußere weiße Flächen aus.
   EMUK bleibt einschließlich Claim vollständig sichtbar. */
.reference-card[href] {
  color:var(--ink);
  text-decoration:none;
}
.reference-card[href]:hover {
  border-color:var(--teal);
}
.reference-card[href]:focus-visible {
  outline:2px solid var(--teal);
  outline-offset:4px;
}
.reference-logo-window {
  display:block;
  position:relative;
  width:190px;
  max-width:100%;
  height:80px;
  overflow:hidden;
  flex-shrink:0;
  background:#fff;
}
.reference-logo-window > img {
  display:block;
  position:absolute;
  left:50%;
  top:50%;
  max-width:none;
  max-height:none;
  height:auto;
  object-fit:initial;
  transform:translate(-50%,-50%);
  margin:0;
}
.reference-card--emuk .reference-logo-window > img {
  width:80px;
}
.reference-card--hillmann .reference-logo-window > img {
  width:136.842105%;
}
.reference-card--olex .reference-logo-window > img {
  width:108px;
}
@media(max-width:650px) {
  .reference-logo-window { width:170px; height:65px; }
  .reference-card--emuk .reference-logo-window > img { width:65px; }
  .reference-card--olex .reference-logo-window > img { width:88px; }
}

/* Optimierte Myfactory-Screenshots, 20.10.2026. */
.erp-preview { background:#edf4ef; }
.erp-preview-grid {
  display:grid;
  grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  gap:48px;
  align-items:center;
}
.erp-preview-copy .section-title { margin-bottom:24px; }
.erp-preview-copy .lead { margin-bottom:18px; font-size:16px; }
.erp-preview-copy .text-link { margin-top:10px; }
.software-shot {
  min-width:0;
  margin:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:0 12px 35px rgba(18,51,66,.06);
}
.software-shot-link { display:block; position:relative; }
.software-shot-link:focus-visible { outline-offset:-4px; }
.software-shot img { display:block; width:100%; height:auto; }
.software-shot-action {
  position:absolute;
  right:12px;
  bottom:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 11px;
  border:1px solid var(--line);
  border-radius:4px;
  background:rgba(255,255,255,.96);
  color:var(--ink);
  font-size:12px;
  line-height:1.5;
}
.software-shot-action .arrow { width:15px; height:15px; }
.software-shot-link:hover .software-shot-action { color:var(--teal); border-color:var(--teal); }
.software-shot figcaption {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:6px 16px;
  padding:12px 16px;
  color:var(--body);
  font-size:12px;
  line-height:1.5;
}
.software-shot figcaption strong { color:var(--ink); font-size:13px; }
.software-examples { margin-block:48px; }
.software-examples > h2 { font-size:clamp(27px,3vw,36px); letter-spacing:-.04em; margin-bottom:18px; }
.software-examples > p { color:var(--body); margin-bottom:26px; }
.software-gallery { display:grid; gap:36px; }
.software-example { min-width:0; }
.software-example h3 { font-size:23px; letter-spacing:-.025em; margin-bottom:12px; }
.software-example > p { color:var(--body); font-size:15px; margin-bottom:18px; }
@media(max-width:900px) {
  .erp-preview-grid { grid-template-columns:minmax(0,1fr); gap:30px; }
  .erp-preview-copy .lead { max-width:700px; }
}
@media(max-width:650px) {
  .software-examples { margin-block:36px; }
  .software-gallery { gap:28px; }
  .software-shot-action { right:8px; bottom:8px; font-size:11px; padding:5px 8px; }
  .software-shot figcaption { display:block; padding:11px 12px; }
  .software-shot figcaption span { display:block; margin-top:4px; }
  .software-example h3 { font-size:21px; }
}
@media print {
  .erp-preview-grid { display:block; }
  .erp-preview-copy { margin-bottom:24px; }
  .software-shot-action { display:none; }
  .software-shot { box-shadow:none; break-inside:avoid; }
}