html body::-webkit-scrollbar {
display: none;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
scroll-behavior: smooth;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-weight: 200;
backface-visibility: hidden;
background-color: #3D4C43; }
body {
font-family: 'Satoshi-Regular', sans-serif;
line-height:1.3;
}
img {
width:100%;
height:100%;
object-fit: cover
}
a:link {
color: black;
text-decoration: none
}
a:visited {
color: black;
}
a:hover {
color: black;
}
a:active {
color: black;
} @font-face {
font-family: 'Satoshi-Regular';
src: url(https://veedel-hueckelhoven.de/wp-content/themes/veedel/fonts/Satoshi-Regular.otf) format('opentype');
font-weight: normal;
font-style:normal;
font-display: swap;
}
@font-face {
font-family: 'Satoshi-Bold';
src: url(https://veedel-hueckelhoven.de/wp-content/themes/veedel/fonts/Satoshi-Bold.otf) format('opentype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Degular-Semibold';
src: url(https://veedel-hueckelhoven.de/wp-content/themes/veedel/fonts/DegularDisplay-Semibold.otf) format('opentype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Degular-LightItalic';
src: url(https://veedel-hueckelhoven.de/wp-content/themes/veedel/fonts/DegularDisplay-LightItalic.otf) format('opentype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
h1, h2, h3, h4, h5, h6, p {
margin: 0;
padding: 0;
}
p {
font-size: 1.25rem;
font-family: 'Satoshi-Regular', sans-serif;
color: #3D4C43;
}
h1 {
font-family: 'Degular-Semibold', sans-serif;
font-size: 3.125rem;
font-weight: normal;
}
h2 {
font-family: 'Degular-Semibold', sans-serif;
font-size: 3.125rem;
font-weight: normal;
}
h3 {
font-size: 1.25rem;
line-height: 1.2;
font-weight: normal;
}
h4 {
font-size: 1.25rem;
font-weight: normal;
}
.headline {
margin-bottom: 3.125rem;
}
li {
font-size: 1.25rem;
}
@media (max-width: 768px) {
p {
font-size: 1.2rem;
}
h2 {
font-size: 1.5rem;
font-weight: normal;
}
h3 {
font-size: 1.2rem;
line-height: 1.2;
}
h4 {
font-size: 0.875rem; }
li {
font-size: 1.2rem;
}
}
@media (min-width: 1440px) {
p {
font-size: 1.35rem;
}
h1,
h2 {
font-size: 3.5rem; }
h3 {
font-size: 1.5rem;
}
h4 {
font-size: 1.125rem; }
li {
font-size: 1.35rem;
}
}
@media (min-width: 1920px) {
p {
font-size: 1.8rem;
}
h1,
h2 {
font-size: 4rem; }
h3 {
font-size: 1.75rem;
}
h4 {
font-size: 1.25rem; }
li {
font-size: 1.8rem;
}
}
@media screen and (max-width: 1000px) and (orientation: landscape) {
p {
font-size: 1.2rem;
}
h2 {
font-size: 1.5rem;
font-weight: normal;
}
h3 {
font-size: 1.2rem;
line-height: 1.2;
}
h4 {
font-size: 0.875rem; }
li {
font-size: 1.2rem;
}
} .banner-wrapper {
position: absolute;
top: 2%;
left: 0;
width: 100vw;
height: 13vh;
z-index: 9999;
overflow: hidden;
}
.banner-content {
display: flex;
flex-direction: row;
align-items: center;
height: 100%;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scrollbar-width: none;
-ms-overflow-style: none;
}
.banner-content::-webkit-scrollbar {
display: none;
}
.banner-item {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 0 2rem;
}
.banner-image img {
height: 100%;
width: auto;
object-fit: contain;
}
.banner-text {
font-size: 4.5rem;
font-weight: 600;
white-space: nowrap;
font-family: 'Degular-Semibold';
color:#3D4C43;
font-weight: normal
}
@media (max-width: 768px) {
.banner-wrapper {
top: 70px;
height:9vh
}
.banner-item {
padding: 0 1rem;
}
.banner-text {
font-size: 2.5rem;
}
}
@media screen and (max-width: 1000px) and (orientation: landscape) {
.banner-text {
font-size: 2rem;
}
.banner-item {
padding: 0 1rem;
}
} .bottom-nav {
position: absolute;
bottom: 0;
width: 100%;
height: 80px;
background: #3D4C43;
z-index: 100;
transition: all 0.3s ease;
}
.fixed-top {
position: fixed !important;
top: 0;
left: 0;
width: 100%;
background: #3D4C43;
z-index: 9999;
}
.nav-inner {
margin: 0 auto;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative; }
.nav-logo {
position: absolute;
left: 2rem;
top: 50%;
transform: translateY(-50%);
}
.nav-logo img {
height: 40px;
width: auto;
}
.nav-logo-right {
position: absolute;
right: 2rem;
top: 50%;
transform: translateY(-50%);
}
.nav-logo-right img {
height: 40px;
width: auto;
}
.nav-center {
display: flex;
justify-content: center;
flex-grow: 1;
}
.nav-menu {
display: flex;
gap: 5rem;
list-style: none;
margin: 0;
padding: 0;
}
.nav-menu li a {
text-decoration: none;
color: white;
transition: color 0.2s ease;
font-size:1.5rem
}
.nav-menu li a:hover {
opacity:0.8;
} .mobile-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background: #3D4C43;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
z-index: 10000;
}
.mobile-nav-inner {
display: flex;
align-items: center;
justify-content: space-between; width: 100%;
height: 60px;
}
.mobile-logo {
flex:1;
z-index:9999;
}
.mobile-logo img {
height: 40px;
width:auto;
}
.mobile-logo-right {
z-index: 9999;
margin-left: auto;
margin-right: 1rem;
}
.mobile-logo-right img {
height: 32px; width: auto;
display: block;
}
.nav-logo img,
.nav-logo-right img,
.mobile-logo img,
.mobile-logo-right img {
transition: opacity 0.3s ease;
}
.nav-logo img:hover,
.nav-logo-right img:hover,
.mobile-logo img:hover,
.mobile-logo-right img:hover {
opacity: 0.8; cursor: pointer;
}
.hamburger {
width: 25px;
height: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
z-index:9999
}
.hamburger span {
height: 2px;
width: 100%;
background: white;
border-radius: 0;
transition: all 0.3s ease;
transform-origin: center;
}
.hamburger.open span:nth-child(1) {
transform: rotate(45deg) translate(4px, 4px);
}
.hamburger.open span:nth-child(2) {
opacity: 0;
}
.hamburger.open span:nth-child(3) {
transform: rotate(-45deg) translate(4px, -4px);
}
.mobile-menu {
position: fixed;
top: 0;
left: 100%;
width: 100%;
height: 100vh;
background: #3D4C43;
transition: left 0.3s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
}
.mobile-menu.open {
left: 0;
}
.mobile-menu-list {
list-style: none;
text-align: center;
padding: 0;
}
.mobile-menu-list li {
margin: 1.5rem 0;
}
.mobile-menu-list a {
font-family: 'Satoshi-Regular', sans-serif;
font-size: 2rem;
color: white;
text-decoration: none;
transition: color 0.2s ease;
}
.mobile-menu-list a:hover {
color: #889582;
}
@media (min-width: 769px) {
.mobile-nav,
.mobile-menu {
display: none;
}
} @media (max-width: 768px) {
.bottom-nav {
display: none;
}
}
@media screen and (max-width: 1000px) and (orientation: landscape) {
.bottom-nav {
height: 60px;
}
.nav-menu {
gap: 2rem;
}
.nav-menu li a {
font-size:1.2rem
}
} .background-container {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
z-index: -1;
overflow: hidden;
}
.background-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.background-image {
opacity: 1;
transition: opacity 0.4s ease;
pointer-events: none; }
.background-image.hidden {
opacity: 0;
} .cta-live-button {
position: absolute;
bottom: 20%;
right: 0;
display: inline-flex;
align-items: center;
gap: 1rem;
padding: 1.2rem 1.6rem;
background-color: #b98e59;
color: white;
font-family: 'Satoshi-Regular', sans-serif;
font-size: 1.2rem;
font-weight: 500;
border-radius: 1.5rem 0 0 1.5rem;
text-decoration: none;
transition: background 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
a.cta-live-button {
color:white
}
.cta-live-button:hover {
background-color: #a67b44; }
.cta-live-button .dot {
display: inline-block;
width: 10px;
height: 10px;
background-color: white;
border-radius: 50%;
flex-shrink: 0;
}
.cta-live-button .arrow {
font-size: 1rem;
margin-left: auto;
transform: translateY(-1px);
}
a.cta-button {
color:white
}
.cta-button:hover {
background-color: #E7E1CD;
color:#3D4C43
}
@media (max-width: 768px) {
.cta-live-button {
bottom: 15%;
padding: 1.2rem 1.6rem;
background-color: #b98e59;
color: white;
font-family: 'Satoshi-Regular', sans-serif;
font-size: 1.2rem;
font-weight: 500;
border-radius: 1.5rem 0 0 1.5rem;
text-decoration: none;
transition: background 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}  
}
@media screen and (max-width: 1000px) and (orientation: landscape) {
.cta-live-button {
bottom: 20%;
padding: 1rem 1.4rem;
}
} :root {
--quartier-color: #3D4C43;
--font-title: 'Degular-Semibold', sans-serif;
--font-subtitle: 'Degular-LightItalic', sans-serif;
--title-size: 4rem;
--title-size-mobile: 2.5rem;
}
.side-by-side-section {
padding: 6rem 4rem;
min-height: 80vh;
display: flex;
align-content: center;
}
.side-by-side-inner {
display: flex;
justify-content: center;
align-items: center;
gap: 3rem;
flex-wrap: wrap;
margin: 0 auto;
}
.side-image {
flex: 1 1 40%;
padding: 1.5rem;
box-sizing: border-box;
}
.side-image img {
width: 100%;
height: auto;
object-fit: contain;
}
.side-content {
flex: 1 1 50%;
padding: 0 2rem;
box-sizing: border-box;
}
.section-title {
font-family: var(--font-title);
font-size: var(--title-size);
margin: 0;
padding: 0;
line-height: 0.8;
}
.section-subtitle {
font-family: var(--font-subtitle);
font-size: var(--title-size);
margin-bottom: 2rem;
line-height: 0.8;
color: white;
}
.section-text {
width:80%
}
#quartier .section-title,
#quartier .section-subtitle {
color: var(--quartier-color);
} .desktop-only {
display: block;
}
.mobile-only {
display: none;
}
@media (max-width: 768px) {
.side-by-side-section {
padding: 2.5rem;
min-height: auto;
}
.side-image {
display: none;
}
.side-content {
padding: 0;
}
.section-title,
.section-subtitle {
font-size: var(--title-size-mobile);
}
.section-subtitle {
margin-bottom: 1.5rem;
}
.side-by-side-inner {
align-items: flex-start;
gap: 0rem;
}
.desktop-only {
display: none !important;
}
.mobile-only {
display: block !important;
margin-bottom: 1.5rem;
}
}
@media (min-width: 1920px) {
.section-title,
.section-subtitle {
font-size: var(--title-size);
}
} :root {
--fact-title-size: 4rem;
--fact-title-size-mobile: 2.5rem;
--fact-text-size: 2.5rem;
--fact-text-size-mobile: 1.8rem;
--fact-color: white;
--fact-text: 'Degular-LightItalic', sans-serif;
}
.facts-section {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
min-height: 100vh;
box-sizing: border-box;
}
.facts-inner {
display: flex;
width: 100%;
align-items: stretch;
}
.facts-full {
width: 100%;
padding: 6rem 4rem;
box-sizing: border-box;
}
.facts-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
box-sizing: border-box;
}
.fact-item {
width: calc(50% - 1.33rem);
padding: 1rem;
flex-shrink: 0;
margin-bottom: 2rem;
box-sizing: border-box;
}
.fact-title {
font-size: var(--fact-title-size);
line-height: 0.8;
font-family: 'Degular-Semibold', sans-serif;
margin-bottom: 0rem;
color: var(--fact-color);
text-align: center
}
.fact-text,
.fact-text p {
font-family: var(--fact-text);
font-size: var(--fact-text-size);
color: var(--fact-color);
line-height: 1;
text-align: center
}
@media (max-width: 768px) {
.facts-full {
padding: 0;
}
.fact-title {
font-size: var(--fact-title-size-mobile);
margin-bottom: 1.5rem;
}
.fact-item {
width: 100%;
padding: 1.5rem;
margin-bottom: 0;
}
.fact-text,
.fact-text p {
font-size: var(--fact-text-size-mobile);
}
}
@media (max-width: 768px) {
.fact-item {
margin-bottom: 0rem;
padding: 1rem
}
.fact-title {
margin-bottom: 0rem;
}
.facts-container {
gap: 0.5rem;
padding: 1.5rem 0 
}
} .map {
width: 100%;
height: 100vh; overflow: hidden;
position: relative;
}
.map-image {
width: 100%;
height: 100%;
object-fit: cover; display: block;
} .youtube {
width: 100%;
height: auto; overflow: hidden;
position: relative;
}
.yt-consent{position:relative;max-width:100%;background:#000;color:#fff;border-radius:8px;overflow:hidden}
.yt-consent::before{content:"";display:block;padding-bottom:56.25%}
.yt-consent .yt-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.yt-consent .yt-note{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);padding:8px 12px;font-size:.9rem;cursor: pointer}
.yt-consent .yt-load{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:25px 30px;border:0;border-radius:999px;cursor:pointer;font:inherit; background:#b98e59; color:white; transition: background 0.3s ease;}
.yt-consent .yt-load:hover{background-color: #a67b44; cursor: pointer;}
.yt-consent iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width: 768px) {
.youtube {
height: auto; 
}
} :root {
--scroll-padding: 6rem 4rem;
--scroll-transition: 0.4s ease-in-out;
--text-color: white;
} .scroll-container {
width: 100%;
transition: background-color 1s ease;
background-color: #3D4C43; }
.scroll-left,
.scroll-sections {
width: 50%;
min-height: 100vh;
height: 100vh;
position: relative;
box-sizing: border-box;
}
.scroll-sections {
height: auto; }
.scroll-section {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
min-height: 100vh;
box-sizing: border-box;
scroll-margin-top: 80px;
}
.scroll-inner {
display: flex;
width: 100%;
align-items: stretch;
}
.scroll-right,
.scroll-full {
width: 100%;
padding: var(--scroll-padding);
box-sizing: border-box;
} .scroll-stack {
position: relative;
width: 100%;
}
.sticky-image-container {
position: sticky;
top: 0;
width: 50%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
z-index: 1;
}
.sticky-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity var(--scroll-transition);
display: flex;
align-items: center;
justify-content: center;
}
.sticky-image.active {
opacity: 1;
z-index: 1;
}
.hero-image {
max-width: 70%;
max-height: 70%;
object-fit: contain;
} #gebaeude .section-title,
#gebaeude .section-subtitle,
#gebaeude .scroll-text,
#gebaeude .scroll-text p {
color: var(--text-color);
}
.scroll-text {
line-height: 1.3;
margin-bottom: 2rem;
}
.inline-mobile-image {
display: none;
margin-bottom: 1.5rem;
text-align: left;
}
.image-below {
margin-top:3rem
}
@media (max-width: 768px) {
.scroll-sections {
width: 100%;
}
.scroll-section {
min-height: auto;
scroll-margin-top: 80px;
}
.section-text {
width:100%
}
.scroll-right {
padding: 3rem;
}
.sticky-image-container {
display: none;
}
.inline-mobile-image {
display: block;
}
.inline-mobile-image img {
max-width: 15%;
height: auto;
object-fit: contain;
}
} .news-horizontal-wrapper {
position: relative;
height: 100vh; background: #E7E1CD;
z-index: 1;
padding: 6rem 4rem
}
.news-sticky {
position: sticky;
top: 80px;
height: 100vh;
overflow: hidden;
display: flex;
align-items: flex-start;
flex-direction: column
}
.news-scroll-track {
display: flex;
height: 100%;
transition: transform 0.1s linear;
will-change: transform;
}
.news-item-list {
display: flex;
align-items: center;
flex-wrap: nowrap; }
.news-item {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 0rem 1rem;
}
.news-thumbnail {
width: 500px;
height: 500px;
margin-bottom: 1rem;
overflow: hidden;
transition: mask-image 0.5s ease, -webkit-mask-image 0.5s ease;
}
.news-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
news-date {
font-family: 'Degular-LightItalic', sans-serif;
font-size:2rem;
line-height: 1;
color:#3D4C43
}
.news-title {
font-family: 'Degular-Semibold', sans-serif;
font-size:2rem;
line-height: 1;
color:#3D4C43;
margin-bottom: 1rem
}
#news .section-heading {
color:#3D4C43;
}
#news .section-heading-wrapper {
width: 100%;
padding-left: 0rem; line-height: 1;
}
#news-modal-inner {
width: 100%;
height: auto;
}
.news-item.mask-1:hover .news-thumbnail img,
.news-item.mask-2:hover .news-thumbnail img,
.news-item.mask-3:hover .news-thumbnail img,
.news-item.mask-4:hover .news-thumbnail img {
-webkit-mask-size: cover;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-size: cover;
mask-repeat: no-repeat;
mask-position: center;
}
.news-item .news-thumbnail img { mask-image: none;
-webkit-mask-image: none;
transition: transform 0.3s ease, mask-image 0.4s ease;
}
.news-item:hover .news-thumbnail img {
transform: scale(1.05); }
.news-item.mask-1:hover .news-thumbnail img {
-webkit-mask-image: url(https://veedel-hueckelhoven.de/wp-content/uploads/2025/04/Veedel_Quartier_weiss_w1200px.png);
mask-image: url(https://veedel-hueckelhoven.de/wp-content/uploads/2025/04/Veedel_Quartier_weiss_w1200px.png);
mask-size: cover;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-size: cover;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
.news-item.mask-2:hover .news-thumbnail img {
-webkit-mask-image: url(https://veedel-hueckelhoven.de/wp-content/uploads/2025/04/Veedel_Treffen_weiss_w1200px.png);
mask-image: url(https://veedel-hueckelhoven.de/wp-content/uploads/2025/04/Veedel_Treffen_weiss_w1200px.png);
mask-size: cover;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-size: cover;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
.news-item.mask-3:hover .news-thumbnail img {
-webkit-mask-image: url(https://veedel-hueckelhoven.de/wp-content/uploads/2025/04/Veedel_Wohnen_weiss_w1200px.png);
mask-image: url(https://veedel-hueckelhoven.de/wp-content/uploads/2025/04/Veedel_Wohnen_weiss_w1200px.png);
mask-size: cover;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-size: cover;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
.news-item.mask-4:hover .news-thumbnail img {
-webkit-mask-image: url(https://veedel-hueckelhoven.de/wp-content/uploads/2025/04/Veedel_Wache_weiss_w1200px.png);
mask-image: url(https://veedel-hueckelhoven.de/wp-content/uploads/2025/04/Veedel_Wache_weiss_w1200px.png);
mask-size: cover;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-size: cover;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
.news-item.mask-default .news-thumbnail img {
mask-image: none;
-webkit-mask-image: none;
} .news-modal-swiper {
width: 100%;
height: 400px;
max-height: 400px;
flex: 1 1 auto;
opacity: 0;
transition: opacity 0.3s ease;
}
.news-thumbnail-inner img,
.news-modal-swiper .swiper-slide img {
width: 100%;
height: auto;
object-fit: cover;
display: block;
}
.news-thumbnail-inner {
height: auto;
margin-bottom: 1rem;
overflow: hidden;
transition: mask-image 0.5s ease, -webkit-mask-image 0.5s ease;
}
.news-modal-swiper.swiper-ready,
.news-thumbnail-inner {
opacity: 1;
} .news-popup-inner {
display: flex;
flex-direction: column;
}
.modal-date {
margin-bottom: 1.5rem;
}
.modal-body {
display: flex;
gap: 2rem;
flex-wrap: wrap;
}
.modal-media {
flex: 1 1 45%;
max-width: 45%;
}
.modal-text {
flex: 1 1 50%;
max-width: 50%;
font-size: 1.1rem;
line-height: 1.5;
} .swiper {
height: auto;
}
.swiper-wrapper {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
}
.swiper-slide {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
display: flex;
align-items: center;
justify-content: center;
}
.news-modal-swiper-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.news-modal-swiper {
width: 100%;
}
.swiper-nav-buttons {
display: flex;
justify-content: flex-end;
gap: 2rem;
margin-top: 1rem;
}
.swiper-button-prev,
.swiper-button-next {
position: static !important;
width: auto;
height: auto;
color: white !important;
font-size: 0.5rem !important;
cursor: pointer;
margin-top: 0.1rem !important;
z-index: 999999 !important;
}
.swiper-button-next:after, .swiper-button-prev:after {
font-family: swiper-icons;
font-size: 1rem !important;
text-transform: none!important;
letter-spacing: 0;
font-variant: initial;
line-height: 1;
}
@media (max-width: 768px) {
.modal-body {
flex-direction: column;
}
.news-horizontal-wrapper {
padding: 3rem 2.5rem
}
.modal-media,
.modal-text,
.news-thumbnail-inner,
.news-modal-swiper {
max-width: 100%;
flex: 1 1 100%;
}
.news-sticky {
flex-direction:column;
}
.news-item-list {
align-items: center;
justify-content: flex-start;
}
.news-thumbnail {
width: 250px;
height: 250px;
}
}
@media screen and (max-width: 1000px) and (orientation: landscape) {
.news-sticky {
top: 60px;
}
.news-thumbnail {
width: 300px;
height: 150px;
}
} #faq .section-heading {
color: white;
}
.faq-section {
display: flex;
justify-content: center;
align-items: flex-start;
width: 100%;
margin: 0 auto;
padding: 6rem 4rem;
background-color: #889582;
box-sizing: border-box;
}
.faq-inner {
display: flex;
width: 100%;
flex-direction: column;
}
.faq-wrapper {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
box-sizing: border-box;
max-width: 100%;
margin: 0 auto;
width: 100%;
}
.faq-item {
margin-bottom: 1rem;
border-bottom: 2px solid white;
}
.faq-question {
margin-bottom: 0.5rem;
cursor: pointer; display: flex;
justify-content: space-between;
align-items: center;
transition: color 0.3s ease;
}
.faq-question h2 {
color:white;
font-size:2rem;
cursor:pointer;
font-weight: normal
}
.faq-question:hover {
color: white;
}
.faq-answer {
font-size: 1rem;
color: white;
display: none; transition: max-height 0.3s ease;
overflow: hidden;
}
.faq-answer h3 {
color:white;
font-size:1.5rem
}
.faq-answer.open {
display: block; }
.faq-item.open .faq-answer {
display: block;
max-height: 1000px; padding: 0.5rem 0 1.5rem 0;
width:90%
}
.plus-minus-icon {
position: relative;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 10px;
cursor: pointer;
transition: transform 0.3s ease;
}
.plus-minus-icon::before,
.plus-minus-icon::after {
content: '';
position: absolute;
background-color: white;
width: 20px;
height: 2px;
transition: transform 0.3s ease;
}
.plus-minus-icon::before {
transform: rotate(0deg);
}
.plus-minus-icon::after {
transform: rotate(90deg);
}
.faq-item.open .plus-minus-icon::before {
transform: rotate(45deg);
}
.faq-item.open .plus-minus-icon::after {
transform: rotate(-45deg);
}
@media (max-width: 768px) {
.faq-section {
padding: 3rem 2.5rem ;
}
.faq-wrapper {
padding-left: 0rem;
padding-right:0rem;
max-width:100%
}
#kontakt .section-heading {
top: 3rem;
left: 2.5rem; 
}
.faq-item.open .faq-answer {
width:100%
}
.faq-question h2 {
font-size:1.5rem;
}
.faq-answer h3 {
font-size:1.2rem
}
.faq-item.open .faq-answer {
padding: 0.8rem 0;
}
} :root {
--contact-bg: #E7E1CD;
--primary-text: #3D4C43;
--input-font: 'Satoshi-Regular', sans-serif;
--heading-font: 4rem;
--mobile-heading-font: 2.5rem;
--input-size: 2rem;
--input-placeholder-color: #999;
--highlight-color: rgba(230, 170, 185, 1);
--error-color: #dc3232;
} .contact-section {
width: 100%;
padding: 6rem 4rem;
background-color: var(--contact-bg);
box-sizing: border-box;
}
.contact-inner {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.contact-wrapper {
width: 100%;
max-width: 800px;
box-sizing: border-box;
} .contact-heading,
.section-heading {
position: relative;
font-size: var(--heading-font);
color: var(--primary-text);
margin-bottom: 2rem;
text-align: left;
align-self: flex-start;
} .contact-section .wpcf7-form {
display: grid;
gap: 1.5rem;
} .name-container {
display: flex;
flex-direction: row;
gap: 0px;
width: 100%;
max-width: 800px;
margin: 0 auto;
line-height: 1;
}
.name-container input {
flex: 1 1 0;
width: 100%;
} .contact-section input[type="text"],
.contact-section input[type="email"],
.contact-section input[type="tel"],
.contact-section input[type="url"],
.contact-section textarea,
.quiz-container input[type="text"] {
width: 100%;
max-width: 800px;
background: transparent;
padding: 12px;
box-sizing: border-box;
border: none;
border-bottom: 2px solid var(--primary-text);
border-radius: 0;
font-size: var(--input-size);
font-family: var(--input-font);
} .contact-section input::placeholder,
.contact-section textarea::placeholder,
.quiz-container input[type="text"]::placeholder {
font-size: var(--input-size);
font-family: var(--input-font);
color: var(--input-placeholder-color);
opacity: 1;
font-weight: 400;
} .contact-section input:focus,
.contact-section textarea:focus {
outline: none;
border-bottom: 2px solid var(--primary-text);
}
.contact-section textarea {
width: 100%;
max-width: 800px;
background: transparent;
padding: 12px;
box-sizing: border-box;
border: none;
border-bottom: 2px solid var(--primary-text);
border-radius: 0;
font-size: var(--input-size);
font-family: var(--input-font);
height: 48px; overflow: hidden;
resize: none; } .contact-section input[type="submit"] {
display: block;
margin: 25px auto 0;
padding: 12px 20px;
background-color: var(--primary-text);
color: white;
border: none;
font-size: var(--input-size);
cursor: pointer;
transition: background 0.3s ease-in-out;
}
.contact input[type="submit"]:hover {
background-color: var(--highlight-color);
} .quiz-container {
margin-bottom: 25px;
align-items: center;
text-align: center;
}
.quiz-container label {
margin-bottom: 5px;
width: 100%;
font-size: var(--input-size);
font-family: var(--input-font);
color: var(--primary-text);
} .checkbox-container {
display: flex;
align-items: center;
width: 100%;
max-width: 800px;
margin: 0 auto;
gap: 10px;
}
.checkbox-container label {
font-size: 1rem;
color: var(--primary-text);
display: flex;
align-items: center;
flex-grow: 1;
line-height: 1.2;
text-align: left;
} .wpcf7 input[type="checkbox"] {
appearance: none;
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid var(--primary-text);
background-color: white;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 25px;
transition: background 0.3s ease, border 0.3s ease;
flex-shrink: 0;
}
.wpcf7 input[type="checkbox"]:checked {
background-color: var(--primary-text);
border-color: var(--primary-text);
}
.wpcf7 input[type="checkbox"]:checked::after {
content: "";
}
.wpcf7-list-item {
display: flex;
align-items: center;
margin: 0;
gap: 10px;
} .wpcf7-not-valid-tip {
color: var(--error-color);
font-size: 1rem;
font-weight: normal;
display: block;
}
.cf7-popup-overlay {
position: fixed; top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 1;
transition: opacity 0.5s ease-in-out;
background: rgba(0, 0, 0, 0.3); }
.cf7-popup {
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid #273143;
backdrop-filter: blur(5px);
color: #273143;
padding: 20px 30px;
border-radius: 25px;
font-size: 30px;
font-family: 'Degular-Semibold', sans-serif;
text-align: center;
max-width: 80%;
box-shadow: 0 0 20px rgba(0,0,0,0.15);
}
.wpcf7 form.sent .wpcf7-response-output {
display: none;
} @media (max-width: 768px) {
.contact-section {
padding: 0;
}
.section-heading {
font-size: var(--mobile-heading-font);
top: 0rem;
left: 0rem;
}
#news .section-heading {
top: 1.5rem;
left: 0rem;
}
.name-container {
flex-direction: column;
}
.contact-section input[type="text"],
.contact-section input[type="email"],
.contact-section input[type="tel"],
.contact-section input[type="url"],
.contact-section textarea,
.quiz-container input[type="text"] {
font-size: 1.5rem;
border-bottom: 1px solid var(--primary-text);
padding: 0.5rem;
}
.contact-section p input,
.contact-section p textarea {
font-size: 1.5rem;
}
.quiz-container label {
font-size: 1.2rem;
}
.quiz-container {
margin-top: 1rem;
}
.contact-section input[type="submit"] {
font-size: 1.5rem;
}
.contact-section input::placeholder,
.contact-section textarea::placeholder,
.quiz-container input[type="text"]::placeholder {
font-size: 1.5rem
}
.contact-section .wpcf7-form {
gap: 0rem;
}
.wpcf7-list-item {
gap: 0px;
}
.contact-form {
padding: 2.5rem;
}
} :root {
--footer-bg: #3D4C43;
--footer-text: #E7E1CD;
--footer-font-size: 1.5rem;
--footer-gap: 2rem;
}
.site-footer {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: var(--footer-gap);
padding: 6rem 4rem;
background-color: var(--footer-bg);
color: var(--footer-text);
box-sizing: border-box;
}
.site-footer p,
.site-footer a {
color: var(--footer-text);
}
.footer-left,
.footer-center {
flex: 1 1 300px;
display: flex;
flex-direction: column;
gap: 1rem;
}
.footer-left a {
transition: opacity 0.3s ease; }
.footer-left a:hover {
opacity: 0.8; }
.footer-center {
align-items: center;
}
.footer-logo img {
max-height: 60px;
height: auto;
width: auto;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0 0 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: flex-start;
font-size: var(--footer-font-size);
}
.footer-links a {
color: var(--footer-text);
text-decoration: none;
font-weight: 500;
transition: opacity 0.3s ease; }
.footer-links a:hover {
opacity: 0.8; } .footer-links a p {
transition: opacity 0.3s ease;
} .footer-links a:hover p {
opacity: 0.8;
}
@media (max-width: 768px) {
.site-footer {
padding: 3rem 2.5rem;
}
.footer-center {
align-items: flex-start;
}
} .fade-in-on-scroll {
opacity: 0;
transform: translateY(50px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-on-scroll.in-view {
opacity: 1;
transform: translateY(0);
} :root {
--modal-bg: #353647;
--modal-text: white;
--modal-overlay-bg: rgba(0, 0, 0, 0.4);
--modal-padding: 3rem;
--modal-radius: 0;
--transition: 0.3s ease;
--modal-width: 80vw;
--modal-max-height: 80vh;
} .legal-modal {
display:none
}
.modal {
position: fixed;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
padding: 2rem;
display: flex;
align-items: center;
justify-content: center;
transform: translate(-50%, -50%);
box-sizing: border-box;
z-index: 99999;
overflow-y: auto;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--transition), visibility var(--transition);
}
.modal.visible {
opacity: 1;
visibility: visible;
pointer-events: all;
} .modal::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
backdrop-filter: blur(10px);
background-color: var(--modal-overlay-bg);
z-index: -1;
opacity: 0;
transition: opacity var(--transition);
pointer-events: none;
}
.modal.visible::before {
opacity: 1;
pointer-events: all;
} .modal-content {
background: var(--modal-bg);
color: var(--modal-text);
width: var(--modal-width);
max-height: var(--modal-max-height);
overflow-y: auto;
padding: var(--modal-padding);
transform: translateY(20px);
opacity: 0;
transition: all 0.4s ease;
display: flex;
flex-direction: column;
box-sizing: border-box;
scrollbar-width: none; -ms-overflow-style: none; 
}
.modal.visible .modal-content {
transform: translateY(0);
opacity: 1;
}
.modal-content::-webkit-scrollbar {
display: none;
}
.modal-content p,
.modal-content a {
color: var(--modal-text);
} .modal-heading {
font-size: 2rem;
margin-bottom: 1rem;
color: var(--modal-text);
} .modal-close {
position: fixed;
top: 1rem;
right: 1rem;
font-size: 2.5rem;
color: var(--modal-text);
background: transparent;
cursor: pointer;
padding: 0.25rem 0.6rem;
line-height: 1;
transform-origin: center;
z-index: 100000;
transition: transform var(--transition), background var(--transition);
}
.modal-close:hover {
transform: rotate(90deg) scale(1.1);
} @media (max-width: 768px) {
.modal {
padding: 0rem;
}
.modal-content {
width: 100vw;
max-height: 100vh;
}
h1.legal-modal-heading {
font-size:2rem;
margin-bottom:2rem
}
.modal-body {
gap: 1rem;
}
}