:root { --col-white: rgba(255, 255, 255, 1);
--col-black: rgb(0, 0, 0);
--col-darkgray: rgb(30, 30, 30);
--col-linsea-2: rgb(226, 168, 181);
--col-purple: rgb(36, 31, 53);
--col-lavender: rgb(164, 157, 206);
--col-cherry: rgb(255, 79, 103);
--col-skyblue: rgb(115, 145, 255);
--col-mint: rgb(162, 233, 216);
--col-highlight: rgba(170, 170, 170, .85);
--transition-duration: .2s;
--transition-function: ease;
--column: calc(100vw / 12);
--aspect-ratio: 6 / 4; --transition-duration: .2s;
--transition-easing: ease-in-out; --padding: 10px;
--margin: 20px;
--font-size-1: 18px;
--font-size-2: 24px;
--font-size-3: 38px;
--font-size-4: 48px;
--font-size-5: 64px;
--column-spacer: 12vw;
--line-height-1: 24px;
--line-height-2: 30px;
--line-height-3: 44px;  
--line-height-4: 54px;
--line-height-5: 72px;
}
::selection {
background: var(--col-black);
color: var(--col-white);
} @media (max-width: 1280px) {
:root {
--font-size-1: 16px;
--font-size-2: 20px;
--font-size-3: 32px;
--font-size-4: 40px;
--font-size-5: 60px;
--column-spacer: 8.33vw;
--line-height-1: 18px;
--line-height-2: 24px;
--line-height-3: 40px;  
--line-height-4: 48px;
--line-height-5: 72px;
}
} @media (max-width: 1024px) {
:root {
--font-size-1: 16px;
--font-size-2: 20px;
--font-size-3: 32px;
--font-size-4: 36px;
--font-size-5: 48px;
--column-spacer: 8.33vw;
--line-height-1: 18px;
--line-height-2: 24px;
--line-height-3: 40px;  
--line-height-4: 42px;
--line-height-5: 54px;
}
} @media (max-width: 768px) {
:root {
--font-size-1: 16px;
--font-size-2: 20px;
--font-size-3: 28px;
--font-size-4: 32px;
--font-size-5: 48px;
--column-spacer: 8.33vw;
--line-height-1: 18px;
--line-height-2: 24px;
--line-height-3: 32px;  
--line-height-4: 36px;
--line-height-5: 54px;
}
} @media (max-width: 480px) {
:root {
--font-size-1: 15px;
--font-size-2: 18px;
--font-size-3: 24px;
--font-size-4: 28px;
--font-size-5: 40px;
--column-spacer: 8.33vw;
--line-height-1: 17px;
--line-height-2: 21px;
--line-height-3: 28px;  
--line-height-4: 32px;
--line-height-5: 44px;
}
}
 *, *::before, *::after {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
margin: 0;
} ul[role='list'], ol[role='list'] {
list-style: none;
margin: 0;
padding: 0;
}
ul, ol {
margin: 0;
padding-left: 0;
} button, input, select, textarea {
font: inherit;
margin: 0;
border: none;
background: none;
padding: 0;
} a {
text-decoration: none;
color: inherit;
} img, picture {
max-width: 100%;
display: block;
}  fieldset {
border: none;
margin: 0;
padding: 0;
} html:focus-within {
scroll-behavior: smooth;
}
*::-webkit-scrollbar,
::-webkit-scrollbar {
display: none;
}
h1, h2, h3, h4, h5, h6, th {
font-weight: 400;
font-style: normal;
}
figure {
margin: 0 auto;
}
@font-face {
font-family: 'RegolaPro-Bold'; src: url(//linsea.de/wp-content/themes/linsea-theme-rest/assets/font/FTRegolaNeue-Bold.woff2); }
body {
font-family: 'RegolaPro-Bold';
font-size: var(--font-size-2);
line-height: var(--line-height-2);
}
header nav {
text-transform: uppercase;
line-height: 1;
}
h1, h2 {
text-align: center;
}
h1 {
font-size: var(--font-size-5);
line-height: var(--line-height-5);
}
h2 {
font-size: var(--font-size-3);
line-height: var(--line-height-3);
}
.benefits__wrapper--elem,
.section__button {
font-size: var(--font-size-1);
line-height: var(--line-height-1);
}
header .content__menu {
font-size: var(--font-size-4);
line-height: var(--line-height-4);
}
footer,
footer h1 {
font-size: var(--font-size-1);
line-height: var(--line-height-1); 
}
body {
background: var(--col-lightgray);
}
html.no-fade main {
transition: none !important;
opacity: 1 !important;
}
main {
min-height: 100vh;
opacity: 1;
transition: opacity .45s ease;
z-index: 1;
}
main.is-fading,
main.is-swapping {
opacity: 0;
transition: opacity .25s; will-change: opacity;
}
.is-purple {
background: var(--col-purple);
color: var(--col-white);
}
.is-white {
color: var(--col-purple);
background: var(--col-white); 
}
article {
padding: calc( 4 * var(--padding) ) var(--column-spacer) calc( 7 * var(--padding) ) var(--column-spacer);
display: flex;
flex-direction: column;
gap: 60px;
}
article:first-of-type .section__grafik[data-size="big"] img {
max-height: calc( 100vh - 76px );
}
article [data-size="big"] {
margin: calc( -4 * var(--padding) ) calc( -1 * var(--column-spacer) ) calc( -7 * var(--padding) ) calc( -1 * var(--column-spacer) );
}
article:first-of-type {
padding-top: calc( 4 * var(--padding) );
margin-top: 76px;
} .section__fliesstext p {
margin: 0 var(--column-spacer);
}
.section__grafik {
display: flex;
justify-content: center;
position: relative;
}
.section__grafik[data-background="true"] svg {
position: absolute;
z-index: 2;
top: 50%;
transform: translateY(-60%);
max-width: calc(100vw - 20px);
}
.section__grafik[data-size="big"] img {
width: 100vw;
max-height: 90vh;
object-fit: cover;
object-position: center center;
}
.benefits__wrapper {
display: flex;
flex-direction: row;
list-style: none;
justify-content: space-between;
margin: calc( 5 * var(--padding) ) var(--column-spacer);
gap: calc( 5 * var(--padding) );
}
.section__benefits[data-count="2"] .benefits__wrapper {
margin: calc( 5 * var(--padding) ) calc( 2 * var(--column-spacer) );
}
.benefits__wrapper--elem {
display: flex;
flex-direction: column;
justify-content: flex-start;
text-align: center;
align-items: center; 
}
.benefits__wrapper--elem span {
margin-top: calc( 4 * var(--padding) );
}
#focus {
display: none;
}
.section__button {
display: flex;
justify-content: center;
}
.section__button a {
padding: calc( 2 * var(--padding) );
background: var(--col-purple);
color: var(--col-white);
border-radius: calc( 3 * var(--padding) );
transition: all var(--transition-duration) var(--transition-easing);
}
.is-purple .section__button a {
background: var(--col-white);
color: var(--col-purple);
}
.section__button a:hover {
transform: scale(1.1);
background: var(--col-skyblue);
color: var(--col-white);
}
.section__gallery[data-size="tiny"].full { }
.section__gallery[data-size="big"].full { margin: 0 calc(-1 * var(--column-spacer)) calc(-7 * var(--padding));
}
[data-size="big"] img {
width: 100%;
}
[data-size="small"] img {
width: 75%;
margin: 0 auto;
}
[data-size="tiny"] img {
width: 45%;
margin: 0 auto;
}
@media (max-width: 1024px) {
svg {
height: auto;
margin: calc( 4 * var(--padding) ) 0;
}
}
.section__fliesstext p + p {
margin-top: var(--padding);
} .accordion-content {
overflow: hidden;
height: 0; transition: height var(--transition-duration) var(--transition-easing);
padding-right: var(--padding) var(--padding) 0 0;
}  .accordion-item {
transition: all var(--transition-duration) var(--transition-easing);
background: var(--lightgray);
padding: var(--padding);
}
.accordion-item + .accordion-item {
border-top: 1px solid var(--col-black);
}
.accordion-item .accordion-header {
display: flex;
flex-direction: row;
width: 100%;
cursor: pointer;
gap: var(--padding);
text-align: left;
}
.accordion-item.is-open {
background: white;
}
header {
position: fixed;
top: 0;
z-index: 10;
}
header nav {
width: 100vw;
height: 56px;
padding: var( --padding );
position: relative;
background: var(--col-darkgray);
display: flex;
justify-content: center;
}
header nav {
z-index: 20;
height: calc( 56px + 2 * var(--padding) ); overflow: hidden; transition: all var(--transition-duration) var(--transition-function);
}
header nav.is-open {
height: 100vh;
height: 100dvh;
}
.logo-wrap {
width: 56px;
height: 56px; overflow: hidden; transition: all var(--transition-duration) var(--transition-function);
position: relative;
}
.logo-item {
opacity: 1;
transition: all var(--transition-duration) var(--transition-function);
}
.logo-wrap:hover .logo-item {
opacity: .25;
transition: all var(--transition-duration) var(--transition-function);
}
.toggle__menu {
pointer-events: all;
cursor: pointer;
}
.is-open .logo-wrap {
width: 100%;
height: 100%;
}
.toggle__menu {
width: 56px;
height: 56px;
z-index: 3;
position: absolute;
top: 0;
transition: top var(--transition-duration) var(--transition-function);
}
.is-open .toggle__menu {
width: 56px;
height: 56px;
z-index: 3;
position: absolute;
top: 50px;
}
#toggle__menu--self {
transform: rotate(45deg);
transition: transform var(--transition-duration) var(--transition-function);
}
.is-open #toggle__menu--self {
transform: rotate(0deg);
}
#toggle__menu--self line {
opacity: 0;
stroke: var(--col-white);
stroke-width: 2px;
transition: opacity var(--transition-duration) var(--transition-function);
}
.is-open #toggle__menu--self line {
opacity: 1;
}
.logo-item {
position: absolute;
z-index: 2;
background: var(--col-white);
animation: 15s blink infinite;
}
@keyframes blink {
5% {
opacity: 1;
}
10% {
opacity: 0;
}
15% {
opacity: 1;
}
}
#logo-item-1 {
top: 0%;
left: 50%;
transform: translateX(-50%);
width: 14px;
height: 7px;
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
}
#logo-item-2 {
top: 0%;
right: 0%;
width: 14px;
height: 14px;
border-radius: 14px;
animation-delay: .1s;
}
#logo-item-3 {
top: 50%;
right: 0%;
transform: translateY(-50%);
width: 7px;
height: 14px;
border-top-left-radius: 14px;
border-bottom-left-radius: 14px;
animation-delay: .2s;
}
#logo-item-4 {
bottom: 0%;
right: 0%;
width: 14px;
height: 14px;
border-radius: 14px;
animation-delay: .3s;
}
#logo-item-5 {
bottom: 0%;
left: 50%;
transform: translateX(-50%);
width: 14px;
height: 7px;
border-top-left-radius: 14px;
border-top-right-radius: 14px;
animation-delay: .4s;
}
#logo-item-6 {
bottom: 0%;
left: 0%;
width: 14px;
height: 14px;
border-radius: 14px;
animation-delay: .5s;
}
#logo-item-7 {
top: 50%;
left: 0%;
transform: translateY(-50%);
width: 7px;
height: 14px;
border-top-right-radius: 14px;
border-bottom-right-radius: 14px;
animation-delay: .6s;
}
#logo-item-8 {
top: 0%;
left: 0%;
width: 14px;
height: 14px;
border-radius: 14px;
animation-delay: .7s;
}
.content__menu {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
padding: var(--margin);
gap: calc( 4 * var(--margin) );
justify-content: center;
}
.content__menu ul {
opacity: 0;
transition: all var(--transition-duration) var(--transition-function);
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
pointer-events: none;
list-style: none;
gap: calc(8 * var(--padding));
}
.content__menu ul li {
text-align: center; 
}
.is-open .content__menu {
height: 100vh;
width: auto;
}
.is-open .content__menu ul {
opacity: 1;
pointer-events: all;
}
.content__menu ul li a {
letter-spacing: .3em;
color: var(--col-white);
}
.content__menu ul li a:hover {
cursor: pointer;
text-decoration: underline;
text-underline-offset: 10px;
text-decoration-thickness: 4px;
}
#nav-footer a {
color: var(--col-white);
transition: all var(--transition-duration) var(--transition-function);
}
#nav-footer a:hover {
color: var(--col-skyblue);
text-decoration: underline;
text-underline-offset: 6px;
}
.theme-loader {
position: absolute;
left: var(--padding);
top: 50%;
width: calc( 2 * var(--padding) + 24px);
height: calc( 2 * var(--padding) + 24px);
padding: var(--padding);
transform: translateY(-50%);
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-duration) var(--transition-function);
border-radius: 3px;
background: var(--col-linsea-2);
}
.theme-loader__dot {
display: block;
width: 24px;
height: 24px;
border: 2px solid var(--col-darkgray);
border-top-color: transparent;
border-radius: 50%;
}
.is-loading .theme-loader {
opacity: 1;
}
.is-loading .theme-loader__dot {
animation: theme-loader-spin .8s linear infinite;
}
@keyframes theme-loader-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
footer {
color: var(--col-white);
background: var(--col-black);
padding: var(--padding);
display: flex;
flex-direction: column;
padding: calc(4 * var(--padding)) var(--column-spacer) calc(14 * var(--padding));
gap: calc(10 * var(--padding));
}
#nav-footer ul {
display: flex;
flex-direction: row;
list-style: none;
justify-content: space-between;
}
#nav-footer ul.submenu--anchors {
display: flex;
flex-direction: column;
gap: calc( 6 * var(--padding) );
}
#nav-footer ul li {
display: flex;
flex-direction: column;
list-style: none;
gap: calc( 6 * var(--padding) );
flex: 1;
}
footer .logo {
display: flex;
gap: calc( 8 * var(--padding) );
}
footer .logo--caption a {
display: flex;
height: 100%;
flex-direction: column;
justify-content: center;
}
footer .logo--caption a span {
display: inline-flex;
}
@media (max-width: 1024px) {
#nav-footer ul {
flex-direction: column;
}
#nav-footer ul li,
#nav-footer ul.submenu--anchors {
gap: calc( 2 * var(--padding) );
}
} @media (max-width: 1023.9px) {
.benefits__wrapper {
flex-direction: column;
}
[data-size="small"] img,
[data-size="tiny"] img {
width: 85%;
margin: 0 auto;
}
}