/* =========================
   ServoTech Layout System
   Sections, grids, navigation, homepage and subpage layout
   ========================= */

/* =========================
   1) Containers
   ========================= */

.container {
  width: min(var(--container-max), calc(100% - 2rem));
  margin-inline: auto;
}

.container--narrow {
  width: min(var(--container-narrow), calc(100% - 2rem));
  margin-inline: auto;
}

@media (min-width: 768px) {
  .container,
  .container--narrow {
    width: min(var(--container-max), calc(100% - 3rem));
  }

  .container--narrow {
    width: min(var(--container-narrow), calc(100% - 3rem));
  }
}

@media (min-width: 1440px) {
  .container,
  .container--narrow {
    width: min(var(--container-max), calc(100% - 4rem));
  }

  .container--narrow {
    width: min(var(--container-narrow), calc(100% - 4rem));
  }
}

/* =========================
   2) Standardized Section System
   ========================= */

.section {
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
}

.section-sm,
.section--sm {
  padding-block: clamp(2.5rem, 4.5vw, 3.5rem);
}

.section-lg,
.section--lg {
  padding-block: clamp(4.5rem, 7vw, 6.5rem);
}

.section--default {
  background: var(--section-bg-default);
}

.section--alt {
  background: var(--section-bg-alt);
}

.section--brand {
  background: var(--section-bg-brand);
  color: var(--color-white);
}

.section--brand .section__title,
.section--brand .section__intro,
.section--brand .section__lead,
.section--brand .section__eyebrow,
.section--brand p,
.section--brand li,
.section--brand h2,
.section--brand h3 {
  color: var(--color-white);
}

.section--brand-soft {
  background-color: var(--color-primary-soft);
  color: var(--color-white);
}

.section--brand-soft h1,
.section--brand-soft h2,
.section--brand-soft h3,
.section--brand-soft p,
.section--brand-soft li {
  color: var(--color-white);
}

.section--border-top {
  border-top: 1px solid var(--color-border);
}

.section--border-bottom {
  border-bottom: 1px solid var(--color-border);
}

.section__header,
.section__content {
  max-width: 46rem;
  margin-inline: auto;
}

.section__content--wide {
  max-width: 52rem;
}

.section__content--narrow {
  max-width: 40rem;
}

.section__header {
  margin-bottom: var(--section-content-gap);
}

.section__header h2 {
  margin-bottom: var(--flow-space-md);
}

.section__header p {
  margin-top: var(--flow-space-sm);
}

.section__header--center,
.section-header.center {
  text-align: center;
  margin-inline: auto;
}

.section__eyebrow,
.section-eyebrow {
  /* global `p { max-width: 65ch }` würde Eyebrow-Zeilen sonst schmal + links im Block halten */
  max-width: none;
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.section__title,
.section-title {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  text-wrap: balance;
}

.section__intro,
.section-intro,
.section__lead {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text);
}

.section__header > * + *,
.section__content > * + * {
  margin-top: var(--section-header-gap);
}

.section__grid {
  display: grid;
  gap: var(--grid-gap);
  align-items: start;
}

@media (min-width: 900px) {
  .section__grid--2cols-aside {
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.85fr);
    gap: clamp(2rem, 3vw, 3rem);
    align-items: start;
  }
}

.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: var(--grid-gap);
}

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

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

  .grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.section__aside {
  width: 100%;
}

/* =========================
   3) Header / Navigation
   ========================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 2000;
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  min-height: var(--header-height);
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  position: relative;
}

.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--color-primary);
}

.logo img {
  display: block;
  width: auto;
  height: auto;
  max-height: 52px;
  max-width: min(280px, 52vw);
}

.nav-toggle {
  width: 44px;
  height: 44px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  color: var(--color-primary);
}

.nav-toggle__line {
  width: 24px;
  height: 2px;
  margin-inline: auto;
  background-color: currentColor;
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.main-nav {
  position: absolute;
  top: calc(100% + 1px);
  right: 0;
  left: 0;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  padding: var(--space-md);
  display: none;
}

.main-nav.is-open {
  display: block;
}

.main-nav__list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  list-style: none;
}

.main-nav a,
.main-nav button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: 0.625rem 0.875rem;
  color: var(--color-primary);
  font-weight: 700;
  text-align: left;
  border-radius: var(--radius-sm);
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav button:hover,
.main-nav button:focus-visible {
  background-color: var(--color-light);
  color: var(--color-primary);
}

.nav-contact {
  margin-top: var(--space-xs);
  justify-content: center;
  border: 0 !important;
  background-color: var(--color-cta) !important;
  color: var(--color-white) !important;
}

.nav-contact:hover,
.nav-contact:focus-visible {
  background-color: var(--color-cta-dark) !important;
  color: var(--color-white) !important;
}

.has-dropdown {
  position: relative;
}

.dropdown-toggle {
  gap: 0.75rem;
}

.dropdown-toggle__icon {
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.dropdown-toggle[aria-expanded="true"] .dropdown-toggle__icon {
  transform: rotate(180deg);
}

.dropdown {
  display: none;
  list-style: none;
  padding-left: var(--space-sm);
  margin-top: 0.25rem;
  background-color: var(--color-white);
}

.dropdown.is-open,
.has-dropdown.is-open .dropdown {
  display: block;
}

.dropdown a {
  font-weight: 600;
}

.lang-switch {
  display: flex;
  gap: 0.5rem;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

/* DE/EN-Sprachumschalter vorerst ausgeblendet, bis englische Texte fertig sind.
   Zum Reaktivieren einfach diese Regel entfernen. */
.lang-switch {
  display: none !important;
}

/* Kundenstimmen vorerst ausgeblendet, bis Freigabe vorliegt.
   Zum Reaktivieren einfach diese Regel entfernen. */
.home-testimonials {
  display: none !important;
}

.lang-switch a {
  width: auto;
  min-width: 44px;
  justify-content: center;
}

.lang-switch a[aria-current="true"] {
  color: var(--color-secondary);
}

@media (min-width: 1024px) {
  .header-inner {
    grid-template-columns: auto 1fr;
    justify-content: initial;
  }

  .nav-toggle {
    display: none;
  }

  .main-nav {
    position: static;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-left: var(--space-xl);
  }

  .main-nav__list {
    flex-direction: row;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 1.25rem);
  }

  .main-nav a,
  .main-nav button {
    width: auto;
    padding: 0.5rem 0.75rem;
    justify-content: center;
  }

  .nav-contact {
    margin-top: 0;
  }

  .lang-switch {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    margin-left: var(--space-lg);
  }

  .dropdown {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    min-width: 280px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-sm);
    z-index: 2200;
  }

  .dropdown a {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    padding: 0.75rem 0.875rem;
    border-radius: var(--radius-sm);
  }

  .dropdown a:hover,
  .dropdown a:focus-visible {
    background-color: var(--color-light);
  }
}

/* =========================
   4) Homepage: Hero
   ========================= */

.hero,
.section--hero {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding-block: var(--section-space-lg);
}

.hero-inner,
.hero__grid {
  display: grid;
  gap: var(--grid-gap-lg);
  align-items: center;
}

.hero-content > * + *,
.hero__content > * + * {
  margin-top: var(--flow-space-lg);
}

.hero-eyebrow,
.hero__eyebrow {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.hero-title,
.hero__title {
  color: var(--color-white);
  font-size: clamp(2.125rem, 4.25vw, 3.5rem);
  line-height: 1.08;
}

.hero-text,
.hero__text {
  font-size: var(--fs-500);
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.96);
}

.hero-list,
.hero__list {
  display: grid;
  gap: var(--flow-space-sm);
  list-style: none;
}

.hero-list li,
.hero__list li {
  position: relative;
  padding-left: 1.5rem;
  color: rgba(255, 255, 255, 0.94);
}

.hero-list li::before,
.hero__list li::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--color-cta);
  transform: translateY(-50%);
}

.hero-actions,
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--flow-space-md);
}

.hero-media img,
.hero__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  object-fit: cover;
  object-position: 50% 50%;
  box-shadow: var(--shadow-md);
}

@media (min-width: 1024px) {
  .hero-inner,
  .hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}

/* =========================
   5) Homepage: Intro / Services / Experience
   ========================= */

.about-intro,
.intro {
  background: var(--color-light);
}

.features-grid,
.services__grid {
  display: grid;
  gap: var(--grid-gap);
}

.experience {
  background: linear-gradient(180deg, rgba(27, 58, 92, 0.04) 0%, rgba(27, 58, 92, 0) 100%);
}

.experience-inner,
.experience__grid {
  display: grid;
  gap: var(--grid-gap-lg);
  align-items: center;
}

.experience-image img,
.experience__media img {
  width: 100%;
  border-radius: var(--radius-md);
}

.experience-content .lead,
.experience__content .section__intro {
  margin-bottom: var(--flow-space-lg);
}

@media (min-width: 768px) {
  .features-grid,
  .services__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}

@media (min-width: 1024px) {
  .experience-inner,
  .experience__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================
   6) Homepage: Project CTA / Process / Stats
   ========================= */

.project-section,
.project-cta {
  background: var(--color-primary);
  color: var(--color-white);
}

.project-section h1,
.project-section h2,
.project-section h3,
.project-section h4,
.project-section h5,
.project-section h6 {
  color: var(--color-white);
}

.project-section p,
.project-section .section__lead,
.project-section .section__text {
  color: rgba(255, 255, 255, 0.92);
}

.project-section .section__eyebrow {
  color: rgba(255, 255, 255, 0.7);
}

.project-section a {
  color: var(--color-white);
}

.project-section a:hover {
  color: var(--color-secondary);
}

.project-section--spaced {
  padding-block: clamp(5rem, 8vw, 7rem);
}

.project-section--spaced .section__header {
  margin-bottom: clamp(2rem, 3vw, 2.75rem);
}

.project-section--spaced .process-grid {
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
}
.project-section {
  padding-block: clamp(4rem, 6vw, 5.5rem);
}

.project-inner {
  display: grid;
  gap: var(--section-content-gap);
}

.project-header {
  text-align: center;
  max-width: 56rem;
  margin-inline: auto;
}

.project-header p {
  margin-inline: auto;
  opacity: 0.96;
}

.project-header__actions {
  margin-top: var(--flow-space-lg);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.process-grid,
.process__grid {
  display: grid;
  gap: var(--grid-gap);
  margin-top: 0;

  /* Mobile */
  grid-template-columns: 1fr;
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 900px) {
  .process__grid {
    grid-template-columns: repeat(3, minmax(0, 22rem));
    max-width: calc((3 * 22rem) + (2 * var(--space-xl)));
    margin-left: auto;
    margin-right: auto;
  }
}

.project-cta .process__grid {
  justify-content: initial;
}

.process__grid > .process-step {
  width: 100%;
  max-width: none;
}

.process-grid > .process-step,
.process__grid > .process-step,
.process-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  min-width: 0;
  height: 100%;
}

.process-grid > .process-step h3,
.process__grid > .process-step h3,
.process-card h3 {
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.15;
  text-wrap: balance;
}

.process-grid > .process-step h3,
.process__grid > .process-step h3 {
  text-align: center;
}

.process-grid > .process-step p,
.process__grid > .process-step p,
.process-card p {
  font-size: 1rem;
  line-height: 1.6;
}

.process-grid > .process-step h3,
.process__grid > .process-step h3,
.process-card h3 {
  color: var(--color-heading);
  margin-bottom: var(--flow-space-sm);
}

.process-grid > .process-step p,
.process__grid > .process-step p,
.process-card p {
  color: var(--color-text);
}

.process-card .process-step,
.process-step-number,
.process-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  min-height: 3rem;
  margin-bottom: var(--flow-space-md);
  border-radius: 999px;
  background: rgba(27, 58, 92, 0.08);
  color: var(--color-primary);
  font-family: var(--font-family-heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.project-section .process-grid > .process-step,
.project-section .process__grid > .process-step,
.project-section .process-card,
.project-cta .process-grid > .process-step,
.project-cta .process__grid > .process-step,
.project-cta .process-card,
.section--brand .process-grid > .process-step,
.section--brand .process__grid > .process-step,
.section--brand .process-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: none;
}

.project-section .process-grid > .process-step h3,
.project-section .process__grid > .process-step h3,
.project-section .process-card h3,
.project-cta .process-grid > .process-step h3,
.project-cta .process__grid > .process-step h3,
.project-cta .process-card h3,
.section--brand .process-grid > .process-step h3,
.section--brand .process__grid > .process-step h3,
.section--brand .process-card h3 {
  color: var(--color-white);
}

.project-section .process-grid > .process-step p,
.project-section .process__grid > .process-step p,
.project-section .process-card p,
.project-cta .process-grid > .process-step p,
.project-cta .process__grid > .process-step p,
.project-cta .process-card p,
.section--brand .process-grid > .process-step p,
.section--brand .process__grid > .process-step p,
.section--brand .process-card p {
  color: rgba(255, 255, 255, 0.88);
}

.project-section .process-card .process-step,
.project-section .process-step-number,
.project-section .process-step-badge,
.project-cta .process-card .process-step,
.project-cta .process-step-number,
.project-cta .process-step-badge,
.section--brand .process-card .process-step,
.section--brand .process-step-number,
.section--brand .process-step-badge {
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
}

.process-card .process-step,
.process-step-number,
.process-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  min-height: 3rem;
  margin-bottom: var(--flow-space-md);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
  font-family: var(--font-family-heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.stats {
  background: var(--color-primary-dark);
}

.stats-grid,
.stats__grid {
  display: grid;
  gap: var(--grid-gap);
  text-align: center;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-number,
.stat__number {
  display: block;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 700;
  line-height: 1;
  margin-bottom: var(--flow-space-sm);
  color: var(--color-white);
}

.stats .stat p,
.stats .stat__text,
.section--brand .stat p,
.section--brand .stat__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.95rem;
}

@media (min-width: 768px) {
  .stats-grid,
  .stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .stats-grid,
  .stats__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .process-grid.process__grid-home,
  .process__grid.process__grid-home {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =========================
   7) Homepage: Industries / References
   ========================= */

.industries {
  background: var(--color-light);
}

.industry-grid,
.industries__grid {
  display: grid;
  gap: var(--grid-gap);
}

.references,
.partners {
  background: var(--section-bg-default);
}

.references-logos,
.logo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: stretch;
}

.reference-logo,
.logo-item {
  min-height: 108px;
}

.references-note {
  margin-top: var(--section-content-gap);
}

@media (min-width: 768px) {
  .industry-grid,
  .industries__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .references-logos,
  .logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .industry-grid,
  .industries__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .references-logos,
  .logo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* =========================
   8) Footer
   ========================= */

.site-footer {
  background: var(--color-surface);
  padding-top: var(--section-space-lg);
  padding-bottom: var(--section-space-md);
}

.footer-top {
  display: grid;
  gap: var(--grid-gap-lg);
}

.footer-column {
  min-width: 0;
}

.footer-title {
  margin-bottom: var(--flow-space-lg);
  color: var(--color-primary);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
}

.footer-contact-list,
.footer-links {
  list-style: none;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.footer-contact-item + .footer-contact-item {
  margin-top: var(--flow-space-lg);
}

.footer-icon {
  width: 1.25rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--color-primary);
  flex-shrink: 0;
  line-height: 1;
  margin-top: 0.15rem;
}

.footer-icon svg {
  display: block;
}

.footer-contact-item,
.footer-contact-item a,
.footer-links a,
.footer-social-text,
.footer-copy,
.footer-legal a {
  color: var(--color-primary);
}

.footer-contact-item a:hover,
.footer-links a:hover,
.footer-legal a:hover,
.footer-social-link:hover,
.footer-social-link:focus-visible {
  color: var(--color-secondary);
}

.footer-links li + li {
  margin-top: var(--flow-space-md);
}

.footer-social-text {
  margin-bottom: var(--flow-space-sm);
}

.footer-social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  border-radius: 999px;
  background: rgba(27, 58, 92, 0.08);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
}

.footer-social-link svg {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
}

.footer-divider {
  height: 1px;
  background: rgba(27, 58, 92, 0.18);
  margin-top: var(--section-content-gap);
  margin-bottom: var(--grid-gap);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--flow-space-lg);
}

.footer-copy {
  margin: 0;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--flow-space-lg);
}

.footer-legal a {
  white-space: nowrap;
}

@media (min-width: 768px) {
  .footer-top {
    grid-template-columns: 1.2fr 0.9fr 0.8fr;
  }
}

@media (min-width: 1024px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .footer-legal {
    gap: var(--space-2xl);
  }
}

/* =========================
   9) Logo marquee (legacy / subpages)
   ========================= */

.partner-row {
  display: grid;
  gap: var(--grid-gap);
  align-items: center;
  margin-bottom: var(--section-content-gap);
}

.partner-row:last-child {
  margin-bottom: 0;
}

.logo-marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  gap: var(--grid-gap);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.logo-track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--grid-gap-lg);
  min-width: max-content;
  animation: logo-scroll 28s linear infinite;
}

.logo-marquee:hover .logo-track,
.logo-marquee:focus-within .logo-track {
  animation-play-state: paused;
}

@keyframes logo-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - var(--space-xl))); }
}

@media (min-width: 768px) {
  .partner-row {
    grid-template-columns: 240px 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-track {
    animation: none;
  }
}

/* =========================
   10) Subpages / Generic Layout Blocks
   ========================= */

.subpage-hero {
  background: var(--color-primary);
  padding-block: var(--section-space-lg);
}

.subpage-hero-inner,
.page-hero__grid,
.feature-panel__grid,
.quote-inner,
.history-layout,
.form-grid,
.team-grid,
.process-grid,
.page-hero__grid {
  display: grid;
  gap: var(--grid-gap-lg);
}

.subpage-hero-inner,
.quote-inner,
.feature-panel__grid,
.history-layout,
.form-grid,
.page-hero__grid {
  align-items: center;
}

.subpage-hero-content {
  display: flex;
  flex-direction: column;
  gap: var(--flow-space-lg);
}

.subpage-hero-content h1 {
  color: var(--color-white);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
}

.subpage-hero-media img,
.quote-media img,
.feature-panel__media img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.feature-panel__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.page-hero {
  padding-block: clamp(4rem, 6vw, 6rem) clamp(3rem, 5vw, 4.25rem);
  background: linear-gradient(180deg, rgba(8, 26, 43, 0.04) 0%, rgba(8, 26, 43, 0) 100%);
}

.page-hero__grid {
  align-items: center;
}

.page-hero__content > * + * {
  margin-top: 1rem;
}

.page-hero__title {
  margin-bottom: 0;
}

.page-hero__text {
  max-width: 38rem;
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--flow-space-md);
  margin-top: 1.5rem;
}

.page-hero__facts {
  margin-top: 1.25rem;
}
.section-intro-wide {
  max-width: 980px;
}

.team-section,
.history-section {
  background: var(--color-light);
}

.quote-section,
.feature-panel {
  background: var(--color-surface);
}

.feature-panel {
  padding-block: clamp(4.5rem, 7vw, 6.5rem);
}

.feature-panel__grid {
  align-items: center;
}

.feature-panel__content > * + * {
  margin-top: 1.25rem;
}

.feature-panel__content ul,
.feature-panel__content ol {
  margin-top: 1.5rem;
  padding-left: 1.5rem;
}

.feature-panel__content li + li {
  margin-top: 0.875rem;
}

.section-header-sub,
.section-cta {
  margin-top: var(--section-content-gap);
}

.team-grid-single {
  justify-content: start;
}

.quote-content {
  color: var(--color-primary);
}

.quote-content blockquote {
  margin: 0 0 var(--space-lg);
  color: var(--color-primary);
  font-family: var(--font-family-heading);
  font-size: clamp(1.75rem, 3vw, 3rem);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.quote-content blockquote::before {
  content: "”";
  font-size: 3rem;
  line-height: 0;
  vertical-align: top;
  margin-right: 0.3rem;
}

.quote-author {
  margin: 0;
  color: var(--color-primary);
  font-size: 0.95rem;
  font-weight: 700;
  opacity: 0.85;
}

.timeline-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: var(--space-sm);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.timeline-track {
  display: flex;
  gap: var(--space-lg);
  min-width: max-content;
}

.history-map {
  display: flex;
  align-items: stretch;
}

.map-placeholder {
  width: 100%;
  min-height: 24rem;
  background: linear-gradient(180deg, #d7efe5 0%, #e9f6ef 100%);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
}

.map-shape {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 20rem;
  border-radius: var(--radius-sm);
  background: #dff2e5;
  overflow: hidden;
}

.map-shape::before {
  content: "";
  position: absolute;
  inset: 10% 20%;
  background: #bfe4cc;
  border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%;
  opacity: 0.6;
}

.map-marker {
  position: absolute;
  transform: translate(-50%, -100%);
  text-align: center;
}

.map-pin {
  width: 1.25rem;
  height: 1.25rem;
  background: #ff4d5a;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  margin: 0 auto;
  box-shadow: 0 0 0 4px rgba(255, 77, 90, 0.15);
}

.map-pin::after {
  content: "";
  position: absolute;
  inset: 0.25rem;
  background: white;
  border-radius: 50%;
}

.map-label {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary);
}

.marker-north { top: 25%; left: 60%; }
.marker-southwest { top: 70%; left: 35%; }
.marker-southeast { top: 72%; left: 58%; }

.map-marker:hover .map-pin {
  transform: rotate(-45deg) scale(1.1);
}

.map-marker:hover .map-label {
  text-decoration: underline;
}

.contact-panel {
  background: var(--color-primary-soft);
  padding-block: var(--section-space-lg);
}

.contact-panel-inner,
.contact-panel-header h2,
.contact-panel-header p,
.form-field label,
.form-consent label,
.form-note {
  color: var(--color-white);
}

.contact-panel-header {
  margin-bottom: var(--section-content-gap);
}

.contact-panel-header > * + * {
  margin-top: clamp(0.75rem, 1.5vw, 1.125rem);
}

.contact-panel-header h2 {
  margin: 0;
}

.contact-panel-header p {
  margin: 0;
  max-width: 44rem;
}

.contact-form {
  width: 100%;
}

.form-column,
.form-field {
  display: grid;
  gap: var(--flow-space-lg);
}

.form-field {
  gap: var(--flow-space-sm);
}

.form-field input,
.form-field textarea {
  width: 100%;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  font: inherit;
  font-size: 0.95rem;
  background: var(--color-white);
  color: var(--color-text);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #7f8ea3;
}

.form-field input:hover,
.form-field textarea:hover {
  border-color: rgba(255, 255, 255, 0.35);
}

.form-field input:focus-visible,
.form-field textarea:focus-visible {
  outline: none;
  border-color: var(--color-cta);
  box-shadow: 0 0 0 3px rgba(242, 153, 74, 0.25);
}

.form-field textarea {
  resize: vertical;
  min-height: 14rem;
}

.form-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--flow-space-md);
  align-items: start;
  margin-top: var(--flow-space-xl);
}

.form-consent input {
  margin-top: 0.25rem;
  width: 1.1rem;
  height: 1.1rem;
}

.form-consent a {
  color: var(--color-accent);
  text-decoration: underline;
}

.form-consent a:hover {
  color: var(--color-white);
}

.form-note {
  margin-top: var(--flow-space-md);
  color: rgba(255,255,255,0.82);
  font-size: var(--fs-300);
}

.form-actions {
  margin-top: var(--flow-space-xl);
  display: flex;
  justify-content: center;
}

.form-feedback {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-weight: 600;
  line-height: 1.4;
}

.form-feedback.is-success {
  color: #0f5132;
  background: #d1e7dd;
  border-color: #badbcc;
}

.form-feedback.is-error {
  color: #842029;
  background: #f8d7da;
  border-color: #f5c2c7;
}

.services h2 {
  text-align: center;
  margin-bottom: var(--section-content-gap);
}

.services-grid {
  display: grid;
  gap: var(--grid-gap);
}

.process-subline {
  margin-top: -0.25rem;
  margin-bottom: var(--flow-space-sm);
  font-weight: 600;
  color: var(--color-primary);
}

/* =========================
   10a) About Page
   ========================= */

.page-hero--about {
  background: var(--color-primary);
  color: var(--color-white);
  padding-block: clamp(4rem, 6vw, 6rem);
}

.page-hero--about .page-hero__title,
.page-hero--about .page-hero__text,
.page-hero--about .page-hero__eyebrow,
.page-hero--about .page-hero__facts li {
  color: var(--color-white);
}

.page-hero--about .page-hero__eyebrow {
  color: rgba(255, 255, 255, 0.78);
}

/* Qualifizierung & Validierung – Hero wie Kundenvorlage (Navy) */
.page-hero--qv {
  background: var(--color-primary);
  color: var(--color-white);
  padding-block: clamp(4rem, 6vw, 6rem);
}

.page-hero--qv .page-hero__title,
.page-hero--qv .page-hero__text,
.page-hero--qv .page-hero__eyebrow {
  color: var(--color-white);
}

.page-hero--qv .page-hero__eyebrow {
  color: rgba(255, 255, 255, 0.78);
}

.page-hero--qv .page-hero__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  object-fit: cover;
}

/* Dokumentation & Schulung – Hero (Cyan wie Kundenvorlage doku-1) */
.page-hero--doku {
  background: var(--color-accent);
  color: var(--color-white);
  padding-block: clamp(4rem, 6vw, 6rem);
}

.page-hero--doku .page-hero__title,
.page-hero--doku .page-hero__text,
.page-hero--doku .page-hero__eyebrow {
  color: var(--color-white);
}

.page-hero--doku .page-hero__eyebrow {
  color: rgba(255, 255, 255, 0.88);
}

.page-hero--doku .page-hero__text + .page-hero__text {
  margin-top: 1rem;
}

.page-hero--doku .page-hero__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  object-fit: cover;
}

.page-hero--doku .btn--primary,
.page-hero--doku .btn-primary {
  background-color: var(--color-cta);
  color: var(--color-white);
}

.page-hero--doku .btn--primary:hover,
.page-hero--doku .btn--primary:focus-visible,
.page-hero--doku .btn-primary:hover,
.page-hero--doku .btn-primary:focus-visible {
  background-color: var(--color-cta-dark);
  color: var(--color-white);
}

/* Einheitliches Hero-Bildformat über alle Seiten hinweg */
.page-hero__media img,
.about-hero__media img,
.compliance-hero__media img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Motiv-Fokus je Hero-Variante */
.page-hero--qv .page-hero__media img {
  object-position: 50% 46%;
}

.page-hero--doku .page-hero__media img {
  object-position: 50% 45%;
}

.page-hero--compliance .page-hero__media img {
  object-position: 50% 42%;
}

.page-hero--doku-cta {
  display: flex;
  justify-content: center;
  padding-top: clamp(1.75rem, 3vw, 2.75rem);
  margin-top: clamp(0.25rem, 1vw, 0.75rem);
}

/* Doku: Maschinensicherheit-Band (doku-4) */
.doku-safety-band {
  background: var(--color-surface);
  padding-block: clamp(3.5rem, 6vw, 5rem);
}

.doku-safety-band__grid {
  display: grid;
  gap: var(--grid-gap-lg);
  align-items: center;
}

.doku-safety-band__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  object-fit: cover;
}

.doku-safety-band__content h2 {
  margin: 0 0 var(--flow-space-md);
  color: var(--color-heading);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.25;
}

.doku-safety-band__content > p {
  margin: 0 0 var(--flow-space-lg);
  color: var(--color-text);
  max-width: 50ch;
}

.doku-safety-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--flow-space-lg);
}

.doku-safety-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem 1rem;
  align-items: start;
}

.doku-safety-list__dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--color-accent);
  margin-top: 0.45rem;
  flex-shrink: 0;
}

.doku-safety-list h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  color: var(--color-heading);
}

.doku-safety-list p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  max-width: none;
}

@media (min-width: 900px) {
  .doku-safety-band__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}

/* Doku: Schulungen & Workshops (Kundenvorlage doku-schulungen-workshops-4) */
.section.section--default.doku-training-workshop {
  position: relative;
  overflow-x: clip;
  background:
    radial-gradient(
      ellipse 115% 90% at 12% -5%,
      rgba(255, 255, 255, 0.38) 0%,
      transparent 52%
    ),
    radial-gradient(ellipse 80% 65% at 100% 0%, rgba(27, 58, 92, 0.2) 0%, transparent 55%),
    var(--color-accent);
  padding-block: clamp(3.5rem, 6vw, 5rem);
}

.doku-training-workshop__intro {
  position: relative;
  isolation: isolate;
  text-align: center;
  width: min(54rem, 100%);
  max-width: 100%;
  margin-inline: auto;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
  padding: clamp(1.85rem, 4.5vw, 3rem) clamp(1.75rem, 5vw, 3.5rem) clamp(1.75rem, 4vw, 2.75rem)
    clamp(2.65rem, 7vw, 4.25rem);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: linear-gradient(
    152deg,
    rgba(255, 255, 255, 0.36) 0%,
    rgba(255, 255, 255, 0.14) 45%,
    rgba(255, 255, 255, 0.08) 100%
  );
  box-shadow:
    0 22px 50px rgba(17, 43, 70, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

@supports (backdrop-filter: blur(10px)) {
  .doku-training-workshop__intro {
    backdrop-filter: blur(16px) saturate(125%);
    -webkit-backdrop-filter: blur(16px) saturate(125%);
  }
}

/* Akzentstreifen + Pfiff links (rein optisch). */
.doku-training-workshop__intro::before {
  content: "";
  position: absolute;
  inset: clamp(1.2rem, 3vw, 1.85rem) auto clamp(1.2rem, 3vw, 1.85rem)
    clamp(1.05rem, 3vw, 1.65rem);
  width: 0.3125rem;
  border-radius: 999px;
  background: linear-gradient(
    185deg,
    var(--color-white) 6%,
    var(--color-cta) 48%,
    var(--color-primary-soft) 100%
  );
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 3px 12px rgba(18, 43, 70, 0.2);
}

.doku-training-workshop__intro > * {
  position: relative;
  z-index: 1;
}

.doku-training-workshop__title {
  margin: 0 0 var(--flow-space-md);
  font-size: clamp(1.48rem, 3.2vw, 2.125rem);
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  text-wrap: balance;
  max-width: 100%;
}

@media (min-width: 1200px) {
  .doku-training-workshop__title {
    font-size: clamp(1.6rem, 1.2vw + 1.05rem, 2.125rem);
  }
}

/* Weiß direkt auf --color-accent scheitert am WCAG-Kontrast (~2.5:1); weiß auf primary-soft ist AA-konform */
.doku-training-workshop__quote {
  display: inline-block;
  margin: 0 0 var(--flow-space-lg);
  max-width: 100%;
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-white);
  background-color: var(--color-primary-soft);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.doku-training-workshop__lead {
  margin: 0;
  margin-inline: auto;
  width: 100%;
  max-width: none;
  text-align: center;
  color: var(--color-white);
  font-size: var(--fs-400);
  line-height: var(--lh-relaxed);
}

.doku-training-workshop__cards-wrap {
  margin-bottom: clamp(2.5rem, 4.5vw, 3.5rem);
}

.doku-training-workshop__cards-heading {
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
  text-align: center;
  font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  font-weight: 700;
  color: var(--color-heading);
}

.doku-training-workshop__cards {
  display: grid;
  gap: var(--grid-gap);
  align-items: stretch;
}

@media (min-width: 768px) {
  .doku-training-workshop__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.doku-training-workshop-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--card-padding);
  box-shadow: var(--shadow-sm);
}

.doku-training-workshop-card__title {
  margin: 0 0 var(--flow-space-sm);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.3;
}

.doku-training-workshop-card__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}

.doku-training-workshop__columns {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  align-items: start;
}

@media (min-width: 768px) {
  .doku-training-workshop__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--grid-gap-lg);
  }
}

.doku-training-workshop__column-title {
  margin: 0 0 var(--flow-space-md);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-white);
}

.doku-training-workshop__dash-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  color: var(--color-white);
  font-size: var(--fs-400);
  line-height: var(--lh-base);
}

.doku-training-workshop__dash-list li {
  position: relative;
  padding-left: 1.1em;
}

.doku-training-workshop__dash-list li::before {
  content: "–";
  position: absolute;
  left: 0;
  font-weight: 400;
}

.doku-training-workshop__check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
  color: var(--color-white);
  font-size: var(--fs-400);
  line-height: var(--lh-base);
}

.doku-training-workshop__check-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem 0.75rem;
  align-items: start;
}

.doku-training-workshop__check {
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.12rem;
  color: var(--color-white);
}

.doku-training-workshop__check svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Dokumentation & Schulung: CTA vor Footer (Inhalt aus Kundenvorlage doku-5, nicht als Bild-Mockup) */
.doku-prefooter-cta {
  background: var(--color-white);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.doku-prefooter-cta__inner {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}

.doku-prefooter-cta__headline {
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.35;
  color: var(--color-heading);
}

.doku-prefooter-cta__actions {
  display: flex;
  justify-content: center;
}

.about-hero__grid {
  align-items: center;
}

.about-hero__content {
  max-width: 40rem;
}

.about-hero__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  object-fit: cover;
}

.about-profile__grid {
  align-items: start;
}

.about-team {
  background: var(--color-light);
}

.about-team__header {
  margin-bottom: clamp(2rem, 3vw, 3rem);
}

/* Eyebrow + intro-band__title zentriert; Fließtext bleibt links */
.about-team__header.intro-band__inner {
  text-align: center;
}

.about-team__header .intro-band__title {
  text-align: center;
}

.about-team__header .section__eyebrow {
  text-align: center;
}

.about-team__header .intro-band__text {
  text-align: center;
}

.about-team-grid {
  align-items: stretch;
}

.team-card--enhanced {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.team-card--enhanced img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.team-card--enhanced .team-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem 1.125rem 1.25rem;
}

.team-card--enhanced h3 {
  margin: 0;
  color: var(--color-primary);
  font-size: 1.125rem;
  line-height: 1.25;
}

.team-card-role {
  margin: 0;
  font-weight: 700;
  color: var(--color-heading);
}

.team-card-text {
  margin: 0;
  color: var(--color-text);
  font-size: 0.975rem;
  line-height: 1.6;
}

.about-statement {
  background: var(--color-primary);
}

.about-statement .section__title,
.about-statement .section__lead,
.about-statement .section__eyebrow,
.about-statement p {
  color: var(--color-white);
}

.about-statement__grid {
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}

.about-statement__media img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.about-statement__content {
  max-width: 38rem;
}

.about-statement__authors {
  margin: 1rem 0 0;
  font-weight: 700;
  opacity: 0.9;
}

.about-timeline {
  background: var(--color-surface);
}

.about-timeline > .container > .section__header.intro-band__inner {
  text-align: center;
}

.about-timeline > .container > .section__header .intro-band__title {
  text-align: center;
}

.about-timeline > .container > .section__header .section__eyebrow {
  text-align: center;
}

.about-timeline > .container > .section__header .intro-band__text {
  text-align: start;
}

/*
  Intro-Köpfe volle Containerbreite wie Karten-/Rasterzeilen darunter,
  damit zentrierte Eyebrows dieselbe horizontale Mitte wie die Spalten haben.
*/
@media (min-width: 900px) {
  .about-team__header.intro-band__inner,
  .about-timeline > .container > .section__header.intro-band__inner {
    max-width: none;
    width: 100%;
    margin-inline: 0;
  }
}

.timeline-alternative {
  margin-top: 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.timeline-alternative > .section__eyebrow {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
}

.timeline-alternative__flow {
  display: none;
}

.timeline-alternative__interactive {
  display: flex;
  flex-direction: column;
  padding: 1rem 1rem 1.25rem;
}

.history-alt__timeline-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem;
}

.history-alt__nav {
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: opacity var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.history-alt__nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.history-alt__rail-viewport {
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.history-alt__rail {
  --history-gap: 0.55rem;
  --history-track-w: 100%;
  --history-progress-w: 0px;
  display: flex;
  align-items: flex-start;
  gap: var(--history-gap);
  margin: 0;
  padding: 0.35rem 0.1rem 0.45rem;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  position: relative;
}

.history-alt__rail::-webkit-scrollbar {
  display: none;
}

.history-alt__rail::before,
.history-alt__rail::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.92rem;
  height: 3px;
  border-radius: 999px;
  pointer-events: none;
}

.history-alt__rail::before {
  width: var(--history-track-w);
  min-width: 100%;
  background: rgba(27, 58, 92, 0.2);
}

.history-alt__rail::after {
  width: var(--history-progress-w);
  max-width: var(--history-track-w);
  background: linear-gradient(90deg, #2a80ff 0%, #1b6de8 100%);
  transition: width 320ms ease;
}

.history-alt__rail-item {
  flex: 0 0 calc((100% - (5 * var(--history-gap))) / 6);
  min-width: 4.2rem;
  scroll-snap-align: start;
}

.history-alt__point {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.2rem 0.1rem;
  cursor: pointer;
}

.history-alt__dot {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: rgba(27, 58, 92, 0.25);
  border: 2px solid transparent;
  transition: transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.history-alt__point.is-active .history-alt__dot,
.history-alt__point[aria-current="true"] .history-alt__dot {
  background: #1b6de8;
  border-color: rgba(27, 58, 92, 0.2);
  transform: scale(1.12);
  box-shadow: 0 0 0 0 rgba(27, 109, 232, 0.35);
  animation: history-dot-pulse 1.8s ease-in-out infinite;
}

.history-alt__year {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-heading);
  text-align: center;
  transition: color var(--transition-fast);
}

.history-alt__point.is-active .history-alt__year,
.history-alt__point[aria-current="true"] .history-alt__year {
  color: #1b6de8;
}

.history-alt__events {
  order: -1;
  margin-top: 0;
  margin-bottom: 1rem;
  display: grid;
  gap: 0.9rem;
}

.history-alt__event-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  background: #fbfcfe;
  transition: opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.history-alt__event-card.is-switching {
  animation: history-card-fade 260ms ease;
}

.history-alt__event-card.is-secondary {
  opacity: 0.55;
}

.history-alt__event-card:not(.is-secondary) {
  opacity: 1;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.history-alt__event-year {
  margin: 0 0 0.35rem;
  font-family: var(--font-family-heading);
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--color-primary);
}

.history-alt__event-title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.18rem, 1.45vw, 1.35rem);
  line-height: 1.28;
  color: var(--color-heading);
}

.history-alt__event-text {
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 1023px) {
  .history-alt__rail-item {
    flex-basis: calc((100% - (3 * var(--history-gap))) / 4);
  }
}

@media (max-width: 680px) {
  .history-alt__rail-item {
    flex-basis: calc((100% - (2 * var(--history-gap))) / 3);
  }
}

@media (min-width: 1024px) {
  .history-alt__events {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@keyframes history-dot-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(27, 109, 232, 0.35);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(27, 109, 232, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(27, 109, 232, 0);
  }
}

@keyframes history-card-fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.about-sites {
  margin-top: clamp(3rem, 5vw, 4.5rem);
}

.about-sites__header {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
  text-align: center;
}

.about-sites__header p {
  margin-inline: auto;
}

.about-sites__header .section__eyebrow {
  display: block;
  width: 100%;
  text-align: center;
}

.about-sites__header .section__title {
  display: block;
  width: 100%;
  font-size: clamp(1.05rem, 2.6vw, 2.5rem);
  line-height: 1.2;
  text-align: center;
  text-wrap: nowrap;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .about-sites__header .section__title {
    text-wrap: balance;
    white-space: normal;
  }
}

.about-sites__grid {
  display: grid;
  gap: var(--grid-gap);
}

.site-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.site-card h4 {
  margin: 0 0 0.75rem;
  color: var(--color-primary);
  font-size: 1.125rem;
}

.site-card p {
  margin: 0;
  line-height: 1.7;
}

.site-card__maps {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border);
}

.site-card__maps-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-cta);
  text-decoration: none;
}

.site-card__maps-link:hover,
.site-card__maps-link:focus-visible {
  color: var(--color-cta-dark);
  text-decoration: underline;
  outline: none;
}

.site-card__maps-link:focus-visible {
  text-decoration: underline;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-cta);
  border-radius: 2px;
}

.about-values {
  background: var(--color-primary);
}

.about-values .section__title,
.about-values .section__lead,
.about-values .section__eyebrow,
.about-values li {
  color: var(--color-white);
}

.about-values__grid {
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}

.about-values__content {
  max-width: 40rem;
}

.about-values__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-values__image {
  display: block;
  width: 100%;
  max-width: 32rem;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.contact-form__topic {
  max-width: 42rem;
  margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
}

.contact-form select {
  width: 100%;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.9rem 3rem 0.9rem 1rem;
  font: inherit;
  font-size: 0.95rem;
  background-color: var(--color-white);
  color: var(--color-text);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-primary) 50%),
    linear-gradient(135deg, var(--color-primary) 50%, transparent 50%);
  background-position:
    calc(100% - 1.25rem) calc(50% - 0.12rem),
    calc(100% - 0.85rem) calc(50% - 0.12rem);
  background-size: 0.45rem 0.45rem, 0.45rem 0.45rem;
  background-repeat: no-repeat;
}

.contact-form select:hover {
  border-color: rgba(255, 255, 255, 0.35);
}

.contact-form select:focus-visible {
  outline: none;
  border-color: var(--color-cta);
  box-shadow: 0 0 0 3px rgba(242, 153, 74, 0.25);
}

@media (min-width: 768px) {
  .subpage-hero-inner,
  .quote-inner,
  .form-grid,
  .team-grid,
  .services-grid,
  .history-layout,
  .process-grid,
  .page-hero__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
    .form-grid {
    align-items: start;
  }

  .form-column {
    align-content: start;
  }

  .form-field-textarea {
    align-content: start;
  }

  .form-field-textarea label {
    margin-top: 0;
  }
  
  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 58rem;
    margin-inline: auto;
  }
  
    .about-sites__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (min-width: 1024px) {
  .subpage-hero-inner,
  .page-hero__grid,
  .feature-panel__grid,
  .quote-inner,
  .history-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .team-grid-single {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .team-grid-single .team-card {
    grid-column: 1 / 2;
  }

  .services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .process-grid > * {
  min-width: 0;
  height: 100%;
}

.process-card,
.process-step {
  display: flex;
  flex-direction: column;
}

  .about-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
  }

  .about-statement__grid,
  .about-values__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-sites__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}

@media (min-width: 1200px) {
  .process-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 72rem;
    margin-inline: auto;
    align-items: stretch;
  }
}
/* =========================
   10b) Beratung & Compliance
   ========================= */

.page-hero--compliance {
  background: var(--color-secondary);
  color: var(--color-white);
  padding-block: clamp(4rem, 6vw, 6rem);
}

.page-hero--compliance .page-hero__title,
.page-hero--compliance .page-hero__text,
.page-hero--compliance .page-hero__eyebrow,
.page-hero--compliance .page-hero__facts li {
  color: var(--color-white);
}

.page-hero--compliance .page-hero__eyebrow {
  color: rgba(255, 255, 255, 0.82);
}

.page-hero--compliance .page-hero__content > * + * {
  margin-top: 1.1rem;
}

.page-hero--compliance .page-hero__actions {
  margin-top: 1.75rem;
}

.page-hero--compliance .page-hero__facts {
  margin-top: 1.5rem;
}

.compliance-hero__grid {
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}

.compliance-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.25rem, 0.8vw, 0.5rem);
}

.compliance-hero__side {
  display: grid;
  gap: clamp(1rem, 1.6vw, 1.5rem);
  align-content: start;
}

.compliance-hero__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  object-fit: cover;
}

.compliance-services .section__header {
  max-width: 52rem;
}

.compliance-highlight {
  background: var(--color-surface);
}

.compliance-highlight__grid {
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}

.compliance-highlight__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  object-fit: cover;
}

.compliance-benefits {
  display: grid;
  gap: var(--grid-gap);
  margin-top: clamp(2rem, 3vw, 2.75rem);
}

.compliance-benefits .card {
  text-align: center;
  height: 100%;
}

.compliance-benefits h3 {
  margin-bottom: 0.5rem;
  font-size: clamp(1.125rem, 1.8vw, 1.35rem);
}

.compliance-testimonials {
  background: var(--color-secondary);
  color: var(--color-white);
}

.compliance-testimonials .section__title,
.compliance-testimonials .section__intro {
  color: var(--color-white);
}

.testimonial-grid {
  display: grid;
  gap: var(--grid-gap);
}

.section--cta-light {
  background: var(--section-bg-default);
}

@media (min-width: 768px) {
  .compliance-benefits,
  .testimonial-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .compliance-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 0.95fr);
  }

  .compliance-hero__content {
    padding-right: clamp(0.5rem, 1.5vw, 1.5rem);
  }
}

/* =========================
   Legal pages (Impressum, Datenschutz, Barrierefreiheit)
   Readable line length, spacing, lists — WCAG-friendly structure
   ========================= */

.legal-page {
  max-width: 65ch;
  font-size: clamp(1rem, 0.2vw + 0.95rem, 1.0625rem);
  line-height: 1.65;
}

.legal-page h2 {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  margin-bottom: 0.75rem;
  font-size: clamp(1.25rem, 1.5vw, 1.4rem);
  font-weight: 700;
  line-height: 1.3;
}

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

.legal-page h3 {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  font-size: clamp(1.05rem, 1.1vw, 1.15rem);
  font-weight: 600;
  line-height: 1.35;
}

.legal-page p {
  margin: 0 0 1rem;
}

.legal-page ul {
  margin: 0 0 1rem;
  padding-left: 1.35rem;
}

.legal-page li {
  margin-bottom: 0.35rem;
}

.legal-page li::marker {
  color: var(--color-primary, #0d5c8c);
}

.legal-page a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.legal-page a:hover,
.legal-page a:focus-visible {
  text-decoration-thickness: 2px;
}

.legal-page__credits {
  column-width: 16rem;
  column-gap: 2rem;
}