#colophon.fx-footer {
position: relative;
overflow: visible;
clear: both;
margin-top: 96px;
padding: 0;
background: #15181B;
color: #B4BAC1;
font-size: 15px;
line-height: 1.6;
}
#colophon.fx-footer * { box-sizing: border-box; } #colophon.fx-footer::before,
#colophon.fx-footer::after {
content: "";
position: absolute;
left: 0;
right: 0;
pointer-events: none;
}
#colophon.fx-footer::before {
top: -86px;
height: 87px;
background: linear-gradient(to bottom right, rgba(200, 16, 46, 0) 49.6%, #C8102E 50%);
}
#colophon.fx-footer::after {
top: -66px;
height: 67px;
background: linear-gradient(to bottom right, rgba(21, 24, 27, 0) 49.6%, #15181B 50%);
}
#colophon .fx-wrap {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
} #colophon .fx-main {
position: relative;
overflow: hidden;
padding: 72px 0 56px;
}
#colophon .fx-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr);
grid-column-gap: 48px;
grid-row-gap: 44px;
align-items: start;
} #colophon a.fx-badge {
position: relative;
z-index: 0;
display: block;
max-width: 240px;
margin: 34px 0 0;
padding: 40px 22px 18px;
border-radius: 14px;
background: #fff;
color: #23272B;
text-align: center;
text-decoration: none;
box-shadow: 0 22px 40px -18px rgba(0, 0, 0, .8);
-webkit-transform: rotate(-4deg);
transform: rotate(-4deg);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition: -webkit-transform .6s cubic-bezier(.34, 1.56, .64, 1);
transition: transform .6s cubic-bezier(.34, 1.56, .64, 1);
} #colophon a.fx-badge::before {
content: "";
position: absolute;
top: 15px;
left: 50%;
width: 46px;
height: 9px;
margin-left: -23px;
border-radius: 5px;
background: #15181B;
box-shadow: inset 0 2px 3px rgba(0, 0, 0, .7);
} #colophon a.fx-badge::after {
content: "";
position: absolute;
top: -40px;
left: 50%;
width: 16px;
height: 42px;
margin-left: -8px;
border-radius: 2px;
background: linear-gradient(to right, #8E0B20 0%, #C8102E 30%, #C8102E 70%, #8E0B20 100%);
z-index: -1;
}
#colophon .fx-badge__label {
display: block;
margin-bottom: 10px;
color: #C8102E;
font-size: 11px;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
}
#colophon .fx-badge img {
display: block;
width: 100%;
max-width: 190px;
height: auto;
margin: 0 auto;
}
#colophon .fx-badge__ort {
display: block;
margin-top: 12px;
padding-top: 12px;
border-top: 2px dashed #E2E4E7;
color: #23272B;
font-size: 13px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
} #colophon .fx-badge__code {
display: block;
height: 22px;
margin: 12px 18px 0;
background: repeating-linear-gradient(90deg, #23272B 0, #23272B 2px, #fff 2px, #fff 4px, #23272B 4px, #23272B 5px, #fff 5px, #fff 8px, #23272B 8px, #23272B 11px, #fff 11px, #fff 13px);
opacity: .85;
} #colophon .fx-col__titel {
margin: 0 0 20px;
padding: 0;
color: #fff;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
letter-spacing: .16em;
text-transform: uppercase;
}
#colophon .fx-col__titel::after {
content: "";
display: block;
width: 30px;
height: 3px;
margin-top: 12px;
background: #C8102E;
}
#colophon .fx-col__titel--weiter { margin-top: 34px; }
#colophon .fx-col__nr {
display: inline-block;
margin-right: 10px;
color: #FF5A6E;
} #colophon ul.fx-links {
list-style: none;
margin: 0;
padding: 0;
}
#colophon ul.fx-links li {
margin: 0 0 10px;
padding: 0;
float: none;
}
#colophon ul.fx-links a {
position: relative;
display: inline-block;
padding: 2px 0;
color: #B4BAC1;
font-size: 15px;
font-weight: 400;
line-height: 1.45;
text-decoration: none;
-webkit-transition: color .2s, padding-left .25s;
transition: color .2s, padding-left .25s;
}
#colophon ul.fx-links a::before {
content: "";
position: absolute;
left: 0;
top: .8em;
width: 0;
height: 2px;
background: #C8102E;
-webkit-transition: width .25s;
transition: width .25s;
}
#colophon ul.fx-links a:focus,
#colophon ul.fx-links a[aria-current="page"] {
color: #fff;
padding-left: 18px;
}
#colophon ul.fx-links a:focus::before,
#colophon ul.fx-links a[aria-current="page"]::before { width: 10px; } #colophon .fx-kontakt__firma {
margin: 0 0 16px;
color: #fff;
font-size: 16px;
font-weight: 700;
line-height: 1.4;
}
#colophon ul.fx-kontakt {
list-style: none;
margin: 0 0 18px;
padding: 0;
}
#colophon ul.fx-kontakt li {
position: relative;
margin: 0 0 12px;
padding: 0 0 0 30px;
color: #B4BAC1;
font-size: 15px;
line-height: 1.5;
}
#colophon ul.fx-kontakt li i {
position: absolute;
left: 0;
top: 4px;
width: 18px;
color: #FF5A6E;
font-size: 15px;
text-align: center;
}
#colophon ul.fx-kontakt a {
color: #fff;
font-size: 15px;
font-weight: 400;
line-height: 1.5;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, .25);
-webkit-transition: border-color .2s, color .2s;
transition: border-color .2s, color .2s;
}
#colophon a.fx-pfeil-link {
display: inline-block;
color: #fff;
font-size: 15px;
font-weight: 700;
line-height: 1.4;
text-decoration: none;
}
#colophon a.fx-pfeil-link span {
display: inline-block;
margin-left: 6px;
color: #FF5A6E;
-webkit-transition: -webkit-transform .25s;
transition: transform .25s;
}
#colophon .fx-social { margin: 22px -8px 0 0; }
#colophon .fx-social a {
display: inline-block;
width: 42px;
height: 42px;
margin: 0 8px 8px 0;
border: 1px solid rgba(255, 255, 255, .2);
border-radius: 50%;
color: #fff;
font-size: 16px;
line-height: 40px;
text-align: center;
text-decoration: none;
-webkit-transition: background-color .25s, border-color .25s, -webkit-transform .25s;
transition: background-color .25s, border-color .25s, transform .25s;
}
#colophon .fx-social a i { line-height: 40px; }
#colophon .fx-social a:focus { background: #C8102E; border-color: #C8102E; } #colophon img.fx-watermark {
position: absolute;
z-index: 0;
right: -40px;
bottom: -60px;
width: 460px;
max-width: none;
height: auto;
opacity: .07;
-webkit-filter: grayscale(1) brightness(3);
filter: grayscale(1) brightness(3);
pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
@media (max-width: 680px) {
#colophon img.fx-watermark { width: 280px; right: -30px; bottom: -36px; }
} #colophon .fx-bottom {
position: relative;
z-index: 2;
border-top: 1px solid rgba(255, 255, 255, .09);
background: #101315;
padding: 20px 0 22px;
padding-bottom: calc(22px + env(safe-area-inset-bottom));
}
#colophon .fx-bottom__inner {
display: -webkit-box;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
#colophon .fx-bottom p,
#colophon .fx-bottom li {
margin: 4px 0;
color: #8A9097;
font-size: 13px;
font-weight: 400;
line-height: 1.5;
}
#colophon .fx-bottom p.fx-copy { margin-right: 24px; }
#colophon ul.fx-legal {
list-style: none;
margin: 0 24px 0 0;
padding: 0;
}
#colophon ul.fx-legal li {
display: inline-block;
margin: 4px 18px 4px 0;
padding: 0;
float: none;
}
#colophon .fx-bottom a {
color: #C9CDD2;
font-size: 13px;
font-weight: 400;
line-height: 1.5;
text-decoration: none;
-webkit-transition: color .2s;
transition: color .2s;
}
#colophon .fx-bottom a:focus { color: #fff; text-decoration: underline; }
#colophon .fx-bottom .fx-credit a { color: #fff; font-weight: 700; } @media (min-width: 681px) {
#colophon .fx-bottom__inner { padding-right: 84px; }
} #colophon .fx-bottom button.fx-cookie-knopf {
position: static;
display: inline;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
color: #C9CDD2;
font: inherit;
font-size: 13px;
line-height: 1.5;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
#colophon .fx-bottom button.fx-cookie-knopf:focus { color: #fff; text-decoration: underline; }
@media (hover: hover) {
#colophon .fx-bottom button.fx-cookie-knopf:hover { color: #fff; background: none; }
} a#scroll-up {
right: 22px;
right: calc(22px + env(safe-area-inset-right));
bottom: 24px;
bottom: calc(24px + env(safe-area-inset-bottom));
z-index: 999;
width: 46px;
height: 46px;
padding: 0;
border: 2px solid #fff;
border-radius: 8px;
background: #C8102E;
opacity: 1;
text-align: center;
box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: background-color .25s;
transition: background-color .25s;
}
a#scroll-up i {
display: inline-block;
color: #fff;
font-size: 20px;
line-height: 42px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
a#scroll-up:focus { background: #9E0C24; } @media (hover: hover) {
#colophon a.fx-badge:hover { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
#colophon ul.fx-links a:hover { color: #fff; padding-left: 18px; }
#colophon ul.fx-links a:hover::before { width: 10px; }
#colophon ul.fx-kontakt a:hover { border-color: #FF5A6E; }
#colophon a.fx-pfeil-link:hover span { -webkit-transform: translateX(5px); transform: translateX(5px); }
#colophon .fx-social a:hover { background: #C8102E; border-color: #C8102E; -webkit-transform: translateY(-3px); transform: translateY(-3px); }
#colophon .fx-bottom a:hover { color: #fff; }
a#scroll-up:hover { background: #9E0C24; opacity: 1; }
} @media (max-width: 1024px) {
#colophon .fx-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#colophon .fx-col--badge { grid-column: 1 / -1; }
#colophon a.fx-badge { margin: 30px auto 0; }
#colophon .fx-col--kontakt { grid-column: 1 / -1; }
} @media (max-width: 680px) {
#colophon.fx-footer { margin-top: 72px; }
#colophon.fx-footer::before { top: -58px; height: 59px; }
#colophon.fx-footer::after { top: -46px; height: 47px; }
#colophon .fx-wrap { padding: 0 18px; }
#colophon .fx-main { padding: 56px 0 44px; }
#colophon .fx-grid { grid-column-gap: 24px; grid-row-gap: 36px; }
#colophon .fx-bottom__inner { display: block; text-align: center; }
#colophon .fx-bottom p.fx-copy { margin-right: 0; }
#colophon ul.fx-legal { margin: 6px 0; }
#colophon ul.fx-legal li { margin: 4px 9px; }
}
@media (max-width: 680px) {
#colophon .fx-bottom { padding-bottom: 84px; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
#colophon a.fx-badge { max-width: 210px; }
#colophon ul.fx-links a { font-size: 14px; }
}
@media (max-width: 340px) {
#colophon .fx-grid { grid-template-columns: minmax(0, 1fr); }
} @media (prefers-reduced-motion: reduce) {
#colophon a.fx-badge,
#colophon ul.fx-links a,
#colophon ul.fx-links a::before,
#colophon .fx-social a,
#colophon a.fx-pfeil-link span { -webkit-transition: none; transition: none; }
}