:root {
--ff-white: #ffffff;
--ff-white-soft: #ffffffd4;
--ff-white-line: #ffffff45;
--ff-blue: #006ba6; --ff-blue-light: #0496ff; --ff-blue-dark: #004d86; --ff-blue-current: #75aada;
--ff-yellow: #ffbc42;
--ff-ink: #383838; --ff-font-head: "Epilogue", sans-serif;
--ff-font-body: "Archivo", sans-serif;
--ff-max: 1320px;
--ff-bp-tablet: 1024px;
--ff-bp-mobile: 767px;
} .ff-container {
max-width: var(--ff-max);
margin-inline: auto;
width: 100%;
}
.ff-icon {
width: 20px;
height: 20px;
flex: 0 0 auto;
fill: currentColor;
}
.ff-header a,
.ff-footer a {
text-decoration: none;
}
.ff-header ul,
.ff-footer ul {
list-style: none;
margin: 0;
padding: 0;
} .ff-topbar {
background-color: var(--ff-blue-dark);
padding: 15px 30px;
}
.ff-topbar__inner {
display: flex;
align-items: center;
}
.ff-topbar__contact {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-inline: -25px;
}
.ff-topbar__contact > li {
margin-inline: 25px;
}
.ff-topbar__contact a {
display: flex;
align-items: center;
gap: 7px;
color: var(--ff-white-soft);
font-family: var(--ff-font-body);
font-size: 15px;
font-weight: 400;
line-height: 1.5em;
transition: color .3s;
}
.ff-topbar__contact .ff-icon {
fill: var(--ff-white);
}
.ff-topbar__contact a:hover {
color: var(--ff-yellow);
} @media (max-width: 1024px) {
.ff-topbar {
display: none;
}
}  html:root,
body[class] {
overflow-x: visible;
}
.site-main,
.ff-footer {
overflow-x: clip;
} .ff-header {
position: sticky;
top: 0;
z-index: 50;
}
@media (min-width: 1025px) {
.ff-header {
top: calc(-1 * var(--ff-topbar-h, 53px));
}
}
.ff-bar {
background-color: var(--ff-white);
box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .05);
padding: 0 30px;
position: relative;
z-index: 1;
} body.admin-bar .ff-header {
top: 32px;
}
@media (min-width: 1025px) {
body.admin-bar .ff-header {
top: calc(32px - var(--ff-topbar-h, 53px));
}
}
@media (max-width: 782px) {
body.admin-bar .ff-header {
top: 46px;
}
} .ff-quick {
display: none;
align-items: center;
gap: clamp(6px, 1.8vw, 10px);
margin-inline-start: auto;
margin-inline-end: clamp(6px, 1.8vw, 10px);
flex: 0 0 auto;
}
.ff-call {
display: flex;
align-items: center;
justify-content: center;
width: clamp(38px, 10.5vw, 46px);
height: clamp(38px, 10.5vw, 46px);
flex: 0 0 auto;
border-radius: 50%;
background-color: var(--ff-blue);
position: relative;
box-shadow: 0 4px 14px rgba(0, 107, 166, .35);
} .ff-header a.ff-call .ff-icon {
width: clamp(16px, 4.4vw, 20px);
height: clamp(16px, 4.4vw, 20px);
fill: #ffffff;
color: #ffffff;
position: relative;
z-index: 1;
}
.ff-bar__inner {
display: flex;
align-items: center;
}
.ff-bar__logo {
width: 20%;
flex: 0 0 auto;
}
.ff-bar__logo img {
width: 32%;
height: auto;
display: block;
}
.ff-bar__sitename {
font-family: var(--ff-font-head);
font-weight: 700;
color: var(--ff-ink);
}
.ff-bar__nav {
width: 51.332%;
flex: 0 0 auto;
}
.ff-bar__actions {
width: 28%;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
}
@media (max-width: 1024px) {
.ff-bar {
padding: 15px;
}
.ff-bar__logo {
width: auto;
}
.ff-bar__logo img {
width: auto;
max-height: clamp(42px, 12vw, 58px);
}
.ff-quick {
display: flex;
}
.ff-bar__nav {
width: auto;
display: flex;
justify-content: flex-end;
}
.ff-bar__actions {
display: none;
}
} .ff-nav {
height: 80px;
}
.ff-menu {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.ff-menu > li {
position: relative;
display: flex;
align-items: stretch;
height: 100%;
margin: 0 18px;
}
.ff-menu > li > a {
display: flex;
align-items: center;
height: 100%;
gap: 6px;
font-family: var(--ff-font-body);
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
line-height: 1.3em;
letter-spacing: .5px;
color: var(--ff-ink);
border-bottom: 2px solid transparent;
padding: 0;
transition: color .3s, border-color .3s;
}
.ff-menu > li > a:hover,
.ff-menu > li > a:focus {
color: var(--ff-blue);
border-bottom-color: var(--ff-yellow);
}
.ff-menu > li.current-menu-item > a,
.ff-menu > li.current-menu-ancestor > a,
.ff-menu > li.current_page_item > a {
color: var(--ff-blue-current);
border-bottom-color: var(--ff-blue-current);
} .ff-menu .menu-item-has-children > a::after {
content: "+";
font-size: 15px;
font-weight: 400;
line-height: 1;
color: var(--ff-yellow);
transition: color .3s;
}
.ff-menu .menu-item-has-children:hover > a::after,
.ff-menu .menu-item-has-children > a:focus::after {
color: var(--ff-blue);
} .ff-menu .sub-menu {
position: absolute;
top: 100%;
inset-inline-start: 0;
min-width: 260px;
background-color: var(--ff-blue);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity .3s, transform .3s, visibility .3s;
z-index: 30;
}
.ff-menu > li:hover > .sub-menu,
.ff-menu > li:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.ff-menu .sub-menu > li > a {
display: block;
background-color: var(--ff-blue);
font-family: var(--ff-font-body);
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
line-height: 1.3em;
letter-spacing: .5px;
padding: 25px;
color: var(--ff-white);
transition: background-color .3s, color .3s;
}
.ff-menu .sub-menu > li > a:hover,
.ff-menu .sub-menu > li > a:focus,
.ff-menu .sub-menu > li.current-menu-item > a {
background-color: var(--ff-white);
color: var(--ff-blue);
}  .ff-header button.ff-burger {
display: none;
width: clamp(40px, 11vw, 48px);
height: clamp(40px, 11vw, 48px);
padding: 0;
border: 0;
border-radius: 12px;
background-color: transparent;
color: var(--ff-blue);
cursor: pointer;
transition: background-color .25s;
-webkit-tap-highlight-color: transparent;
}
.ff-header button.ff-burger:hover,
.ff-header button.ff-burger:focus-visible {
background-color: rgba(0, 107, 166, .08);
}
.ff-burger span {
display: block;
width: 24px;
height: 2px;
margin: 5px auto;
border-radius: 2px;
background-color: currentColor;
transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .2s;
} .ff-burger[aria-expanded="true"] span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.ff-burger[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.ff-burger[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.ff-nav__head {
display: none;
align-items: center;
justify-content: space-between;
padding: 20px 4px 16px;
border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.ff-nav__logo img {
max-width: 84px;
height: auto;
display: block;
}
.ff-header button.ff-nav__close {
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background-color: rgba(0, 107, 166, .08);
color: var(--ff-blue);
cursor: pointer;
position: relative;
flex: 0 0 auto;
}
.ff-nav__close span {
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 2.5px;
border-radius: 2px;
background-color: currentColor;
}
.ff-nav__close span:nth-child(1) {
transform: translate(-50%, -50%) rotate(45deg);
}
.ff-nav__close span:nth-child(2) {
transform: translate(-50%, -50%) rotate(-45deg);
}
.ff-nav__cta {
display: none;
}
.ff-nav-overlay {
display: none;
} @media (max-width: 1024px) {
.ff-header button.ff-burger {
display: block;
} .ff-nav {
position: fixed;
top: 0;
inset-inline-end: 0;
inset-inline-start: auto;
height: 100%;
height: 100dvh;
width: min(360px, 88vw);
max-width: none;
display: flex;
flex-direction: column;
background-color: var(--ff-white);
padding: 0 20px calc(24px + env(safe-area-inset-bottom));
overflow-y: auto;
overscroll-behavior: contain;
box-shadow: -12px 0 40px rgba(0, 0, 0, .18);
transform: translateX(105%);
transition: transform .35s cubic-bezier(.4, 0, .2, 1);
z-index: 100;
}
.ff-nav.is-open {
transform: translateX(0);
}
.ff-nav__head {
display: flex;
position: sticky;
top: 0;
background-color: var(--ff-white);
z-index: 2;
}
.ff-menu {
display: block;
height: auto;
padding: 8px 0 0;
}
.ff-menu > li {
display: block;
height: auto;
margin: 0;
border-bottom: 1px solid rgba(0, 0, 0, .06);
} .ff-menu > li > a,
.ff-menu .sub-menu > li > a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 52px;
padding: 14px 4px;
color: var(--ff-ink);
font-size: 15px;
letter-spacing: .3px;
border-bottom: 0;
border-radius: 8px;
transition: color .2s, background-color .2s;
}
.ff-menu > li > a:hover,
.ff-menu > li > a:focus-visible {
color: var(--ff-blue);
background-color: rgba(0, 107, 166, .05);
}
.ff-menu > li.current-menu-item > a,
.ff-menu > li.current_page_item > a,
.ff-menu > li.current-menu-ancestor > a {
color: var(--ff-blue);
} .ff-menu .menu-item-has-children > a::after {
content: "";
width: 9px;
height: 9px;
flex: 0 0 auto;
border-right: 2px solid var(--ff-blue);
border-bottom: 2px solid var(--ff-blue);
transform: rotate(45deg) translate(-2px, -2px);
transition: transform .3s;
}
.ff-menu > li.is-open > a::after {
transform: rotate(225deg) translate(-2px, -2px);
}
.ff-menu .sub-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
min-width: 0;
background: none;
display: block;
max-height: 0;
overflow: hidden;
transition: max-height .35s ease;
padding: 0 0 0 12px;
border-inline-start: 2px solid rgba(0, 107, 166, .15);
margin: 0;
}
.ff-menu > li.is-open > .sub-menu {
max-height: 600px;
margin: 0 0 6px;
}
.ff-menu .sub-menu > li {
min-height: 0;
}
.ff-menu .sub-menu > li > a {
background: none;
min-height: 48px;
padding: 12px 4px;
font-size: 14px;
text-transform: none;
letter-spacing: 0;
color: #5a5a5a;
}
.ff-menu .sub-menu > li > a:hover,
.ff-menu .sub-menu > li > a:focus-visible,
.ff-menu .sub-menu > li.current-menu-item > a {
background-color: rgba(0, 107, 166, .05);
color: var(--ff-blue);
} .ff-nav__cta {
display: block;
margin-top: auto;
padding-top: 24px;
}
.ff-nav__cta .ff-btn--solid {
display: flex;
justify-content: center;
width: 100%;
padding: 15px 24px;
}
.ff-nav__tel,
.ff-nav__mail {
display: flex;
align-items: center;
gap: 10px;
min-height: 48px;
margin-top: 4px;
color: var(--ff-ink);
font-size: 15px;
}
.ff-nav__tel .ff-icon,
.ff-nav__mail .ff-icon {
width: 16px;
height: 16px;
fill: var(--ff-blue);
}
.ff-nav__tel:hover,
.ff-nav__mail:hover {
color: var(--ff-blue);
}
.ff-nav-overlay {
display: block;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .45);
backdrop-filter: blur(2px);
opacity: 1;
transition: opacity .3s;
z-index: 90;
}
.ff-nav-overlay[hidden] {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.ff-nav,
.ff-menu .sub-menu,
.ff-burger span {
transition: none;
}
} .ff-btn {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--ff-font-body);
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
line-height: 1.3em;
letter-spacing: .5px;
padding: 16px 35px;
border: 0;
border-radius: 30px;
transition: color .3s, background-color .3s, transform .3s;
white-space: nowrap;
}
.ff-btn:hover,
.ff-btn:focus {
transform: translateY(-8px);
}
.ff-btn--ghost {
background-color: transparent;
color: var(--ff-ink);
}
.ff-btn--ghost .ff-icon {
fill: var(--ff-ink);
transition: fill .3s;
}
.ff-btn--ghost:hover,
.ff-btn--ghost:focus {
color: var(--ff-blue-current);
}
.ff-btn--ghost:hover .ff-icon,
.ff-btn--ghost:focus .ff-icon {
fill: var(--ff-blue-current);
} a.ff-btn.ff-btn--solid,
button.ff-btn.ff-btn--solid {
background-color: var(--ff-blue);
color: var(--ff-white);
border: 0;
cursor: pointer;
}
a.ff-btn.ff-btn--solid:hover,
a.ff-btn.ff-btn--solid:focus,
button.ff-btn.ff-btn--solid:hover,
button.ff-btn.ff-btn--solid:focus {
background-color: var(--ff-blue-light);
color: var(--ff-white);
} .ff-footer {
background-color: var(--ff-blue);
padding: 100px 30px 30px;
font-family: var(--ff-font-body);
}
.ff-footer__cols {
display: flex;
flex-wrap: wrap;
margin-inline: -10px;
}
.ff-footer__col {
width: 25%;
padding-inline: 10px;
box-sizing: border-box;
}
.ff-footer__col:nth-child(4) {
width: 24.753%;
} .ff-footer__col--logo img {
width: 73%;
max-width: 100%;
height: auto;
display: block;
}
.ff-footer__col:not(.ff-footer__col--logo) > * {
margin-inline-start: 15%;
}
.ff-footer h4 {
margin: 0 0 20px;
color: var(--ff-white);
font-family: var(--ff-font-head);
font-size: 25px;
font-weight: 700;
text-transform: capitalize;
line-height: 1.3em;
}
.ff-links > li:not(:first-child) {
margin-block-start: 7.5px;
}
.ff-links > li:not(:last-child) {
padding-block-end: 7.5px;
}
.ff-links a {
display: flex;
align-items: flex-start;
gap: 15px;
color: var(--ff-white-soft);
font-family: var(--ff-font-body);
font-size: 17px;
font-weight: 400;
line-height: 1.5em;
transition: color .3s;
}
.ff-links .ff-icon--caret {
width: 8px;
height: 20px;
fill: var(--ff-white);
}
.ff-links a:hover,
.ff-links a:focus {
color: var(--ff-yellow);
} .ff-footer__block {
border-top: 1px dashed var(--ff-white-line);
margin-top: 60px;
padding-top: 30px;
}
.ff-footer__reviews {
background-color: #ffffffe0;
padding: 10px;
}
.ff-footer__bottom {
display: flex;
align-items: center;
}
.ff-footer__copy {
width: 50%;
font-family: var(--ff-font-body);
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
line-height: 1.3em;
letter-spacing: .5px;
color: var(--ff-white);
}
@media (max-width: 1024px) {
.ff-footer {
padding: 50px 15px 30px;
}
.ff-footer__col,
.ff-footer__col:nth-child(4) {
width: 100%;
}
.ff-footer__col:not(.ff-footer__col--logo) > * {
margin-inline-start: 0;
}
.ff-footer__col--logo img {
width: 35%;
}
.ff-footer__bottom {
display: block;
}
.ff-footer__copy {
display: block;
width: 100%;
text-align: center;
}
}
@media (max-width: 767px) {
.ff-footer__col--logo img {
width: 55%;
}
} .ff-header .ff-topbar__contact a {
color: var(--ff-white-soft);
}
.ff-header .ff-topbar__contact a:hover {
color: var(--ff-yellow);
}
.ff-header .ff-menu > li > a {
color: var(--ff-ink);
}
.ff-header .ff-menu > li > a:hover,
.ff-header .ff-menu > li > a:focus {
color: var(--ff-blue);
}
.ff-header .ff-menu > li.current-menu-item > a,
.ff-header .ff-menu > li.current-menu-ancestor > a,
.ff-header .ff-menu > li.current_page_item > a {
color: var(--ff-blue-current);
}
.ff-header .ff-menu .sub-menu > li > a {
color: var(--ff-white);
}
.ff-header .ff-menu .sub-menu > li > a:hover,
.ff-header .ff-menu .sub-menu > li > a:focus {
color: var(--ff-blue);
}
.ff-footer .ff-links a {
color: var(--ff-white-soft);
}
.ff-footer .ff-links a:hover,
.ff-footer .ff-links a:focus {
color: var(--ff-yellow);
}
.ff-footer .ff-footer__copy {
color: var(--ff-white);
} .ff-nav__quick {
display: none;
flex-direction: column;
gap: 10px;
margin-bottom: 14px;
} .ff-header a.ff-nav__quick-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
min-height: 52px;
padding: 14px 24px;
border-radius: 30px;
font-family: var(--ff-font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: .5px;
text-transform: uppercase;
line-height: 1.3;
text-align: center;
transition: transform .2s, box-shadow .2s, background-color .2s;
}
.ff-header a.ff-nav__quick-btn:hover,
.ff-header a.ff-nav__quick-btn:focus-visible {
transform: translateY(-2px);
}
.ff-header a.ff-nav__quick-btn--book {
background-color: var(--ff-yellow);
color: var(--ff-blue-dark);
box-shadow: 0 10px 22px -14px rgba(255, 188, 66, .9);
}
.ff-header a.ff-nav__quick-btn--book .ff-icon {
fill: var(--ff-blue-dark);
}
.ff-header a.ff-nav__quick-btn--call {
background-color: transparent;
color: var(--ff-blue);
box-shadow: inset 0 0 0 2px var(--ff-blue);
}
.ff-header a.ff-nav__quick-btn--call:hover,
.ff-header a.ff-nav__quick-btn--call:focus-visible {
background-color: var(--ff-blue);
color: var(--ff-white);
}
.ff-header a.ff-nav__quick-btn--call .ff-icon {
fill: currentColor;
}
.ff-nav__quick-btn .ff-icon {
width: 18px;
height: 18px;
}
@media (max-width: 1024px) {
.ff-nav__quick {
display: flex;
}
}  body button.ff-totop {
position: fixed;
inset-inline-end: clamp(14px, 3vw, 28px);
inset-block-end: clamp(14px, 3vw, 28px);
width: 48px;
height: 48px;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
border: 0;
border-radius: 50%;
background-color: var(--ff-blue);
color: #ffffff;
cursor: pointer;
z-index: 60;
box-shadow: 0 6px 18px -6px rgba(0, 60, 95, .55);
opacity: 0;
transform: translateY(8px);
transition: opacity .25s, transform .25s, background-color .2s;
}
body button.ff-totop.is-visible {
opacity: 1;
transform: translateY(0);
}
body button.ff-totop[hidden] {
display: none;
}
body button.ff-totop:hover,
body button.ff-totop:focus-visible {
background-color: var(--ff-blue-dark);
color: #ffffff;
transform: translateY(-2px);
}
body button.ff-totop svg {
width: 20px;
height: 20px;
display: block;
fill: currentColor;
}
@media (max-width: 640px) {
body button.ff-totop {
width: 44px;
height: 44px;
}
}
@media (prefers-reduced-motion: reduce) {
body button.ff-totop {
transition: opacity .01s;
transform: none;
}
}  .ff-preis {
width: 100%;
background-color: var(--ff-white);
border-radius: 4px;
overflow: hidden;
box-shadow: 0 18px 40px -24px rgba(0, 40, 65, .55);
font-family: var(--ff-font-body);
display: flex;
flex-direction: column;
height: 100%;
} .ff-preis__head {
background-color: var(--ff-yellow);
padding: 24px 22px 18px;
text-align: center; height: 132px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
}
.ff-preis__name {
margin: 0;
font-family: var(--ff-font-head);
font-size: clamp(19px, 2.1vw, 23px);
font-weight: 700;
line-height: 1.2;
text-wrap: balance;
color: var(--ff-ink);
}
.ff-preis__label {
display: block;
margin-top: 4px;
font-size: 13px;
color: #6b5a2e;
}
.ff-preis__amount {
padding: 26px 24px 10px;
text-align: center;
color: var(--ff-ink);
}
.ff-preis__currency {
font-size: 20px;
font-weight: 500;
vertical-align: top;
line-height: 1;
position: relative;
top: 10px;
}
.ff-preis__value {
font-family: var(--ff-font-head);
font-size: clamp(46px, 7vw, 62px);
font-weight: 700;
letter-spacing: -.02em;
line-height: 1;
}
.ff-preis__period {
display: block;
margin-top: 2px;
font-size: 15px;
color: #5f6b72;
}
.ff-preis__features {
list-style: none;
margin: 0;
padding: 14px 24px 8px;
flex: 1 1 auto;
}
.ff-preis__features li {
display: grid;
grid-template-columns: 20px 1fr;
gap: 12px;
align-items: start;
padding: 13px 0;
border-bottom: 1px solid #e8ecef;
font-size: 15px;
line-height: 1.5;
color: #40484d;
}
.ff-preis__features li:last-child {
border-bottom: 0;
} .ff-preis__features li::before {
content: "";
width: 19px;
height: 19px;
margin-top: 2px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006ba6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9.5'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
.ff-preis__foot {
padding: 20px 24px 26px;
background-color: #fafbfc;
text-align: center;
}
.ff-preis a.ff-preis__btn {
display: inline-block;
padding: 14px 30px;
border-radius: 30px;
background-color: var(--ff-blue-light);
color: var(--ff-white);
font-size: 14px;
font-weight: 500;
line-height: 1.3;
text-decoration: none;
transition: background-color .2s, transform .2s;
}
.ff-preis a.ff-preis__btn:hover,
.ff-preis a.ff-preis__btn:focus-visible {
background-color: var(--ff-blue);
color: var(--ff-white);
transform: translateY(-2px);
}
@media (max-width: 640px) {
.ff-preis__head {
height: auto;
min-height: 96px;
padding: 20px 18px 16px;
}
.ff-preis__features {
padding-inline: 18px;
}
.ff-preis a.ff-preis__btn {
display: block;
}
} .ff-kacheln {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px;
}
.ff-kachel {
display: flex;
flex-direction: column;
background-color: #f7f8f9;
border-radius: 18px;
padding: 18px 18px 24px;
text-align: center;
transition: transform .25s, box-shadow .25s;
}
.ff-kachel:hover,
.ff-kachel:focus-within {
transform: translateY(-4px);
box-shadow: 0 18px 36px -22px rgba(0, 50, 80, .6);
}
.ff-kachel__img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 14px;
margin-bottom: 18px;
}
.ff-kachel__title {
margin: 0 0 16px;
font-family: var(--ff-font-head);
font-size: clamp(15px, 1.25vw, 17px);
font-weight: 700;
line-height: 1.35;
color: var(--ff-ink);
text-wrap: balance;
flex: 1 1 auto;
}
.ff-kacheln a.ff-kachel__btn {
align-self: center;
display: inline-block;
padding: 13px 30px;
border-radius: 30px;
background-color: var(--ff-blue);
color: var(--ff-white);
font-family: var(--ff-font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: .5px;
text-transform: uppercase;
text-decoration: none;
transition: background-color .2s, transform .2s;
}
.ff-kacheln a.ff-kachel__btn:hover,
.ff-kacheln a.ff-kachel__btn:focus-visible {
background-color: var(--ff-blue-light);
color: var(--ff-white);
transform: translateY(-2px);
}
@media (max-width: 860px) { .ff-kacheln {
grid-auto-flow: column;
grid-auto-columns: minmax(260px, 78%);
grid-template-columns: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: 16px;
padding-bottom: 10px;
margin-inline: -16px;
padding-inline: 16px;
gap: 16px;
scrollbar-width: thin;
}
.ff-kachel {
scroll-snap-align: center;
}
.ff-kachel:hover {
transform: none;
}
} .ff-beitraege {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 26px;
}
.ff-beitrag {
display: flex;
flex-direction: column;
background-color: #ffffffd4;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 14px 34px -24px rgba(0, 50, 80, .55);
transition: transform .25s, box-shadow .25s;
}
.ff-beitrag:hover,
.ff-beitrag:focus-within {
transform: translateY(-4px);
box-shadow: 0 20px 40px -22px rgba(0, 50, 80, .7);
}
.ff-beitrag__media {
position: relative;
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background-color: var(--ff-blue-dark);
}
.ff-beitrag__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ff-beitrag__placeholder {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--ff-blue), var(--ff-blue-light));
}
.ff-beitrag__badge {
position: absolute;
inset-block-start: 12px;
inset-inline-start: 12px;
padding: 5px 12px;
border-radius: 20px;
background-color: var(--ff-yellow);
color: var(--ff-blue-dark);
font-family: var(--ff-font-body);
font-size: 12px;
font-weight: 500;
}
.ff-beitrag__body {
display: flex;
flex-direction: column;
gap: 8px;
padding: 20px 22px 24px;
flex: 1 1 auto;
}
.ff-beitrag__meta {
margin: 0;
font-family: var(--ff-font-body);
font-size: 13px;
font-style: italic;
color: #6f7a80;
}
.ff-beitraege h5.ff-beitrag__title {
margin: 0;
font-family: var(--ff-font-head);
font-size: 19px;
font-weight: 700;
line-height: 1.32;
text-wrap: balance;
}
.ff-beitraege h5.ff-beitrag__title a {
color: var(--ff-ink);
text-decoration: none;
}
.ff-beitraege h5.ff-beitrag__title a:hover {
color: var(--ff-blue);
}
.ff-beitrag__excerpt {
margin: 0;
font-family: var(--ff-font-body);
font-size: 15px;
line-height: 1.6;
color: #4c565c;
flex: 1 1 auto;
}
.ff-beitraege a.ff-beitrag__more {
align-self: start;
margin-top: 4px;
font-family: var(--ff-font-body);
font-size: 14px;
font-weight: 500;
color: var(--ff-blue);
text-decoration: none;
}
.ff-beitraege a.ff-beitrag__more:hover {
color: var(--ff-blue-dark);
text-decoration: underline;
text-underline-offset: 3px;
} .ff-header a.ff-book-icon {
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
flex: 0 0 auto;
border-radius: 50%;
background-color: var(--ff-blue);
box-shadow: 0 4px 14px rgba(0, 107, 166, .35);
transition: transform .2s, box-shadow .2s;
}
.ff-header a.ff-book-icon .ff-icon {
width: 20px;
height: 20px;
fill: #ffffff;
color: #ffffff;
}
.ff-header a.ff-book-icon:hover,
.ff-header a.ff-book-icon:focus-visible {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 107, 166, .5);
} @media (max-width: 1200px) {
.ff-header a.ff-book-icon {
width: 42px;
height: 42px;
}
} .ff-footer .ff-footer__col h4,
.ff-footer .ff-footer__cols h4 {
color: var(--ff-white);
} @media (max-width: 1024px) {
.ff-header .ff-nav .ff-menu > li > a {
color: var(--ff-ink);
}
.ff-header .ff-nav .ff-menu > li > a:hover,
.ff-header .ff-nav .ff-menu > li > a:focus-visible {
color: var(--ff-blue);
}
.ff-header .ff-nav .ff-menu > li.current-menu-item > a,
.ff-header .ff-nav .ff-menu > li.current_page_item > a,
.ff-header .ff-nav .ff-menu > li.current-menu-ancestor > a {
color: var(--ff-blue);
}
.ff-header .ff-nav .ff-menu .sub-menu > li > a {
color: #5a6469;
}
.ff-header .ff-nav .ff-menu .sub-menu > li > a:hover,
.ff-header .ff-nav .ff-menu .sub-menu > li > a:focus-visible,
.ff-header .ff-nav .ff-menu .sub-menu > li.current-menu-item > a {
color: var(--ff-blue);
background-color: rgba(0, 107, 166, .05);
}
.ff-header .ff-nav__close {
color: var(--ff-blue);
}
} @media (max-width: 1024px) {
.ff-footer__cols {
display: flex;
flex-direction: column;
gap: 28px;
margin-inline: 0;
}
.ff-footer__col,
.ff-footer__col:nth-child(4) {
width: 100%;
padding-inline: 0;
} .ff-footer__col:not(.ff-footer__col--logo) + .ff-footer__col {
padding-top: 28px;
border-top: 1px solid var(--ff-white-line);
}
.ff-footer__col--logo {
margin-bottom: 4px;
}
.ff-footer h4 {
margin-bottom: 14px;
}
} .ff-header button.ff-nav__close {
background-color: rgba(0, 107, 166, .1);
color: var(--ff-blue);
border: 0;
}
.ff-header button.ff-nav__close:hover,
.ff-header button.ff-nav__close:focus-visible {
background-color: var(--ff-blue);
color: #ffffff;
}
.ff-header button.ff-nav__close span {
background-color: currentColor;
} .ff-nav:focus {
outline: none;
} @media (min-width: 1025px) and (max-width: 1400px) {
.ff-bar {
padding: 0 18px;
}
.ff-bar__logo {
width: auto;
padding-inline-end: 16px;
}
.ff-bar__logo img {
width: auto;
max-height: 58px;
}
.ff-bar__nav {
width: auto;
flex: 1 1 auto;
}
.ff-menu > li {
margin: 0 9px;
}
.ff-menu > li > a {
font-size: 12px;
letter-spacing: .2px;
}
.ff-bar__actions {
width: auto;
flex: 0 0 auto;
gap: 8px;
} .ff-bar__actions .ff-btn--ghost span {
display: none;
}
.ff-bar__actions .ff-btn--ghost {
padding: 12px 14px;
}
.ff-bar__actions .ff-btn--solid {
padding: 14px 22px;
font-size: 12px;
}
.ff-header a.ff-book-icon {
width: 40px;
height: 40px;
}
} .ff-kacheln h3.ff-kachel__title {
font-family: var(--ff-font-head);
font-size: clamp(15px, 1.25vw, 17px);
font-weight: 700;
line-height: 1.35;
color: var(--ff-ink);
margin: 0 0 16px;
}
@media (max-width: 860px) {
.ff-kacheln h3.ff-kachel__title {
font-size: 16px;
}
}