/* ============================================================
   FLOWFILLMENT — styles.css (Updated with Bricolage Grotesque)
   v2 — Mobile-Fix: single-column cards, overflow protection
   ============================================================ */

/* RESET & BASE */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   scroll-behavior: smooth;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
}

body {
   font-family: 'Bricolage Grotesque', system-ui, sans-serif;
   font-optical-sizing: auto;
   font-variation-settings: "wdth" 100;
   font-size: 16px;
   line-height: 1.7;
   color: #111318;
   background: #ffffff;
   overflow-x: hidden;
}

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

/* Prevent grid/flex children from overflowing their containers */
.container > *,
[class*="__grid"] > *,
[class*="__cards"] > *,
[class*="__inner"] > * {
   min-width: 0;
}

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

ul {
   list-style: none;
}

button {
   cursor: pointer;
   font-family: inherit;
   border: none;
   background: none;
}

textarea {
   resize: vertical;
}

/* TYPOGRAPHY */
h1 {
   font-family: 'Bricolage Grotesque', sans-serif;
   font-size: clamp(36px, 6vw, 72px);
   font-weight: 800;
   /* Extra Fett für Display-Charakter */
   line-height: 1.05;
   letter-spacing: -0.04em;
   color: #111318;
}

h2 {
   font-family: 'Bricolage Grotesque', sans-serif;
   font-size: clamp(28px, 4vw, 48px);
   font-weight: 700;
   line-height: 1.1;
   letter-spacing: -0.03em;
   color: #111318;
   margin-bottom: 16px;
}

h3 {
   font-family: 'Bricolage Grotesque', sans-serif;
   font-size: 18px;
   font-weight: 700;
   line-height: 1.3;
   color: #111318;
   margin-bottom: 8px;
}

p {
   color: #7a8090;
   line-height: 1.7;
   font-weight: 400;
}

p strong {
   color: #111318;
   font-weight: 700;
}

.strong-blue {
   color: #1a6bbf;
}

em.accent {
   font-style: normal;
   color: #1a6bbf;
}

em.accent--light {
   font-style: normal;
   color: #5ba3e8;
}

.h2--light {
   color: #ffffff;
}

.text--light {
   color: rgba(255, 255, 255, 0.65);
}

/* LAYOUT */
.container {
   width: 100%;
   max-width: 1160px;
   margin: 0 auto;
   padding: 0 24px;
}

@media (min-width: 1024px) {
   .container {
      padding: 0 48px;
   }
}

/* REVEAL ANIMATIONS */
.reveal {
   opacity: 0;
   transform: translateY(28px);
   transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
   opacity: 1;
   transform: translateY(0);
}

.reveal--delay-1 {
   transition-delay: 0.1s;
}

.reveal--delay-2 {
   transition-delay: 0.2s;
}

.reveal--delay-3 {
   transition-delay: 0.3s;
}

/* EYEBROW */
.eyebrow {
   display: flex;
   align-items: center;
   gap: 10px;
   font-family: 'Bricolage Grotesque', sans-serif;
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: #1a6bbf;
   margin-bottom: 14px;
}

.eyebrow__line {
   display: inline-block;
   width: 20px;
   height: 2px;
   background: #1a6bbf;
   border-radius: 1px;
   flex-shrink: 0;
}

.eyebrow--center {
   justify-content: center;
}

.eyebrow--light {
   color: #5ba3e8;
}

.eyebrow--light .eyebrow__line {
   background: #5ba3e8;
}

/* BUTTONS */
.btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-family: 'Bricolage Grotesque', sans-serif;
   font-size: 14px;
   font-weight: 700;
   padding: 13px 24px;
   border-radius: 6px;
   transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
   white-space: nowrap;
   cursor: pointer;
}

.btn--primary {
   background: #1a6bbf;
   color: #ffffff;
   border: none;
}

.btn--primary:hover {
   background: #155a9e;
   transform: translateY(-1px);
   box-shadow: 0 6px 20px rgba(26, 107, 191, 0.35);
}

.btn--primary:active {
   transform: translateY(0);
}

.btn--outline {
   background: transparent;
   color: #111318;
   border: 1.5px solid #c0c4cc;
}

.btn--outline:hover {
   border-color: #1a6bbf;
   color: #1a6bbf;
}

.btn--ghost {
   background: rgba(255, 255, 255, 0.08);
   color: #ffffff;
   border: 1.5px solid rgba(255, 255, 255, 0.25);
}

.btn--ghost:hover {
   background: rgba(255, 255, 255, 0.15);
}

.btn--sm {
   padding: 9px 18px;
   font-size: 13px;
}

.btn--full {
   width: 100%;
   justify-content: center;
}

/* BADGES */
.badge {
   font-size: 11px;
   font-weight: 700;
   padding: 3px 10px;
   border-radius: 20px;
   white-space: nowrap;
}

.badge--green {
   background: #eaf3de;
   color: #3b6d11;
}

.badge--blue {
   background: #e8f1fb;
   color: #0c3d6e;
}

/* TAGS */
.tag {
   display: inline-block;
   font-size: 13px;
   font-weight: 600;
   padding: 7px 16px;
   border-radius: 30px;
   border: 1.5px solid #e8eaed;
   color: #7a8090;
   transition: all 0.2s;
}

.tag:hover {
   border-color: #1a6bbf;
   color: #1a6bbf;
}

.tag--blue {
   background: #e8f1fb;
   color: #0c3d6e;
   border-color: transparent;
}

/* CHECKMARKS */
.checkmark {
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: #e8f1fb;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.checkmark svg {
   width: 11px;
   height: 11px;
   color: #1a6bbf;
}

.check-row {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   margin-bottom: 12px;
}

.check-row span {
   font-size: 14px;
   color: #7a8090;
   line-height: 1.5;
   padding-top: 2px;
}

/* SECTION HEADER */
.section-header {
   margin-bottom: 48px;
}

.section-header--center {
   text-align: center;
}

.section-header--center p {
   max-width: 480px;
   margin: 0 auto;
}

/* ============================================================ NAVIGATION */
.nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 100;
   background: rgba(255, 255, 255, 0.92);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border-bottom: 1px solid transparent;
   transition: border-color 0.3s, box-shadow 0.3s;
}

.nav.is-scrolled {
   border-color: #e8eaed;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.nav__inner {
   display: flex;
   align-items: center;
   gap: 32px;
   height: 68px;
   width: 100%;
   max-width: 1160px;
   margin: 0 auto;
   padding: 0 24px;
}

@media (min-width: 1024px) {
   .nav__inner {
      padding: 0 48px;
   }
}

.nav__logo {
   display: flex;
   align-items: center;
   gap: 10px;
   font-family: 'Bricolage Grotesque', sans-serif;
   font-size: 18px;
   font-weight: 800;
   color: #111318;
   flex-shrink: 0;
   min-width: 200px;
   max-width: 220px;
}

.nav__logo em {
   color: #1a6bbf;
   font-style: normal;
}

.nav__logo-icon {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   border: 2px solid #1a6bbf;
   display: flex;
   align-items: center;
   justify-content: center;
}

.nav__logo-icon svg {
   width: 16px;
   height: 16px;
   color: #1a6bbf;
}

.nav__links {
   display: none;
}

@media (min-width: 1024px) {
   .nav__links {
      display: flex;
      align-items: center;
      gap: 28px;
      margin-left: auto;
   }
}

.nav__links a {
   font-size: 14px;
   font-weight: 600;
   color: #3d4250;
   transition: color 0.2s;
}

.nav__links a:hover {
   color: #1a6bbf;
}

.nav__cta {
   display: none;
}

@media (min-width: 1024px) {
   .nav__cta {
      display: inline-flex;
   }
}

.nav__burger {
   display: flex;
   flex-direction: column;
   gap: 5px;
   margin-left: auto;
   padding: 8px;
}

@media (min-width: 1024px) {
   .nav__burger {
      display: none;
   }
}

.nav__burger span {
   display: block;
   width: 22px;
   height: 2px;
   background: #111318;
   border-radius: 1px;
   transition: all 0.3s;
}

.nav__burger.is-open span:nth-child(1) {
   transform: translateY(7px) rotate(45deg);
}

.nav__burger.is-open span:nth-child(2) {
   opacity: 0;
}

.nav__burger.is-open span:nth-child(3) {
   transform: translateY(-7px) rotate(-45deg);
}

.nav__mobile {
   display: none;
   padding: 20px 24px 28px;
   border-top: 1px solid #e8eaed;
   background: #ffffff;
}

.nav__mobile.is-open {
   display: block;
}

.nav__mobile ul {
   display: flex;
   flex-direction: column;
   gap: 4px;
   margin-bottom: 20px;
}

.nav__mobile a {
   display: block;
   font-size: 16px;
   font-weight: 600;
   padding: 10px 0;
   color: #3d4250;
   border-bottom: 1px solid #f4f5f7;
}

.nav__mobile .btn {
   width: 100%;
   justify-content: center;
}

/* ============================================================ HERO */
.hero {
   padding-top: 140px;
   padding-bottom: 0;
   background: #ffffff;
   overflow: hidden;
}

.hero__grid {
   display: grid;
   gap: 32px;
   margin-bottom: 40px;
}

@media (min-width: 1024px) {
   .hero__grid {
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
   }
}

.hero__sub {
   font-size: 16px;
   margin-bottom: 28px;
   color: #7a8090;
}

.hero__btns {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
}

.hero__image {
   border-radius: 16px 16px 0 0;
   overflow: hidden;
}

.hero__image-inner {
   background: #0d1f3c;
   border-radius: 16px 16px 0 0;
}

.hero__image-placeholder svg {
   width: 100%;
   display: block;
}

.hero__trustbar {
   display: flex;
   flex-wrap: wrap;
   gap: 20px 32px;
   padding: 20px 0;
   border-top: 1px solid #e8eaed;
   margin-top: 4px;
   min-width: 0;
}

.trust-item {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 13px;
   color: #7a8090;
}

.trust-item strong {
   color: #111318;
   font-weight: 700;
}

.trust-item__icon {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: #e8f1fb;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.trust-item__icon svg {
   width: 13px;
   height: 13px;
   color: #1a6bbf;
}

/* ============================================================ METRICS */
.metrics {
   padding: 72px 0;
   background: #f7f8fa;
}

@media (min-width: 1024px) {
   .metrics {
      padding: 100px 0;
   }
}

.metrics__grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 16px;
   margin-bottom: 32px;
}

@media (min-width: 768px) {
   .metrics__grid {
      grid-template-columns: repeat(3, 1fr);
   }
}

.metrics__sub {
   text-align: center;
   max-width: 560px;
   margin: 0 auto;
   font-size: 15px;
}

.metric-card {
   background: #ffffff;
   border-radius: 16px;
   padding: 32px 28px;
   border: 1px solid #e8eaed;
   text-align: center;
   transition: box-shadow 0.3s, transform 0.3s;
}

.metric-card:hover {
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
   transform: translateY(-3px);
}

.metric-card__val {
   font-family: arial;
   font-size: clamp(36px, 5vw, 56px);
   font-weight: 800;
   color: #1a6bbf;
   line-height: 1;
   margin-bottom: 10px;
   letter-spacing: -0.04em;
}

.metric-card__img {
   height: 90px;
   width: auto;
   margin-bottom: 16px;
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.metric-card__label {
   font-size: 13px;
   color: #7a8090;
   line-height: 1.5;
   font-weight: 600;
}

/* ============================================================ SERVICES */
.services {
   padding: 72px 0;
   background: #ffffff;
}

@media (min-width: 1024px) {
   .services {
      padding: 100px 0;
   }
}

.services__intro {
   display: grid;
   gap: 32px;
   margin-bottom: 48px;
}

@media (min-width: 1024px) {
   .services__intro {
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
   }
}

.services__intro p {
   font-size: 15px;
   margin-top: 16px;
}

.services__checklist {
   padding-top: 8px;
}

.services__cards {
   display: grid;
   grid-template-columns: 1fr;
   gap: 16px;
}

@media (max-width: 639px) {
   .services__cards {
      grid-template-columns: 1fr;
   }

   .service-card {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
   }
}

@media (min-width: 640px) and (max-width: 1023px) {
   .services__cards {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (min-width: 1024px) {
   .services__cards {
      grid-template-columns: repeat(5, 1fr);
   }
}

.service-card {
   background: #ffffff;
   border: 1.5px solid #e8eaed;
   border-radius: 16px;
   padding: 24px 20px;
   transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card:hover {
   border-color: #1a6bbf;
   box-shadow: 0 8px 32px rgba(26, 107, 191, 0.1);
   transform: translateY(-4px);
}

.service-card:hover .service-card__icon {
   background: #1a6bbf;
}

.service-card:hover .service-card__icon svg {
   color: #ffffff;
}

.service-card__icon {
   width: 44px;
   height: 44px;
   border-radius: 10px;
   background: #e8f1fb;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 14px;
   transition: all 0.3s;
}

.service-card__icon svg {
   width: 20px;
   height: 20px;
   color: #1a6bbf;
   transition: color 0.3s;
}

.service-card h3 {
   font-size: 15px;
   margin-bottom: 6px;
}

.service-card p {
   font-size: 12px;
   margin-bottom: 12px;
}

.service-card__tag {
   font-size: 11px;
   font-weight: 700;
   color: #1a6bbf;
   background: #e8f1fb;
   padding: 3px 10px;
   border-radius: 20px;
   display: inline-block;
}

/* ============================================================ TECHNOLOGY */
.tech {
   padding: 72px 0;
   background: #0d1f3c;
}

@media (min-width: 1024px) {
   .tech {
      padding: 100px 0;
   }
}

.tech__grid {
   display: grid;
   gap: 48px;
}

@media (min-width: 1024px) {
   .tech__grid {
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
   }
}

.tech__content h2 {
   margin-bottom: 16px;
}

.tech__content p {
   margin-bottom: 28px;
}

.tech__features {
   display: flex;
   flex-direction: column;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 16px;
   overflow: hidden;
}

.tech-feature {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 14px 18px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tech-feature:last-child {
   border-bottom: none;
}

.tech-feature__dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   flex-shrink: 0;
}

.tech-feature__dot--green {
   background: #4ade80;
}

.tech-feature__dot--blue {
   background: #5ba3e8;
}

.tech-feature__content {
   flex: 1;
}

.tech-feature__name {
   font-size: 13px;
   font-weight: 700;
   color: #ffffff;
   line-height: 1.3;
}

.tech-feature__desc {
   font-size: 11px;
   color: rgba(255, 255, 255, 0.45);
   margin-top: 2px;
}

.tech__visual {
   position: relative;
   min-width: 0;
   overflow: hidden;
}

.tech__dashboard {
   background: #162d52;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 16px;
   overflow: hidden;
}

.tech__dashboard-bar {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 12px 16px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tech__dashboard-dots {
   display: flex;
   gap: 5px;
}

.tech__dashboard-dots span {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.15);
}

.tech__dashboard-title {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.4);
   font-weight: 600;
}

.tech__dashboard-body {
   padding: 20px;
}

.tech__stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
   margin-bottom: 20px;
   min-width: 0;
}

.tech__stat {
   background: rgba(255, 255, 255, 0.05);
   border-radius: 6px;
   padding: 10px 8px;
   min-width: 0;
   overflow: hidden;
}

.tech__stat-val {
   font-size: 18px;
   font-weight: 800;
   color: #ffffff;
}

.tech__stat-label {
   font-size: 10px;
   color: rgba(255, 255, 255, 0.4);
   margin-top: 2px;
}

.tech__chart {
   background: rgba(255, 255, 255, 0.03);
   border-radius: 6px;
   padding: 16px;
   margin-bottom: 16px;
}

.tech__chart-bars {
   display: flex;
   align-items: flex-end;
   gap: 6px;
   height: 80px;
   margin-bottom: 8px;
}

.tech__chart-label {
   font-size: 10px;
   color: rgba(255, 255, 255, 0.3);
}

.tech__bar {
   flex: 1;
   height: var(--h);
   background: rgba(26, 107, 191, 0.4);
   border-radius: 3px 3px 0 0;
}

.tech__bar--active {
   background: #5ba3e8;
}

.tech__integrations-label {
   font-size: 11px;
   color: rgba(255, 255, 255, 0.35);
   margin-bottom: 8px;
   display: block;
}

.tech__integration-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
}

.tech__integration-tags span {
   font-size: 11px;
   padding: 4px 10px;
   border-radius: 20px;
   background: rgba(255, 255, 255, 0.08);
   color: rgba(255, 255, 255, 0.6);
}

.tech__integration-tags span.active {
   background: rgba(26, 107, 191, 0.3);
   color: #5ba3e8;
}

/* ============================================================ INDUSTRIES */
.industries {
   padding: 72px 0;
   background: #f7f8fa;
}

@media (min-width: 1024px) {
   .industries {
      padding: 100px 0;
   }
}

.industries__tags {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   justify-content: center;
   margin-bottom: 48px;
}

.industries__cards {
   display: grid;
   grid-template-columns: 1fr;
   gap: 20px;
}

@media (min-width: 768px) {
   .industries__cards {
      grid-template-columns: repeat(3, 1fr);
   }
}

.industry-card {
   background: #ffffff;
   border: 1px solid #e8eaed;
   border-radius: 16px;
   padding: 28px;
   transition: all 0.3s;
}

.industry-card:hover {
   border-color: #1a6bbf;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

.industry-card__num {
   font-family: 'Bricolage Grotesque', sans-serif;
   font-weight: 800;
   font-size: 40px;
   color: #e8eaed;
   line-height: 1;
   margin-bottom: 12px;
}

.industry-card h3 {
   font-size: 17px;
   margin-bottom: 8px;
}

.industry-card p {
   font-size: 14px;
}

/* ============================================================ CTA BANNER */
.cta-banner {
   background: #0d1f3c;
   padding: 72px 0;
   overflow: hidden;
   max-width: 100%;
}

.cta-banner__ticker {
   overflow: hidden;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   padding: 14px 0;
   margin-bottom: 56px;
   max-width: 100vw;
}

.cta-banner__ticker-inner {
   display: flex;
   gap: 48px;
   width: max-content;
   will-change: transform;
}

.cta-banner__ticker-inner span {
   font-size: 13px;
   font-weight: 800;
   color: rgba(255, 255, 255, 0.45);
   white-space: nowrap;
   letter-spacing: 0.03em;
}

.cta-banner__content {
   text-align: center;
}

.cta-banner__content h2 {
   color: #ffffff;
   margin-bottom: 14px;
}

.cta-banner__content p {
   color: rgba(255, 255, 255, 0.6);
   max-width: 420px;
   margin: 0 auto 28px;
}

.cta-banner__btns {
   display: flex;
   gap: 12px;
   justify-content: center;
   flex-wrap: wrap;
}

@keyframes ticker {
   from {
      transform: translateX(0);
   }

   to {
      transform: translateX(-50%);
   }
}

/* ============================================================ PRICING */
.pricing {
   padding: 72px 0;
   background: #ffffff;
}

@media (min-width: 1024px) {
   .pricing {
      padding: 100px 0;
   }
}

.pricing__grid {
   display: grid;
   gap: 48px;
}

@media (min-width: 1024px) {
   .pricing__grid {
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
   }
}

.pricing__left p {
   margin-bottom: 28px;
}

.pricing__left .btn {
   margin-top: 8px;
}

.pricing__checklist {
   margin-bottom: 28px;
}

.pricing__card {
   background: #ffffff;
   border: 1.5px solid #e8eaed;
   border-radius: 16px;
   overflow: hidden;
}

.pricing__card-header {
   font-size: 11px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: #7a8090;
   padding: 16px 20px;
   background: #f7f8fa;
   border-bottom: 1px solid #e8eaed;
}

.pricing__items {
   padding: 4px 0;
}

.pricing__item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 13px 20px;
   border-bottom: 1px solid #f4f5f7;
}

.pricing__item:last-child {
   border-bottom: none;
}

.pricing__item span:first-child {
   font-size: 14px;
   color: #3d4250;
   font-weight: 600;
}

.pricing__note {
   margin: 0;
   padding: 14px 20px;
   font-size: 13px;
   color: #0c3d6e;
   background: #e8f1fb;
   line-height: 1.6;
   border-top: 1px solid #d4e6f7;
   font-weight: 500;
}

/* ============================================================ TESTIMONIAL */
.testimonial {
   padding: 72px 0;
   background: #f4f5f7;
}

@media (min-width: 1024px) {
   .testimonial {
      padding: 100px 0;
   }
}

.testimonial__grid {
   display: grid;
   gap: 40px;
}

@media (min-width: 1024px) {
   .testimonial__grid {
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
   }
}

.testimonial__quote-mark {
   font-family: 'Bricolage Grotesque', sans-serif;
   font-weight: 800;
   font-size: 80px;
   color: #1a6bbf;
   line-height: 0.6;
   margin: 20px 0 12px;
}

.testimonial blockquote {
   font-family: 'Bricolage Grotesque', sans-serif;
   font-weight: 600;
   font-size: clamp(18px, 2.5vw, 24px);
   font-style: normal;
   color: #111318;
   line-height: 1.5;
   margin-bottom: 24px;
   letter-spacing: -0.01em;
}

.testimonial__author {
   display: flex;
   align-items: center;
   gap: 14px;
}

.testimonial__author strong {
   display: block;
   font-size: 15px;
   font-weight: 700;
   color: #111318;
}

.testimonial__author span {
   font-size: 13px;
   color: #7a8090;
   font-weight: 500;
}

.testimonial__avatar {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: #e8f1fb;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   font-weight: 800;
   color: #0c3d6e;
   flex-shrink: 0;
}

.testimonial__image-placeholder {
   height: 360px;
   border-radius: 16px;
   background: #e8eaed;
   border: 2px dashed #c0c4cc;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #c0c4cc;
   font-size: 14px;
   text-align: center;
   line-height: 1.8;
}

/* ============================================================ CONTACT */
.contact {
   padding: 72px 0;
   background: #ffffff;
}

@media (min-width: 1024px) {
   .contact {
      padding: 100px 0;
   }
}

.contact__grid {
   display: grid;
   gap: 48px;
}

@media (min-width: 1024px) {
   .contact__grid {
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
   }
}

.contact__image-placeholder {
   height: 100%;
   min-height: 320px;
   border-radius: 16px;
   background: #f7f8fa;
   border: 2px dashed #e8eaed;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #c0c4cc;
   font-size: 14px;
   text-align: center;
   line-height: 1.8;
}

.contact__form h2 {
   margin-bottom: 10px;
}

.contact__form p {
   margin-bottom: 28px;
   font-size: 15px;
}

.form {
   display: flex;
   flex-direction: column;
   gap: 14px;
}

.form__row {
   display: grid;
   grid-template-columns: 1fr;
   gap: 14px;
}

@media (min-width: 640px) {
   .form__row {
      grid-template-columns: 1fr 1fr;
   }
}

.form__group {
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.form__group label {
   font-size: 13px;
   font-weight: 700;
   color: #3d4250;
}

.form input,
.form textarea {
   font-family: 'Bricolage Grotesque', sans-serif;
   font-size: 14px;
   color: #111318;
   background: #f7f8fa;
   border: 1.5px solid #e8eaed;
   border-radius: 6px;
   padding: 11px 14px;
   transition: border-color 0.2s, box-shadow 0.2s;
   outline: none;
   font-weight: 500;
}

.form input::placeholder,
.form textarea::placeholder {
   color: #c0c4cc;
}

.form input:focus,
.form textarea:focus {
   border-color: #1a6bbf;
   box-shadow: 0 0 0 3px rgba(26, 107, 191, 0.1);
   background: #ffffff;
}

.form__note {
   font-size: 12px;
   color: #c0c4cc;
   text-align: center;
   margin-top: 4px;
}

/* ============================================================ FOOTER */
.footer {
   background: #0d1f3c;
   padding: 64px 0 28px;
}

.footer__grid {
   display: grid;
   gap: 40px;
   margin-bottom: 48px;
}

@media (min-width: 1024px) {
   .footer__grid {
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 48px;
   }
}

.footer__brand p {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.45);
   margin: 12px 0 16px;
   max-width: 280px;
}

.footer__logo {
   font-family: 'Bricolage Grotesque', sans-serif;
   font-size: 20px;
   font-weight: 800;
   color: #ffffff;
}

.footer__logo em {
   color: #5ba3e8;
   font-style: normal;
}

.footer__contact {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.footer__contact span {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.4);
   font-weight: 500;
}

.footer__col {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.footer__col-title {
   font-size: 12px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: #ffffff;
   margin-bottom: 4px;
}

.footer__col a {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.4);
   transition: color 0.2s;
   font-weight: 500;
}

.footer__col a:hover {
   color: #ffffff;
}

.footer__bottom {
   padding-top: 24px;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 12px;
}

.footer__bottom span {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.25);
}

.footer__legal {
   display: flex;
   gap: 20px;
}

.footer__legal a {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.25);
   transition: color 0.2s;
}

.footer__legal a:hover {
   color: rgba(255, 255, 255, 0.6);
}

/* ============================================================
   FORM EXTENSIONS — Checkbox, Fehlerstatus, Feedback-Box
   ============================================================ */

/* DSGVO-Checkbox */
.form__checkbox {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   margin-bottom: 20px;
   padding: 14px 16px;
   background: #f7f8fa;
   border: 1.5px solid #e2e6ed;
   border-radius: 8px;
   transition: border-color 0.2s;
}

.form__checkbox input[type="checkbox"] {
   width: 18px;
   height: 18px;
   min-width: 18px;
   margin-top: 3px;
   accent-color: #1a6bbf;
   cursor: pointer;
}

.form__checkbox label {
   font-size: 13px;
   color: #4a5260;
   line-height: 1.6;
   cursor: pointer;
}

.form__checkbox label a {
   color: #1a6bbf;
   text-decoration: underline;
   text-underline-offset: 2px;
}

.form__checkbox.is-error {
   border-color: #e24b4b;
   background: #fff5f5;
}

/* Fehlerstatus Inputs */
input.is-error,
textarea.is-error {
   border-color: #e24b4b !important;
   background: #fff5f5;
}

/* Feedback-Box nach Absenden */
.form__message {
   padding: 14px 18px;
   border-radius: 8px;
   font-size: 14px;
   font-weight: 500;
   margin-bottom: 16px;
   line-height: 1.5;
}

.form__message--success {
   background: #f0faf0;
   border: 1.5px solid #3b9b3b;
   color: #1e5c1e;
}

.form__message--error {
   background: #fff5f5;
   border: 1.5px solid #e24b4b;
   color: #8b1a1a;
}

/* ============================================================
   BILD-FIXES — object-fit cover für alle Sektions-Bilder
   ============================================================ */

/* Hero */
.hero__image-inner picture,
.hero__image-inner img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 16px 16px 0 0;
}

/* Testimonial */
.testimonial__image {
   height: 360px;
   border-radius: 16px;
   overflow: hidden;
}

.testimonial__image picture,
.testimonial__image img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center top;
}

/* Contact */
.contact__image {
   min-height: 320px;
   border-radius: 16px;
   overflow: hidden;
}

.contact__image picture,
.contact__image img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center top;
}

/* ============================================================
   SCHNITTSTELLEN / INTEGRATIONS
   ============================================================ */
.integrations {
   padding: 100px 0;
   background: #f7f8fa;
}

.partner-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   justify-content: center;
   margin-top: 48px;
}

.partner-chip {
   display: flex;
   align-items: center;
   gap: 6px;
   background: #fff;
   border: 1.5px solid #e2e6ed;
   border-radius: 50px;
   padding: 11px 22px;
   font-size: 14px;
   font-weight: 600;
   color: #111318;
   letter-spacing: -0.01em;
   transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
   cursor: default;
   white-space: nowrap;
}

.partner-chip__icon {
   width: 20px;
   height: 20px;
   object-fit: contain;
   flex-shrink: 0;
   display: block;
}

.partner-chip:hover {
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
   transform: translateY(-2px);
   border-color: #c0c8d8;
}

.partner-chip__dot {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background-color: var(--dot-color, #4a5260);
   flex-shrink: 0;
}

/* ============================================================
   VERSANDPARTNER / CARRIERS
   ============================================================ */
.carriers {
   padding: 100px 0;
   background: #fff;
}

.carriers__group {
   margin-top: 52px;
}

.carriers__group + .carriers__group {
   margin-top: 44px;
}

.carriers__group-label {
   font-size: 11px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   color: #7a8090;
   text-align: center;
   margin-bottom: 20px;
}

.carrier-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
   justify-content: center;
}

.carrier-grid--spedition {
   gap: 14px;
}

/* individual carrier card */
.carrier-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   background: #fff;
   border: 1.5px solid #e2e6ed;
   border-radius: 14px;
   min-width: 130px;
   transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
   cursor: default;
}

.carrier-card:hover {
   box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09);
   transform: translateY(-3px);
   border-color: #c0c8d8;
}

.carrier-card__logo {
   width: 100px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   margin: 0;
}

#dhl {
   background: #ffcc07;
}

#hermes {
   background: #0098d2;
}

#ups {
   background: #2f180f;
}

#tnt {
   background: #eb5b1c;
}

#dachser {
   background: #fbba09;
}

#emons {
   background: #cc1517;
}

#tnt {
   background: #eb5b1c;
}

.carrier-logo__img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.carrier-card__name {
   font-size: 12px;
   font-weight: 700;
   color: #7a8090;
   letter-spacing: 0.02em;
   text-transform: uppercase;
}

/* ── Responsive ─────────────── */
@media (max-width: 640px) {
   .partner-chip {
      font-size: 13px;
      padding: 9px 16px;
   }

   .carrier-card {
      min-width: 100px;
      padding: 16px 18px;
   }

   .carrier-card__logo {
      width: 90px;
      height: 52px;
   }

   .carriers__group-label {
      font-size: 10px;
   }

   .partner-grid {
      gap: 10px;
   }

   .carrier-grid {
      gap: 12px;
   }
}