:root {
--grey-600: #000000;
--grey-500: #333333;
--grey-400: #666666;
--grey-300: #eeeeee;
--grey-200: #f3f3f3;
--grey-100: #ffffff;
--sasanoyo-600: #c3ea99;
--kokoa-600: #555149;
--kurumi-600: #857b68;
--beju-600: #daccb7;
--harunokiiro-600: #eff485;
--sakura-600: #e2cbcf;
--pad-section-s: 1em;
--pad-section-m: 3em;
--pad-section-l: 5em;
--pad-section-xl: 6em;
--pad-section-xxl: 8em;
--space-s: 1em;
--space-m: 1.5em;
--space-l: 2em;
--space-xl: 2.5em;
--space-xxl: 3em;
--border-size: 2px;
--border-radius: 0;
--border-radius-min: 2px;
--border-radius-max: 25px;
--body1-font-size: 20px;
--body2-font-size: 18px;
--body3-font-size: 16px;
--body4-font-size: 14px;
--body5-font-size: 12px;
--body6-font-size: 10px;
--light-weight: 300;
--regular-weight: 400;
--bold-weight: 700;
} header .header {
transition: .45s cubic-bezier(.4, 0, .2, 1) !important;
}
header.scrolling .header {
height: 80px !important;
}
header .header .header__logo {
transition: .25s cubic-bezier(.4, 0, .2, 1) !important;
}
header .header .header__logo img {
transition: .25s cubic-bezier(.4, 0, .2, 1);
}
header.scrolling .header .header__logo {
height: 48px !important;
}
header.scrolling .header .header__logo img {
height: 48px !important;
}
.nav-main ul {
align-items: center;
}
.nav-main ul:not(.bricks-mobile-menu) .menu-item.booking a {
padding: 6px 24px;
background-color: var(--kokoa-600);
color: var(--grey-100) !important;
border-radius: var(--border-radius-max);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}
.nav-main ul:not(.bricks-mobile-menu) .menu-item.booking a:hover {
background-color: var(--kurumi-600);
}
.language-switcher .lang-item {
margin-left: 10px !important;
padding-left: 10px;
border-left: 1px solid var(--beju-600);
}
.language-switcher .lang-item:nth-child(1 of .lang-item) {
margin-left: 20px !important;
padding-left: 0;
border-left: 1px solid transparent !important;
}
.language-switcher .lang-item a {
font-weight: var(--light-weight) !important;
text-transform: uppercase;
}
.language-switcher .lang-item.current-lang a {
font-weight: var(--bold-weight) !important;
}
.footer .language-switcher .lang-item:nth-child(1 of .lang-item) {
margin-left: 0 !important;
}
.footer .language-switcher .lang-item {
border-left: 1px solid var(--kokoa-600);
}
.brxe-nav-menu .bricks-mobile-menu-wrapper {
color: var(--kokoa-600);
}
.nav-footer_main {
width: 100%;
}
.nav-footer_main ul {
margin: 0 0 40px 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.nav-footer_main ul li {
}
.nav-footer_main ul li a {
font-size: 32px;
}
@media(max-width: 992px) {
.nav-footer_main ul {
grid-template-columns: 1fr;
}
.nav-footer_main ul li a {
font-size: 24px;
}
}
body {
padding-top: 120px;
}
body.scrolling {
padding-top: 80px;
}
footer .footer_address address {
margin-bottom: 20px;
font-style: normal;
}
footer .footer_address p a,
footer .footer_address address a {
font-weight: var(--regular-weight);
border-bottom: 1px solid transparent;
}
footer .footer_address p a:hover,
footer .footer_address address a:hover {
border-bottom: 1px solid var(--grey-600);
}
@media (max-width: 991px) {
body {
padding-top: 80px;
} 
}
.section {
background-color: var(--grey-100);
position: relative;
z-index: 1;
}
.container {
max-width: 100%;
width: 1480px;
margin: 0 auto;
padding-right: 40px;
padding-left: 40px;
position: relative;
} p.small {
font-size: var(--body3-font-size);
font-weight: var(--light-weight);
}
p.small a {
font-size: var(--body3-font-size);
font-weight: var(--bold-weight);
}
strong {
font-weight: var(--bold-weight);
}
address {
font-style: normal;
}
p a,
label a {
font-size: var(--body2-font-size);
color: var(--kokoa-600);
}
p a {
text-decoration: underline;
text-decoration-skip-ink: none;
-webkit-text-decoration-color: var(--beju-600);
text-decoration-color: var(--beju-600);
text-decoration-thickness: 1px;
text-underline-offset: 25%;
}
p a:hover {
-webkit-text-decoration-color: var(--kokoa-600);
text-decoration-color: var(--kokoa-600);
} .standard-section {
padding-top: var(--pad-section-xl);
padding-bottom: var(--pad-section-xl);
}
.standard-container {
column-gap: var(--sapce-xxl);
grid-gap: var(--sapce-xxl);
grid-template-columns: 1fr;
display: grid;
align-items: initial;
}
.standard-container.col-2-1 {
grid-template-columns: 2fr 1fr;
}
.standard-container.col-1-2 {
grid-template-columns: 1fr 2fr;
}
@media (max-width: 992px) {
.standard-container.col-2-1, 
.standard-container.col-1-2 {
grid-template-columns: 1fr;
}
} .img-responsive {
width: 100%;
height: auto;
}
.zoom {
overflow: hidden;
}
.zoom img {
display: block;
width: 100%;
height: auto;
transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: transform;
transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.zoom:hover img {
transform: scale(1.2);
}
.text-wrapper {
max-width: 960px;
} .nav-footer_menu li a {
padding: 5px 0;
text-decoration: underline;
text-decoration-skip-ink: none;
-webkit-text-decoration-color: var(--beju-600);
text-decoration-color: var(--beju-600);
text-decoration-thickness: 1px;
text-underline-offset: 25%;
display: inline !important;
}
.nav-footer_menu li a:hover {
-webkit-text-decoration-color: var(--kokoa-600);
text-decoration-color: var(--kokoa-600);
}
.nav-footer_menu li a[aria-current="page"] {
font-weight: var(--bold-weight);
} .socialmedia {
margin: 30px 0 0 0;
padding: 0;
display: flex;
align-items: center;
justify-content: flex-start;
}
.socialmedia li {
list-style: none;
margin: 0 20px 0 0;
padding: 0;
}
.socialmedia li:last-child {
margin: 0;
}
.socialmedia li a i {
transition: 0.25s all;
transform: scale(1);
}
.socialmedia li a:hover i {
transform: scale(1.2);
}
.socialmedia li i {
font-size: 24px;
color: var(--kokoa-600);
} .buttons {
margin: 20px 0 0 0;
padding: 0;
display: flex;
gap: 20px;
}
.buttons li {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: flex-start;
}
@media (max-width: 768px) {
.buttons {
display: flex;
flex-direction: column;
}
.buttons li:nth-child(1) {
order: 3;
}
.buttons li:nth-child(2) {
order: 1;
}
.buttons li:nth-child(3) {
order: 2;
}
.buttons li a {
width: 100%;
max-width: 100% !important;
}
} .hero {
position: relative;
height: calc(100vh - 120px);
}
.hero2 {
position: relative;
height: calc(60vh - 120px);
}
.hero-title {
margin: 0;
} .hero .splide__slide {
height: 100% !important;
}
@media (max-width: 992px) {
.hero {
height: 60vh;
}
}
@media (max-width: 768px) {
.hero {
height: 40vh;
}
}
@media (max-width: 575px) {
.hero {
height: 320px;
}
} #osmap {
width: 100%;
height: 50vh;
}
#osmap.osmap-small {
width: 100%;
height: 360px;
min-height: 360px;
}
@media (max-width: 768px) {
#osmap,
#osmap.osmap-small {
min-height: 320px;
max-height: 320px;
}
}
.hd_2click.hd_2click_osm[data-link="tm_map_cluster"] {
min-height: 600px;
} .map-popup p.content {
font-size: 16px;
}
.map-popup .button.small {
font-size: 14px;
font-weight: var(--regular-weight);
}
.map-popup .button:after,
.map-popup .button:before {
display: none;
}
.map-popup .button:hover {
background-color: var(--grey-600);
color: var(--grey-100);
border-color: var(--grey-600);
padding: .3em 1em !important;
}
.leaflet-container {
font-family: 'Public Sans', 'Helvetica', sans-serif !important;
font-size: 16px !important;
}
.leaflet-control-attribution {
font-size: 12px !important;
font-weight: var(--regular-weight) !important;
color: var(--grey-600) !important;
letter-spacing: 0 !important;
}
.leaflet-popup-content-wrapper {
box-shadow: 0 0 30px rgba(0, 0, 0, 0.15) !important;
}
.leaflet-popup-content {
margin: 30px 20px;
}
.leaflet-popup-content, 
.leaflet-popup-content p {
font-size: 16px;
}
.leaflet-container p a {
color: var(--grey-600) !important;
}
.leaflet-control-attribution a {
font-size: 12px !important;
font-weight: var(--regular-weight) !important;
color: var(--grey-600) !important;
}
.leaflet-top, .leaflet-bottom {
z-index: 500 !important;
}
.map-routeplaner {
margin-top: 30px !important;
}
.leaflet-custom-popup .leaflet-popup-content {
margin: 0 !important;
}
.leaflet-popup-close-button {
width: 32px !important;
height: 32px !important;
padding: 6px;
box-sizing: content-box !important;
background-color: var(--kokoa-600) !important;
background-clip: content-box !important;
border: none;
border-radius: 50%;
position: absolute;
cursor: pointer;
text-indent: -9999px;
overflow: hidden;
top: 0 !important;
right: 0 !important;
}
.leaflet-popup-close-button::before,
.leaflet-popup-close-button::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 20px;
height: 2px;
background-color: var(--grey-100) !important;
transform-origin: center;
}
.leaflet-popup-close-button::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.leaflet-popup-close-button::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.leaflet-popup-close-button:hover {
background-color: var(--grey-600) !important;
}
.leaflet-popup-close-button:hover::before,
.leaflet-popup-close-button:hover::after {
background-color: var(--grey-100) !important;
}
.leaflet-custom-popup .custom-popup {
text-align: center;
padding: 10px;
background-color: var(--grey-100);
border-radius: 8px;
}
.leaflet-custom-popup .popup-image {
width: 100%;
height: auto;
border-radius: 4px;
margin-bottom: 10px;
}
.leaflet-custom-popup .popup-title {
margin: 5px 0;
font-size: 16px;
font-weight: var(--bold-weight);
color: var(--grey-600);
}
.leaflet-custom-popup .popup-text {
margin: 5px 0;
font-size: 14px;
font-weight: var(--regular-weight);
color: var(--grey-600);
}
.leaflet-custom-popup .popup-button {
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
padding: 12px 20px;
background-color: var(--kokoa-600);
color: var(--grey-100);
text-decoration: none;
border-radius: 4px;
font-size: 16px;
font-weight: var(--bold-weight);
}
.leaflet-custom-popup .popup-button:hover {
background-color: var(--grey-600);
}
@media (max-width: 575px) {
.leaflet-popup-content {
width: 240px !important;
margin: 40px 20px 20px 20px !important;
}
.leaflet-custom-popup .custom-popup {
width: 100%;
}
.leaflet-custom-popup .popup-title {
font-size: 16px;
}
.leaflet-custom-popup .popup-text {
font-size: 13px;
}
.leaflet-custom-popup .popup-button {
font-size: 13px;
padding: 6px 12px;
}
} .visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
}
.access-btn {
position: fixed;
bottom: 20px;
left: 20px;
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
padding: 0;
border: none;
border-radius: 50%;
background-color: var(--kokoa-600);
color: var(--grey-100);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
cursor: pointer;
transition: transform 200ms ease, box-shadow 200ms ease;
z-index: 1000;
}
.access-btn:hover,
.access-btn:focus {
transform: scale(1.1);
box-shadow: 0 6px 12px rgba(0,0,0,0.3);
outline: none;
}
.access-btn::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 0;
transform: translateY(-8px);
background: rgba(0, 0, 0, 0.8);
color: var(--grey-100);
padding: 0.4em 0.6em;
border-radius: 0.25em;
white-space: nowrap;
font-size: var(--body3-font-size);
opacity: 0;
pointer-events: none;
transition: opacity 200ms ease-in-out;
z-index: 10;
}
.access-btn:hover::after,
.access-btn:focus::after {
opacity: 1;
}
.access-btn.tooltip-hidden::after {
opacity: 0 !important;
visibility: hidden !important;
}
.access-btn i {
font-size: 32px;
}
@media (max-width: 575px) {
.access-btn {
width: 48px;
height: 48px;
bottom: 10px;
}
}  .floating-buttons {
top: 25%;
right: 20px;
display: flex;
z-index: 10001;
position: fixed;
transition: ease-in-out 250ms;
visibility: hidden;
align-items: flex-end;
flex-direction: column;
}
.floating-buttons .floating-button {
width: 48px;
height: 48px;
cursor: pointer;
margin: 12px auto 0 0;
display: flex;
align-items: center;
justify-content: center;
outline: none !important;
padding: 0px;
max-width: none !important;
box-shadow: none;
color: var(--kokoa-600);
text-align: center;
user-select: none;
border-radius: 25px;
background-size: cover;
text-decoration: none;
background-color: var(--sasanoyo-600);
background-image: none;
background-repeat: no-repeat;
background-position: center center;
position: relative;
right: 0px;
z-index: 999;
opacity: 1;
visibility: visible;
transition: all 300ms ease-in, right 300ms 0ms, opacity 300ms 0ms;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.floating-buttons .floating-button:hover {
background-color: var(--kurumi-600);
}
.floating-buttons .floating-button:first-child {
margin-top: 0;
}
.floating-buttons .floating-button:before {
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
opacity: 0;
overflow: hidden;
position: absolute;
transition: all 250ms ease-in-out 0s;
visibility: hidden;
border-radius: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.floating-buttons .floating-button-label {
height: 48px;
padding: 0px 15px 0px 15px;
line-height: 48px;
top: 50%;
font-size: 18px;
font-weight: var(--bold-weight);
color: var(--grey-100);
right: 75px;
margin: 0;
z-index: 1;
position: absolute;
font-size: 16px;
transform: translateY(-50%);
background-color: var(--kurumi-600);
text-align: right;
transition: all 250ms ease-in-out;
white-space: nowrap;
opacity: 0;
visibility: hidden;
border-radius: var(--border-radius-max);
-webkit-border-radius: var(--border-radius-max);
}
.floating-buttons .floating-button:hover .floating-button-label {
right: 58px;
height: 48px;
padding: 0px 15px 0px 15px;
line-height: 48px;
opacity: 1;
visibility: visible;
}
.floating-buttons .floating-button i.icon {
width: 32px;
height: 32px;
margin: 0;
display: block;
}
.floating-buttons .floating-button i.icon.phone {
content: '';
-webkit-mask-image: url(//www.midori-apartments.de/wp-content/themes/midori/assets/images/icons/phone.svg);
mask-image: url(//www.midori-apartments.de/wp-content/themes/midori/assets/images/icons/phone.svg);
mask-repeat: no-repeat;
background-color: var(--kokoa-600);
}
.floating-buttons .floating-button i.icon.contact {
content: '';
-webkit-mask-image: url(//www.midori-apartments.de/wp-content/themes/midori/assets/images/icons/email.svg);
mask-image: url(//www.midori-apartments.de/wp-content/themes/midori/assets/images/icons/email.svg);
mask-repeat: no-repeat;
background-color: var(--kokoa-600);
}
.floating-buttons .floating-button i.icon.booking {
content: '';
-webkit-mask-image: url(//www.midori-apartments.de/wp-content/themes/midori/assets/images/icons/booking.svg);
mask-image: url(//www.midori-apartments.de/wp-content/themes/midori/assets/images/icons/booking.svg);
mask-repeat: no-repeat;
background-color: var(--kokoa-600);
}
.floating-buttons .floating-button:hover i.icon {
background-color: var(--grey-100);
}
.mobile-menu-opened .floating-buttons .floating-button {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
@media screen and (max-width: 992px) {
.floating-buttons .floating-button {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
}
@media screen and (max-width: 768px) {
.floating-buttons {
top: auto;
bottom: 10px;
right: 20px;
align-items: center;
justify-content: center;
flex-direction: row;
gap: 10px;
}
.floating-buttons .floating-button {
width: 48px !important;
height: 48px !important;
margin: 0;
background-color: var(--kokoa-600);
transition: none;
}
.floating-buttons .floating-button i.icon {
width: 24px;
height: 24px;
}
.floating-buttons .floating-button-label,
.floating-buttons .floating-button:hover .floating-button-label {
display: none;
}
.floating-buttons .floating-button.booking {
width: 100px !important;
max-width: 100px !important;
}
.floating-buttons .floating-button.booking i {
display: none;
}
.floating-buttons .floating-button i {
background-color: var(--grey-100) !important;
}
.floating-buttons .floating-button.booking .floating-button-label,
.floating-buttons .floating-button.booking:hover .floating-button-label {
display: flex;
opacity: 1;
visibility: visible;
height: 44px;
line-height: 44px;
position: relative;
text-transform: uppercase;
font-weight: var(--bold-weight);
right: auto;
top: auto;
transform: translateY(0);
background-color: transparent;
}
.floating-buttons .floating-button.booking:before {
display: none;
}
}
@media screen and (max-width: 575px) {
.floating-buttons .floating-button-label,
.floating-buttons .floating-button:hover .floating-button-label {
}
} .separator {
display: inline;
margin: 0 5px;
}
.address .separator {
margin: 0 5px 0 0;
} @media (max-width: 575px) {
.separator,
.address .separator {
font-size: 0;
margin: 0;
}
.separator::after {
content: '';
display: block;
margin: 0;
}
} .image-gallery {
display: flex; }
.image-gallery img {
width: 100%;
height: auto;
}
.image-gallery .overlay {
background-color: transparent;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.image-gallery a {
z-index: 1;
position: relative;
width: 100%;
height: 100%;
display: block;
}
.image-gallery a:hover .overlay {
background-color: rgba(255, 255, 255, 0.3);
}
.image-gallery .title {
display: none;
}
.image-gallery a:hover .title {
width: 100%;
height: 100%;
font-size: 20px;
color: var(--grey-100);
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
text-shadow: 0 0 20px rgba(0, 0, 0, 0.85);
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
top: 0;
z-index: 5;
}
@media screen and (max-width: 992px) {
.image-gallery .title {
font-size: 24px;
}
} .nav-single {
width: 100%;
padding: 10px 0;
display: flex;
justify-content: space-between;
}
.nav-single .nav-label,
.nav-single .mobile {
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0;
}
.nav-single p {
font-size: 16px;
}
.nav-prev,
.nav-next,
.nav-grid {
min-width: 80px;
}
.nav-prev {
width: 40%;
display: flex;
align-items: center;
justify-content: flex-start;
}
.nav-next {
width: 40%;
display: flex;
align-items: center;
justify-content: flex-end;
}
.nav-grid {
width: 20%;
display: flex;
align-items: center;
justify-content: center;
}
.nav-grid a {
text-align: center;
display: inline-block;
}
.nav-grid a:hover .icon-grid .line {
background-color: var(--kokoa-600);
}
.nav-grid a:hover .nav-label {
color: var(--kokoa-600);
}
.nav-grid .icon-grid {
width: 28px;
height: 24px;
display: inline-block;
position: relative;
}
.nav-grid .icon-grid .line {
display: inline-block;
position: absolute;
height: 1px;
width: 28px;
background-color: var(--grey-500);
opacity: 1;
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
left: 0;
top: 5px;
}
.nav-grid .icon-grid .line.line-1 {
top: 13px;
}
.nav-grid .icon-grid .line.line-2 {
top: 21px;
}
.nav-prev span,
.nav-next span,
.nav-grid span {
font-size: 24px;
color: var(--grey-500);
line-height: 24px;
}
.nav-single span.mobile {
display: none;
}
@media screen and (max-width: 768px) {
.nav-single span.mobile {
display: inline-block;
}
.nav-single .nav-label {
display: none;
}
.nav-grid .icon-grid {
width: 24px;
}
.nav-grid .icon-grid .line {
width: 24px;
}
} body .splide__slide > .image img,
body .splide__slide > .image > img {
object-fit: cover;
width: 100%;
height: 100%;
}
body .splide__arrows {
position: absolute;
top: 50%;
left: 0;
width: 100%;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
pointer-events: auto;
}
body .splide__arrow {
background: rgba(0,0,0,0.5);
border: none;
width: 44px;
height: 44px;
border-radius: 50%;
font-size: 32px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
body .splide__arrow--next {
right: 20px;
}
body .splide__arrow--prev {
left: 20px;
}
body .splide__arrow:hover {
background-color: var(--kokoa-600);
}
body .splide__pagination {
position: absolute;
width: 100%;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 3px;
}
body .splide__pagination__page {
width: 15px !important;
height: 15px !important;
cursor: pointer;
background-color: rgba(0,0,0,0.25) !important;
}
body .splide__pagination .splide__pagination__page.is-active {
background-color: var(--beju-600) !important;
} .table-scrollable {
width: 100%;
overflow-y: auto;
margin: 0 0 1em;
}
.table-scrollable::-webkit-scrollbar {
-webkit-appearance: none;
width: 14px;
height: 14px;
}
.table-scrollable::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 3px solid var(--grey-100);
background-color: rgba(0, 0, 0, .3);
}
.table-scrollable table {
width: 100%;
border-collapse: collapse;
}
.table-scrollable table thead th {
color: var(--kokoa-600);
}
.table-scrollable table td,
.table-scrollable table th {
font-size: var(--body1-font-size);
}
.table-scrollable table td,
.table-scrollable table th {
border-bottom: 1px solid var(--grey-300);
}
@media screen and (max-width: 768px) {
.table-scrollable table td,
.table-scrollable table th {
white-space: nowrap;
}
}
.wp-block-table td, .wp-block-table th {
border: 0;
}
.wp-block-table thead {
border-bottom: var(--border-size) solid var(--grey-300);
}
.wp-block-table tfoot {
border: 0;
}
.table, .table table {
width: 100%;
border: 0;
padding: 0;
margin: 0 0 1em;
}
.table thead th {
font-size: 20px;
font-weight: var(--bold-weight);
color: var(--grey-500);
}
.table td {
min-width: 160px;
padding: 15px 0;
font-size: 20px;
font-weight: var(--regular-weight);
color: var(--grey-500);
border-left: var(--border-size) solid transparent;
border-top: var(--border-size) solid transparent;
border-right: var(--border-size) solid transparent;
border-bottom: var(--border-size) solid var(--grey-300);
}
.table td a {
border-bottom: var(--border-size) solid var(--grey-500);
}
.table td a:hover {
border-bottom: var(--border-size) solid transparent;
}
.wp-block-table th {
font-weight: var(--bold-weight);
}
@media screen and (max-width: 768px) {
.table td {
width: 100%;
display: block;
}
.table td:first-child {
padding: 10px 0 0 0;
border-bottom: 0;
}
.table td {
padding: 0 0 10px 0;
}
} .table-container {
display: flex;
flex-direction: column;
gap: 15px;
}
.table-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: stretch;
}
.table-cell {
padding: 10px;
border-bottom: 1px solid var(--grey-300);
}
.cell-short {
flex: 0 0 240px;
font-weight: bold;
}
.cell-long {
flex: 1;
min-width: 240px;
}
@media (max-width: 768px) {
.table-row {
flex-direction: column; }
.cell-short {
flex: 1;
}
.cell-long {
flex: 1;
}
} input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border-color: var(--grey-500);
-webkit-text-fill-color: var(--grey-500);
-webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0.05) inset;
transition: background-color 5000s ease-in-out 0s;
} #breadcrumb {
padding-top: var(--pad-section-s);
padding-bottom: var(--pad-section-s);
}
.breadcrumb {
color: var(--grey-500);
display: flex;
align-items: center;
}
.breadcrumb a {
color: var(--grey-500);
}
.breadcrumb .current-page {
font-weight: var(--bold-weight);
color: var(--grey-500);
}
.breadcrumb .delimiter:after {
content: '';
width: 16px;
height: 16px;
-webkit-mask-image: url(//www.midori-apartments.de/wp-content/themes/midori/assets/images/icons/chevron-right.svg);
mask-image: url(//www.midori-apartments.de/wp-content/themes/midori/assets/images/icons/chevron-right.svg);
mask-repeat: no-repeat;
background-color: var(--grey-400);
position: relative;
margin: 0 8px;
display: flex;
justify-content: center;
align-items: center;
}
@media (max-width: 768px) {
#breadcrumb {
display: none;
}
} .crop-3-1 {
position: relative;
width: 100%;
padding-top: 33.3333%;
overflow: hidden;
}
.crop-3-1 img {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
}
@media (max-width: 992px) {
.crop-3-1 {
padding-top: 50%;
}
}
@media (max-width: 768px) {
.crop-3-1 {
aspect-ratio: auto;
}
.crop-3-1 img {
width: 100%;
height: auto;
object-fit: none;
}
} .wps-form {
width: 100%;
margin: 0 auto;
padding: 0;
}
.wps-form-row {
display: flex;
flex-direction: column;
width: 100%;
margin-bottom: 5px;
}
.wps-form-row .wpcf7-form-control {
width: 100%;
}
.wps-form-column {
flex: 1;
padding: 0.5rem 0;
width: 100%;
}
.wps-form-column.center {
text-align: center;
}
.wps-form-column.right {
text-align: right;
}
.wps-form-column.single {
padding: 0.5rem 0 !important;
}
@media only screen and (min-width: 48em) {
.wps-form-row {
flex-direction: row;
}
.wps-form-column {
padding: 0.5rem 1rem;
}
.wps-form-column:nth-child(odd) {
padding: 0.5rem 1rem 0.5rem 0;
}
.wps-form-column:nth-child(even) {
padding: 0.5rem 0 0.5rem 1rem;
}
}
.wps-form fieldset {
margin: 0 0 40px 0;
padding: 0;
border: 0;
}
.wpcf7-form-control-wrap,
.wpcf7-quiz-label {
margin: 0 0 20px 0;
display: block;
}
.wpcf7-form label {
margin: 0 0 5px 0;
font-size: var(--body1-font-size);
color: var(--grey-500);
font-weight: var(--regular-weight);
letter-spacing: 0;
line-height: 24px;
display: block;
}
.wpcf7-form label a {
text-decoration: none;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.wpcf7-select,
.wpcf7-text,
.wpcf7-textarea,
.wpcf7-date,
.wpcf7-email,
.wpcf7-number {
width: 100%;
padding: 5px 20px !important;
background-color: var(--grey-100) !important;
font-size: var(--body2-font-size) !important;
letter-spacing: 0;
color: var(--grey-600) !important;
line-height: 40px;
border-radius: var(--border-radius);
-webkit-border-radius: var(--border-radius);
-moz-border-radius: var(--border-radius);
border: 1px solid var(--grey-400);
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.wpcf7-select:focus,
.wpcf7-text:focus,
.wpcf7-textarea:focus,
.wpcf7-date:focus,
.wpcf7-email:focus,
.wpcf7-number:focus,
.wpcf7-select:hover,
.wpcf7-text:hover,
.wpcf7-textarea:hover,
.wpcf7-date:hover,
.wpcf7-email:hover,
.wpcf7-number:hover {
border: 1px solid var(--kokoa-600) !important;
border-radius: var(--border-radius) !important;
outline: 1px solid var(--kokoa-600) !important;
}
.wpcf7-select {
padding: 5px 20px !important;
line-height: 40px;
-webkit-appearance: none;
max-width: 100%;
overflow: hidden;
word-wrap: normal !important;
white-space: normal;
}
.wpcf7-date {
padding: 12px 20px !important;
line-height: 24px;
-webkit-appearance: none;
}
.wpcf7-submit {
width: auto !important;
padding: 12px 24px;
min-width: 160px;
background-color: var(--kokoa-600);
font-size: var(--body2-font-size);
font-weight: var(--bold-weight);
color: var(--grey-100);
text-align: center;
text-decoration: none;
letter-spacing: 0.5px;
text-transform: uppercase;
line-height: 1.25;
border: var(--border-size) solid var(--kokoa-600);
border-radius: var(--border-radius);
-moz-border-radius: var(--border-radius);
-webkit-border-radius: var(--border-radius);
-webkit-appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
transition: 0.25s ease-in;
overflow: hidden;
}
.wpcf7-submit:hover {
background-color: var(--blue-500);
border: var(--border-size) solid var(--blue-500);
color: var(--grey-100);
}
.wpcf7-submit:focus,
.wp-core-ui .button-primary.focus, 
.wp-core-ui .button-primary:focus {
outline: 0 !important;
box-shadow: none !important;
}
.wpcf7-submit:disabled {
opacity: 0.5;
}
.wpcf7-spinner {
display: none;
width: 0;
height: 0;
}
.wpcf7-submitting .wpcf7-spinner {
display: inline-block;
width: 16px;
height: 16px;
margin-left: 10px;
vertical-align: middle;
}
.visually-hidden {
position: absolute !important;
width: 1px; 
height: 1px; 
padding: 0; 
margin: -1px; 
overflow: hidden;
clip: rect(0,0,0,0); 
white-space: nowrap;
border: 0;
}
.required {
color: var(--kokoa-600);
}
.wpcf7-form p {
margin: 0 0 10px 0;
}
.wpcf7-not-valid {
border: var(--border-size) solid var(--red-600) !important;
}
.wpcf7-not-valid-tip {
font-size: var(--body2-font-size);
font-weight: var(--regular-weight);
color: var(--red-600) !important;
}
.wpcf7-list-item {
margin: 0 !important;
}
.wpcf7-form span.wpcf7-list-item {
display: block;
}
.wpcf7-list-item-label {
margin-left: 16px;
}
.wpcf7-form .wpcf7-checkbox label,
.wpcf7-form .wpcf7-acceptance label {
position: relative;
font-size: var(--body2-font-size) !important;
font-weight: var(--light-weight);
}
.wpcf7-form .wpcf7-checkbox label a,
.wpcf7-form .wpcf7-acceptance label a {
font-size: var(--body2-font-size) !important;
font-weight: var(--light-weight);
}
.wpcf7-form .wpcf7-checkbox input[type="checkbox"],
.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 24px !important;
height: 24px !important;
padding: 0 !important;
border: 4px solid var(--grey-100);
background-color: var(--grey-100);
outline: 1px solid var(--grey-600);
border-radius: 25px;
cursor: pointer;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.wpcf7-form .wpcf7-checkbox input[type="checkbox"]:focus,
.wpcf7-form .wpcf7-acceptance input[type="checkbox"]:focus {
outline: 2px solid var(--grey-600);
}
.wpcf7-form .wpcf7-checkbox input[type="checkbox"]:checked,
.wpcf7-form .wpcf7-acceptance input[type="checkbox"]:checked {
background-color: var(--grey-600);
border-color: var(--grey-100);
}
::placeholder {
color: var(--grey-500) !important;
opacity: 1;
}
.wpcf7-form .wpcf7-select option:first-child {
color: var(--grey-500) !important;
} .wpcf7-response-output,
.wpcf7-validation-errors,
.wpcf7-acceptance-missing {
margin: 0 0 10px 0 !important;
padding: 0 !important;
font-size: 18px;
font-weight: var(--regular-weight);
color: var(--red-600);
background-color: transparent;
border: 0 !important;
border-radius: var(--border-radius-max);
-webkit-border-radius: var(--border-radius-max);
-moz-border-radius: var(--border-radius-max);
}
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7-mail-sent-ok {
color: var(--grey-100) !important;
} .cf7-modal {
position: fixed;
z-index: 1001;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
padding: 0;
box-sizing: border-box;
}
.cf7-modal-content {
background-color: var(--grey-100);
padding: 10px 20px;
border-radius: var(--border-radius-max);
text-align: center;
max-width: 400px;
width: 100%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
transition: 0.5s ease-in-out;
font-size: 18px;
}
.cf7-modal-success .cf7-modal-content {
background-color: var(--green-600);
color: var(--grey-100);
}
.cf7-modal-error .cf7-modal-content {
background-color: var(--red-600);
color: var(--grey-100);
}
@media (max-width: 575px) {
.cf7-modal-content {
max-width: 90%;
}
}
.form form fieldset input.field.error:focus,
.form form fieldset select.error:focus,
.form form fieldset textarea.error:focus,
.formTab form fieldset input.field.error:focus,
.formTab form fieldset select.error:focus,
.formTab form fieldset textarea.error:focus,
.form form fieldset input[type="checkbox"].error:focus+label:before {
border: var(--border-size) solid var(--red-600);
}
p.error {
width: auto;
max-width: 640px;
margin: 0 auto 25px auto;
padding: 10px;
font-size: 32px;
color: var(--grey-100);
text-align: left;
line-height: 125%;
background-color: var(--red-600);
}
p.success {
width: auto;
max-width: 640px;
margin: 0 auto 25px auto;
padding: 10px;
font-size: 32px;
color: var(--grey-100);
text-align: left;
line-height: 125%;
background-color: var(--green-600);
}
p.error i,
p.success i {
margin-right: 10px;
}
span.error {
font-weight: var(--bold-weight);
color: var(--red-600);
}
span.required {
color: var(--kokoa-600);
} input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border-color: var(--grey-500);
-webkit-text-fill-color: var(--grey-500);
-webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0.05) inset;
transition: background-color 5000s ease-in-out 0s;
} .accordion {
max-width: 100%;
margin: 0 auto 60px auto;
}
.accordion-header h2 {
margin:0;
padding:0 0 0 20px;
display:inline-block;
font-style: normal;
font-weight: var(--bold-weight);
color: var(--kokoa-600);
}
.accordion-header h2 span {
font-size: var(--h6-font-size);
font-style: normal;
font-weight: var(--regular-weight);
line-height: 32px;
}
.accordion .accordion-header h3 {
margin: 0;
padding: 0 0 0 20px;
display: inline-block;
font-weight: var(--regular-weight);
color: var(--kokoa-600);
text-transform: none;
text-align: left;
letter-spacing: 0;
line-height: 1.2em;
}
.accordion .active.accordion-header h2,
.accordion .active.accordion-header h3,
.accordion .accordion-header:hover h2,
.accordion .accordion-header:hover h3 {
color: var(--kokoa-600);
}
.accordion .accordion-header {
margin: 0;
padding: 15px 20px;
text-align: left;
border-top: var(--border-size) solid var(--soft-gray-color);
position: relative;
}
.accordion .accordion-header:first-child {
border-top: 0;
}
.accordion .accordion-header:hover {
cursor: pointer;
}
.accordion .accordion-header:hover::before,
.accordion .accordion-header:hover::after {
background-color: var(--kokoa-600);
}
.accordion .accordion-header:hover h2 {
color: var(--kokoa-600) !important;
}
.accordion .active.accordion-header,
.accordion .active.accordion-header:hover { }
.accordion .active.accordion-header h2,
.accordion .active.accordion-header:hover h2 {
font-weight: var(--bold-weight);
color: var(--kokoa-600) !important;
}
.accordion .accordion-header:hover h2,
.accordion .accordion-header:hover h2 a {
color: var(--kokoa-600) !important;
}
.accordion .accordion-header::after,
.accordion .accordion-header::before {
content: '';
background-color: var(--kurumi-600);
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
.accordion .accordion-header::after {
width: 21px;
height: 2px;
float: right;
position: absolute;
top: 31px;
left: 0;
}
.accordion .accordion-header::before {
width: 2px;
height: 21px;
float: right;
position: absolute;
top: 21px;
left: 10px;
}
.accordion .active.accordion-header::before {
background-color: var(--kokoa-600);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.accordion .active.accordion-header::after {
background-color: var(--kokoa-600);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.accordion .accordion-content {
display: none;
padding: 0 0 0 20px;
margin: 0 0 20px 0;
}
.accordion .accordion-content p:not(.link) {
margin: 30px 0 0 0 !important;
} @media only screen and (max-width: 575px) {
.accordion .accordion-header {
padding: 10px;
text-align: left;
}
.accordion-header h2 {
font-size: var(--h6-font-size);
}
.accordion .accordion-header::after {
top: 23px;
}
.accordion .accordion-header::before {
top: 13px;
}
.accordion .accordion-header h3 {
padding-left: 30px;
font-size: var(--h6-font-size);
text-align: left;
}
}
.show-desktop,
.show-tablet,
.show-mobile {
display: none !important;
} @media (min-width: 992px) {
.show-desktop {
display: block !important; }
} @media (min-width: 576px) and (max-width: 991px) {
.show-tablet {
display: block !important; }
} @media (max-width: 575px) {
.show-mobile {
display: block !important; }
} .pt-s {
padding-top: var(--pad-section-s);
}
.pt-m {
padding-top: var(--pad-section-m);
}
.pt-l {
padding-top: var(--pad-section-l);
}
.pt-xl {
padding-top: var(--pad-section-xl);
}
.pt-xxl {
padding-top: var(--pad-section-xxl);
}
.pb-s {
padding-bottom: var(--pad-section-s);
}
.pb-m {
padding-bottom: var(--pad-section-m);
}
.pb-l {
padding-bottom: var(--pad-section-l);
}
.pb-xl {
padding-bottom: var(--pad-section-xl);
}
.pb-xxl {
padding-bottom: var(--pad-section-xxl);
} .bg-blue-200 {
background-color: var(--blue-200);
} @supports (-webkit-touch-callout: none) {
.parallax-image {
background-attachment: scroll !important;
}
}