/* Dälken Preview-Onepager — Layout und Verhalten.
   Maße 1:1 aus Figma "Onepager V1 · 1440" (2682:1643). */

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

/* Kein scroll-behavior: smooth — die 0,6 s Ease-in-out macht anker() in main.js.
   Beides zusammen würde sich gegenseitig ausbremsen. */

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text-black);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, figure, blockquote, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--d-blue); padding: 12px 20px;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--text-black); outline-offset: 3px; }

/* Globaler Hover: Telefon, E-Mail, Impressum/Datenschutz — 70 %, nie unterstrichen */
.textlink { text-decoration: none; transition: opacity .2s ease-out; }
.textlink:hover { opacity: var(--hover-opacity); }

/* Sektions-Raster: 1440-Seite mit 30 px Rand, Inhalt 1380 */
.header, .ddd, .hero, .keyfacts, .details, .ss03, .bauaufgaben,
.referenzen, .testimonials, .team, .standorte, .footer {
  width: 100%;
  max-width: var(--page-w);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

/* ============ HEADER ============ */
.header { padding-block: 25px; }
.wordmark { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; }
.wordmark__sub { text-transform: uppercase; }

/* ============ DDD-BÜHNE ============ */
.ddd { height: 700px; }
.ddd__inner { position: relative; width: 100%; height: 100%; }

/* Beide Deko-Ebenen enden auf opacity:0, bleiben aber im Layout — ohne
   pointer-events:none fangen sie Klicks auf Film-Button und Hero-Video ab. */
.ddd__anim01 {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

.ddd__video {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 467px;
  -webkit-mask-image: url("../img/d/mask-video.svg");
  mask-image: url("../img/d/mask-video.svg");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.ddd__video-el {
  width: 100%; height: 100%;
  object-fit: cover;
  background: var(--section-bg);
}

.ddd__anim02 {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 700px;
  pointer-events: none;
}
.ddd__d13 {
  display: flex; gap: var(--gap-xs);
  width: 100%; height: 100%;
  -webkit-mask-image: url("../img/d/mask-d13.svg");
  mask-image: url("../img/d/mask-d13.svg");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.ddd__d { flex: 1 1 0; width: 0; height: 100%; }

/* Film-Button auf dem Hero-Video */
.film-button {
  position: absolute; left: 46px; bottom: 30px; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding-inline: var(--gap-xs);
  border-radius: var(--radius-voll);
  background: var(--page-bg);
  transition: opacity .2s ease-out;
}
.film-button:hover { opacity: var(--hover-opacity); }
.film-button__icon { display: flex; }

/* ============ HERO ============ */
.hero {
  display: flex; flex-direction: column; gap: var(--gap-s);
  padding-top: var(--gap-s); padding-bottom: var(--gap-xl);
}
.hero__h1 { max-width: 1009px; }
.hero__cta { display: flex; gap: var(--gap-xs); align-items: center; flex-wrap: wrap; }

.btn-cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding-inline: var(--gap-xs);
  border-radius: var(--radius-voll);
  background: var(--d-blue);
  font-size: 17px; line-height: 1.65;
  text-decoration: none;
  transition: opacity .2s ease-out;
}
.btn-cta:hover { opacity: var(--hover-opacity); }

/* ============ LAUFBAND ============ */
.marquee-bar { padding-bottom: var(--gap-xl); }
.marquee {
  background: var(--section-bg);
  padding: 25px 30px;
  overflow: hidden;
}
.marquee__track {
  display: flex; width: max-content;
  will-change: transform;
}
.marquee__kachel {
  display: flex; align-items: center; gap: 10px;
  flex: 0 0 auto;
  padding-right: 18px;
  font-size: 24px; line-height: 1.3; letter-spacing: -0.005em;
  white-space: nowrap;
}
.marquee__stark { font-weight: 500; }

.pill {
  display: inline-flex; align-items: center;
  height: 30px; padding-inline: 15px;
  border-radius: var(--radius-voll);
  background: var(--d-blue);
  font-size: 17px; line-height: 1.65;
  text-decoration: none;
  transition: opacity .2s ease-out;
}
.pill:hover { opacity: var(--hover-opacity); }

/* ============ KEY FACTS ============ */
.keyfacts {
  display: flex; gap: var(--gap-xs); align-items: flex-start;
  padding-top: var(--gap-s); padding-bottom: var(--gap-l);
}
.keyfacts__fix { width: 678px; flex: 0 0 auto; }
.keyfacts__var { flex: 1 1 0; min-width: 0; }

.ticker { height: 154px; overflow: hidden; }
.ticker__track { padding-inline: 30px; will-change: transform; }
.ticker__block > .t-display { white-space: nowrap; }

/* ============ DETAILS ============ */
.details { padding-block: var(--gap-m); }

/* ============ SS03 AKKORDEONS ============ */
.ss03 { display: flex; gap: var(--gap-xs); align-items: stretch; }

.karte {
  flex: 1 1 0; min-width: 0;
  min-height: 827px;
  padding: 30px;
  background: var(--section-bg);
  transition: background-color .3s ease-in-out;
}
.karte--leistungen:hover { background: var(--d-blue); }
.karte--expertisen:hover { background: var(--d-green); }
.karte__label { margin-bottom: 22px; }

.akk__item { border-top: 1px solid rgba(28, 26, 21, .3); }
.akkordeon { border-bottom: 1px solid rgba(28, 26, 21, .3); }

.akk__head {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; padding-block: 14px;
  text-align: left;
}

.akk__icon { position: relative; flex: 0 0 auto; width: 24px; height: 24px; }
.akk__h, .akk__v { position: absolute; background: var(--text-black); }
.akk__h { left: 0; top: 11.5px; width: 24px; height: 1px; }
.akk__v {
  left: 11.5px; top: 0; width: 1px; height: 24px;
  transform-origin: 50% 50%;
  transition: transform .18s ease-out;
}
.akk__head[aria-expanded="true"] .akk__v { transform: rotate(-90deg); }

.akk__body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease-in-out;
}
.akk__body > p {
  overflow: hidden;
  max-width: 560px;
  padding-top: 0;
  transition: padding-top .3s ease-in-out;
}
.akk__item[data-open] .akk__body { grid-template-rows: 1fr; }
.akk__item[data-open] .akk__body > p { padding-top: 16px; padding-bottom: 14px; }

/* ============ NEUN BAUAUFGABEN ============ */
.bauaufgaben {
  display: flex; gap: var(--gap-xs); align-items: flex-start;
  padding-block: var(--gap-xl);
}
.bauaufgaben__intro { width: 678px; flex: 0 0 auto; }
.bauaufgaben__liste { display: flex; flex-direction: column; gap: 5px; }

/* ============ REFERENZEN ============ */
.referenzen {
  display: flex; flex-direction: column; gap: var(--gap-s);
  padding-block: var(--gap-s);
}
.referenzen__kopf {
  display: flex; flex-direction: column; gap: var(--gap-s);
  padding-bottom: var(--gap-s);
}

.hslider { position: relative; overflow: hidden; }
.hslider__track { display: flex; will-change: transform; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.hslide { flex: 0 0 100%; }

.hslide__mask {
  position: relative;
  aspect-ratio: 1380 / 575;
  overflow: hidden;
  background: var(--section-bg);
}
.hslide__img {
  position: absolute; left: 0; top: 0;
  width: 100%; height: auto;      /* 1380x690 gegen 575er Maske = 115 px Überhang */
  will-change: transform;
}

.hslide__titel { margin-top: 25px; padding-left: 46px; }
.hslide__daten { margin-top: 4px; padding-left: 46px; }

/* Autoplay-Fortschrittsring am Slide-Fuß */
.hslider__progress {
  position: absolute; left: 0; bottom: 46px;
  width: 32px; height: 32px; border-radius: 50%;
  background: conic-gradient(var(--text-black) calc(var(--p, 0) * 1turn), var(--linie-grey) 0);
  -webkit-mask: radial-gradient(circle, transparent 0 10px, #000 10.5px);
  mask: radial-gradient(circle, transparent 0 10px, #000 10.5px);
}

/* ============ TESTIMONIALS + D-FORM-PARALLAX ============ */
.testimonials { position: relative; padding-block: 250px; }

.dform {
  position: absolute; left: 0; top: 0;
  width: 709px; height: 1064px;
  pointer-events: none;
  overflow: hidden;
}
.dform__vektoren {
  position: absolute; left: 0; top: 0;
  width: 592px; height: 1064px;
  background: url("../img/deko/dform-d.svg") no-repeat 0 0 / 100% 100%;
  will-change: transform;
}
.dform__bild {
  position: absolute; left: 0; top: 299px;
  width: 658px; height: 465px;
  background: rgba(246, 244, 236, .2);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  will-change: transform;
}

.testimonials__inhalt { position: relative; }
.testimonials__inhalt > h2 { padding-left: 702px; }
.testimonials__liste { display: flex; flex-direction: column; }

.testi {
  display: grid; grid-template-columns: 678px 1fr; gap: 30px;
  padding-block: var(--gap-s);
}
.testi:first-child { padding-top: var(--gap-m); }
.testi:last-child { padding-bottom: var(--gap-m); }
.testi > * { grid-column: 2; }
.testi > footer { margin-top: var(--gap-s); }

.testi__name {
  padding-left: 30px;
  background: url("../img/deko/quote.svg") no-repeat 0 .35em / 20px 27px;
}

/* ============ FACHKÖPFE-SLIDER ============ */
.team {
  display: flex; flex-direction: column; gap: var(--gap-m);
  padding-top: var(--gap-m); padding-bottom: var(--gap-xl);
}

.kslider { display: flex; flex-direction: column; gap: 40px; }
.kslider__track {
  display: flex; gap: var(--gap-xs);
  width: max-content;
  will-change: transform;
  cursor: grab;
  touch-action: pan-y;
}
.kslider__track.is-dragging { cursor: grabbing; }
.kslider > .kslider__track { overflow: visible; }
.kslider { overflow: hidden; }

.kopf {
  flex: 0 0 229px; width: 229px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  text-align: center;
}
.kopf__bild { width: 229px; height: 229px; object-fit: cover; }
.kopf > .textlink:first-of-type { margin-top: 5px; }
.kopf > .textlink { white-space: nowrap; }

.kslider__spur {
  position: relative;
  height: 35px;
  cursor: pointer;
}
.kslider__spur::before {
  content: ""; position: absolute; left: 0; top: 15.5px;
  width: 100%; height: 1px; border-radius: 1px;
  background: var(--linie-grey);
}
.kslider__griff {
  position: absolute; left: 0; top: 12.5px;
  width: 201px; height: 7px;
  border-radius: var(--radius-voll);
  background: var(--linie-black);
  will-change: transform;
}

/* ============ ABBINDER-PARALLAX ============ */
.abbinder {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 675px;
  max-width: none; padding-inline: 0;
  margin-bottom: var(--gap-m);
  background: var(--section-bg);
  overflow: hidden;
}
.abbinder__d {
  position: absolute; inset: 0;
  pointer-events: none;
  will-change: transform;
}
.abbinder__d::before, .abbinder__d::after {
  content: ""; position: absolute;
  width: 992px; height: 1046px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.abbinder__d::before {
  left: calc(50% - 272px); top: 385px;
  background-image: url("../img/deko/abbinder-d-rechts.svg");
}
.abbinder__d::after {
  left: calc(50% - 1224.5px); top: -522px;
  background-image: url("../img/deko/abbinder-d-links.svg");
}

.abbinder__statement {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  width: 100%; max-width: var(--page-w); min-height: 261px;
  padding: var(--gap-m) var(--page-pad);
  background: rgba(246, 244, 236, .2);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  will-change: transform;
}

/* ============ STANDORTE ============ */
.standorte {
  display: flex; flex-direction: column; gap: var(--gap-m);
  padding-top: var(--gap-m); padding-bottom: var(--gap-s);
}
.standorte__kopf { display: flex; flex-direction: column; gap: var(--gap-m); }
.standorte__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-xs); }

.standort { display: flex; flex-direction: column; gap: 20px; }
.standort__bild { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.standort__ort { margin-top: -12px; }

.standort__person { display: flex; gap: 20px; align-items: center; }
.standort__portrait { flex: 0 0 80px; width: 80px; height: 80px; object-fit: cover; }
.standort > .textlink { width: fit-content; }

/* ============ FOOTER ============ */
.footer {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-block: var(--gap-m);
}
.footer__rechtliches { display: flex; gap: 8px; align-items: center; }

/* ============ MODALS ============ */
.modal {
  position: fixed; inset: 0; z-index: 50;
  display: none;
  align-items: center; justify-content: center;
  padding: 30px;
}
.modal[open], .modal.is-open { display: flex; }

.modal__scrim {
  position: absolute; inset: 0;
  background: rgba(28, 26, 21, .4);
  animation: dissolve .2s ease-out;
}
.modal--video .modal__scrim { background: rgba(28, 26, 21, .7); }

.modal__panel {
  position: relative;
  width: min(100%, 900px);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 60px;
  background: var(--page-bg);
  animation: dissolve .2s ease-out;
}
.modal--video .modal__panel {
  width: min(100%, 1216px);
  padding: 0;
  background: none;
  overflow: visible;
}

.modal__close {
  position: absolute; right: 24px; top: 24px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  transition: opacity .2s ease-out;
}
.modal__close:hover { opacity: var(--hover-opacity); }
.modal--video .modal__close { right: 0; top: -54px; color: var(--page-bg); }

/* Figma setzt zwischen allen Blöcken denselben Abstand — auch vor Überschriften. */
.modal__inhalt > * + * { margin-top: 24px; }

@keyframes dissolve { from { opacity: 0; } to { opacity: 1; } }

/* Video-Player */
.player { position: relative; background: #000; }
.player__video { width: 100%; aspect-ratio: 16 / 9; background: #000; }

.player__leiste {
  display: flex; align-items: center; gap: 15px;
  padding: 15px 20px;
  background: var(--page-bg);
}
.player__btn {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 44px;
  transition: opacity .2s ease-out;
}
.player__btn:hover { opacity: var(--hover-opacity); }

.player__spur {
  flex: 1 1 auto;
  appearance: none; -webkit-appearance: none;
  height: 7px; border-radius: var(--radius-voll);
  background: var(--linie-grey);
  cursor: pointer;
}
.player__spur::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--linie-black);
}
.player__spur::-moz-range-thumb {
  width: 15px; height: 15px; border: 0; border-radius: 50%;
  background: var(--linie-black);
}
.player__zeit { flex: 0 0 auto; font-variant-numeric: tabular-nums; }

body.modal-offen { overflow: hidden; }

/* ============ HERO-INTRO (~5,2 s, einmalig) ============ */
/* Startzustand nur setzen, wenn JS die Timeline auch fährt. */
.js .header,
.js .hero__h1,
.js .hero__cta,
.js .hero__textlink,
.js .ddd__video-el { opacity: 0; }

.js .ddd__d--1 { transform: translateX(-450px); }
.js .ddd__d--2 { transform: translateY(-710px); }
.js .ddd__d--3 { transform: translateX(450px); }

.js .ddd, .js .ddd__inner, .js .ddd__anim02, .js .ddd__d13 { height: 700px; }

.intro .header {
  animation: fade-in .201s cubic-bezier(.5, 0, .5, 1) .691s both;
}
.intro .ddd__d--1 { animation: d1-ein 1.5s cubic-bezier(.22, 1, .36, 1) .701s both; }
.intro .ddd__d--2 { animation: d2-ein 1.5s cubic-bezier(.22, 1, .36, 1) .701s both; }
.intro .ddd__d--3 { animation: d3-ein 1.5s cubic-bezier(.22, 1, .36, 1) .701s both; }

.intro .ddd__anim01 { animation: fade-out .05s cubic-bezier(.5, 0, .5, 1) 1.86s both; }

.intro .ddd,
.intro .ddd__inner { animation: buehne-schrumpfen 1.481s cubic-bezier(.22, 1, .36, 1) 2.196s both; }
.intro .ddd__anim02,
.intro .ddd__d13 { animation: buehne-schrumpfen 1.128s cubic-bezier(.22, 1, .36, 1) 2.196s both; }

.intro .ddd__video-el { animation: fade-in 1.201s cubic-bezier(.5, 0, .5, 1) 3.025s both; }
.intro .ddd__anim02 { animation: fade-out 1.201s cubic-bezier(.5, 0, .5, 1) 3.324s both; }

.intro .hero__h1 { animation: von-unten 1.427s cubic-bezier(.22, 1, .36, 1) 2.196s both; }
.intro .hero__cta { animation: von-unten-klein 1.397s cubic-bezier(.22, 1, .36, 1) 2.662s both; }
.intro .hero__textlink { animation: fade-in .701s cubic-bezier(.5, 0, .5, 1) 4.525s both; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes d1-ein { from { transform: translateX(-450px); } to { transform: none; } }
@keyframes d2-ein { from { transform: translateY(-710px); } to { transform: none; } }
@keyframes d3-ein { from { transform: translateX(450px); } to { transform: none; } }
@keyframes buehne-schrumpfen { from { height: 700px; } to { height: 467px; } }
@keyframes von-unten {
  from { opacity: 0; transform: translateY(100px); }
  to { opacity: 1; transform: none; }
}
@keyframes von-unten-klein {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: none; }
}

/* Endzustand, sobald die Timeline durch ist (und bei reduced motion sofort) */
.intro-fertig .ddd,
.intro-fertig .ddd__inner,
.intro-fertig .ddd__anim02,
.intro-fertig .ddd__d13 { height: 467px; }
.intro-fertig .header,
.intro-fertig .hero__h1,
.intro-fertig .hero__cta,
.intro-fertig .hero__textlink,
.intro-fertig .ddd__video-el { opacity: 1; }
.intro-fertig .ddd__d--1,
.intro-fertig .ddd__d--2,
.intro-fertig .ddd__d--3 { transform: none; }
.intro-fertig .ddd__anim01,
.intro-fertig .ddd__anim02 { opacity: 0; }

/* ============ RESPONSIVE ============ */

/* < 1440: Raster bleibt, Typo skaliert mit */
@media (max-width: 1439px) {
  .t-display { font-size: 8vw; }
  .t-h1, .t-h2 { font-size: 4.2vw; }
  .t-38-medium { font-size: 3vw; }
  .t-34, .t-34-medium { font-size: 2.6vw; }
  .t-24 { font-size: 1.9vw; }

  .ticker { height: 12vw; }
  .keyfacts__fix, .bauaufgaben__intro { width: 47%; }
  .testi { grid-template-columns: 47% 1fr; }
  .testimonials__inhalt > h2 { padding-left: calc(47% + 30px); }
  .marquee__kachel { font-size: 20px; }
}

/* Tablet: 3 Ds bleiben, zweispaltiges Raster wird schmaler */
@media (max-width: 1024px) {
  .ddd { height: 46vw; }
  .js .ddd, .js .ddd__inner, .js .ddd__anim02, .js .ddd__d13 { height: 46vw; }
  @keyframes buehne-schrumpfen { from { height: 46vw; } to { height: 31vw; } }
  .intro-fertig .ddd,
  .intro-fertig .ddd__inner,
  .intro-fertig .ddd__anim02,
  .intro-fertig .ddd__d13 { height: 31vw; }
  .ddd__video { height: 31vw; }

  .karte { min-height: 0; }
  .testimonials { padding-block: 120px; }
  .abbinder { height: 520px; }
  .standorte__grid { grid-template-columns: repeat(2, 1fr); gap: var(--gap-m) var(--gap-xs); }
  .film-button { left: 20px; bottom: 20px; }
}

/* Mobile */
@media (max-width: 720px) {
  :root { --page-pad: 20px; }

  .t-display { font-size: 68px; }
  .t-h1, .t-h2 { font-size: 32px; }
  .t-38-medium { font-size: 26px; }
  .t-34, .t-34-medium { font-size: 22px; }
  .t-24 { font-size: 18px; }

  .wordmark { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* Hero: nur ein D, nur D-Blue */
  .ddd, .js .ddd, .js .ddd__inner { height: 128vw; }
  @keyframes buehne-schrumpfen { from { height: 128vw; } to { height: 86vw; } }
  .intro-fertig .ddd,
  .intro-fertig .ddd__inner,
  .intro-fertig .ddd__anim02,
  .intro-fertig .ddd__d13 { height: 86vw; }
  .ddd__video { height: 86vw; }
  .ddd__anim01 { display: none; }
  .ddd__d--2, .ddd__d--3 { display: none; }
  .ddd__d13 { gap: 0; }
  .ddd__video, .ddd__d13 {
    -webkit-mask-image: url("../img/d/mask-mobile.svg");
    mask-image: url("../img/d/mask-mobile.svg");
  }
  .film-button { display: none; }   /* Touch: Tap aufs Video öffnet das Modal */
  .ddd__video { cursor: pointer; }

  .hero { padding-bottom: var(--gap-m); }
  .marquee-bar { padding-bottom: var(--gap-m); }
  .marquee { padding: 20px; }
  .marquee__kachel { font-size: 17px; }
  .pill { height: 26px; font-size: 15px; padding-inline: 12px; }

  .keyfacts { flex-direction: column; gap: var(--gap-s); padding-bottom: var(--gap-m); }
  .keyfacts__fix { width: 100%; }
  .ticker { height: 105px; }
  .ticker__track { padding-inline: 0; }

  .ss03 { flex-direction: column; gap: var(--gap-xs); }
  .karte { padding: 20px; }
  .karte:hover { background: var(--section-bg); }   /* kein Hover auf Touch */
  .akk__body > p { max-width: none; }

  .bauaufgaben { flex-direction: column; gap: var(--gap-m); padding-block: var(--gap-m); }
  .bauaufgaben__intro { width: 100%; }

  .hslide__titel, .hslide__daten { padding-left: 0; }
  .hslider__progress { display: none; }

  /* Reihenfolge Mobile: erst D-FORM-Parallax, dann Kundenstimmen */
  .testimonials { display: flex; flex-direction: column; padding-block: var(--gap-m); }
  .dform {
    position: relative; order: -1;
    width: 100%; height: 88vw;
    margin-bottom: var(--gap-m);
  }
  .dform__vektoren { width: 84%; height: 100%; }
  .dform__bild { top: 28%; width: 93%; height: 44%; }
  .testimonials__inhalt > h2 { padding-left: 0; }
  .testi { grid-template-columns: 1fr; gap: 0; }
  .testi > * { grid-column: 1; }
  .testi:first-child { padding-top: var(--gap-s); }

  .team { gap: var(--gap-s); padding-bottom: var(--gap-m); }
  /* 2,5 Karten sichtbar: 2,5 × Karte + 2 × Gap = sichtbare Spurbreite. */
  .kopf { flex: 0 0 31vw; width: 31vw; }
  .kopf__bild { width: 100%; height: auto; aspect-ratio: 1; }

  .abbinder { height: 420px; margin-bottom: var(--gap-s); }
  .abbinder__d::before, .abbinder__d::after { width: 620px; height: 654px; }
  .abbinder__d::before { left: calc(50% - 130px); top: 240px; }
  .abbinder__d::after { left: calc(50% - 700px); top: -300px; }
  .abbinder__statement { padding: var(--gap-s) var(--page-pad); min-height: 0; }

  .standorte { gap: var(--gap-s); }
  .standorte__kopf { gap: var(--gap-s); }
  .standorte__grid { grid-template-columns: 1fr; gap: var(--gap-m); }

  .footer { flex-direction: column; gap: var(--gap-s); text-align: center; }
  .wordmark { align-items: center; }

  /* Modals fullscreen */
  .modal { padding: 0; }
  .modal__panel {
    width: 100%; max-width: none; height: 100dvh; max-height: none;
    padding: 70px 20px 40px;
  }
  .modal--video .modal__panel {
    display: flex; align-items: center;
    height: 100dvh; padding: 70px 0 0;
  }
  .modal__close { position: sticky; float: right; right: 0; top: 0; }
  .modal--video .modal__close { position: absolute; right: 10px; top: 14px; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  .intro *, .intro { animation: none !important; }
  .marquee__track, .ticker__track, .hslider__track,
  .kslider__track, .kslider__griff { transition: none !important; }

  .hslide__img,
  .dform__vektoren, .dform__bild,
  .abbinder__d, .abbinder__statement { transform: none !important; }

  .modal__scrim, .modal__panel { animation: none; }
  * { transition-duration: .01ms !important; }
}