@keyframes referenzen {
    0% {
        box-shadow: 0 0.2rem 0.4rem rgba(69, 92, 106, 0.15);
        opacity: 0;
        transform: scale(1.05) translateY(-0.5rem);
    }

    100% {
        box-shadow: 0 0 0.2rem rgba(69, 92, 106, 0.15);
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.headline {
    margin-bottom: 0;
    overflow: visible;
}

.headline .item-header {
    background: none;
    border-top: 0;
    border-bottom: 0;
    padding: 0;
}

.headline .item-header h1 {
    color: #fff;
    font-weight: 600;
    font-style: italic;
    padding: 0;
    margin: 0;
}

.headline .item-header h2 {
    color: #fff;
    font-size: 2.75rem;
    font-weight: 400;
    padding: 0;
    margin: 0;
}

.headline .container {
    min-height: 0;
}

.service {
    padding: 3rem 0;
}

.service .header {
    display: block;
    margin-bottom: 1.5rem;
}

.service .element-header:first-of-type {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.service .footer {
    padding-bottom: 0;
}

.service .teaser-text {
    background: #039db4;
    border-radius: 0.25rem;
    color: #fff;
    display: inline-block;
    font-size: 0.8rem;
    margin: 0 0 0 0.5rem;
    padding: 0.25rem 0.5rem;
}

.service .teaser-text:first-of-type {
    margin: 0;
}

.service .teaser-text[class*=typo3] {
    background: #ff8700;
}

.service .teaser-text[class*=magento] {
    background: #ed5d20;
}

.service .teaser-text[class*=wordpress] {
    background: #0073aa;
}

.service .teaser-text p {
    margin: 0;
}

.service .news-related-wrap {
    border-top-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity));
    padding-top: 1rem;
}

.referenzen-list {
    padding-top: 1rem;
    padding-bottom: 2rem;
}

.referenzen-list .article:nth-child(1) a {
    animation-delay: 0ms;
}

.referenzen-list .article:nth-child(2) a {
    animation-delay: 100ms;
}

.referenzen-list .article:nth-child(3) a {
    animation-delay: 200ms;
}

.referenzen-list .article:nth-child(4) a {
    animation-delay: 300ms;
}

.referenzen-list .article:nth-child(5) a {
    animation-delay: 400ms;
}

.referenzen-list .article:nth-child(6) a {
    animation-delay: 500ms;
}

.referenzen-list .article:nth-child(7) a {
    animation-delay: 600ms;
}

.referenzen-list .article:nth-child(8) a {
    animation-delay: 700ms;
}

.referenzen-list .article:nth-child(9) a {
    animation-delay: 800ms;
}

.referenzen-list .article:nth-child(10) a {
    animation-delay: 900ms;
}

.referenzen-list .article:nth-child(11) a {
    animation-delay: 1000ms;
}

.referenzen-list .article:nth-child(12) a {
    animation-delay: 1100ms;
}

.referenzen-list .article:nth-child(13) a {
    animation-delay: 1200ms;
}

.referenzen-list .article:nth-child(14) a {
    animation-delay: 1300ms;
}

.referenzen-list .article:nth-child(15) a {
    animation-delay: 1400ms;
}

.referenzen-list .article:nth-child(16) a {
    animation-delay: 1500ms;
}

.referenzen-list .article:nth-child(17) a {
    animation-delay: 1600ms;
}

.referenzen-list .article:nth-child(18) a {
    animation-delay: 1700ms;
}

.referenzen-list .article:nth-child(19) a {
    animation-delay: 1800ms;
}

.referenzen-list .article:nth-child(20) a {
    animation-delay: 1900ms;
}

.referenzen-list .article:nth-child(21) a {
    animation-delay: 2000ms;
}

.referenzen-list .article:nth-child(22) a {
    animation-delay: 2100ms;
}

.referenzen-list .article:nth-child(23) a {
    animation-delay: 2200ms;
}

.referenzen-list .article:nth-child(24) a {
    animation-delay: 2300ms;
}

.referenzen-list .article:nth-child(25) a {
    animation-delay: 2400ms;
}

.referenzen-list .article:nth-child(26) a {
    animation-delay: 2500ms;
}

.referenzen-list .article:nth-child(27) a {
    animation-delay: 2600ms;
}

.referenzen-list .article:nth-child(28) a {
    animation-delay: 2700ms;
}

.referenzen-list .article:nth-child(29) a {
    animation-delay: 2800ms;
}

.referenzen-list .article:nth-child(30) a {
    animation-delay: 2900ms;
}

.referenzen-list .article:nth-child(31) a {
    animation-delay: 3000ms;
}

.referenzen-list .article:nth-child(32) a {
    animation-delay: 3100ms;
}

.referenzen-list .article:nth-child(33) a {
    animation-delay: 3200ms;
}

.referenzen-list .article:nth-child(34) a {
    animation-delay: 3300ms;
}

.referenzen-list .article:nth-child(35) a {
    animation-delay: 3400ms;
}

.referenzen-list .article:nth-child(36) a {
    animation-delay: 3500ms;
}

.referenzen-list .article:nth-child(37) a {
    animation-delay: 3600ms;
}

.referenzen-list .article:nth-child(38) a {
    animation-delay: 3700ms;
}

.referenzen-list .article:nth-child(39) a {
    animation-delay: 3800ms;
}

.referenzen-list .article:nth-child(40) a {
    animation-delay: 3900ms;
}

.referenzen-list .article:nth-child(41) a {
    animation-delay: 4000ms;
}

.referenzen-list .article:nth-child(42) a {
    animation-delay: 4100ms;
}

.referenzen-list .article:nth-child(43) a {
    animation-delay: 4200ms;
}

.referenzen-list .article:nth-child(44) a {
    animation-delay: 4300ms;
}

.referenzen-list .article:nth-child(45) a {
    animation-delay: 4400ms;
}

.referenzen-list .article:nth-child(46) a {
    animation-delay: 4500ms;
}

.referenzen-list .article:nth-child(47) a {
    animation-delay: 4600ms;
}

.referenzen-list .article:nth-child(48) a {
    animation-delay: 4700ms;
}

.referenzen-list .article:nth-child(49) a {
    animation-delay: 4800ms;
}

.referenzen-list .article:nth-child(50) a {
    animation-delay: 4900ms;
}

.referenzen-list .article:nth-child(51) a {
    animation-delay: 5000ms;
}

.referenzen-list .article:nth-child(52) a {
    animation-delay: 5100ms;
}

.referenzen-list .article:nth-child(53) a {
    animation-delay: 5200ms;
}

.referenzen-list .article:nth-child(54) a {
    animation-delay: 5300ms;
}

.referenzen-list .article:nth-child(55) a {
    animation-delay: 5400ms;
}

.referenzen-list .article:nth-child(56) a {
    animation-delay: 5500ms;
}

.referenzen-list .article:nth-child(57) a {
    animation-delay: 5600ms;
}

.referenzen-list .article:nth-child(58) a {
    animation-delay: 5700ms;
}

.referenzen-list .article:nth-child(59) a {
    animation-delay: 5800ms;
}

.referenzen-list .article:nth-child(60) a {
    animation-delay: 5900ms;
}

.referenzen-list .article:nth-child(61) a {
    animation-delay: 6000ms;
}

.referenzen-list .article:nth-child(62) a {
    animation-delay: 6100ms;
}

.referenzen-list .article:nth-child(63) a {
    animation-delay: 6200ms;
}

.referenzen-list .article:nth-child(64) a {
    animation-delay: 6300ms;
}

.referenzen-list .article:nth-child(65) a {
    animation-delay: 6400ms;
}

.referenzen-list .article:nth-child(66) a {
    animation-delay: 6500ms;
}

.referenzen-list .article:nth-child(67) a {
    animation-delay: 6600ms;
}

.referenzen-list .article:nth-child(68) a {
    animation-delay: 6700ms;
}

.referenzen-list .article:nth-child(69) a {
    animation-delay: 6800ms;
}

.referenzen-list .article:nth-child(70) a {
    animation-delay: 6900ms;
}

.referenzen-list .article:nth-child(71) a {
    animation-delay: 7000ms;
}

.referenzen-list .article:nth-child(72) a {
    animation-delay: 7100ms;
}

.referenzen-list .article:nth-child(73) a {
    animation-delay: 7200ms;
}

.referenzen-list .article:nth-child(74) a {
    animation-delay: 7300ms;
}

.referenzen-list .article:nth-child(75) a {
    animation-delay: 7400ms;
}

.referenzen-list .article:nth-child(76) a {
    animation-delay: 7500ms;
}

.referenzen-list .article:nth-child(77) a {
    animation-delay: 7600ms;
}

.referenzen-list .article:nth-child(78) a {
    animation-delay: 7700ms;
}

.referenzen-list .article:nth-child(79) a {
    animation-delay: 7800ms;
}

.referenzen-list .article:nth-child(80) a {
    animation-delay: 7900ms;
}

.referenzen-list .article:nth-child(81) a {
    animation-delay: 8000ms;
}

.referenzen-list .article:nth-child(82) a {
    animation-delay: 8100ms;
}

.referenzen-list .article:nth-child(83) a {
    animation-delay: 8200ms;
}

.referenzen-list .article:nth-child(84) a {
    animation-delay: 8300ms;
}

.referenzen-list .article:nth-child(85) a {
    animation-delay: 8400ms;
}

.referenzen-list .article:nth-child(86) a {
    animation-delay: 8500ms;
}

.referenzen-list .article:nth-child(87) a {
    animation-delay: 8600ms;
}

.referenzen-list .article:nth-child(88) a {
    animation-delay: 8700ms;
}

.referenzen-list .article:nth-child(89) a {
    animation-delay: 8800ms;
}

.referenzen-list .article:nth-child(90) a {
    animation-delay: 8900ms;
}

.referenzen-list .article:nth-child(91) a {
    animation-delay: 9000ms;
}

.referenzen-list .article:nth-child(92) a {
    animation-delay: 9100ms;
}

.referenzen-list .article:nth-child(93) a {
    animation-delay: 9200ms;
}

.referenzen-list .article:nth-child(94) a {
    animation-delay: 9300ms;
}

.referenzen-list .article:nth-child(95) a {
    animation-delay: 9400ms;
}

.referenzen-list .article:nth-child(96) a {
    animation-delay: 9500ms;
}

.referenzen-list .article:nth-child(97) a {
    animation-delay: 9600ms;
}

.referenzen-list .article:nth-child(98) a {
    animation-delay: 9700ms;
}

.referenzen-list .article:nth-child(99) a {
    animation-delay: 9800ms;
}

.referenzen-list .article:nth-child(100) a {
    animation-delay: 9900ms;
}

.referenzen-list img {
    aspect-ratio: 3/2;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

a.item-content {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
    box-shadow: 0 1px 4px rgba(69, 92, 106, 0.12), 0 3px 12px rgba(69, 92, 106, 0.07);
    color: #455c6a;
    display: flex;
    flex-direction: column;
    min-height: 11rem;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    transform: scale(1) translateY(0);
    transition: box-shadow 250ms, transform 250ms;
}

a.item-content.init {
    animation: referenzen 500ms ease-in-out forwards;
    box-shadow: 0 1px 4px rgba(69, 92, 106, 0.12), 0 3px 12px rgba(69, 92, 106, 0.07);
    opacity: 0;
    transform: scale(1.05);
}

a.item-content.ready:focus,
a.item-content.ready:hover {
    animation: none;
    box-shadow: 0 1px 4px rgba(69, 92, 106, 0.12), 0 3px 12px rgba(69, 92, 106, 0.07);
    transform: scale(1.05);
}

.item-header {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity));
    background: #fff;
    border-top: 2px solid #039db4;
    padding: 1rem 0.75rem 0.8rem;
}

.item-header h3 {
    font-size: 1.1rem;
    margin: 0 0 0.15rem;
    padding: 0;
}

.item-text p {
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}

.news-img-wrap {
    position: relative;
}

.kundenwrapper {
    display: none;
}

.news-related-links {
    align-items: baseline;
    display: flex;
}

.news-related-links h4 {
    margin: 0 0.5rem 0 0;
}

.news-related-links ul {
    font-weight: 600;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.news-backlink-wrap a {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity));
}

.referenz-art {
    border-bottom-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity));
    margin-bottom: 1rem;
    padding: 2rem 0 1.5rem;
}

.referenz-art ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 -0.25rem;
}

.referenz-art li {
    flex: 0 1 20%;
    padding: 0 0.25rem;
}

.referenz-art li a {
    border-radius: 0.5rem;
    box-shadow: 0 1px 4px rgba(69, 92, 106, 0.12), 0 3px 12px rgba(69, 92, 106, 0.07);
    display: block;
    font-weight: normal;
    margin-bottom: 0.5rem;
    min-width: 3.75rem;
    padding: 0.75rem 0;
    text-align: center;
    text-decoration: none;
    transition: background 300ms, border-color 300ms;
    white-space: nowrap;
}

.referenz-art li a>span {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    padding: 0 1rem;
}

.referenz-art li a svg {
    fill: #fff;
    height: 1.25rem;
    margin-right: 0.25rem;
    width: 1.25rem;
}

#pa1 {
    background: linear-gradient(to right, var(--color-gray-700), var(--color-gray-600));
    border-color: var(--color-gray-700);
    color: #fff;
}

#pa1:focus,
#pa1:hover,
.aktiv #pa1 {
    background: linear-gradient(to right, var(--color-gray-800), var(--color-gray-700));
    border-color: var(--color-gray-800);
}

#pa2 {
    background: linear-gradient(to right, var(--color-typo3-700), var(--color-typo3-600));
    border-color: var(--color-typo3-700);
    color: #fff;
}

#pa2:focus,
#pa2:hover,
.aktiv #pa2 {
    background: linear-gradient(to right, var(--color-typo3-800), var(--color-typo3-700));
    border-color: var(--color-typo3-800);
}

#pa3 {
    background: linear-gradient(to right, #de4618, #ed5d20);
    border-color: #de4618;
    color: #fff;
}

#pa3:focus,
#pa3:hover,
.aktiv #pa3 {
    background: linear-gradient(to right, #b83316, #de4618);
    border-color: #b83316;
}

#pa4 {
    background: linear-gradient(to right, #0a7f94, #039db4);
    border-color: #0a7f94;
    color: #fff;
}

#pa4:focus,
#pa4:hover,
.aktiv #pa4 {
    background: linear-gradient(to right, #126678, #0a7f94);
    border-color: #126678;
}

#pa5 {
    background: linear-gradient(to right, #055e87, #0073aa);
    border-color: #055e87;
    color: #fff;
}

#pa5:focus,
#pa5:hover,
.aktiv #pa5 {
    background: linear-gradient(to right, #0a4d70, #055e87);
    border-color: #0a4d70;
}

@media (max-width: 60rem) {

    .contentwrapper:before,
    .contentwrapper:after {
        height: 6rem;
    }

    .contentwrapper:after {
        box-shadow: none;
    }

    .inhalt {
        padding: 3rem 0 0;
    }
}