:root {
--flyin-petrol: #2f5d62;
--flyin-rot: #c60d1b;
--flyin-creme: #f5ead8;
--flyin-tinte: #201e1d;
--flyin-breite: 420px;
--flyin-radius: 0;
--flyin-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.flyin {
position: fixed;
right: 0;
top: 50%;
z-index: 9999;
width: min(var(--flyin-breite), 100vw - 24px);
height: auto;
background: var(--flyin-creme);
border-radius: var(--flyin-radius) 0 0 var(--flyin-radius);
box-shadow: 0 18px 50px -12px rgba(32, 30, 29, 0.38), 0 2px 8px rgba(32, 30, 29, 0.1);
overflow: hidden;
transform: translate(105%, -50%);
opacity: 0;
visibility: hidden;
transition: transform 0.78s cubic-bezier(0.1, 1, 0.24, 1), opacity 0.4s ease, visibility 0s 0.78s;
}
.flyin.is-open {
transform: translate(0, -50%);
opacity: 1;
visibility: visible;
transition: transform 0.78s cubic-bezier(0.1, 1, 0.24, 1), opacity 0.3s ease, visibility 0s;
}
.flyin__link {
display: block;
text-decoration: none;
color: inherit;
outline: none;
}
.flyin__link:focus-visible {
outline: 3px solid var(--flyin-rot);
outline-offset: -3px;
border-radius: var(--flyin-radius) 0 0 var(--flyin-radius);
}
.flyin__kicker {
display: block;
background: var(--flyin-petrol);
color: #fff;
font-family: var(--flyin-font);
font-weight: 700;
font-size: clamp(24px, 2.8vw, 32px);
line-height: 1;
letter-spacing: 0.005em;
text-transform: uppercase;
padding: 14px 56px 14px 18px;
}
.flyin__content {
background: #ffffff;
padding: 12px 18px 18px;
}
.flyin__content > * {
margin: 0;
}
.flyin__content > * + * {
margin-top: 6px;
}
.flyin__content h1 {
font-family: "Arial Black", "Helvetica Neue", Helvetica, sans-serif;
font-weight: 900;
font-size: clamp(26px, 3.4vw, 38px);
line-height: 1.04;
letter-spacing: -0.004em;
text-transform: uppercase;
color: var(--flyin-rot);
text-wrap: balance;
}
.flyin__content h2 {
font-family: var(--flyin-font);
font-weight: 800;
font-style: italic;
font-size: clamp(21px, 2.4vw, 30px);
line-height: 1.5;
color: var(--flyin-tinte);
text-wrap: pretty;
}
.flyin__content p {
font-family: var(--flyin-font);
font-weight: 600;
font-size: 16px;
line-height: 1.45;
color: #4a4644;
margin-top: 10px;
}
.flyin__close {
position: absolute;
top: 9px;
right: 10px;
z-index: 2;
width: 36px;
height: 36px;
display: grid;
place-items: center;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.14);
color: #fff;
cursor: pointer;
transition: background 0.18s ease, transform 0.18s ease;
}
.flyin__close:hover {
background: rgba(255, 255, 255, 0.28);
}
.flyin__close:active {
background: rgba(255, 255, 255, 0.38);
transform: scale(0.94);
}
.flyin__close:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.flyin__close svg {
width: 18px;
height: 18px;
display: block;
}
@media (max-width: 640px) {
.flyin {
right: 0;
left: 0;
top: auto;
bottom: 0;
width: auto;
border-radius: var(--flyin-radius) var(--flyin-radius) 0 0;
transform: translate(0, 105%);
}
.flyin.is-open {
transform: translate(0, 0);
}
.flyin__link:focus-visible {
border-radius: var(--flyin-radius) var(--flyin-radius) 0 0;
}
.flyin__kicker {
padding: 13px 54px 13px 16px;
}
.flyin__content {
padding: 12px 16px 18px;
}
}
@media (prefers-reduced-motion: reduce) {
.flyin {
transform: translate(0, -50%);
transition: opacity 0.2s ease, visibility 0s;
}
.flyin.is-open {
transition: opacity 0.2s ease, visibility 0s;
}
}
@media (prefers-reduced-motion: reduce) and (max-width: 640px) {
.flyin {
transform: none;
outline: none;
}
}