.services-reference {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    padding: var(--section-space-y) 0;
    color: #f7f5ef;
    background: var(--dark-section-background);
}

.services-reference::before {
    content: "";
    position: absolute;
    z-index: -2;
    top: 0;
    right: 0;
    width: 46%;
    height: 46%;
    background:
        linear-gradient(90deg, #07090a 0%, rgba(7, 9, 10, .62) 42%, rgba(7, 9, 10, .18) 100%),
        linear-gradient(0deg, rgba(7, 9, 10, .9), rgba(7, 9, 10, .12)),
        url("../../assets/bilder/leistungen/elektroinstallation/karten/leistung-elektroinstallation-01.png") center 44% / cover no-repeat;
    opacity: .7;
    mask-image: linear-gradient(180deg, #000 0%, #000 48%, transparent 100%);
}

.services-reference::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    opacity: .2;
    background-image:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, .2) 0 1px, transparent 1.4px),
        linear-gradient(115deg, transparent 0 52%, rgba(232, 164, 7, .06) 52.2%, transparent 52.5%);
    background-size: 13px 13px, 100% 100%;
}

.services-reference__inner {
    position: relative;
    z-index: 2;
    width: min(100%, 1400px);
    margin-inline: auto;
    padding-inline: var(--side-pad, 36px);
}

.services-reference__ornament {
    position: absolute;
    z-index: 1;
    top: -34px;
    right: max(3vw, calc((100vw - 1400px) / 2));
    width: 420px;
    height: 380px;
    color: #e8a407;
    opacity: .72;
    pointer-events: none;
}

.services-reference__ornament polyline {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    vector-effect: non-scaling-stroke;
}

.services-reference__heading {
    position: relative;
    max-width: 800px;
    margin-bottom: 28px;
}

.services-reference__eyebrow {
    margin: 0 0 10px;
    color: #f1b51c;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.services-reference__heading h2 {
    max-width: 790px;
    margin: 0 0 16px;
    color: #fff;
    font-family: "DM Sans", sans-serif;
    font-size: var(--type-section-title);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.9px;
    text-transform: none;
    text-wrap: balance;
}

.services-reference__signal {
    color: #f1b51c;
}

.services-reference__lead {
    max-width: 650px;
    margin: 0;
    color: #d6d8d4;
    font-family: "DM Sans", sans-serif;
    font-size: var(--type-section-copy);
    font-weight: 480;
    line-height: 1.48;
}

.services-reference__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.services-reference__card {
    --services-card-overlap: 28px;
    --services-card-content-inset: 22px;
    min-width: 0;
    margin: 0;
    background: #111516;
    border: 0;
    border-radius: var(--radius-ui);
    box-shadow: 0 7px 18px rgba(0, 0, 0, .2);
    overflow: hidden;
}

.services-reference__card-link {
    display: grid;
    grid-template-columns: 50% minmax(0, 1fr);
    min-height: 220px;
    height: 100%;
    color: inherit;
    background: #111516;
    transition: background-color .28s ease;
}

.services-reference__media {
    position: relative;
    z-index: 0;
    width: calc(100% + var(--services-card-content-inset));
    min-width: 0;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #111;
}

.services-reference__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 72%, rgba(7, 9, 10, .42));
    pointer-events: none;
}

.services-reference__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s cubic-bezier(.2, .75, .2, 1), filter .45s ease;
}

.services-reference__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 16px 18px 13px 46px;
    background: transparent;
}

.services-reference__body::before {
    position: absolute;
    z-index: 0;
    inset: 0 0 0 calc(0px - var(--services-card-overlap));
    content: "";
    background: #111516;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 9% 100%, 9% 80px, 7% 76px, 2% 70px, 0 64px);
    clip-path: shape(from 0 0,hline to 100%,vline to 100%,hline to 9%,vline to 80px,curve to 0 64px with 9% 74px/0 74px,close);
    pointer-events: none;
    transition: background-color .28s ease;
}

.services-reference__title-row {
    display: flex;
    align-items: center;
    min-height: 48px;
    margin-bottom: 6px;
}

.services-reference__icon {
    position: absolute;
    z-index: 2;
    top: 20px;
    left: calc(0px - var(--services-card-overlap) + 17px);
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: #f2b000;
    border: 1px solid #f2b000;
    clip-path: polygon(50% 0, 94% 24%, 94% 75%, 50% 100%, 6% 75%, 6% 24%);
    background: #f2b000;
    transition: color .28s ease, border-color .28s ease, background-color .28s ease;
}

.services-reference__icon::before {
    position: absolute;
    inset: 1.5px;
    content: "";
    background: #111516;
    clip-path: polygon(50% 0, 94% 24%, 94% 75%, 50% 100%, 6% 75%, 6% 24%);
    transition: background-color .28s ease;
}

.services-reference__icon-core {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    background: #f2b000;
    clip-path: polygon(50% 0, 94% 24%, 94% 75%, 50% 100%, 6% 75%, 6% 24%);
    transition: background-color .28s ease;
}

.services-reference__icon-core::before {
    position: absolute;
    inset: 1.5px;
    content: "";
    background: #111516;
    clip-path: polygon(50% 0, 94% 24%, 94% 75%, 50% 100%, 6% 75%, 6% 24%);
    transition: background-color .28s ease;
}

.services-reference__icon .icon {
    position: relative;
    z-index: 2;
    width: 19px;
    height: 19px;
}

.services-reference__body h3 {
    position: relative;
    z-index: 1;
    min-width: 0;
    margin: 0;
    color: #f7f7f3;
    font-family: "DM Sans", sans-serif;
    font-size: 19px;
    font-weight: 740;
    line-height: 1.17;
    letter-spacing: -.25px;
    text-transform: none;
    transition: color .28s ease;
}

.services-reference__body > p {
    position: relative;
    z-index: 1;
    margin: 0 0 10px;
    color: #d6d8d4;
    font-family: "DM Sans", sans-serif;
    font-size: 17px;
    font-weight: 450;
    line-height: 1.43;
    transition: color .28s ease;
}

.services-reference__action {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 6px;
    width: max-content;
    min-height: 26px;
    margin: auto auto 0;
    padding: 2px 6px;
    color: #f2b000;
    border: 0;
    border-radius: var(--radius-ui);
    background: transparent;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 680;
    line-height: 1.2;
    overflow: hidden;
    transition: color .28s ease;
}

.services-reference__action::before,
.services-reference__cta-button::before {
    content: "";
    position: absolute;
    inset: -70% auto -70% -45%;
    width: 34%;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-250%) skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
}

.services-reference__action .icon,
.services-reference__cta-button .icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    transition: transform .25s ease;
}

.services-reference__action .icon {
    width: 12px;
    height: 12px;
    flex-basis: 12px;
    color: #f2b000;
    transition: color .28s ease, transform .25s ease;
}

.services-reference__card-link:hover,
.services-reference__card-link:focus-visible,
.services-reference__card-link:hover .services-reference__body::before,
.services-reference__card-link:focus-visible .services-reference__body::before {
    background-color: #ffc21c;
}

.services-reference__card-link:hover .services-reference__body h3,
.services-reference__card-link:focus-visible .services-reference__body h3,
.services-reference__card-link:hover .services-reference__body > p,
.services-reference__card-link:focus-visible .services-reference__body > p,
.services-reference__card-link:hover .services-reference__action,
.services-reference__card-link:focus-visible .services-reference__action,
.services-reference__card-link:hover .services-reference__action .icon,
.services-reference__card-link:focus-visible .services-reference__action .icon {
    color: #111416;
}

.services-reference__card-link:hover .services-reference__icon,
.services-reference__card-link:focus-visible .services-reference__icon {
    color: #111416;
    border-color: #111416;
    background-color: #111416;
}

.services-reference__card-link:hover .services-reference__icon::before,
.services-reference__card-link:focus-visible .services-reference__icon::before,
.services-reference__card-link:hover .services-reference__icon-core::before,
.services-reference__card-link:focus-visible .services-reference__icon-core::before {
    background-color: #ffc21c;
}

.services-reference__card-link:hover .services-reference__icon-core,
.services-reference__card-link:focus-visible .services-reference__icon-core {
    background-color: #111416;
}

.services-reference__card-link:hover .services-reference__image,
.services-reference__card-link:focus-visible .services-reference__image {
    transform: scale(1.045);
    filter: saturate(1.08) contrast(1.04);
}

.services-reference__card-link:hover .services-reference__action::before,
.services-reference__card-link:focus-visible .services-reference__action::before,
.services-reference__cta-button:hover::before,
.services-reference__cta-button:focus-visible::before {
    animation: services-reference-light-sweep 1.2s ease-out both;
}

.services-reference__card-link:hover .services-reference__action .icon,
.services-reference__card-link:focus-visible .services-reference__action .icon,
.services-reference__cta-button:hover .icon,
.services-reference__cta-button:focus-visible .icon {
    transform: translateX(4px);
}

.services-reference__card-link:focus-visible {
    outline: 3px solid #111416;
    outline-offset: -4px;
}

.services-reference__cta {
    position: relative;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 320px;
    align-items: center;
    gap: 0;
    min-height: var(--section-cta-height);
    margin-top: 28px;
    padding: 0;
    overflow: hidden;
    background: linear-gradient(105deg, #121617 0%, #080b0c 100%);
    border: 0;
    border-radius: var(--radius-ui);
    clip-path: none;
}

.services-reference__cta::after { display: none; }

.services-reference__cta-mark {
    position: relative;
    align-self: stretch;
    display: grid;
    place-items: center;
    min-width: 0;
    overflow: hidden;
    color: #fff;
}

.services-reference__cta-mark::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 128px;
    background: linear-gradient(135deg, #ffc21f, #e4a000);
    clip-path: polygon(0 0, 100% 0, 48% 100%, 0 100%);
}

.services-reference__cta-mark::after {
    content: "";
    position: absolute;
    top: -43px;
    right: 26px;
    width: 2px;
    height: 190px;
    background: #e4a000;
    transform: rotate(31deg);
    transform-origin: center;
}

.services-reference__cta-mark .icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 64px;
    width: 32px;
    height: 32px;
    transform: translate(-50%, -50%);
    color: #111516;
}

.services-reference__cta-copy { padding: 18px 34px; }

.services-reference__cta-copy strong {
    display: block;
    margin-bottom: 5px;
    color: #f2f2ed;
    font-family: "DM Sans", sans-serif;
    font-size: 18px;
    font-weight: 760;
    line-height: 1.25;
}

.services-reference__cta-copy p {
    margin: 0;
    color: #d9dbd7;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    line-height: 1.4;
}

.services-reference__cta-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 54px;
    margin: 16px 18px 16px 0;
    padding: 10px 22px 10px 28px;
    color: #101313;
    background: linear-gradient(135deg, #ffc21f 0%, #e4a000 100%);
    border: 0;
    border-radius: var(--radius-ui);
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 780;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
}

@keyframes services-reference-light-sweep {
    0% { opacity: 0; transform: translateX(-250%) skewX(-18deg); }
    18% { opacity: .72; }
    100% { opacity: 0; transform: translateX(720%) skewX(-18deg); }
}

@media (max-width: 1320px) {
    .services-reference__card-link { grid-template-columns: 50% minmax(0, 1fr); min-height: 232px; }
    .services-reference__body { padding: 15px 16px 13px 44px; }
    .services-reference__title-row { min-height: 48px; }
    .services-reference__icon { width: 40px; height: 40px; }
    .services-reference__icon { top: 19px; left: calc(0px - var(--services-card-overlap) + 17px); }
    .services-reference__icon .icon { width: 19px; height: 19px; }
    .services-reference__body h3 { font-size: 19px; }
    .services-reference__body > p { font-size: 17px; }
}

@media (max-width: 1100px) {
    .services-reference { padding: var(--section-space-y) 0; }
    .services-reference::before { width: 58%; height: 34%; }
    .services-reference__ornament { right: -80px; width: 340px; height: 310px; opacity: .42; }
    .services-reference__heading h2 { font-size: var(--type-section-title); }
    .services-reference__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .services-reference__card-link { grid-template-columns: 50% minmax(0, 1fr); min-height: 228px; }
    .services-reference__cta { grid-template-columns: 205px minmax(0, 1fr) 285px; }
}

@media (max-width: 760px) {
    .services-reference { padding: var(--section-space-y) 0; }
    .services-reference::before { display: none; }
    .services-reference__ornament { top: -28px; right: -138px; opacity: .23; }
    .services-reference__heading { margin-inline: auto; margin-bottom: 34px; text-align: center; }
    .services-reference__eyebrow { font-size: 15px; }
    .services-reference__heading h2 { font-size: var(--type-section-title); line-height: 1.12; text-align: center; }
    .services-reference__signal { margin-inline: auto; }
    .services-reference__lead { margin-inline: auto; text-align: center; }
    .services-reference__grid { grid-template-columns: 1fr; gap: 16px; }
    .services-reference__card-link { grid-template-columns: 50% minmax(0, 1fr); min-height: 230px; }
    .services-reference__cta { grid-template-columns: 82px minmax(0, 1fr); padding: 0; }
    .services-reference__cta-mark { grid-column: 1; grid-row: 1; }
    .services-reference__cta-mark::before { width: 47px; }
    .services-reference__cta-mark::after { top: -28px; right: 2px; height: 150px; }
    .services-reference__cta-mark .icon { left: calc(50% + 16px); width: 30px; height: 30px; }
    .services-reference__cta-copy { grid-column: 2; grid-row: 1; padding: 18px; text-align: left; }
    .services-reference__cta-button { grid-column: 1 / -1; grid-row: 2; width: calc(100% - 28px); min-height: 52px; margin: 0 14px 14px; }
}

@media (max-width: 520px) {
    .services-reference__inner { padding-inline: 15px; }
    .services-reference__heading h2 { font-size: var(--type-section-title); }
    .services-reference__lead { font-size: var(--type-section-copy); line-height: 1.5; }
    .services-reference__card-link { display: flex; flex-direction: column; min-height: 0; }
    .services-reference__media { width: 100%; aspect-ratio: 16 / 9; height: auto; }
    .services-reference__media::after { background: linear-gradient(0deg, rgba(7, 9, 10, .42), transparent 48%); }
    .services-reference__body { padding: 18px; }
    .services-reference__body::before { display: none; }
    .services-reference__title-row { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; min-height: 54px; margin-bottom: 14px; }
    .services-reference__icon { position: relative; top: auto; left: auto; width: 54px; height: 54px; }
    .services-reference__icon .icon { width: 29px; height: 29px; }
    .services-reference__body h3 { font-size: 19px; }
    .services-reference__body > p { margin-bottom: 16px; font-size: 17px; }
    .services-reference__action { min-height: 36px; font-size: 14px; }
    .services-reference__cta { display: grid; text-align: left; }
    .services-reference__cta-copy strong { font-size: 18px; }
    .services-reference__cta-copy p { font-size: 16px; text-align: left; }
}