/* OHS Site — global helpers that complement the Elementor Global Kit.
Type SIZES/weights live in the kit; this holds the spacing scale + the
things the kit can't express per-role (color-by-location). */
/* ---- Spacing scale (design tokens) — use var(--ohs-space-*) instead of magic px.
Colours come from the kit palette (var(--e-global-color-*)); spacing from here. */
:root {
--ohs-space-2xs: 0.25rem; /* 4 */
--ohs-space-xs: 0.5rem; /* 8 */
--ohs-space-sm: 1rem; /* 16 */
--ohs-space-md: 1.5rem; /* 24 */
--ohs-space-lg: 2rem; /* 32 */
--ohs-space-xl: 2.75rem; /* 44 */
--ohs-space-2xl: 4rem; /* 64 */
--ohs-space-3xl: 6rem; /* 96 */
--ohs-page-x: 70px; /* content-section horizontal gutter (header+footer share this) → 20px ≤1024 */
/* ── Semantic spacing scale = the standardized rhythm. Section padding/widths live
in each page's Elementor data (so they stay editor-editable); ohs-spacing.php is
the PHP single-source that mirrors these into the build/migrate scripts. These
entries document the spec + drive the CSS-side gutter:
Section vertical : standard 90/56 · feature 120/72 (Elementor data)
Gutter : 70/20 (--ohs-page-x)
Stack margins : 16/24/32/64 (Elementor data)
Widths : wide 1120 · block 760 · prose 460 (Elementor data) ── */
--ohs-stack-sm: 16px; --ohs-stack-md: 24px; --ohs-stack-lg: 32px; --ohs-stack-xl: 64px;
}
/* single 1024 breakpoint, site-wide: the gutter narrows on mobile (≤1024) */
@media (max-width:1024px){ :root { --ohs-page-x: 20px; } }
/* ---- Preloader: logo fills left→right on the first page view of the session.
The cover + once-per-session gate live in the critical CSS / gate script
(ohs-header-assets.php); this adds the fill animation + fade-out. ---- */
.ohs-preloader { transition:opacity .6s ease, visibility .6s ease; }
.ohs-preloader.is-done { opacity:0; visibility:hidden; }
.ohs-preloader-logo { position:relative; width:min(72vw, 460px); }
.ohs-preloader-logo svg { display:block; width:100%; height:auto; }
.ohs-preloader-logo .ohs-pl-base svg path { fill:color-mix(in srgb, var(--e-global-color-text) 15%, transparent); }
/* JS drives the clip-path inset to track real load progress (see ohs-header.js) */
.ohs-pl-fill { position:absolute; inset:0; clip-path:inset(0 100% 0 0); transition:clip-path .35s cubic-bezier(.4,0,.2,1); }
.ohs-pl-fill svg path { fill:var(--e-global-color-text); }
@media (prefers-reduced-motion: reduce){ .ohs-preloader{ display:none !important; } }
/* Dark-section text helper: render text white over dark sections/heroes.
Type role (size/weight/spacing) stays whatever the kit assigns — only colour
follows the section background. Buttons keep their own kit colours.
NOTE: Elementor doesn't emit custom classes on the OUTERMOST page container,
so dark sections are hooked by their stable element ID. Add new dark-section
IDs to this list as they're built. (.ohs-on-dark kept for inner containers.) */
.ohs-on-dark,
.ohs-on-dark .elementor-heading-title,
.ohs-on-dark p,
.ohs-on-dark li,
.ohs-on-dark a:not(.elementor-button),
.elementor-element-ohshero .elementor-heading-title,
.elementor-element-ohshero p,
.elementor-element-ohshero li,
.elementor-element-ohshero a:not(.elementor-button),
.elementor-element-kinfo .elementor-heading-title,
.elementor-element-kinfo p,
.elementor-element-kinfo a:not(.elementor-button),
.elementor-element-preisehero .elementor-heading-title,
.elementor-element-tchero .elementor-heading-title,
.elementor-element-teamhero .elementor-heading-title,
.elementor-element-ubmhero .elementor-heading-title,
.elementor-element-ubmhero p,
.elementor-element-ubmhero a:not(.elementor-button),
.elementor-element-prodintro .elementor-heading-title,
.elementor-element-prodintro p,
.elementor-element-prodbrands .elementor-heading-title,
.elementor-element-prodbrands p,
.elementor-element-prodgrid .elementor-heading-title { color:var(--e-global-color-clr_white) !important; }
/* ---- Header offset: the header is a transparent/absolute overlay, so the FIRST
section of every page starts under it. Add the header height (76px desktop /
68px mobile) on top of that section's own top padding so its content clears the
header. Uses Elementor's --padding-top var, so each section keeps its design pad. */
.elementor[data-elementor-type="wp-page"] > .elementor-element:first-child {
/* --ohs-header-h is measured by ohs-header.js; 76/68 are pre-JS fallbacks */
padding-block-start: calc(var(--padding-top, 0px) + var(--ohs-header-h, 76px)) !important;
}
@media (max-width:1024px){
.elementor[data-elementor-type="wp-page"] > .elementor-element:first-child {
padding-block-start: calc(var(--padding-top, 0px) + var(--ohs-header-h, 68px)) !important;
}
}
/* EXCEPTION — Kontakt split: bg lives on the COLUMNS (not the section), so the section
offset would leave a blank strip above. Instead the section starts at the very top
(dark image fills under the header) and each column clears the header via its own padding. */
.elementor[data-elementor-type="wp-page"] > .elementor-element-kontakt:first-child { padding-block-start:0 !important; }
/* desktop: columns are 90vh and vertically center their content (clears the nav naturally).
mobile: the info column is first under the header, so give it header clearance. */
@media (max-width:1024px){ .elementor-element-kinfo { padding-top:calc(var(--ohs-header-h,68px) + var(--ohs-space-xl)) !important; } }
/* ---- Sticky mobile booking bar (only after scrolling past the hero) ---- */
.ohs2-sticky-cta {
position:fixed; left:0; right:0; bottom:0; z-index:9980;
display:none; /* shown on mobile only */
text-align:center; text-decoration:none;
background:var(--e-global-color-secondary);
color:var(--e-global-color-text);
padding:var(--ohs-space-xs) var(--ohs-space-md);
font-size:var(--e-global-typography-secondary-font-size);
letter-spacing:0.04em;
transform:translateY(100%); /* hidden below the fold until scrolled */
transition:transform .3s ease;
}
@media (max-width:1024px){ .ohs2-sticky-cta { display:block; } }
body.ohs-scrolled .ohs2-sticky-cta { transform:none; }
/* don't let it sit over the open mobile menu */
body.ohs2-menu-open .ohs2-sticky-cta { transform:translateY(100%); }
/* ---- Scroll reveal: subtle fade(-up) when elements enter the viewport ----
Gated on .ohs-reveal-ready (set on in ONLY when JS is present,
IntersectionObserver is supported, and reduced-motion is OFF) so content is
always visible without JS / with reduced motion — no hidden-content risk.
JS (ohs-header.js) toggles .is-in once per element on scroll-into-view. */
.ohs-reveal-ready .ohs-reveal,
.ohs-reveal-ready .ohs-reveal-fade { opacity:0; will-change:opacity, transform; }
.ohs-reveal-ready .ohs-reveal {
transform:translateY(26px);
transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.ohs-reveal-ready .ohs-reveal-fade {
transition:opacity .9s cubic-bezier(.22,.61,.36,1);
}
.ohs-reveal-ready .ohs-reveal.is-in,
.ohs-reveal-ready .ohs-reveal-fade.is-in { opacity:1; transform:none; }
/* stagger steps within a section */
.ohs-reveal-ready .ohs-reveal--d1 { transition-delay:.1s; }
.ohs-reveal-ready .ohs-reveal--d2 { transition-delay:.2s; }
.ohs-reveal-ready .ohs-reveal--d3 { transition-delay:.3s; }
/* Per-line headline reveal: JS (ohs-header.js) splits a multi-line (
) heading into
.ohs-line (mask) > .ohs-line-in (slides up). Each line is staggered via inline delay. */
.ohs-reveal-ready .ohs-lines .ohs-line { display:block; overflow:hidden; padding-bottom:.06em; }
.ohs-reveal-ready .ohs-lines .ohs-line-in { display:block; transform:translateY(115%); transition:transform .85s cubic-bezier(.22,.61,.36,1); will-change:transform; }
.ohs-reveal-ready .ohs-lines.is-in .ohs-line-in { transform:translateY(0); }
/* ---- Lenis smooth scroll (self-hosted lib, inited in ohs-header.js) ---- */
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior:contain; }
.lenis.lenis-stopped { overflow:hidden; }
.lenis.lenis-smooth iframe { pointer-events:none; }
/* hero headings are claimed early (.ohs-pre-hide) so the generic scroll-reveal observer
never flashes them in before the per-line split runs at preloader-lift */
.ohs-reveal-ready .ohs-pre-hide { opacity:0; }
/* hero CTA button: revealed by JS AFTER the headline lines finish (.is-shown) */
.ohs-reveal-ready .ohs-hero-cta { opacity:0; transform:translateY(22px); transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
.ohs-reveal-ready .ohs-hero-cta.is-shown { opacity:1; transform:none; }
/* Accordion (Preise price table): each row fades up as it enters view, staggered by JS.
Dedicated class so the generic reveal observer doesn't race the staggered one. */
.ohs-reveal-ready .ohs-acc-reveal { opacity:0; transform:translateY(24px); transition:opacity .65s cubic-bezier(.22,.61,.36,1), transform .65s cubic-bezier(.22,.61,.36,1); will-change:opacity, transform; }
.ohs-reveal-ready .ohs-acc-reveal.is-in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
.ohs-reveal-ready .ohs-reveal,
.ohs-reveal-ready .ohs-reveal-fade,
.ohs-reveal-ready .ohs-acc-reveal { opacity:1; transform:none; transition:none; }
}
/* Safety net: never keep content hidden inside the Elementor editor — the
IntersectionObserver that adds .is-in doesn't run in the editor preview. */
body.elementor-editor-active .ohs-reveal,
body.elementor-editor-active .ohs-reveal-fade,
body.elementor-editor-active .ohs-acc-reveal { opacity:1 !important; transform:none !important; }
/* ---- Preise accordion shell: no box border — just a thin divider under each
item; circled +/- icons (client assets) replace the Font Awesome glyph. ---- */
.ohs2-acc .elementor-accordion-item { border:0 !important; }
/* divider sits under the TITLE — between items when closed, header/content when open.
Flex row (title left, icon right) so the circled icon is vertically CENTERED
(Elementor floats it right by default, which top-aligns it). */
.ohs2-acc .elementor-tab-title {
display:flex !important; align-items:center; gap:var(--ohs-space-md);
border:0 !important;
border-bottom:1px solid var(--e-global-color-text) !important;
}
.ohs2-acc .elementor-tab-title .elementor-accordion-title { order:0; flex:1 1 auto; }
.ohs2-acc .elementor-tab-title .elementor-accordion-icon { order:1; float:none !important; margin:0 !important; }
/* swap the FA glyph for the circled icon (root-relative URL → host-agnostic) */
.ohs2-acc .elementor-accordion-icon i,
.ohs2-acc .elementor-accordion-icon svg { display:none !important; }
.ohs2-acc .elementor-accordion-icon-closed,
.ohs2-acc .elementor-accordion-icon-opened {
width:28px; height:28px; /* Elementor controls show/hide; don't set display */
background-position:center; background-repeat:no-repeat; background-size:contain;
}
.ohs2-acc .elementor-accordion-icon-closed { background-image:url(/wp-content/mu-plugins/ohs-assets/acc-plus.webp); }
.ohs2-acc .elementor-accordion-icon-opened { background-image:url(/wp-content/mu-plugins/ohs-assets/acc-minus.webp); }
/* ---- Preise: price rows + stylist tables inside the native accordion (.ohs2-acc).
The accordion shell is styled by Elementor controls; only the reused price
markup needs theming. Palette vars only. ---- */
.ohs2-acc .price-table {
display:flex; justify-content:space-between; align-items:baseline;
gap:var(--ohs-space-md);
padding:var(--ohs-space-sm) 0; /* 16 — snapped from 14 */
border-bottom:1px solid var(--e-global-color-text);
}
/* keep the last row's divider too, so an open panel is closed off from the next title */
/* let the service name shrink + wrap so the price never gets pushed off-screen */
.ohs2-acc .price-table > :first-child { flex:1 1 auto; min-width:0; }
.ohs2-acc .price-table .price { flex:0 0 auto; white-space:nowrap; text-align:right; }
/* Two-stylist tables (TablePress [table id=1/2]) — Service | Melanie | Laura */
.ohs2-acc .tablepress { width:100%; border-collapse:collapse; margin:0; background:transparent; }
.ohs2-acc .tablepress th,
.ohs2-acc .tablepress td {
padding:var(--ohs-space-sm) 0 !important; /* 16 — snapped from 12 */
border:0 !important;
border-bottom:1px solid var(--e-global-color-text) !important;
background:transparent !important;
font-size:var(--e-global-typography-text-font-size);
vertical-align:baseline;
}
/* header row (MELANIE / LAURA) — eyebrow-style */
.ohs2-acc .tablepress thead th,
.ohs2-acc .tablepress .row-1 td {
text-transform:uppercase; letter-spacing:0.06em; font-weight:500;
font-size:var(--e-global-typography-secondary-font-size);
}
/* price columns (Melanie = col 2, Laura = col 3) right-aligned — by column class
so the MELANIE header cell aligns too (its header row has no leading ) */
.ohs2-acc .tablepress .column-2,
.ohs2-acc .tablepress .column-3 { text-align:right !important; white-space:nowrap; padding-left:var(--ohs-space-md) !important; }
@media (max-width:1024px){
.ohs2-acc .tablepress th, .ohs2-acc .tablepress td { font-size:var(--e-global-typography-text-font-size-mobile, 15px); }
}
/* ---- TYPOGRAPHY TOKENS (single source for the few sizes the kit roles don't
cover). Kit roles + H1–H6/body/button are controlled in the kit (1692); these
tokens control the special cases so EVERY font size is var/kit-driven. ---- */
:root {
--ohs-fs-cat: 18px; /* category labels (preise/termine/kontakt) — desktop */
--ohs-fs-mm: 1.5rem; /* mobile-menu nav links */
--ohs-fs-mm-lang: 1.25rem; /* mobile-menu language switch */
}
@media (max-width:1024px){ :root { --ohs-fs-cat: 26px; } } /* labels intentionally larger on mobile */
/* category labels (desktop tiles + mobile block) sized by the token */
.ohs2-catlabel .elementor-button { font-size: var(--ohs-fs-cat) !important; }
/* preise accordion titles reuse the kit Text role (was 17/15 = Text) */
.ohs2-acc .elementor-tab-title .elementor-accordion-title { font-size: var(--e-global-typography-text-font-size); }
/* ---- GLOBAL 4:5 image size (single source of truth) ----
Change these two var values to resize EVERY 4:5 image across all pages.
`--ohs-ratio-45` is 85vh on desktop (cap) and a true 4:5 (125vw) on mobile.
Container _css_classes don't render on this site, so 4:5 tiles are hooked by
their stable element IDs — add new pages' 4:5 element IDs to the list below. */
:root { --ohs-ratio-45: 85vh; }
@media (max-width:1024px){ :root { --ohs-ratio-45: 125vw; } }
.elementor-element-prow1a, .elementor-element-prow1b,
.elementor-element-prow2a, .elementor-element-prow2b,
.elementor-element-prow3a, .elementor-element-prow3b,
.elementor-element-ubm1a, .elementor-element-ubm1b,
.elementor-element-tc1a, .elementor-element-tc1b,
.elementor-element-visionimg, .elementor-element-productsimg {
min-height: var(--ohs-ratio-45) !important;
}
/* Small mobile (<600px): page heroes framed as a true 4:5 portrait (125vw) BELOW the
fixed header — +68px so the header overlap doesn't eat into the 4:5 area. The 600–1024
band and desktop keep their per-page hero heights — this is small-mobile only. */
@media (max-width:599px){
.elementor-element-preisehero,
.elementor-element-tchero,
.elementor-element-teamhero,
.elementor-element-prodintro {
min-height:calc(125vw + 68px) !important;
}
}
/* Tablet band (600–1024): the image heroes carry 62vh from their page data but the
produkte TEXT hero (prodintro) is content-driven (shorter). Unify all four to 62vh
so they match. */
@media (min-width:600px) and (max-width:1024px){
.elementor-element-preisehero,
.elementor-element-tchero,
.elementor-element-teamhero,
.elementor-element-prodintro {
min-height:62vh !important;
}
}
/* Categories tiles: hovering the whole TILE (box) — label turns lime + the image
gently zooms. The image lives in an ::after layer (background:inherit copies the
tile's bg image) so only the image scales, not the label; overflow:hidden clips
it. (Tile containers have no rendered class → hook the desktop row's id.) */
.elementor-element-ohscatrow > .elementor-element { cursor:pointer; position:relative; overflow:hidden; }
.elementor-element-ohscatrow > .elementor-element::after {
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background:inherit; background-size:cover; background-position:center;
transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.elementor-element-ohscatrow > .elementor-element:hover::after { transform:scale(1.07); }
.elementor-element-ohscatrow > .elementor-element > * { position:relative; z-index:1; }
.elementor-element-ohscatrow .elementor-button { transition:color .25s ease; }
.elementor-element-ohscatrow > .elementor-element:hover .elementor-button { color:var(--e-global-color-secondary) !important; }
@media (prefers-reduced-motion: reduce){
.elementor-element-ohscatrow > .elementor-element::after { transition:none; }
.elementor-element-ohscatrow > .elementor-element:hover::after { transform:none; }
}
/* ---- Produkte page helpers ---- */
/* Two-up image rows: kill the 1px sub-pixel seam between adjacent tiles. Two
width:50% items round to whole pixels and can sum 1px short of the row →
background shows through the seam (viewport-dependent). Fix: the LEFT tile is
50%, the RIGHT tile has NO fixed width and FILLS the remaining pixels (flex
grow), so the pair always reaches the edge exactly — no seam, no 101% bg hack.
(Grid 1fr 1fr can still round tracks, so this is the reliable approach.) */
/* every two-image row (prodrow1/2/3 …) gets the fill-remainder fix — add new prodrowN here */
.elementor-element-prodrow1, .elementor-element-prodrow2, .elementor-element-prodrow3 { display:flex !important; flex-wrap:wrap; }
.elementor-element-prodrow1 > .elementor-element,
.elementor-element-prodrow2 > .elementor-element,
.elementor-element-prodrow3 > .elementor-element { width:50% !important; max-width:none !important; }
.elementor-element-prodrow1 > .elementor-element:nth-child(even),
.elementor-element-prodrow2 > .elementor-element:nth-child(even),
.elementor-element-prodrow3 > .elementor-element:nth-child(even) { width:auto !important; flex:1 1 0 !important; min-width:0; }
@media (max-width:1024px){
.elementor-element-prodrow1 > .elementor-element,
.elementor-element-prodrow2 > .elementor-element,
.elementor-element-prodrow3 > .elementor-element { width:100% !important; flex:0 0 100% !important; }
}
/* White button for olive sections (kit olive button would blend into the olive bg) */
.ohs2-btn-ghost .elementor-button {
background-color:var(--e-global-color-clr_white) !important; color:var(--e-global-color-clr_olive) !important;
border:1px solid var(--e-global-color-clr_white) !important;
}
.ohs2-btn-ghost .elementor-button:hover {
background-color:var(--e-global-color-secondary) !important; color:var(--e-global-color-text) !important;
border-color:var(--e-global-color-secondary) !important;
}
/* Brands list — each name on a row; line ABOVE every name (incl. the first, under
"BRANDS -") + one below the last. Even padding, reset inner margins. */
.ohs2-brand .elementor-heading-title, .ohs2-brand .elementor-widget-container { margin:0 !important; }
.ohs2-brand { padding:var(--ohs-space-md) 0 !important; border-top:1px solid color-mix(in srgb, var(--e-global-color-clr_white) 28%, transparent); } /* 24 — snapped from 26 */
.ohs2-brand:last-of-type { border-bottom:1px solid color-mix(in srgb, var(--e-global-color-clr_white) 28%, transparent); }
/* Matched head height so the left "Organic Products" divider lines up with the
brands-list first line (the rule sits at the same Y on both columns). */
.ohs2-rulehead, .ohs2-rulehead .elementor-widget-container { min-height:40px !important; margin:0 !important; }
/* Bowl image centered in its column (container _css_classes don't render → target by stable id; auto margins center a flex item) */
.elementor-element-prodbowl { margin-left:auto !important; margin-right:auto !important; }
/* "KEIN ALKOHOL …" micro labels overlaid on the product images */
.ohs2-keinlabel, .ohs2-keinlabel p {
font-size:var(--e-global-typography-accent-font-size); text-transform:uppercase;
letter-spacing:0.08em; line-height:1.35; font-weight:500; color:var(--e-global-color-clr_white) !important;
}
.ohs2-keinlabel p { margin:0; }
/* ---- Global link colour = black. The kit only emits `a:hover` (it skips the normal
#000 as "default"), so links fall back to a theme/browser pink. Force the normal
state to the kit text var (buttons excluded; .ohs-on-dark white !important wins). ---- */
.elementor-kit-1692 a:not(.elementor-button) { color: var(--e-global-color-text); }
/* ---- Team members. Desktop = portrait-left + name/role/bio/button column (native
flex from the data). Mobile (≤1024) = full-bleed portrait with name/role/button
overlaid white; the bio is hidden and revealed on TAP (.is-open toggled by JS), which
expands the text panel to a dark overlay. Generic via the teamwrap children (members
are its direct .e-con; img = first child, text = last child) — no per-member ids. ---- */
/* desktop: portrait member photos (4:5) so they aren't near-square */
.elementor-element-team1img, .elementor-element-team2img, .elementor-element-team3img, .elementor-element-team4img { aspect-ratio:4/5; }
/* bio paragraph carries no extra margin, so the widget's 20px top/bottom are exact */
.ohs-team-bio p { margin:0 !important; }
/* hooked by member IDs (boxed teamwrap wraps children in .e-con-inner, so a
`> .e-con` child selector misses them). Add new member ids to these lists. */
@media (max-width:1024px){
.elementor-element-team1, .elementor-element-team2, .elementor-element-team3, .elementor-element-team4 {
position:relative; min-height:125vw; overflow:hidden; cursor:pointer;
align-items:stretch !important; /* so the text panel fills the height → label sits at the bottom */
margin-bottom:0 !important; /* photos stack flush on mobile (no gap between members) */
}
.elementor-element-team1img, .elementor-element-team2img, .elementor-element-team3img, .elementor-element-team4img { aspect-ratio:auto; }
.elementor-element-team1img, .elementor-element-team2img, .elementor-element-team3img, .elementor-element-team4img {
position:absolute !important; inset:0; width:100% !important; min-height:0 !important;
}
.elementor-element-team1txt, .elementor-element-team2txt, .elementor-element-team3txt, .elementor-element-team4txt {
position:relative; z-index:2; justify-content:flex-end !important;
}
.elementor-element-team1txt .elementor-heading-title, .elementor-element-team1txt p,
.elementor-element-team2txt .elementor-heading-title, .elementor-element-team2txt p,
.elementor-element-team3txt .elementor-heading-title, .elementor-element-team3txt p,
.elementor-element-team4txt .elementor-heading-title, .elementor-element-team4txt p { color:var(--e-global-color-clr_white) !important; }
.ohs-team-bio { display:none; }
/* photos go full-bleed + flush to the hero/CTA (no section/wrap padding on mobile) */
.elementor-element-teamlist, .elementor-element-teamwrap,
.elementor-element-teamwrap > .e-con-inner { padding:0 !important; }
.elementor-element-teamwrap > .e-con-inner { max-width:none !important; }
/* bio (which normally sets the role→button gap) is hidden here, so the button needs its own */
.elementor-element-team1txt .elementor-widget-button, .elementor-element-team2txt .elementor-widget-button,
.elementor-element-team3txt .elementor-widget-button, .elementor-element-team4txt .elementor-widget-button { margin-top:20px; }
/* TAP → text panel covers the photo (dark) + reveals the bio */
.elementor-element-team1.is-open .elementor-element-team1txt,
.elementor-element-team2.is-open .elementor-element-team2txt,
.elementor-element-team3.is-open .elementor-element-team3txt,
.elementor-element-team4.is-open .elementor-element-team4txt {
position:absolute; inset:0; justify-content:center !important;
background:color-mix(in srgb, var(--e-global-color-text) 80%, transparent);
}
.elementor-element-team1.is-open .ohs-team-bio, .elementor-element-team2.is-open .ohs-team-bio,
.elementor-element-team3.is-open .ohs-team-bio, .elementor-element-team4.is-open .ohs-team-bio {
display:block; opacity:1 !important; transform:none !important; /* tapped bio always visible (overrides reveal's opacity:0) */
}
}
/* Member photos reveal as a HEIGHT wipe from bottom→top on scroll (desktop): the
image grows from 0 height (anchored at the bottom) up to full via clip-path.
No fade (override the auto .ohs-reveal-fade opacity). Mobile photos are absolute
overlays, so they keep the plain fade. */
/* CodePen-style reveal (left→right clip-path roll + image zoom 1.5→1). The photo is a
CSS background, so an ::after (background:inherit) is the zoom layer. The reveal is
triggered when the MEMBER ROW enters view (.ohs-img-in added to the row in
ohs-header.js) — we observe the unclipped row, not the clipped image. */
@media (min-width:1025px){
.ohs-reveal-ready .elementor-element-team1img, .ohs-reveal-ready .elementor-element-team2img,
.ohs-reveal-ready .elementor-element-team3img, .ohs-reveal-ready .elementor-element-team4img {
opacity:1 !important; overflow:hidden;
clip-path:polygon(0 0, 0 0, 0 100%, 0 100%); transition:clip-path 1s ease-in-out;
}
.ohs-reveal-ready .elementor-element-team1img::after, .ohs-reveal-ready .elementor-element-team2img::after,
.ohs-reveal-ready .elementor-element-team3img::after, .ohs-reveal-ready .elementor-element-team4img::after {
content:""; position:absolute; inset:0; background:inherit; background-size:cover; background-position:center;
transform:scale(1.5); transition:transform 1s ease-in-out;
}
.ohs-reveal-ready .elementor-element-team1.ohs-img-in .elementor-element-team1img,
.ohs-reveal-ready .elementor-element-team2.ohs-img-in .elementor-element-team2img,
.ohs-reveal-ready .elementor-element-team3.ohs-img-in .elementor-element-team3img,
.ohs-reveal-ready .elementor-element-team4.ohs-img-in .elementor-element-team4img { clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.ohs-reveal-ready .elementor-element-team1.ohs-img-in .elementor-element-team1img::after,
.ohs-reveal-ready .elementor-element-team2.ohs-img-in .elementor-element-team2img::after,
.ohs-reveal-ready .elementor-element-team3.ohs-img-in .elementor-element-team3img::after,
.ohs-reveal-ready .elementor-element-team4.ohs-img-in .elementor-element-team4img::after { transform:scale(1); }
}
/* ---- Lime booking CTA banner (reusable: heading + button on an image) ---- */
.ohs-cta-lime .elementor-heading-title { color:var(--e-global-color-secondary) !important; }
.ohs2-btn-lime .elementor-button {
background-color:var(--e-global-color-secondary) !important; color:var(--e-global-color-text) !important;
border:1px solid var(--e-global-color-secondary) !important;
}
.ohs2-btn-lime .elementor-button:hover {
background-color:var(--e-global-color-clr_white) !important; color:var(--e-global-color-text) !important;
border-color:var(--e-global-color-clr_white) !important;
}
/* ---- Kontakt ANFRAGEN form: placeholder-only underline fields (no labels) +
standard theme button, centered. Generous gaps between fields. ---- */
.ohs-form .elementor-form-fields-wrapper { display:flex !important; flex-direction:column; gap:var(--ohs-space-lg); }
.ohs-form .elementor-field-group { display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; }
.ohs-form .elementor-field-group > label { display:none !important; }
.ohs-form .elementor-field {
width:100% !important; height:auto !important; min-height:0 !important;
background:transparent !important; border:0 !important;
border-bottom:1px solid var(--e-global-color-text) !important; border-radius:0 !important;
padding:0 0 12px !important; color:var(--e-global-color-text); font-size:var(--e-global-typography-text-font-size);
}
.ohs-form .elementor-field::placeholder { color:var(--e-global-color-text); opacity:1; }
.ohs-form .elementor-field:focus { outline:0 !important; box-shadow:none !important; border-bottom-color:var(--e-global-color-text) !important; }
.ohs-form textarea.elementor-field { min-height:2.6em; resize:vertical; }
/* standard theme button (kit olive), centered */
.ohs-form .elementor-field-type-submit { display:flex !important; justify-content:center; flex:0 0 100% !important; width:100% !important; max-width:100% !important; margin-top:var(--ohs-space-md); }
.ohs-form .elementor-field-type-submit .elementor-button {
background-color:var(--e-global-color-primary) !important; color:var(--e-global-color-clr_white) !important;
width:auto !important; flex:0 0 auto !important; /* normal button size (not full-width) */
}
|