.elementor-widget-html.premium-cursor-ftext .premium-global-cursor-{{ID}} .premium-cursor-follow-text{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-html .premium-global-cursor-{{ID}}{color:var( --e-global-color-primary );fill:var( --e-global-color-primary );}.elementor-widget-html .premium-global-badge-{{ID}} .premium-badge-text{color:var( --e-global-color-secondary );}.elementor-widget-html.pa-bg-clipped-yes.premium-gbadge-custom .premium-global-badge-{{ID}} .premium-badge-text, .elementor-widget-html:not(.premium-gbadge-custom) .premium-global-badge-{{ID}} .premium-badge-container, .elementor-widget-html.premium-gbadge-custom:not(.pa-bg-clipped-yes) .premium-global-badge-{{ID}} .premium-badge-container{background-color:var( --e-global-color-primary );}.elementor-widget-html .premium-global-badge-{{ID}} .premium-badge-icon{color:var( --e-global-color-secondary );fill:var( --e-global-color-secondary );}body:not(.rtl) .elementor-9 .elementor-element.elementor-element-fdaf7cf{left:0px;}body.rtl .elementor-9 .elementor-element.elementor-element-fdaf7cf{right:0px;}.elementor-9 .elementor-element.elementor-element-fdaf7cf{top:0px;}.elementor-widget-template.premium-cursor-ftext .premium-global-cursor-{{ID}} .premium-cursor-follow-text{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-template .premium-global-cursor-{{ID}}{color:var( --e-global-color-primary );fill:var( --e-global-color-primary );}.elementor-widget-template .premium-global-badge-{{ID}} .premium-badge-text{color:var( --e-global-color-secondary );}.elementor-widget-template.pa-bg-clipped-yes.premium-gbadge-custom .premium-global-badge-{{ID}} .premium-badge-text, .elementor-widget-template:not(.premium-gbadge-custom) .premium-global-badge-{{ID}} .premium-badge-container, .elementor-widget-template.premium-gbadge-custom:not(.pa-bg-clipped-yes) .premium-global-badge-{{ID}} .premium-badge-container{background-color:var( --e-global-color-primary );}.elementor-widget-template .premium-global-badge-{{ID}} .premium-badge-icon{color:var( --e-global-color-secondary );fill:var( --e-global-color-secondary );}body:not(.rtl) .elementor-9 .elementor-element.elementor-element-6b291b2{left:0px;}body.rtl .elementor-9 .elementor-element.elementor-element-6b291b2{right:0px;}.elementor-9 .elementor-element.elementor-element-6b291b2{top:0px;}body:not(.rtl) .elementor-9 .elementor-element.elementor-element-c9c62c4{left:0px;}body.rtl .elementor-9 .elementor-element.elementor-element-c9c62c4{right:0px;}.elementor-9 .elementor-element.elementor-element-c9c62c4{top:0px;}body:not(.rtl) .elementor-9 .elementor-element.elementor-element-1c30daa{left:0px;}body.rtl .elementor-9 .elementor-element.elementor-element-1c30daa{right:0px;}.elementor-9 .elementor-element.elementor-element-1c30daa{top:0px;}.elementor-widget-premium-google-reviews.premium-cursor-ftext .premium-global-cursor-{{ID}} .premium-cursor-follow-text{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-premium-google-reviews .premium-global-cursor-{{ID}}{color:var( --e-global-color-primary );fill:var( --e-global-color-primary );}.elementor-widget-premium-google-reviews .premium-global-badge-{{ID}} .premium-badge-text{color:var( --e-global-color-secondary );}.elementor-widget-premium-google-reviews.pa-bg-clipped-yes.premium-gbadge-custom .premium-global-badge-{{ID}} .premium-badge-text, .elementor-widget-premium-google-reviews:not(.premium-gbadge-custom) .premium-global-badge-{{ID}} .premium-badge-container, .elementor-widget-premium-google-reviews.premium-gbadge-custom:not(.pa-bg-clipped-yes) .premium-global-badge-{{ID}} .premium-badge-container{background-color:var( --e-global-color-primary );}.elementor-widget-premium-google-reviews .premium-global-badge-{{ID}} .premium-badge-icon{color:var( --e-global-color-secondary );fill:var( --e-global-color-secondary );}.elementor-widget-premium-google-reviews .premium-fb-rev-rating-count span{color:var( --e-global-color-primary );}.elementor-widget-premium-google-reviews .premium-fb-rev-page-link{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-premium-google-reviews .premium-fb-rev-page-link:hover{color:var( --e-global-color-primary );}.elementor-widget-premium-google-reviews .premium-fb-rev-page-rating{color:var( --e-global-color-primary );}.elementor-widget-premium-google-reviews .premium-fb-rev-reviewer-link{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-premium-google-reviews .premium-fb-rev-reviewer-link:hover{color:var( --e-global-color-primary );}.elementor-widget-premium-google-reviews .premium-fb-rev-time .premium-fb-rev-time-text{color:var( --e-global-color-primary );}.elementor-widget-premium-google-reviews .premium-fb-rev-time .premium-fb-rev-time-text:hover{color:var( --e-global-color-primary );}.elementor-widget-premium-google-reviews .premium-fb-rev-text{color:var( --e-global-color-secondary );}.elementor-widget-premium-google-reviews .premium-fb-rev-readmore{color:var( --e-global-color-primary );}.elementor-widget-premium-google-reviews .premium-fb-rev-readmore:hover{color:var( --e-global-color-primary );}.elementor-widget-premium-google-reviews .premium-fb-rev-container .slick-arrow{color:var( --e-global-color-primary );background-color:var( --e-global-color-secondary );}.elementor-widget-premium-google-reviews .premium-fb-rev-container .slick-arrow:hover{color:var( --e-global-color-primary );background-color:var( --e-global-color-secondary );}.elementor-widget-premium-google-reviews ul.slick-dots li{color:var( --e-global-color-secondary );}.elementor-widget-premium-google-reviews ul.slick-dots li.slick-active{color:var( --e-global-color-primary );}.elementor-9 .elementor-element.elementor-element-a15d2fa .premium-fb-rev-review-wrap{width:33.33%;padding:20px 20px 20px 20px;}.elementor-9 .elementor-element.elementor-element-a15d2fa .premium-fb-rev-icon{left:95%;--translate-x:-95%;top:5%;--translate-y:-5%;}.elementor-9 .elementor-element.elementor-element-a15d2fa .premium-fb-rev-reviewer-header{justify-content:flex-start;}.elementor-9 .elementor-element.elementor-element-a15d2fa .premium-fb-rev-review{border-radius:5px;padding:1px 1px 1px 1px;}.elementor-9 .elementor-element.elementor-element-a15d2fa .premium-fb-rev-reviews a.carousel-arrow , .elementor-9 .elementor-element.elementor-element-a15d2fa.premium-fb-page-next-yes.premium-reviews-place-v-center .premium-fb-rev-page-inner {transform:translateY(calc(-50% + 20px/2 - 20px/2 )) !important;}.elementor-9 .elementor-element.elementor-element-a15d2fa.premium-fb-page-next-yes.premium-reviews-place-v-bottom .premium-fb-rev-page-inner {transform:translateY(calc(-100% - 20px )) !important;}.elementor-9 .elementor-element.elementor-element-a15d2fa.premium-fb-page-next-yes.premium-reviews-place-v-top .premium-fb-rev-page-inner {transform:translateY(20px) !important;}.elementor-9 .elementor-element.elementor-element-a15d2fa .premium-fb-rev-text-wrapper{margin:10px 0px 0px 0px;}.elementor-9 .elementor-element.elementor-element-a15d2fa{justify-content:center;}body:not(.rtl) .elementor-9 .elementor-element.elementor-element-6d14cbc{left:0px;}body.rtl .elementor-9 .elementor-element.elementor-element-6d14cbc{right:0px;}.elementor-9 .elementor-element.elementor-element-6d14cbc{top:0px;}@media(max-width:1300px){.elementor-9 .elementor-element.elementor-element-a15d2fa .premium-fb-rev-review-wrap{width:100%;}}@media(max-width:767px){.elementor-9 .elementor-element.elementor-element-a15d2fa .premium-fb-rev-review-wrap{width:100%;}}/* Start custom CSS for premium-google-reviews, class: .elementor-element-a15d2fa *//* shorthands */
.elementor-widget-premium-google-reviews {
--reviews-card-bg: var(--mrkt-color-white);
--reviews-card-border: var(--mrkt-color-border-default);
--reviews-card-radius: var(--mrkt-border-radius-M);
--reviews-card-padding: clamp(1.5rem, 3vw, 2.25rem);
--reviews-card-shadow: 0 1.5rem 1.5rem -0.75rem color-mix(in oklch, var(--mrkt-color-primary-500) 12%, var(--mrkt-color-transparent));
--reviews-quote-color: var(--mrkt-color-primary-700);
--reviews-author-color: var(--mrkt-color-primary-500);
--reviews-readmore-color: var(--mrkt-color-primary-700);
--reviews-btn-bg: var(--mrkt-color-white);
--reviews-btn-color: var(--mrkt-color-text);
--reviews-btn-border: var(--mrkt-color-border-default);
--reviews-btn-bg-hover: var(--mrkt-color-primary-500);
--reviews-btn-color-hover: var(--mrkt-color-white);
/* room above the slider for the arrow pills */
position: relative;
}
/* middle active slide(s): inset the card horizontally */
.elementor-widget-premium-google-reviews .premium-fb-rev-container,
.elementor-widget-premium-google-reviews .premium-fb-rev-list,
.elementor-widget-premium-google-reviews .premium-fb-rev-reviews {
padding: 0;
background: transparent;
}
.elementor-widget-premium-google-reviews .slick-list {
overflow: hidden;
padding: 0 0 3rem;
margin-bottom: -3rem;
}
.elementor-widget-premium-google-reviews.elementor-widget-premium-google-reviews
.premium-fb-rev-review-wrap.premium-fb-rev-review-wrap {
padding: 0;
height: auto;
box-sizing: border-box;
}
.elementor-widget-premium-google-reviews .slick-track {
display: flex;
align-items: stretch;
}
.elementor-widget-premium-google-reviews .slick-slide > div,
.elementor-widget-premium-google-reviews .slick-slide .premium-fb-rev-review-wrap {
height: 100%;
}
.elementor-widget-premium-google-reviews .slick-slide .premium-fb-rev-review {
width: calc(100% - 1.5rem);
margin-inline: 0.75rem;
}
.elementor-widget-premium-google-reviews .slick-slide.slick-active:not(.slick-active + .slick-active) .premium-fb-rev-review {
width: calc(100% - 0.75rem);
margin-left: 0;
}
.elementor-widget-premium-google-reviews .slick-slide.slick-active:not(:has(+ .slick-active)) .premium-fb-rev-review {
width: calc(100% - 0.75rem);
margin-right: 0;
}
.elementor-widget-premium-google-reviews
.slick-slide.slick-active:not(.slick-active + .slick-active):not(:has(+ .slick-active))
.premium-fb-rev-review {
width: 100%;
}
/* ── card ────────────────────────────── */
.elementor-widget-premium-google-reviews.elementor-widget-premium-google-reviews
.premium-fb-rev-review.premium-fb-rev-review {
display: flex;
flex-direction: column;
height: 100%;
padding: var(--reviews-card-padding);
background: var(--reviews-card-bg);
border: 1px solid var(--reviews-card-border);
border-radius: var(--reviews-card-radius);
box-shadow: var(--reviews-card-shadow);
box-sizing: border-box;
transition:
transform var(--mrkt-transition-base),
box-shadow var(--mrkt-transition-base);
}
.elementor-widget-premium-google-reviews.elementor-widget-premium-google-reviews
.premium-fb-rev-review-inner.premium-fb-rev-review-inner {
flex: 1;
}
.elementor-widget-premium-google-reviews.elementor-widget-premium-google-reviews
.premium-fb-rev-content-right.premium-fb-rev-content-right {
flex: 1;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr;
column-gap: 1rem;
}
.elementor-widget-premium-google-reviews.elementor-widget-premium-google-reviews
.premium-fb-rev-content-right.premium-fb-rev-content-right
> .premium-fb-rev-content-left {
grid-column: 1;
grid-row: 1;
}
.elementor-widget-premium-google-reviews.elementor-widget-premium-google-reviews
.premium-fb-rev-content-right.premium-fb-rev-content-right
> .premium-fb-rev-reviewer-header {
grid-column: 2;
grid-row: 1;
align-self: center;
}
.elementor-widget-premium-google-reviews.elementor-widget-premium-google-reviews
.premium-fb-rev-content-right.premium-fb-rev-content-right
> .premium-fb-rev-rating {
grid-column: 1 / -1;
grid-row: 2;
display: flex;
flex-direction: column;
}
.elementor-widget-premium-google-reviews .premium-fb-rev-review:hover {
transform: translateY(-2px);
box-shadow: 0 2rem 2rem -0.75rem color-mix(in oklch, var(--mrkt-color-primary-500) 18%, var(--mrkt-color-transparent));
}
/* avatar */
.elementor-widget-premium-google-reviews .premium-fb-rev-img {
width: 3rem;
height: 3rem;
border-radius: var(--mrkt-border-radius-full);
object-fit: cover;
}
/* name */
.elementor-widget-premium-google-reviews.elementor-widget-premium-google-reviews
.premium-fb-rev-reviewer-link.premium-fb-rev-reviewer-link,
.elementor-widget-premium-google-reviews.elementor-widget-premium-google-reviews
.premium-fb-rev-reviewer-link.premium-fb-rev-reviewer-link:visited {
font-family: var(--mrkt-font-heading);
font-size: 1rem;
font-weight: 700;
color: var(--reviews-author-color);
text-decoration: none;
line-height: 1.2;
}
.elementor-widget-premium-google-reviews.elementor-widget-premium-google-reviews
.premium-fb-rev-reviewer-link.premium-fb-rev-reviewer-link:hover {
color: var(--reviews-readmore-color);
}
/* stars */
.elementor-widget-premium-google-reviews .premium-fb-rev-stars-container { line-height: 0; }
.elementor-widget-premium-google-reviews .premium-fb-rev-stars { display: inline-flex; gap: 0.125rem; }
.elementor-widget-premium-google-reviews .premium-fb-rev-star svg { width: 0.95rem; height: 0.95rem; }
/* keep stars left-aligned, not centered */
.elementor-widget-premium-google-reviews.elementor-widget-premium-google-reviews
.premium-fb-rev-reviewer-header.premium-fb-rev-reviewer-header {
justify-content: flex-start;
align-items: flex-start;
}
/* quote text */
.elementor-widget-premium-google-reviews.elementor-widget-premium-google-reviews
.premium-fb-rev-text-wrapper.premium-fb-rev-text-wrapper {
margin-top: 1.25rem;
}
.elementor-widget-premium-google-reviews.elementor-widget-premium-google-reviews
.premium-fb-rev-text.premium-fb-rev-text {
font-family: var(--mrkt-font-heading);
font-size: 1.05rem;
line-height: 1.5;
color: var(--reviews-quote-color);
}
.elementor-widget-premium-google-reviews.elementor-widget-premium-google-reviews
.premium-fb-rev-text-wrapper.premium-fb-rev-text-wrapper {
display: flex;
flex-direction: column;
flex: 1;
}
.elementor-widget-premium-google-reviews.elementor-widget-premium-google-reviews
.premium-fb-rev-readmore.premium-fb-rev-readmore,
.elementor-widget-premium-google-reviews.elementor-widget-premium-google-reviews
.premium-fb-rev-readmore.premium-fb-rev-readmore:visited {
align-self: flex-start;
margin-top: auto;
padding-top: 0.75rem;
font-family: var(--mrkt-font-body);
font-size: var(--mrkt-typo-body-small-size);
font-weight: 700;
color: var(--reviews-readmore-color);
text-decoration: none;
letter-spacing: 0.04em;
}
.elementor-widget-premium-google-reviews.elementor-widget-premium-google-reviews
.premium-fb-rev-readmore.premium-fb-rev-readmore:hover {
color: var(--mrkt-color-primary-500);
text-decoration: underline;
}
/* google "G" badge*/
.elementor-widget-premium-google-reviews .premium-fb-rev-icon {
position: absolute;
top: 1.25rem;
right: 1.25rem;
width: 1.25rem;
height: 1.25rem;
opacity: 0.7;
}
.elementor-widget-premium-google-reviews .premium-fb-rev-icon svg {
width: 100%;
height: 100%;
display: block;
}
/* ── arrows → "Zurück" / "Weiter" pills ── */
/* Plugin uses `a.carousel-arrow` etc. Pair widget×2 + a.carousel-arrow×2
= (0,4,0) + (0,2,1) — overrules its post-XYZ.css rule. */
.elementor-widget-premium-google-reviews.elementor-widget-premium-google-reviews
.premium-fb-rev-reviews
a.carousel-arrow.carousel-arrow.slick-arrow {
/* reset plugin positioning; float above the widget by own height + 1rem */
top: -2rem;
left: auto;
bottom: auto;
width: auto;
height: auto;
transform: translateY(-100%);
margin: 0;
position: absolute;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.6rem 1.25rem;
background: var(--reviews-btn-bg);
color: var(--reviews-btn-color);
border: 1px solid var(--reviews-btn-border);
border-radius: var(--mrkt-border-radius-full);
font-family: var(--mrkt-font-body);
font-size: var(--mrkt-typo-body-small-size);
font-weight: 700;
line-height: 1;
letter-spacing: 0.04em;
text-decoration: none;
cursor: pointer;
opacity: 1;
z-index: 5;
transition:
background var(--mrkt-transition-base),
color var(--mrkt-transition-base),
border-color var(--mrkt-transition-base),
transform var(--mrkt-transition-base);
}
/* hide FontAwesome chevron inside the arrow */
.elementor-widget-premium-google-reviews .carousel-arrow > i,
.elementor-widget-premium-google-reviews .carousel-arrow > .fas,
.elementor-widget-premium-google-reviews .carousel-arrow > svg {
display: none;
}
/* inject labels */
.elementor-widget-premium-google-reviews .carousel-arrow.carousel-prev::before {
content: "Zurück";
display: inline-block;
}
.elementor-widget-premium-google-reviews .carousel-arrow.carousel-next::before {
content: "Weiter";
display: inline-block;
}
/* place the two pills at top-right, side by side */
.elementor-widget-premium-google-reviews.elementor-widget-premium-google-reviews
.premium-fb-rev-reviews
a.carousel-arrow.carousel-prev.carousel-prev {
right: 6.5rem;
left: auto;
}
.elementor-widget-premium-google-reviews.elementor-widget-premium-google-reviews
.premium-fb-rev-reviews
a.carousel-arrow.carousel-next.carousel-next {
right: 0;
left: auto;
}
/* hover/focus/disabled */
.elementor-widget-premium-google-reviews.elementor-widget-premium-google-reviews
.premium-fb-rev-reviews
a.carousel-arrow.carousel-arrow:hover,
.elementor-widget-premium-google-reviews.elementor-widget-premium-google-reviews
.premium-fb-rev-reviews
a.carousel-arrow.carousel-arrow:focus-visible {
background: var(--reviews-btn-bg-hover);
color: var(--reviews-btn-color-hover);
border-color: var(--reviews-btn-bg-hover);
transform: translateY(calc(-100% - 1px));
}
.elementor-widget-premium-google-reviews .carousel-arrow:focus-visible {
outline: 2px solid var(--mrkt-color-primary-500);
outline-offset: 3px;
}
.elementor-widget-premium-google-reviews .carousel-arrow.slick-disabled {
opacity: 0.4;
pointer-events: none;
}
/* ── tablet/mobile ────────────────────── */
@media (max-width: 767px) {
.elementor-widget-premium-google-reviews.elementor-widget-premium-google-reviews
.premium-fb-rev-reviews
a.carousel-arrow.carousel-arrow {
padding: 0.5rem 1rem;
font-size: 0.8rem;
}
.elementor-widget-premium-google-reviews.elementor-widget-premium-google-reviews
.premium-fb-rev-reviews
a.carousel-arrow.carousel-prev.carousel-prev {
right: 5.5rem;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6d14cbc */@scope (.mrkt-faq) {
/* Reset Elementor Defaults */
:scope .e-div-block-base,
:scope:is(.elementor *) {
/* Layout */
padding: 0;
min-width: 0;
min-height: 0;
}
:scope {
/* Style */
--mrkt-faq-color: var(--mrkt-color-primary-100);
--mrkt-faq-border-color: color-mix(in srgb, var(--mrkt-faq-color) 38%, transparent);
--mrkt-faq-radius: var(--mrkt-border-radius-S);
--mrkt-faq-shadow: 0 1.35rem 3.5rem color-mix(in srgb, var(--mrkt-color-primary-700) 32%, transparent);
/* Transitions */
--mrkt-faq-transition: var(--mrkt-motion-medium, 0.5s);
--mrkt-faq-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.elementor :scope {
/* Positioning */
position: relative;
/* Layout */
display: grid;
width: 100%;
gap: 0.85rem;
/* Style */
color: var(--mrkt-color-white);
counter-reset: faq 0;
}
.elementor :scope .question,
.elementor :scope .answer p {
/* Layout */
margin: 0;
}
.elementor :scope .item {
/* Positioning */
position: relative;
/* Layout */
width: 100%;
padding-block: 0;
padding-inline: 0;
overflow: hidden;
/* Style */
border: 1px solid color-mix(in srgb, var(--mrkt-faq-color) 18%, transparent);
border-radius: var(--mrkt-faq-radius);
background: transparent;
box-shadow: var(--mrkt-color-primary-700);
counter-increment: faq 1;
cursor: pointer;
/* Transitions */
transition:
width var(--mrkt-faq-transition) var(--mrkt-faq-ease),
padding-inline var(--mrkt-faq-transition) var(--mrkt-faq-ease),
border-color var(--mrkt-faq-transition) var(--mrkt-faq-ease),
background var(--mrkt-faq-transition) var(--mrkt-faq-ease),
transform var(--mrkt-faq-transition) var(--mrkt-faq-ease);
}
:scope .item::before {
/* Positioning */
position: absolute;
inset: 0;
/* Style */
content: "";
border-radius: inherit;
background: linear-gradient(90deg, color-mix(in srgb, var(--mrkt-faq-color) 12%, transparent), transparent 34%);
opacity: 0;
pointer-events: none;
/* Transitions */
transition: opacity var(--mrkt-faq-transition) var(--mrkt-faq-ease);
}
:scope .item[open]:not(.is-closing),
:scope .item.is-open:not(.is-closing) {
/* Layout */
width: calc(100% + 0.7rem);
padding-inline: 0.35rem;
/* Style */
border-color: var(--mrkt-faq-border-color);
background: linear-gradient(135deg, color-mix(in srgb, var(--mrkt-color-primary) 86%, transparent), color-mix(in srgb, var(--mrkt-color-primary-300) 70%, transparent)),
var(--mrkt-color-primary-700);
/* Transitions */
transform: translateX(-0.35rem);
}
:scope .item[open]:not(.is-closing)::before,
:scope .item.is-open:not(.is-closing)::before {
/* Style */
opacity: 1;
}
:scope .question {
/* Positioning */
position: relative;
z-index: 1;
/* Layout */
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
width: 100%;
gap: 1rem;
padding: clamp(1rem, 2vw, 1.35rem);
/* Font */
font-family: var(--mrkt-font-anchor);
font-size: clamp(1.15rem, 1.5vw, 1.45rem);
font-weight: 600;
line-height: 1.15em;
list-style: none;
text-align: start;
/* Style */
border-style: none;
color: var(--mrkt-color-white);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
:scope .question:focus-visible {
/* Style */
outline: 2px solid color-mix(in srgb, var(--mrkt-faq-color) 62%, transparent);
outline-offset: -2px;
}
:scope .question::before {
/* Font */
font-family: var(--mrkt-font-body);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
/* Style */
content: counter(faq, decimal-leading-zero);
color: var(--mrkt-faq-color);
}
:scope .question::after {
/* Layout */
display: block;
width: 2rem;
height: 2rem;
/* Style */
content: "";
border: 1px solid color-mix(in srgb, var(--mrkt-faq-color) 28%, transparent);
background-color: transparent;
background-image:
linear-gradient(var(--mrkt-faq-color), var(--mrkt-faq-color)),
linear-gradient(var(--mrkt-faq-color), var(--mrkt-faq-color));
background-position: center, center;
background-repeat: no-repeat;
background-size: 0.75rem 2px, 2px 0.75rem;
transform-origin: center;
/* Transitions */
transition:
transform var(--mrkt-faq-transition) var(--mrkt-faq-ease),
background-color var(--mrkt-faq-transition) var(--mrkt-faq-ease);
}
:scope .item[open]:not(.is-closing) .question::after,
:scope .item.is-open:not(.is-closing) .question::after {
/* Style */
background-color: color-mix(in srgb, var(--mrkt-faq-color) 14%, transparent);
/* Transitions */
transform: rotate(45deg);
}
:scope .answer {
/* Positioning */
position: relative;
z-index: 1;
/* Layout */
min-width: min(48rem, 100%);
padding: 0 calc(3.35rem + clamp(1rem, 2vw, 1.35rem)) clamp(1.1rem, 2vw, 1.45rem);
overflow: hidden;
/* Font */
font-size: 1rem;
line-height: 1.65;
/* Style */
color: color-mix(in srgb, var(--mrkt-color-white) 72%, transparent);
}
:scope .item:not([open]):not(.is-open):not(.is-animating) .answer {
/* Layout */
display: none;
}
@media (max-width: 767px) {
:scope .item[open]:not(.is-closing),
:scope .item.is-open:not(.is-closing) {
/* Layout */
width: 100%;
/* Transitions */
transform: none;
}
:scope .answer {
/* Layout */
padding-inline: calc(2rem + clamp(1rem, 2vw, 1.35rem));
}
}
@media (prefers-reduced-motion: reduce) {
:scope .item,
:scope .item::before,
:scope .question::after {
/* Transitions */
transition: none;
}
}
}/* End custom CSS */
/* Start custom CSS */:root {
--hero-contact-clearance: clamp(11rem, 18vh, 14rem);
}
/* ==========================================================================
Section: Hero
========================================================================== */
@scope (.mrkt-hero) {
:scope .e-div-block-base,
.elementor :scope {
padding: 0;
min-width: 0;
min-height: 0;
}
.elementor :scope {
/* Positioning */
position: relative;
/* Layout */
isolation: isolate;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
align-content: center;
column-gap: var(--mrkt-space-XL);
row-gap: var(--mrkt-base-gap);
min-height: 60vh;
padding-block: var(--mrkt-section-padding-block);
padding-bottom: calc(var(--mrkt-section-padding-block) + var(--hero-contact-clearance));
padding-inline: var(--mrkt-section-padding-inline);
/* Font */
color: var(--mrkt-color-white-a80);
/* Style */
overflow: visible;
}
:scope .mrkt-typo-eyebrow {
color: var(--mrkt-color-primary-300);
}
:scope .mrkt-typo-h1 {
color: var(--mrkt-color-white);
}
:scope .media-slide::before {
content: "";
/* Positioning */
position: absolute;
z-index: -1;
inset: 0;
/* Style */
background: linear-gradient(
90deg,
color-mix(in srgb, var(--mrkt-color-primary-900) 84%, transparent) 0%,
color-mix(in srgb, var(--mrkt-color-primary-900) 65%, transparent) 35%,
color-mix(in srgb, var(--mrkt-color-primary-900) 82%, transparent) 100%
);
}
:scope .media-track {
/* Positioning */
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
/* Layout */
width: 100%;
height: 100%;
}
:scope .media-slide {
/* Positioning */
position: absolute;
inset: 0;
/* Layout */
width: 100%;
height: 100%;
/* Style */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/* Transitions */
transition: transform var(--hero-image-duration, 700ms) cubic-bezier(0.76, 0, 0.24, 1);
transform: translateX(100%);
will-change: transform;
}
:scope .media-slide.current {
/* Positioning */
z-index: 2;
/* Transitions */
transform: translateX(0);
}
:scope.dir-next .media-slide.incoming {
/* Positioning */
z-index: 3;
/* Transitions */
transform: translateX(100%);
}
:scope.dir-prev .media-slide.incoming {
/* Positioning */
z-index: 3;
/* Transitions */
transform: translateX(-100%);
}
:scope.is-animating .media-slide.incoming {
/* Transitions */
transform: translateX(0);
}
:scope.dir-next.is-animating .media-slide.outgoing {
/* Transitions */
transform: translateX(-100%);
}
:scope.dir-prev.is-animating .media-slide.outgoing {
/* Transitions */
transform: translateX(100%);
}
:scope .content {
/* Positioning */
position: relative;
grid-area: 1 / 1;
z-index: 5;
/* Layout */
display: grid;
width: var(--mrkt-max-content-width);
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
}
:scope .content-slide {
/* Positioning */
grid-area: 1 / 1;
pointer-events: none;
/* Layout */
display: flex;
flex-direction: column;
gap: var(--mrkt-space-S);
/* Style */
opacity: 0;
filter: blur(12px);
/* Transitions */
transition:
opacity var(--hero-content-duration, 800ms) ease,
transform var(--hero-content-duration, 800ms) var(--hero-ease, cubic-bezier(0.22, 1, 0.36, 1)),
filter var(--hero-content-duration, 800ms) ease;
transform: translateY(40px);
will-change: transform, opacity, filter;
}
:scope .content-slide.active {
/* Positioning */
pointer-events: auto;
/* Style */
opacity: 1;
filter: blur(0);
/* Transitions */
transition-delay: var(--hero-content-delay, 600ms);
transform: translateY(0);
}
:scope .nav {
/* Positioning */
grid-area: 1 / 3;
/* Layout */
display: flex;
flex-direction: row;
color: var(--mrkt-color-white-a60);
gap: var(--mrkt-space-L);
}
:scope .nav-item {
/* Positioning */
position: relative;
cursor: pointer;
/* Layout */
padding: 0.75rem;
text-align: center;
width: fit-content;
/* Transitions */
transition: color var(--mrkt-transition-base);
}
:scope .nav-item:hover,
:scope .nav-item.active {
/* Style */
color: var(--mrkt-color-white);
}
:scope .nav-line {
/* Positioning */
position: absolute;
top: 0;
left: 0;
z-index: 1;
/* Layout */
width: 100%;
height: 2px;
overflow: hidden;
/* Style */
background-color: color-mix(in srgb, var(--mrkt-color-white) 15%, transparent);
}
:scope .nav-line::after {
content: "";
/* Positioning */
position: absolute;
inset: 0;
/* Layout */
width: 0%;
/* Style */
background-color: var(--mrkt-color-primary-300);
box-shadow: 0 0 15px var(--mrkt-color-primary-300);
/* Transitions */
transition: none;
}
:scope .nav-item.active .nav-line::after {
/* Layout */
width: var(--mrkt-nav-progress, 0%);
/* Transitions */
transition: none;
}
@media only screen and (max-width: 1300px) {
:scope {
/* Layout */
grid-template-columns: 1fr;
}
:scope .content {
/* Positioning */
grid-area: 1 / 1;
}
}
@media only screen and (max-width: 767px) {
:scope {
/* Layout */
padding-bottom: var(--mrkt-section-padding-block);
}
}
@media (prefers-reduced-motion: reduce) {
:scope .media-slide,
:scope .content-slide,
:scope .nav-line::after {
/* Transitions */
transition: none;
}
}
}
/* ==========================================================================
Section: mrkt-hero-contact
========================================================================== */
@scope (.mrkt-hero-contact) {
/* Reset Elementor Defaults */
:scope .e-div-block-base,
.elementor :scope {
padding: 0;
min-width: 0;
min-height: 0;
}
.elementor :scope {
/* Positioning */
position: relative;
z-index: 5;
/* Layout */
display: flex;
flex-direction: column;
width: 50vw;
margin-left: auto;
margin-right: var(--mrkt-section-padding-inline);
margin-bottom: calc(-1* var(--hero-contact-clearance));
/* Transitions */
transform: translateY(-50%);
}
@media only screen and (max-width: 767px) {
.elementor :scope {
width: 100%;
margin-inline: 0;
transform: none;
}
}
}
/* ==========================================================================
Section: Welcome
========================================================================== */
@scope (.mrkt-welcome) {
.elementor :scope {
/* Layout */
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: var(--mrkt-section-gap);
/* Style */
background-color: var(--mrkt-color-background);
}
:scope .mrkt-typo-eyebrow {
color: var(--mrkt-color-primary);
}
:scope .mrkt-typo-h2 {
color: var(--mrkt-color-primary-300);
}
:scope .mrkt-typo-meta {
color: var(--mrkt-color-text-muted);
}
/* --------------------------------------------------------------------------
Gallery (left)
-------------------------------------------------------------------------- */
/*
Windmill composition: a square 3x3 grid with the company logo as the
centre hub and four image blades wrapping the corners with 90°
rotational symmetry. Explicit areas keep the pattern deterministic.
*/
:scope .gallery {
/* Layout */
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
aspect-ratio: 1;
gap: var(--mrkt-space-S);
}
:scope .gallery-item {
/* Layout */
overflow: hidden;
border-radius: var(--mrkt-border-radius-M);
}
:scope .gallery-item {
/* Layout */
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Centre hub — logo tile, image contained instead of cropped. */
:scope .item-logo {
/* Positioning */
grid-area: 2 / 2;
/* Layout */
display: grid;
place-items: center;
padding: var(--mrkt-space-S);
/* Style */
background-color: var(--mrkt-color-background-alt);
}
:scope .item-logo {
object-fit: contain;
}
/* Blades — top (landscape) → right (portrait) → bottom (landscape) → left (portrait). */
:scope .item-top {
grid-area: 1 / 1 / 2 / 3;
}
:scope .item-right {
grid-area: 1 / 3 / 3 / 4;
}
:scope .item-bottom {
grid-area: 3 / 2 / 4 / 4;
}
:scope .item-left {
grid-area: 2 / 1 / 4 / 2;
}
/* --------------------------------------------------------------------------
Content (right)
-------------------------------------------------------------------------- */
:scope .content {
/* Layout */
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--mrkt-space-S);
}
/* --------------------------------------------------------------------------
Responsive
-------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
:scope {
grid-template-columns: 1fr;
gap: var(--mrkt-base-gap);
/* No contact overlay on mobile — back to the standard section padding. */
padding-top: var(--mrkt-section-padding-block);
}
}
}
/* ==========================================================================
Section: Guest House
========================================================================== */
@scope (.mrkt-guest-house) {
/* Reset Elementor Defaults */
:scope .e-div-block-base,
.elementor :scope {
padding: 0;
min-width: 0;
min-height: 0;
}
.elementor :scope {
display: flex;
flex-direction: column;
gap: var(--mrkt-base-gap);
align-items: center;
}
:scope .mrkt-typo-eyebrow {
color: var(--mrkt-color-primary);
}
:scope .mrkt-typo-h2 {
color: var(--mrkt-color-primary-300);
}
:scope::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.07;
/* Apply the variable color to the backdrop */
background-image: url('/wp-content/uploads/2026/08/DJI_0797.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
/* --------------------------------------------------------------------------
Intro
-------------------------------------------------------------------------- */
:scope .intro {
/* Layout */
display: flex;
flex-direction: column;
gap: var(--mrkt-space-S);
width: var(--mrkt-max-content-width);
text-align: center;
}
:scope .mrkt-typo-eyebrow {
/* Style */
color: var(--mrkt-color-primary);
}
/* --------------------------------------------------------------------------
Metro grid
-------------------------------------------------------------------------- */
:scope .metro {
/* Layout */
--metro-unit: clamp(6.5rem, 10vw, 10.5rem);
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: var(--metro-unit);
gap: var(--mrkt-space-S);
}
/*
Metro tiles: self-contained rectangles — the image fills the tile and a
brand-dark scrim carries the always-visible copy at the bottom edge.
*/
:scope .tile {
/* Positioning */
position: relative;
/* Layout */
display: block;
overflow: hidden;
border-radius: var(--mrkt-border-radius-M);
/* Font */
color: var(--mrkt-color-white);
text-decoration: none;
}
:scope .media {
/* Positioning */
position: absolute;
inset: 0;
/* Transitions */
transition: transform var(--mrkt-transition-slow);
}
:scope .media img {
/* Layout */
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Dark overlay dimming non-hovered tiles, faded in via :has(). */
:scope .media::before {
content: "";
/* Positioning */
position: absolute;
inset: 0;
/* Style */
background: var(--mrkt-color-black-a40);
/* Transitions */
opacity: 0;
transition: opacity var(--mrkt-transition-base);
}
/* Frosted primary-300 wash over dimmed tiles, faded in via :has(). */
:scope .media::after {
content: "";
/* Positioning */
position: absolute;
inset: 0;
/* Style */
background: color-mix(in srgb, var(--mrkt-color-primary-300) 60%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
/* Transitions */
opacity: 0;
transition: opacity var(--mrkt-transition-base);
}
/* Brand-dark scrim so tile copy stays readable on any photo. */
:scope .tile::after {
content: "";
/* Positioning */
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
/* Style */
background: linear-gradient(
to top,
color-mix(in srgb, var(--mrkt-color-primary-900) 80%, transparent) 0%,
color-mix(in srgb, var(--mrkt-color-primary-900) 30%, transparent) 42%,
transparent 68%
);
}
:scope .body {
/* Positioning */
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
/* Layout */
display: flex;
flex-direction: column;
gap: var(--mrkt-space-XXS);
padding: var(--mrkt-space-S);
}
:scope .title {
/* Transitions */
transition: color var(--mrkt-transition-base);
}
:scope .text {
/* Style */
color: var(--mrkt-color-white);
}
/* Collapse descriptions only where hover can reveal them again. */
@media (hover: hover) {
:scope .text {
/* Layout */
height: 1lh;
overflow: hidden;
/* Style */
-webkit-mask-image: linear-gradient(
to bottom,
var(--mrkt-color-black) 50%,
var(--mrkt-color-transparent) 100%
);
mask-image: linear-gradient(
to bottom,
var(--mrkt-color-black) 50%,
var(--mrkt-color-transparent) 100%
);
-webkit-mask-position: top;
mask-position: top;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
/* Transitions */
interpolate-size: allow-keywords;
transition:
height var(--mrkt-transition-base),
color var(--mrkt-transition-base),
-webkit-mask-size var(--mrkt-transition-slow),
mask-size var(--mrkt-transition-slow);
}
}
/* First row is two units high; the second row is 1.5 times taller. */
:scope .tile-zimmer {
grid-area: 1 / 1 / 3 / 4;
}
:scope .tile-kulinarik {
grid-area: 1 / 4 / 3 / 5;
}
:scope .tile-events {
grid-area: 1 / 5 / 3 / 7;
}
:scope .tile-fuehrungen {
grid-area: 3 / 1 / 6 / 3;
}
:scope .tile-region {
grid-area: 3 / 3 / 6 / 7;
}
:scope .tile-garten {
grid-area: 3 / 6 / 6 / 7;
}
/* --------------------------------------------------------------------------
Hover / focus interplay
-------------------------------------------------------------------------- */
/* Active tile zooms its image … */
:scope .tile:hover .media,
:scope .tile:focus-visible .media {
transform: scale(1.06);
}
/* Reveal the complete description and move its fade below the text. */
:scope .tile:hover .text,
:scope .tile:focus-visible .text {
/* Layout */
height: auto;
/* Style */
-webkit-mask-size: 100% 200%;
mask-size: 100% 200%;
}
/* … while every other tile dims under a dark overlay + primary-300 wash and muted copy. */
:scope .metro:has(.tile:hover) .tile:not(:hover),
:scope .metro:has(.tile:focus-visible) .tile:not(:focus-visible) {
cursor: default;
}
:scope .metro:has(.tile:hover) .tile:not(:hover) .media::before,
:scope .metro:has(.tile:hover) .tile:not(:hover) .media::after,
:scope .metro:has(.tile:focus-visible) .tile:not(:focus-visible) .media::before,
:scope .metro:has(.tile:focus-visible) .tile:not(:focus-visible) .media::after {
opacity: 1;
}
:scope .metro:has(.tile:hover) .tile:not(:hover) .title,
:scope .metro:has(.tile:hover) .tile:not(:hover) .text,
:scope .metro:has(.tile:focus-visible) .tile:not(:focus-visible) .title,
:scope .metro:has(.tile:focus-visible) .tile:not(:focus-visible) .text {
color: var(--mrkt-color-white-a10);
}
/* --------------------------------------------------------------------------
Responsive
-------------------------------------------------------------------------- */
@media only screen and (max-width: 1300px) {
:scope .metro {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
:scope .tile-zimmer {
grid-area: 1 / 1 / 3 / 4;
}
:scope .tile-region {
grid-area: 1 / 4 / 3 / 7;
}
:scope .tile-events {
grid-area: 3 / 1 / 5 / 3;
}
:scope .tile-fuehrungen {
grid-area: 3 / 3 / 5 / 5;
}
:scope .tile-kulinarik {
grid-area: 3 / 5 / 5 / 7;
}
}
@media (prefers-reduced-motion: reduce) {
:scope .media,
:scope .text {
transition: none;
}
}
}
/* ==========================================================================
Section: Event Teaser
Even horizontal split. The image half stays full-bleed (image styling in
Elementor) and hosts a frosted info card in its bottom-right corner; the
content half carries the section paddings itself, so the scope needs no
gap. Root therefore does NOT get the mrkt-section utility.
========================================================================== */
@scope (.mrkt-event-teaser) {
/* Reset Elementor Defaults */
:scope .e-div-block-base,
.elementor :scope {
padding: 0;
min-width: 0;
min-height: 0;
}
.elementor :scope {
/* Layout */
display: flex;
flex-direction: row;
}
:scope .mrkt-typo-h2 {
color: var(--mrkt-color-primary-300);
}
:scope .mrkt-typo-h3 {
color: var(--mrkt-color-primary-500);
}
:scope .mrkt-typo-eyebrow {
/* Style */
color: var(--mrkt-color-primary-500);
}
/* --------------------------------------------------------------------------
Media (left)
-------------------------------------------------------------------------- */
:scope .media {
/* Positioning */
position: relative;
align-self: stretch;
}
:scope .card {
/* Positioning */
position: absolute;
right: 0;
bottom: 0;
z-index: 1;
/* Layout */
display: flex;
flex-direction: column;
gap: var(--mrkt-space-XS);
width: min(28rem, 85%);
padding: var(--mrkt-space-M);
/* Style */
background: color-mix(in srgb, var(--mrkt-color-primary-300) 75%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
/* Font */
color: var(--mrkt-color-white);
}
/* --------------------------------------------------------------------------
Content (right)
-------------------------------------------------------------------------- */
:scope .content {
/* Layout */
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: var(--mrkt-space-S);
padding-block: var(--mrkt-section-padding-block);
padding-inline: var(--mrkt-section-padding-inline);
}
/* --------------------------------------------------------------------------
Responsive
-------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
:scope {
grid-template-columns: 1fr;
}
}
}
/* ==========================================================================
Section: News Slider
Endless horizontal carousel. Cards intentionally have no background for
a light section; the track bleeds past the section padding so partial
cards peek in from both edges.
========================================================================== */
@scope (.mrkt-news) {
/* Reset Elementor Defaults */
:scope .e-div-block-base,
.elementor :scope {
padding: 0;
min-width: 0;
min-height: 0;
}
.elementor :scope {
/* Layout */
--news-card-size: calc((100vw - 3 * var(--mrkt-space-S)) / 3.5);
display: flex;
flex-direction: column;
gap: var(--mrkt-space-S);
padding-inline: var(--mrkt-space-M);
padding-block: var(--mrkt-section-padding-block);
/* Style */
background-color: transparent;
}
/* --------------------------------------------------------------------------
Track
-------------------------------------------------------------------------- */
/*
The viewport escapes the section's own minimal padding so neighbouring
cards remain partially visible at the screen edges; the track restores
the inset for the active cards.
*/
:scope .viewport {
/* Layout */
margin-inline: calc(-1 * var(--mrkt-space-S));
overflow: hidden;
}
:scope .track {
/* Layout */
display: flex;
gap: var(--mrkt-space-M);
padding-inline: var(--mrkt-space-M);
/* Transitions */
transition: transform var(--mrkt-transition-slow);
will-change: transform;
}
/* --------------------------------------------------------------------------
Cards
-------------------------------------------------------------------------- */
:scope .card {
/* Layout */
display: flex;
flex-direction: column;
gap: var(--mrkt-space-S);
flex: 0 0 var(--news-card-size);
padding-bottom: var(--mrkt-space-S);
/* Style */
background-color: transparent;
}
:scope .media {
/* Positioning */
position: relative;
/* Layout */
aspect-ratio: 1;
overflow: hidden;
border-radius: var(--mrkt-border-radius-M);
}
:scope .media img {
/* Layout */
display: block;
width: 100%;
height: 100%;
object-fit: cover;
/* Transitions */
transition: transform var(--mrkt-transition-slow);
}
/* Frosted primary-300 wash over non-hovered cards, faded in via :has(). */
:scope .media::after {
content: "";
/* Positioning */
position: absolute;
inset: 0;
/* Style */
background: color-mix(in srgb, var(--mrkt-color-primary-300) 60%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
/* Transitions */
opacity: 0;
transition: opacity var(--mrkt-transition-base);
}
/* --------------------------------------------------------------------------
Hover / focus interplay
-------------------------------------------------------------------------- */
/* Active card zooms its image … */
:scope .card:hover .media img,
:scope .card:focus-visible .media img {
transform: scale(1.06);
}
/* … while every other card gets the light primary-300 wash. */
:scope .track:has(.card:hover) .card:not(:hover) .media::after,
:scope .track:has(.card:focus-visible) .card:not(:focus-visible) .media::after {
opacity: 1;
}
:scope .mrkt-typo-h3 {
color: var(--mrkt-color-primary-700);
}
:scope .mrkt-typo-eyebrow {
color: var(--mrkt-color-primary-300);
}
:scope .link {
/* Layout */
display: flex;
align-self: center;
transition:
color var(--mrkt-transition-base),
}
:scope .link:hover,
:scope .link:focus-visible {
/* Font */
color: var(--mrkt-color-primary-500);
}
:scope .text {
/* Set standard flexbox-based multi-line clipping context */
display: -webkit-box;
-webkit-box-orient: vertical;
/* Set the exact number of rows before truncating */
-webkit-line-clamp: 2; /* Change '2' to your desired row count */
/* Hide the overflowed content */
overflow: hidden;
}
/* --------------------------------------------------------------------------
Controls
-------------------------------------------------------------------------- */
:scope .controls {
/* Layout */
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: var(--mrkt-space-S);
}
:scope .control {
/* Layout */
display: grid;
place-items: center;
width: 3.25rem;
height: 3.25rem;
padding: 0;
border: var(--mrkt-border-width) var(--mrkt-border-type) var(--mrkt-color-grey-300);
border-radius: var(--mrkt-border-radius-full);
background: transparent;
cursor: pointer;
/* Font */
color: var(--mrkt-color-text);
/* Transitions */
transition:
color var(--mrkt-transition-base),
border-color var(--mrkt-transition-base);
}
:scope .control:hover,
:scope .control:focus-visible {
/* Font */
color: var(--mrkt-color-primary);
/* Style */
border-color: var(--mrkt-color-primary);
}
/* --------------------------------------------------------------------------
Responsive
-------------------------------------------------------------------------- */
@media only screen and (max-width: 1300px) and (min-width: 768px) {
:scope {
--news-card-size: calc((100vw - 3 * var(--mrkt-space-S)) / 2.3);
}
}
@media only screen and (max-width: 767px) {
:scope {
--news-card-size: calc((100vw - 3 * var(--mrkt-space-S)) / 1.15);
}
}
@media (prefers-reduced-motion: reduce) {
:scope .track,
:scope .media img {
transition: none;
}
}
}
/* ==========================================================================
Section: Wildverkstatt
Parallax image band — background image and widget styling live in
Elementor; this scope adds the readability scrim, the centred container
layout and the light text colour.
========================================================================== */
@scope (.mrkt-wildverkstatt) {
/* Reset Elementor Defaults */
:scope .e-div-block-base,
.elementor :scope {
padding: 0;
min-width: 0;
min-height: 0;
}
.elementor :scope {
/* Layout */
isolation: isolate;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--mrkt-space-S);
/* Font */
color: var(--mrkt-color-white);
}
/*
Dark scrim above the parallax background but below the content.
isolation keeps the negative z-index inside the section, so it can never
slip behind the section's own Elementor background.
*/
:scope::before {
content: "";
/* Positioning */
position: absolute;
inset: 0;
z-index: -1;
/* Style */
background: var(--mrkt-color-black-a60);
}
}
/* ==========================================================================
Section: Explore
Even horizontal split — copy column on the left (carries the section
paddings itself, so the root does NOT get mrkt-section), thumbnail
gallery full-bleed on the right. Root therefore needs no gap.
========================================================================== */
@scope (.mrkt-hofkueche) {
/* Reset Elementor Defaults */
:scope .e-div-block-base,
.elementor :scope {
padding: 0;
min-width: 0;
min-height: 0;
}
.elementor :scope {
/* Layout */
display: flex;
flex-direction: row;
gap: var(--mrkt-section-gap);
}
/* --------------------------------------------------------------------------
Content (left)
-------------------------------------------------------------------------- */
:scope .content {
/* Layout */
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: var(--mrkt-space-S);
}
:scope .mrkt-typo-h2 {
color: var(--mrkt-color-primary-300);
}
:scope .mrkt-typo-h2 {
color: var(--mrkt-color-primary-300);
}
:scope .mrkt-typo-eyebrow {
/* Style */
color: var(--mrkt-color-primary);
}
/* Framed info card — sharp corners by design. */
:scope .card {
/* Layout */
display: flex;
flex-direction: column;
gap: var(--mrkt-space-XS);
margin-top: var(--mrkt-space-S);
max-width: var(--mrkt-max-content-width);
padding: var(--mrkt-space-M);
/* Style */
border: 2px solid var(--mrkt-color-primary-500);
border-radius: 0;
background: var(--mrkt-color-primary-50);
/* Font */
color: var(--mrkt-color-text);
}
/* --------------------------------------------------------------------------
Actions
-------------------------------------------------------------------------- */
:scope .actions {
/* Layout */
display: flex;
align-items: center;
gap: var(--mrkt-space-S);
margin-top: var(--mrkt-space-S);
}
/* Doodle link uses the global .mrkt-link-doodle component — no scoped styles needed. */
:scope .media {
align-self: stretch;
display: flex;
flex-direction: column;
gap: var(--mrkt-space-M);
min-height: 30vh;
height: 100%;
padding: 0;
}
:scope .stage {
flex: 1 1 auto;
overflow: hidden;
border-radius: var(--mrkt-border-radius-M);
min-height: 30rem;
background-image: var(--mrkt-thumb-gallery-image);
background-position: center;
background-size: cover;
}
:scope .thumbs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--mrkt-space-M);
margin: 0;
padding: 0;
list-style: none;
}
:scope .thumb {
/* Positioning */
position: relative;
/* Layout */
display: block;
width: 100%;
aspect-ratio: 5 / 4;
overflow: hidden;
margin: 0;
padding: 0;
/* Style */
border: 1px solid var(--mrkt-color-transparent);
border-radius: var(--mrkt-border-radius-M);
background-image: var(--mrkt-thumb-gallery-image);
background-position: center;
background-size: cover;
color: inherit;
cursor: pointer;
outline: 2px solid var(--mrkt-color-transparent);
outline-offset: -2px;
/* Transitions */
transition:
outline-color var(--mrkt-transition-fast),
outline-offset var(--mrkt-transition-fast);
}
:scope .thumb:hover,
:scope .thumb:focus-visible {
/* Style */
outline-color: var(--mrkt-color-primary-300);
outline-offset: 0.2rem;
}
/* --------------------------------------------------------------------------
Responsive
-------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
:scope {
grid-template-columns: 1fr;
}
:scope .content {
padding-bottom: var(--mrkt-section-padding-top);
padding-top: var(--mrkt-section-padding-top);
}
}
@media (prefers-reduced-motion: reduce) {
:scope .media img,
:scope .thumb {
transition: none;
}
}
}
/* ==========================================================================
Section: Culinary
Fine-dining slate board — deep anthracite with the shared grain texture
fixed in place, a framed landscape band whose image stays fixed while
the page scrolls over it, and centred chalk-style menu cards without
any surface or effects. Block/inline padding comes from the
.mrkt-section utility in the markup.
========================================================================== */
@scope (.mrkt-culinary) {
/* Reset Elementor Defaults */
:scope .e-div-block-base,
.elementor :scope {
padding: 0;
min-width: 0;
min-height: 0;
}
.elementor :scope {
/* Layout */
display: flex;
flex-direction: column;
align-items: center;
gap: var(--mrkt-base-gap);
/* Font */
color: var(--mrkt-color-text-alt);
/* Style */
background-color: var(--mrkt-color-grey-900);
background-image: var(--mrkt-texture-grain-fine);
background-repeat: repeat;
background-attachment: fixed;
}
:scope::before {
content: "";
/* Positioning */
position: absolute;
inset: 0;
z-index: 0;
/* Style */
background-image: var(
--culinary-background-image,
url('/wp-content/uploads/2026/08/IMG-20230913-WA0002-1.jpg')
);
background-size: cover;
background-attachment: fixed;
background-position: center;
opacity: 0.1;
}
/* --------------------------------------------------------------------------
Intro
-------------------------------------------------------------------------- */
:scope .intro {
/* Layout */
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: var(--mrkt-section-gap);
width: 100%;
}
:scope .content {
/* Layout */
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--mrkt-space-S);
width: var(--mrkt-max-content-width);
}
:scope .title {
/* Font */
color: var(--mrkt-color-primary-300);
}
:scope .meta {
/* Font */
color: var(--mrkt-color-white-a60);
}
:scope .text {
/* Font */
color: var(--mrkt-color-white-a80);
}
/*
Signature closes the intro copy like a signed menu card — the eyebrow
utilities' accent script does the handwriting.
*/
:scope .signature {
/* Layout */
margin-top: var(--mrkt-space-XS);
/* Font */
color: var(--mrkt-color-primary-100);
}
:scope .chef {
/* Layout */
display: flex;
height: 20rem;
width: 20rem;
}
/* --------------------------------------------------------------------------
Image band
-------------------------------------------------------------------------- */
/*
Landscape window onto the kitchen — Elementor sets the image on the
section via --culinary-band-image; attachment: fixed keeps it in place
so the section glides past it. (iOS ignores fixed and scrolls along.)
*/
:scope .band {
/* Layout */
width: 100%;
height: clamp(10rem, 20vh, 15rem);
}
/* --------------------------------------------------------------------------
Menu
-------------------------------------------------------------------------- */
:scope .menu {
/* Layout */
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: center;
gap: var(--mrkt-space-M);
width: 100%;
}
/* Bare chalk-on-slate card — deliberately no background or effects. */
:scope .card {
/* Layout */
display: flex;
flex-direction: column;
align-items: center;
gap: var(--mrkt-space-S);
flex: 1 1 0;
padding: var(--mrkt-space-L);
text-align: center;
}
:scope .card .media {
/* Layout */
width: 10rem;
height: 10rem;
aspect-ratio: 1;
object-fit: cover;
border-radius: var(--mrkt-border-radius-M);
}
:scope .card .title {
/* Font */
color: var(--mrkt-color-white);
}
:scope .card .text {
/* Font */
color: var(--mrkt-color-white-a60);
}
/* Auto margin sinks every link to a shared baseline across cards. */
:scope .card .link {
/* Layout */
margin-top: auto;
}
/* --------------------------------------------------------------------------
Responsive
-------------------------------------------------------------------------- */
@media only screen and (max-width: 1300px) and (min-width: 768px) {
:scope .card {
padding: var(--mrkt-space-M);
}
}
@media only screen and (max-width: 767px) {
:scope .intro {
grid-template-columns: 1fr;
}
:scope .menu {
flex-direction: column;
align-items: stretch;
}
}
}
/* -----------------------------
Google Reviews
----------------------------- */
@scope (.mrkt-google-reviews) {
/* Reset Elementor Defaults */
:scope .e-div-block-base,
.elementor :scope {
padding: 0;
min-width: 0;
min-height: 0;
}
.elementor :scope {
/* Layout */
display: flex;
flex-direction: column;
gap: var(--mrkt-space-S);
}
:scope .mrkt-typo-h2 {
color: var(--mrkt-color-primary-300);
}
:scope .mrkt-typo-h4 {
color: var(--mrkt-color-primary-500);
}
:scope .intro {
/* Positioning */
position: relative;
/* Layout */
display: flex;
flex-direction: column;
gap: var(--mrkt-space-S);
max-width: 80ch;
}
:scope .intro::after {
content: attr(data-text);
/* Positioning */
position: absolute;
top: 40%;
left: calc(100% + var(--mrkt-space-XXL));
/* Layout */
display: block;
width: max-content;
overflow: hidden;
/* Font */
font-family: var(--mrkt-typo-eyebrow-family);
font-size: clamp(2.5rem, 4vw, 4.5rem);
font-weight: var(--mrkt-typo-eyebrow-weight);
line-height: var(--mrkt-typo-eyebrow-line-height);
letter-spacing: var(--mrkt-typo-eyebrow-letter-spacing);
white-space: nowrap;
/* Style */
color: var(--mrkt-color-primary-100);
clip-path: inset(0 100% 0 0);
transform: translateY(-50%) rotate(-5deg);
}
/* Play the 1.8s animation once the class is appended */
:scope .intro.is-in-view::after {
animation: google-reviews-signature-reveal 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}
@keyframes google-reviews-signature-reveal {
to {
clip-path: inset(0 0% 0 0);
}
}
:scope .reviews_buttons {
/* Layout */
display: flex;
flex-direction: row;
gap: var(--mrkt-default-gap);
}
@media (prefers-reduced-motion: reduce) {
:scope .intro::after {
/* Style */
clip-path: none;
/* Transitions */
animation: none;
}
}
}
/* ==========================================================================
Section: FAQ
Two columns on an Elementor background image: an intro column whose
identity header places the round avatar of the contact person beside
eyebrow and title, and the FAQ accordion built from the shared
mrkt-components/faq component (styles in css/components/faq.css,
behaviour in js/faq.js — see provenance headers there). This scope only
arranges the columns, shapes the avatar and lays a dark scrim for
contrast on the background image.
========================================================================== */
@scope (.mrkt-faq-section) {
/* Reset Elementor Defaults */
:scope .e-div-block-base,
.elementor :scope {
padding: 0;
min-width: 0;
min-height: 0;
}
.elementor :scope {
/* Layout */
isolation: isolate;
display: flex;
flex-direction: row;
align-items: center;
gap: var(--mrkt-section-gap);
/* Font */
color: var(--mrkt-color-white);
}
/*
Dark scrim above the background image but below the content.
isolation keeps the negative z-index inside the section, so it can
never slip behind the section's own Elementor background.
*/
:scope::before {
content: "";
/* Positioning */
position: absolute;
inset: 0;
z-index: -1;
/* Style */
background: var(--mrkt-color-black-a80);
}
/*
Intro column — identity header, then text and button (Elementor
styling). Takes a third of the row beside the accordion.
*/
:scope .intro {
/* Layout */
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--mrkt-space-S);
}
/* Identity header: avatar of the contact person beside eyebrow + title. */
:scope .identity {
/* Layout */
display: flex;
flex-direction: row;
align-items: center;
gap: var(--mrkt-space-S);
}
:scope .titles {
/* Layout */
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--mrkt-space-XXS);
}
/* Round portrait with a primary ring. */
:scope .avatar {
/* Layout */
width: 4.5rem;
height: 4.5rem;
aspect-ratio: 1;
object-fit: cover;
border-radius: var(--mrkt-border-radius-full);
/* Style */
border: 2px solid var(--mrkt-color-primary);
}
/* --------------------------------------------------------------------------
Responsive
-------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
.elementor :scope {
flex-direction: column;
align-items: stretch;
}
}
}/* End custom CSS */