#main article ul.plans {
margin: 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(4, auto);
gap: 20px;
justify-content: flex-start;
}
#main article ul.plans li {
display: flex;
justify-content: center;
}
#main article ul.plans li a {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--color-green);
font-size: var(--text-xl);
font-weight: bold;
color: var(--color-white);
border-radius: 50px;
padding: 10px 20px;
text-decoration: none;
white-space: nowrap;
}
#main article ul.plans li a:hover {
background-color: var(--color-black);
color: var(--color-white);
}
@media (max-width: 992px) {
#main article ul.plans {
grid-template-columns: repeat(2, auto);
}
}
@media (max-width: 575px) {
#main article ul.plans {
grid-template-columns: auto;
}
} #main article ul.facts {
margin: 0 0 80px 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(3, auto);
gap: 90px;
justify-content: flex-start;
}
#main article ul.facts li {
display: flex;
flex-direction: column;
font-size: var(--text-lg);
color: var(--color-black);
}
#main article ul.facts li span,
#main article ul.facts li strong {
font-size: var(--text-4xl);
font-weight: bold;
display: block;
}
@media (max-width: 768px) {
#main article ul.facts {
grid-template-columns: repeat(2, auto);
column-gap: 90px;
row-gap: 40px;
}
#main article ul.facts li:last-child:nth-child(odd) {
grid-column: 1 / -1;
justify-self: stretch;
}
}
@media (max-width: 575px) {
#main article ul.facts {
grid-template-columns: auto;
gap: 20px;
}
#main article ul.facts li:last-child:nth-child(odd) {
grid-column: auto;
}
} .swiper-wohnungen { overflow:hidden; }
.swiper-slide { padding-bottom: 20px !important; }
.swiper-wohnungen .slide-caption { max-width: 360px; margin-top: 20px; margin-bottom: 40px; padding-left: 12px; font-weight: bold; color: var(--color-white) !important; line-height: 1.1; position:relative; }
.swiper-wohnungen .slide-caption::before { content: ''; width: 6px; height: 6px; background: url(//tiegel-heidelberg.de/wp-content/uploads/arrow-small-white.svg) no-repeat !important; position:absolute; top: 6px; left:0; }
.swiper-pagination-bullets { width: auto !important; display: flex; align-items: flex-end; justify-content: center; left: 50% !important; transform: translateX(-50%); }
.swiper-pagination-bullet { width: 9px; height: 9px; border-radius: 0; background-color: var(--color-black) !important; }
.swiper-pagination-bullet-active { width: 9px; height: 15px; background-color: var(--color-black) !important; }
.swiper-button-next svg,
.swiper-button-prev svg {
display: none;
}
.swiper-button-next,
.swiper-button-prev {
width: 48px;
height: 48px;
margin-top: 0;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
top: auto !important;
bottom: 0 !important;
}
.swiper-button-next::after,
.swiper-button-prev::after {
content: none;
}
.swiper-button-prev {
background-image: url(//tiegel-heidelberg.de/wp-content/uploads/arrow-left-black.svg);
}
.swiper-button-next {
background-image: url(//tiegel-heidelberg.de/wp-content/uploads/arrow-right-black.svg);
}
.slide-title { margin: 20px 0 0 0 !important; } #main article ul.list { margin:0; padding:0; border-top: 1px solid var(--color-green); }
#main article ul.list li { margin:0; padding:10px 10px; list-style: none; border-bottom: 1px solid var(--color-green); font-weight: bold; }
@media (max-width: 767px) {
#main article ul.list:nth-child(1) {
border-top: 1px solid transparent;
}
} .hero { padding-top: 40px; padding-bottom: 40px; aspect-ratio: 3/2; max-height: 80vh; }
.hero .kt-row-column-wrap { height: 100%; }
.hero .kt-inside-inner-col { gap: 40px !important; justify-content: space-between !important; }
.hero-box { max-width: 480px; margin: 0 !important; padding: var(--global-kb-spacing-sm, 1.5rem); background-color: var(--color-green); font-size: var(--text-sm) !important; color: var(--color-black); font-weight: bold; }
.hero-title { font-size: var(--text-4xl); color: var(--color-white); text-shadow: 2px 2px 0px var(--color-black); }
.hero .hero-logo img { max-height: 48px; width: 100%; height: auto; }
.hero .kb-splide .splide__pagination, .hero .kb-splide ul.splide__pagination.splide__pagination { bottom: 0; }
.hero .kb-splide .splide__pagination__page { width: 15px; height: 15px; margin: 5px; box-shadow: inset 0 0 0 2px var(--color-white); }
.hero .kb-splide .splide__pagination__page.is-active { opacity: 1; }
@media (max-width: 992px) {
.hero .hero-logo img { max-height: 40px; width: 100%; height: auto; }
.hero-title { font-size: var(--text-2xl); }
}
@media (max-width: 575px) {
.hero .hero-logo img { max-height: 36px; width: 100%; height: auto; }
.hero-title { font-size: var(--text-xl); }
.hero .kb-splide .splide__pagination, .hero .kb-splide ul.splide__pagination.splide__pagination { display: none; }
} .architecture { position: relative; }
.architecture-image { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }
.architecture-image img { position: relative; border-radius: 50%; }
.architecture-image::after { 
content: '';
background-color: var(--color-green);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 15px;
border-radius: 50%;
z-index: -1;
}