/*
Theme Name: Sana Child Theme
Theme URI: http://sana.like-themes.com/
Author: Like Themes
Author URI: http://like-themes.com/
Description: Blank Child Theme for Sana
Template: sana
Version: 6.12
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: four-columns, right-sidebar, full-width-template
Text Domain: sana

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* =========================================================================
   1. FONTS — self-hosted (GDPR: no Google CDN request)
   ========================================================================= */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/inter-v20-latin-300.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/inter-v20-latin-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/inter-v20-latin-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/inter-v20-latin-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/playfair-display-v40-latin-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/playfair-display-v40-latin-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/playfair-display-v40-latin-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/playfair-display-v40-latin-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/playfair-display-v40-latin-500italic.woff2') format('woff2');
}

/* Signature font ("Verena Welz") — see .vw_signature */
@font-face {
    font-family: 'Mrs Saint Delafield';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/mrs-saint-delafield-v14-latin-regular.woff2') format('woff2');
}

/* =========================================================================
   2. DESIGN TOKENS — single source of truth for every reusable style below
   ========================================================================= */

:root {
    /* Fonts (remap of the theme's own font variables) + palette */
    --font-headers: 'Playfair Display';
    --font-main: 'Inter';
    --font-subheaders: 'Inter';
    --font-signature: 'Mrs Saint Delafield';
    --vw-signature-size: clamp(2.25rem, 6vw, 3.5rem);

    --vw-bg: #E7E5E2;
    --color-main: #e7e5e3;
    --color-gray: #c1bfbc;
    --color-black: #1e1e1e;
    --color-red: #e82626;
    --color-white: #ffffff;

    /* Vertical/horizontal rhythm of text blocks (.text_block_pad_*) */
    --vw-block-pad-y: clamp(2.5rem, 7vw, 6rem);
    --vw-block-pad-x: clamp(2.5rem, 7vw, 6rem);

    /* Navbar — locked height (affix anti-jump); keep in sync with Customizer logo_height */
    --vw-navbar-h: 100px;
    --vw-navbar-hairline: 1px solid rgba(0, 0, 0, 0.1);

    /* Lightbox stack — must stay above the affixed navbar (theme: z-index 10000) */
    --vw-lightbox-z: 100000;

    /* Footer height + bottom bar + go-top button */
    --vw-footer-pad-y: 24px;
    --vw-footer-bar-pad-y: 16px;
    --vw-footer-legal-size: 12px;
    --vw-gotop-size: 52px;
    --vw-gotop-icon-size: 24px;
    --vw-gotop-radius: 50%;

    /* .header_1 headline line-height (headings would inherit the body's loose 1.7) */
    --vw-header-lh: 1.25;

    /* Hairline divider under a heading (.divider_1_*) */
    --vw-divider-1-width: 50px;
    --vw-divider-1-thickness: 2px;
    --vw-divider-1-gap: 10px;
    --vw-divider-1-color: var(--color-black);

    /* Plain text/legal pages (.text_page_1) — headings and inline links */
    --vw-text-page-h1-size: clamp(28px, 3.2vw, 60px); /* same ramp as .header_1 */
    --vw-text-page-h2-size: clamp(20px, 1.9vw, 30px);
    --vw-text-page-h3-size: clamp(17px, 1.5vw, 22px);
    --vw-text-page-h1-gap: 40px;  /* h1 (incl. its hairline) -> first paragraph */
    --vw-text-page-h-top: clamp(32px, 4vw, 56px); /* space above h2/h3 */
    --vw-text-page-h-bottom: 14px;
    --vw-text-page-link-offset: 0.2em; /* hover underline distance */

    /* Inline right arrow — used as a CSS mask, so it inherits currentColor */
    --vw-arrow-right: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2016'%3E%3Cpath%20d='M0%208h30M23%201l7%207-7%207'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'/%3E%3C/svg%3E");

    /* Feature-icon row (.vw_feature_icons) */
    --vw-feat-icon-size: 46px;
    --vw-feat-gap-y: 28px;
    --vw-feat-label-size: clamp(13px, 1.4vw, 14px);
    --vw-feat-label-color: #555;

    /* Price cards (.price_card_1 / .card_img_1 / .card_price_1) */
    --vw-card-border: 1px solid #e3e1de;
    --vw-card-bg: var(--color-white);
    --vw-card-radius: 8px;
    --vw-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    --vw-card-pad: clamp(1.5rem, 3vw, 2.5rem);
    --vw-card-img-pos: 50% 22%; /* crop focus of a background photo; portraits sit above centre */
    --vw-card-gap-y: 30px;
    --vw-card-ico-size: 30px;
    --vw-card-ico-sep: #d9d7d4;
    --vw-card-ico-circle-size: 64px; /* .card_ico_circle_1 variant */
    --vw-card-ico-circle-bg: #f2f2f2;
    --vw-card-price-cols-gap: 3em;
    --vw-card-note-gap: 1.5em;
    --vw-card-title-size: 15px;
    --vw-card-title-gap: 1.4em;
    --vw-card-bullet-color: var(--color-black);
    --vw-card-price-size: clamp(1.5rem, 2.4vw, 1.75rem);
    --vw-card-img-ratio-m: 4 / 5; /* photo ratio once stacked (<1200px) */
    --vw-card-img-ratio-m-wide: 16 / 9; /* stacked ratio for landscape photos (.img_wide_1) */

    /* Feature strip (.feature_strip_1) */
    --vw-strip-bg: var(--vw-bg);
    --vw-strip-sep: #d9d7d4;
    --vw-strip-label-size-m: 12px; /* mobile: long caps words must fit 2-per-row */
    --vw-strip-label-track-m: 0.08em;
    --vw-strip-pad-y: 28px;

    /* Workshop card variant (.workshop_card_1) + duration badge (.card_badge_1) */
    --vw-card-img-ratio-ws: 2 / 1;
    --vw-card-img-ratio-ws-m: 3 / 2;
    --vw-card-price-gap-ws: 2.5em;
    --vw-card-note-size: 13px;
    --vw-card-badge-bg: #d9d7d4;

    /* Icon in a circle (.ico_circle_1). Fluid: the disc shrinks on small screens,
       so its poking half (.ico_edge_1) stays clear of the content around it. */
    --vw-ico-circle-size: clamp(52px, 9vw, 72px);
    --vw-ico-circle-ico: clamp(24px, 4vw, 32px);
    --vw-ico-circle-bg: var(--color-white);
    --vw-ico-circle-border: 1px solid #e3e1de;
    --vw-ico-circle-halo: clamp(10px, 1.75vw, 14px);
    --vw-ico-circle-halo-bg: var(--vw-bg); /* must match the host section's bg */

    /* Contact-info rows (.info_item_1) */
    --vw-info-ico-size: clamp(52px, 7vw, 92px);
    --vw-info-ico: clamp(24px, 3vw, 40px);
    --vw-info-circle-bg: #efeae7;
    --vw-info-gap: clamp(20px, 3vw, 36px);
    --vw-info-row-gap: clamp(28px, 4vw, 48px);
    --vw-info-label-size: 13px;
    --vw-info-label-track: 0.16em;
    --vw-info-text-offset: 0.6em;

    /* Legal price note (.price_note_1) */
    --vw-note-max-w: 620px;
    --vw-note-gap: 14px;
    --vw-note-text-size: 12.5px;
    --vw-note-text-lh: 1.55;
    --vw-note-text-color: #8f8c88;
    --vw-note-ico-size: 34px;
    --vw-note-ico-glyph: 14px;
    --vw-note-ico-bg: var(--color-white);
    --vw-note-ico-border: 1px solid #cfccc8;
    --vw-note-pad-y: clamp(1.75rem, 4vw, 2.75rem);

    /* Contact tiles (.contact_tiles_1) */
    --vw-ctile-icon-size: 42px;
    --vw-ctile-icon-gap: 22px;
    --vw-ctile-label-size: 13px;
    --vw-ctile-label-track: 0.16em;
    --vw-ctile-label-gap: 1em;
    --vw-ctile-divider-w: 40px;
    --vw-ctile-divider-color: #bdb8b1; /* concrete grey — var(--main) equals the .bck-1 bg here (invisible) */
    --vw-ctile-divider-gap: 0.9em;
    --vw-ctile-text-size: 14px;
    --vw-ctile-text-color: #555;
    --vw-ctile-border: 1px solid #d6d2cc;
    --vw-ctile-radius: 6px;
    --vw-ctile-frame-pad-y: clamp(2rem, 3.2vw, 2.75rem);
    --vw-ctile-frame-pad-x: clamp(1rem, 2vw, 1.75rem);

    /* Early-stacked split rows (.stack_md_1): height of the stacked photo column */
    --vw-stack-img-min-h: clamp(320px, 45vw, 520px);

    /* Edge fade of a bleed image column (.img_fade_1): fade reach from the text side */
    --vw-img-fade: 45%;

    /* Contact form (.contact_form_1) */
    --vw-form-label-size: 13px;
    --vw-form-label-track: 0.16em;
    --vw-form-label-color: var(--color-black);
    --vw-form-border: 1px solid #d9d7d4;
    --vw-form-border-focus: var(--color-black);
    --vw-form-field-bg: var(--color-white); /* also tints the checkmark */
    --vw-form-field-pad: 12px 16px;
    --vw-form-gap: 26px;
    --vw-form-check-size: 18px;
    --vw-form-check-cols: 2; /* 1 on phones */
    --vw-form-msg-min-h: 220px;
    --vw-form-note-size: 13px;
    --vw-form-note-color: #777;
    /* Checkmark — a CSS mask, so one background-color var colors it */
    --vw-form-check-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M2.5%208.5l4%204%207-9'%20fill='none'%20stroke='%23000'%20stroke-width='2'/%3E%3C/svg%3E");

    /* Dynamic gallery grid ([vw_gallery_grid] child shortcode) */
    --vw-gallery-grid-cols: 6;
    --vw-gallery-grid-cols-md: 3; /* <=991px */
    --vw-gallery-grid-cols-sm: 2; /* <=767px */
    --vw-gallery-grid-gap: 12px;
    --vw-gallery-grid-ratio: 4 / 5;
    --vw-gallery-grid-hover-opacity: 1; /* 1 = no hover effect */

    /* Theme gallery (like_sc_gallery layout="grid") tiles per row (.gallery_grid_1) */
    --vw-gallery-cols: 3;
    --vw-gallery-cols-md: 2; /* <992px */
}

/* =========================================================================
   3. BASE TYPOGRAPHY
   ========================================================================= */

.header, .heading .header, h1.header, h2.header, h3.header, h4.header {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 500;
}

body, p, .vc_column_text, .btn, input, textarea, select, button, .menu, li {
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

.small_txt_1, .small_txt_1 p {
    font-size: clamp(10px, 3.2vw, 13px) !important;
}

/* Handwritten signature: wrap the name in <span class="vw_signature"> in any Text block */
.vw_signature,
.vw_signature .wpb_wrapper,
.vw_signature p {
    font-family: var(--font-signature), cursive !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: var(--vw-signature-size) !important;
    line-height: 1.1 !important;
    color: var(--color-black);
}

/* Styled heading block (like_sc_header with el_class header_1) */
.header_1 {
    margin-top: 0 !important;
}

.header_1 .header {
    font-family: 'Playfair Display', sans-serif !important;
    font-size: clamp(22px, 3.2vw, 60px) !important;
    font-weight: 500 !important;
    line-height: var(--vw-header-lh) !important;
    margin-bottom: 16px !important;
}

/* Eyebrow: small-caps sans (mockup), not the theme's script font */
.header_1 .subheader {
    font-family: 'Inter', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    font-size: clamp(11px, 2.6vw, 13px) !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;
    margin-bottom: 16px !important;
}

/* Hairline divider under an eyebrow (.divider_1_sub) or a headline (.divider_1_head) */
.divider_1_sub .subheader::after,
.divider_1_head .header::after {
    content: '';
    display: block;
    width: var(--vw-divider-1-width);
    height: var(--vw-divider-1-thickness);
    margin-top: var(--vw-divider-1-gap);
    background-color: var(--vw-divider-1-color);
}

.bck-3 .divider_1_sub .subheader::after,
.bck-3 .divider_1_head .header::after {
    background-color: var(--color-white);
}

/* Follow the heading's alignment (the theme puts align-center/-right on .heading) */
.align-center.divider_1_sub .subheader::after,
.align-center.divider_1_head ::after {
    margin-inline: auto;
}

.align-right.divider_1_sub .subheader::after,
.align-right.divider_1_head .header::after {
    margin-inline: auto 0;
}

/* Text link with a trailing arrow: <a class="link_arrow_1" href="…">Label</a>.
   Alignment is left to the container, so it is reusable anywhere. */
.link_arrow_1 {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-family: 'Inter', sans-serif;
    font-size: clamp(11px, 2.6vw, 13px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-black);
}

.link_arrow_1::after {
    content: "";
    flex: none;
    width: 1.6em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: var(--vw-arrow-right) no-repeat center / contain;
    mask: var(--vw-arrow-right) no-repeat center / contain;
    transition: transform .25s ease;
}

/* Keep the color on hover: the theme fades links to --main-lighter, which would
   wash out both the label and the currentColor arrow. */
.link_arrow_1:hover,
.link_arrow_1:focus,
.link_arrow_1:active {
    color: var(--color-black);
}

.link_arrow_1:hover::after {
    transform: translateX(4px);
}

/* =========================================================================
   4. BACKGROUNDS & BUTTONS
   ========================================================================= */

.bck-1 {
    background-color: var(--vw-bg);
}

.bck-2 {
    background-color: var(--color-gray);
}

.bck-3 {
    background-color: var(--color-black);
}

/* The mockup drops the theme's signature 40px hairline before every button label
   and wants a darker hover than the theme's --main. */
.btn::before {
    display: none;
}

.btn:hover {
    background-color: var(--color-gray) !important;
}

/* =========================================================================
   5. NAVBAR
   ========================================================================= */

/* Transparent-white layout: the base state stays fully transparent (the hero
   image shows through); the frosted white background fades in with .affix.
   The frost lives on a ::before overlay, NOT on nav.navbar: backdrop-filter on
   the nav would make it the containing block for its position:fixed children,
   trapping the theme's full-height mobile menu inside the 100px navbar. */
#nav-wrapper.navbar-layout-transparent-white nav.navbar::before {
    content: "";
    position: absolute;
    inset: 0;
    display: block; /* Bootstrap's clearfix (display:table) would shrink this to 0x0 */
    z-index: -1; /* above the page, below the navbar's own content */
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.4s ease;
}

#nav-wrapper.navbar-layout-transparent-white nav.navbar.affix::before {
    opacity: 1;
}

/* Below the hamburger breakpoint the navbar is white from the start (the
   transparent base state is desktop-only). 1198px = Theme Settings "Mobile
   screen width", read by checkNavbar() from #navbar data-mobile-screen-width. */
@media (max-width: 1197.98px) {
    #nav-wrapper.navbar-layout-transparent-white nav.navbar::before {
        opacity: 1;
    }

    .header-wrapper.wrapper-navbar-layout-transparent-white nav.navbar {
        border-bottom: var(--vw-navbar-hairline);
    }
}

/* No hairline while transparent; it returns with the frosted sticky state.
   The base rule must NOT key on .affix-top — that class is only added by the
   affix JS, so the theme's border would flash during page load. */
.header-wrapper.wrapper-navbar-layout-transparent-white nav.navbar {
    border-bottom: 0;
}

.header-wrapper.wrapper-navbar-layout-transparent-white nav.navbar.affix {
    border-bottom: var(--vw-navbar-hairline);
}

/* Vertically center the logo: the theme floats .logo, so .navbar-logo collapses
   to 0 height and the logo sits low. Flexing the container turns the logo and
   the theme's 100%-height strut into flex items that center deterministically.
   The menu is position:absolute, so it stays out of this flex flow. */
nav.navbar .container {
    display: flex;
    align-items: center;
}

nav.navbar .logo {
    float: none;
}

/* Desktop menu. Selectors mirror the theme's own navbar chain so they win the
   cascade by specificity; on mobile the CTA stays a plain dark link (white text
   would be invisible in the open mobile menu). */
@media (min-width: 1199px) {
    /* Right-align the menu (the theme centers it). #navbar is absolute/100% wide,
       so its right edge overflows the content grid by 30px — pull it back. */
    nav.navbar #navbar.navbar-desktop {
        text-align: right;
        padding-right: 30px;
    }

    /* Vertically center the items: the theme centers #navbar's BOX, but the
       inline-block links sit at the top of its line box (~46px in a 100px navbar).
       justify-content replaces the theme's text-align:right, which flex ignores. */
    nav.navbar #navbar.navbar-desktop ul.navbar-nav {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    nav.navbar #navbar.navbar-desktop ul.navbar-nav > li.menu_cta {
        margin-left: 14px;
    }

    /* CTA "Termin anfragen" — same reveal idiom as the page .btn.btn-black: the
       fill is an INSET box-shadow that collapses on hover, uncovering the grey
       background-color underneath. Do not fill with a grey shadow over a black
       background instead: its anti-aliased edge draws a 1px dark hairline. */
    nav.navbar #navbar.navbar-desktop ul.navbar-nav > li.menu_cta > a {
        padding: 11px 22px;
        margin: -11px 0; /* keep siblings on the 20px text line */
        line-height: 1;
        background-color: var(--color-black, #1e1e1e);
        box-shadow: inset 0 0 0 50px var(--color-black);
        transition: box-shadow 0.3s ease, color 0.3s ease;
    }

    nav.navbar #navbar.navbar-desktop ul.navbar-nav > li.menu_cta:hover > a {
        box-shadow: inset 0 0 0 0 var(--color-black);
        background-color: var(--color-gray);
    }

    nav.navbar #navbar.navbar-desktop ul.navbar-nav > li.menu_cta > a,
    nav.navbar #navbar.navbar-desktop ul.navbar-nav > li.menu_cta > a > span,
    nav.navbar #navbar.navbar-desktop ul.navbar-nav > li.menu_cta:hover > a,
    nav.navbar #navbar.navbar-desktop ul.navbar-nav > li.menu_cta:hover > a > span {
        color: #fff;
    }

    /* Move the theme's hairline from mid-text (strikethrough) to an underline */
    nav.navbar #navbar.navbar-desktop ul.navbar-nav > li span:before {
        top: auto;
        bottom: -2px;
        border-color: var(--color-black);
    }

    /* Active/hovered item: charcoal — the theme's grey sits too close to the bg */
    nav.navbar #navbar.navbar-desktop ul.navbar-nav > li:hover > a,
    nav.navbar #navbar.navbar-desktop ul.navbar-nav > li.current-menu-ancestor > a,
    nav.navbar #navbar.navbar-desktop ul.navbar-nav > li.current-menu-item > a,
    nav.navbar #navbar.navbar-desktop ul.navbar-nav > li.current-menu-parent > a,
    nav.navbar #navbar.navbar-desktop ul.navbar-nav > li.current_page_parent > a,
    nav.navbar #navbar.navbar-desktop ul.navbar-nav > li.current_page_item > a {
        color: var(--color-black);
    }

    /* The CTA is a button, not a text link — no hairline under it */
    nav.navbar #navbar.navbar-desktop ul.navbar-nav > li.menu_cta span:before {
        display: none;
    }
}

.header-wrapper {
    background-color: var(--color-main);
}

/* --- Affix anti-jump (both layouts we use: white + transparent-white) -------
   Sana uses the legacy Bootstrap affix. Near the top the navbar cycles
   .affix-top (relative) -> .affix (relative) -> .affix.dark (fixed), and the
   relative->fixed swap both grows the header (~100->107px) and snaps the navbar
   back to top:0 — a visible jump plus a 1px twitch. Fix: (1) lock the header
   height, (2) pin the navbar as fixed from the very first state. */

.header-wrapper.wrapper-navbar-layout-white,
.header-wrapper.wrapper-navbar-layout-transparent-white {
    height: var(--vw-navbar-h);
    min-height: var(--vw-navbar-h);
}

#nav-wrapper.navbar-layout-white nav.navbar.affix-top,
#nav-wrapper.navbar-layout-white nav.navbar.affix,
#nav-wrapper.navbar-layout-transparent-white nav.navbar.affix-top,
#nav-wrapper.navbar-layout-transparent-white nav.navbar.affix {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100% !important;
    margin-top: 0 !important; /* the offset is driven by `top`; kill the theme's admin-bar nudge */
}

/* White layout only: the navbar element itself is transparent (the white comes
   from #nav-wrapper behind it), so it needs its own background once pinned.
   The transparent-white layout is deliberately excluded. */
#nav-wrapper.navbar-layout-white nav.navbar.affix-top,
#nav-wrapper.navbar-layout-white nav.navbar.affix {
    background-color: var(--color-white);
}

/* Clear the WP admin bar while logged in (dev only) */
body.admin-bar #nav-wrapper.navbar-layout-white nav.navbar.affix-top,
body.admin-bar #nav-wrapper.navbar-layout-white nav.navbar.affix,
body.admin-bar #nav-wrapper.navbar-layout-transparent-white nav.navbar.affix-top,
body.admin-bar #nav-wrapper.navbar-layout-transparent-white nav.navbar.affix {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar #nav-wrapper.navbar-layout-white nav.navbar.affix-top,
    body.admin-bar #nav-wrapper.navbar-layout-white nav.navbar.affix,
    body.admin-bar #nav-wrapper.navbar-layout-transparent-white nav.navbar.affix-top,
    body.admin-bar #nav-wrapper.navbar-layout-transparent-white nav.navbar.affix {
        top: 46px !important;
    }
}

/* --- Lightbox above the pinned navbar --------------------------------------
   Magnific Popup (theme gallery lightbox) ships at z-index 1042/1043, while the
   affixed navbar sits at 10000 — the fixed navbar covers the top of the open
   photo. The `body` prefix is required: magnific-popup.css is enqueued AFTER the
   child sheet, so a bare .mfp-wrap (equal specificity) would lose on order.
   Arrows/close are children of .mfp-wrap, so lifting the two roots is enough. */

body .mfp-bg {
    z-index: var(--vw-lightbox-z);
}

body .mfp-wrap {
    z-index: calc(var(--vw-lightbox-z) + 1);
}

/* =========================================================================
   6. FOOTER — compact 3-column layout (content lives in widgets)
   ========================================================================= */

#ltx-widgets-footer {
    padding-top: 0;
    padding-bottom: 0;
}

/* Slimmer footer (theme: 35px top / 45px bottom) */
#ltx-widgets-footer .footer-widget-area {
    padding-top: var(--vw-footer-pad-y);
    padding-bottom: var(--vw-footer-pad-y);
}

#ltx-widgets-footer,
#ltx-widgets-footer .header-widget,
.copyright-block {
    font-family: var(--font-main);
}

#ltx-widgets-footer .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* The theme hides the contact column via hidden-xs/ms/sm/md — force it visible */
#ltx-widgets-footer .row > div {
    display: block !important;
}

/* Keep 3 equal columns from md up (col-md-6 would wrap 2+1) */
@media (min-width: 992px) {
    #ltx-widgets-footer .row > div {
        width: 33.333%;
    }
}

#ltx-widgets-footer .footer-widget-area .widget {
    margin: 0;
}

/* Col 1 — logo (renders oversized without a cap) */
#ltx-widgets-footer a.logo {
    display: inline-block; /* follow the column's text-align */
}

#ltx-widgets-footer a.logo img {
    max-height: 66px;
    width: auto;
}

#ltx-widgets-footer .row > div:first-child .footer-widget-area,
#ltx-widgets-footer .row > div:nth-child(2) .footer-widget-area {
    text-align: left;
}

/* Widget heading ("Folge mir") -> eyebrow caps, no hairline */
#ltx-widgets-footer .header-widget {
    font-family: var(--font-subheaders);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-white);
    margin: 0 0 26px;
    text-align: inherit; /* follow the column (right in the social col, centered on mobile) */
}

#ltx-widgets-footer .header-widget .widget-icon,
#ltx-widgets-footer .header-widget::after {
    display: none;
}

/* Col 2 — contact list: icon + text inline, compact rows */
#ltx-widgets-footer .widget_ltx_icons ul.social-icons-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

#ltx-widgets-footer .widget_ltx_icons ul.social-icons-list li {
    margin: 4px 0 0 0 !important; /* the theme sets 26px !important */
}

#ltx-widgets-footer .widget_ltx_icons .social-icons-list .txt {
    opacity: 1; /* the theme dims .txt to 0.6 */
}

#ltx-widgets-footer .widget_ltx_icons ul.social-icons-list li a {
    display: flex;
    align-items: center;
    padding: 3px 0;
    color: var(--color-white);
}

#ltx-widgets-footer .widget_ltx_icons ul.social-icons-list li a:hover {
    color: var(--color-white);
    opacity: 0.7;
}

#ltx-widgets-footer .widget_ltx_icons .ltx-ic {
    margin-right: 14px;
    font-size: 16px;
    color: var(--main);
    flex: 0 0 auto;
}

#ltx-widgets-footer .row > div:nth-child(2) .social-icons-list li a {
    justify-content: flex-start;
}

/* Col 3 — the social group sits right, but heading + icons share their LEFT edge:
   right-align an inline-block, left-align inside it */
#ltx-widgets-footer .row > div:last-child {
    text-align: right;
}

#ltx-widgets-footer .row > div:last-child .footer-widget-area {
    display: inline-block;
    text-align: left;
}

#ltx-widgets-footer .ltx-social ul {
    margin: 0;
    padding: 0;
    display: inline-flex;
    gap: 18px;
    list-style: none;
}

#ltx-widgets-footer .ltx-social li {
    margin: 0;
}

#ltx-widgets-footer .ltx-social li a {
    border: 0;
    width: auto;
    height: auto;
    line-height: 1;
    color: rgba(255, 255, 255, 0.78);
}

#ltx-widgets-footer .ltx-social li a:hover {
    color: #fff;
}

#ltx-widgets-footer .ltx-social li a span {
    font-size: 24px;
}

/* Bottom bar — divider, legal links left / copyright right */
.copyright-block {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: var(--vw-footer-bar-pad-y);
    padding-bottom: var(--vw-footer-bar-pad-y);
}

.copyright-block .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Bootstrap's .container clearfix pseudos become flex items and break space-between */
.copyright-block .container::before,
.copyright-block .container::after {
    display: none;
}

.copyright-block p {
    margin: 0;
}

.copyright-block .footer-legal,
.copyright-block .footer-copy {
    font-size: var(--vw-footer-legal-size);
}

.footer-legal,
.footer-copy {
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.footer-legal a {
    color: rgba(255, 255, 255, 0.6);
}

.footer-legal a:hover {
    color: #fff;
}

.footer-legal .sep {
    margin: 0 12px;
    opacity: 0.4;
}

/* Smaller floating "go to top" button (theme: 70px square) */
.ltx-go-top {
    width: var(--vw-gotop-size);
    height: var(--vw-gotop-size);
    border-radius: var(--vw-gotop-radius);
}

/* Without a custom image the theme adds .ltx-go-top-img with padding:13px 0 0,
   which pushes the arrow below center; zero it and let flex center it. */
.ltx-go-top.ltx-go-top-img {
    padding: 0;
}

.ltx-go-top .go-top-icon:before {
    font-size: var(--vw-gotop-icon-size);
    margin-top: 0; /* the theme's -10px nudge was tuned for its 30px glyph + padding */
}

/* Tablet & mobile — stack and center everything */
@media (max-width: 991px) {
    #ltx-widgets-footer {
        padding: 44px 0 0;
    }

    #ltx-widgets-footer .row {
        flex-direction: column;
        align-items: center;
        gap: 36px;
    }

    #ltx-widgets-footer .footer-widget-area {
        padding: 0;
    }

    #ltx-widgets-footer .row > div {
        display: block !important; /* the theme hides footer-2 via hidden-md/sm/xs */
        float: none;
        width: 100%;
        text-align: center;
    }

    #ltx-widgets-footer .row > div:first-child .footer-widget-area,
    #ltx-widgets-footer .row > div:nth-child(2) .footer-widget-area {
        text-align: center;
    }

    #ltx-widgets-footer .row > div:last-child .footer-widget-area {
        display: block;
        text-align: center;
    }

    /* Contact rows: the icon goes from absolute (pinned left) to in-flow, so the
       icon+text pair centers as a group */
    #ltx-widgets-footer .row > div:nth-child(2) .social-icons-list li {
        padding-left: 0 !important;
    }

    #ltx-widgets-footer .row > div:nth-child(2) .social-icons-list .ltx-ic {
        position: static;
    }

    #ltx-widgets-footer .row > div:nth-child(2) .social-icons-list li a {
        justify-content: center;
    }

    #ltx-widgets-footer .ltx-social ul {
        justify-content: center;
    }

    .copyright-block .container {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .copyright-block .footer-copy {
        font-size: 10px;
    }
}

/* =========================================================================
   7. LAYOUT UTILITIES (WPBakery "Extra class name")
   ========================================================================= */

/* --- Full-bleed background column ---------------------------------------
   `bck_img_right` / `bck_img_left` on a column: only that column bleeds to the
   matching viewport edge; the other column keeps its grid position. Set the
   photo natively via the column's Design Options. Works for any column width.
   The negative margin both pins the bleed and keeps the margin-box at grid
   width, so nothing overflows horizontally. flex-shrink:0 stops WPBakery's
   "Equal height" rows (vc_row-flex) from squeezing the widened column back. */
.bck_img_right,
.bck_img_left {
    flex: 0 0 auto;
}

.bck_img_right {
    margin-right: calc(50% - 50vw);
}

.bck_img_left {
    margin-left: calc(50% - 50vw);
}

/* Width per grid step = own grid width + (container edge -> viewport edge) */
.bck_img_right.vc_col-sm-1, .bck_img_left.vc_col-sm-1 { width: calc(8.3333% + (50vw - 50%)); }
.bck_img_right.vc_col-sm-2, .bck_img_left.vc_col-sm-2 { width: calc(16.6667% + (50vw - 50%)); }
.bck_img_right.vc_col-sm-3, .bck_img_left.vc_col-sm-3 { width: calc(25% + (50vw - 50%)); }
.bck_img_right.vc_col-sm-4, .bck_img_left.vc_col-sm-4 { width: calc(33.3333% + (50vw - 50%)); }
.bck_img_right.vc_col-sm-5, .bck_img_left.vc_col-sm-5 { width: calc(41.6667% + (50vw - 50%)); }
.bck_img_right.vc_col-sm-6, .bck_img_left.vc_col-sm-6 { width: calc(50% + (50vw - 50%)); }
.bck_img_right.vc_col-sm-7, .bck_img_left.vc_col-sm-7 { width: calc(58.3333% + (50vw - 50%)); }
.bck_img_right.vc_col-sm-8, .bck_img_left.vc_col-sm-8 { width: calc(66.6667% + (50vw - 50%)); }
.bck_img_right.vc_col-sm-9, .bck_img_left.vc_col-sm-9 { width: calc(75% + (50vw - 50%)); }
.bck_img_right.vc_col-sm-10, .bck_img_left.vc_col-sm-10 { width: calc(83.3333% + (50vw - 50%)); }
.bck_img_right.vc_col-sm-11, .bck_img_left.vc_col-sm-11 { width: calc(91.6667% + (50vw - 50%)); }
.bck_img_right.vc_col-sm-12, .bck_img_left.vc_col-sm-12 { width: calc(100% + (50vw - 50%)); }

/* Mobile: vc_col-sm columns stack below 768px — drop the bleed */
@media (max-width: 767px) {
    .bck_img_right,
    .bck_img_left,
    .bck_img_in_1 {
        width: 100% !important;
        margin-left: 0;
        margin-right: 0;
        min-height: 320px; /* a background-only column has no intrinsic height */
    }
}

/* Contained photo column (.bck_img_in_1): the background is clipped to the
   content box, so its edges line up with normal content instead of painting
   across the column's 15px gutter. Companion to bck_img_right/left (no bleed). */
.bck_img_in_1 > .vc_column-inner {
    background-clip: content-box;
}

/* js_composer gives every Design-Options-filled column a default padding-top:35px
   (.vc_col-has-fill > .vc_column-inner) — a stray offset for photo columns
   (vertical spacing is owned by the text_block_pad_* classes). */
.bck_img_right > .vc_column-inner,
.bck_img_left > .vc_column-inner,
.bck_img_in_1 > .vc_column-inner {
    padding-top: 0;
}

/* --- Hide on mobile ------------------------------------------------------
   `hide_mobile_1` drops an element below 768px — e.g. one of two decorative
   bck_img_* columns that would otherwise both stack around the text. */
@media (max-width: 767px) {
    .hide_mobile_1 {
        /* !important also beats js_composer's equal-height rule (display:flex) */
        display: none !important;
    }
}

/* --- Transparent-navbar clearance ---------------------------------------
   `pad_navbar_1` on the TEXT column(s) of a page's first section. The
   transparent layout pulls the page --vw-navbar-h px under the fixed menu, so
   the column's top slice would hide beneath it. A MARGIN (not padding): the
   text_block_pad_* classes set padding-top on the same element, and a second
   padding-top would override theirs — margin + padding add up instead. :has()
   makes it fire only while the page really uses the transparent navbar. Do NOT
   put it on image/bleed columns — those are meant to run under the menu. */
body:has(.header-wrapper.wrapper-navbar-layout-transparent-white) .pad_navbar_1 {
    margin-top: var(--vw-navbar-h);
}

/* --- Edge fade: the image "grows out of" the section background ----------
   `img_fade_1` next to bck_img_right/left. A mask fades the column (background
   image included) toward the text side; the direction flips with the side class
   and the mask is dropped on mobile. Use on background-only columns — it masks
   the column's content too. */
.img_fade_1 > .vc_column-inner {
    -webkit-mask-image: linear-gradient(var(--vw-img-fade-dir, to right), transparent 0, #000 var(--vw-img-fade));
    mask-image: linear-gradient(var(--vw-img-fade-dir, to right), transparent 0, #000 var(--vw-img-fade));
}

/* image LEFT -> text right -> fade the right edge */
.bck_img_left.img_fade_1 > .vc_column-inner {
    --vw-img-fade-dir: to left;
}

@media (max-width: 767px) {
    .img_fade_1 > .vc_column-inner {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* --- Vertical rhythm of text blocks --------------------------------------
   `text_block_pad_1` on a TEXT column. Fluid padding, no media queries. Targets
   the COLUMN element itself (where WPBakery puts the Extra class name). */
.text_block_pad_1 {
    padding-top: var(--vw-block-pad-y);
    padding-bottom: var(--vw-block-pad-y);
}

.text_block_pad_top_1 {
    padding-top: var(--vw-block-pad-y);
}

.text_block_pad_bottom_1 {
    padding-bottom: var(--vw-block-pad-y);
}

.comment-text p, .text-page p {
    margin-bottom: 10px;
}

@media (min-width: 768px) {
    .text_block_pad_left_1 > .vc_column-inner {
        padding-left: var(--vw-block-pad-x);
    }

    .text_block_pad_right_1 > .vc_column-inner {
        padding-right: var(--vw-block-pad-x);
    }
}

/* --- Early stack (.stack_md_1 on a vc_row) -------------------------------
   Stacks the row's columns below 992px instead of the theme's native 768px —
   for split rows whose text half gets too narrow in the 768–991px band (an
   unbreakable tracked word like "PARKMÖGLICHKEITEN" would overflow). DOM order
   = stacked order, so a bck_img_* photo column drops below the text, keeps the
   container width (no bleed) and gets a min-height. */
@media (max-width: 991px) {
    .stack_md_1 > .wpb_column {
        width: 100% !important; /* beats the .bck_img_*.vc_col-sm-N bleed calc */
        margin-left: 0;
        margin-right: 0;
    }

    .stack_md_1 > .bck_img_right,
    .stack_md_1 > .bck_img_left,
    .stack_md_1 > .bck_img_in_1 {
        min-height: var(--vw-stack-img-min-h);
    }
}

/* --- Mobile-center utility (.center_mobile_1 on a column) -----------------
   Left-aligned on desktop, centered once the layout stacks (<768px). Scoped to
   the column so shared classes (text_block_pad_*) on other heros stay untouched. */
@media (max-width: 767px) {
    .center_mobile_1 .heading,
    .center_mobile_1 .align-left,
    .center_mobile_1 .wpb_text_column {
        text-align: center;
    }

    /* the divider is a block ::after positioned by margin-inline, not text-align */
    .center_mobile_1 .divider_1_head .header::after,
    .center_mobile_1 .divider_1_sub .subheader::after {
        margin-inline: auto;
    }

    .center_mobile_1 .price_note_1 {
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- Stretch-section FOUC guard ------------------------------------------
   A full_width="stretch_row" section is only pulled out to window width by JS
   (vc_rowBehaviour), which then sets data-vc-full-width-init. Until then its
   content flashes in the narrow container. Site-wide, not tied to one page. */
.vc_section[data-vc-full-width]:not([data-vc-full-width-init="true"]) {
    visibility: hidden;
}

/* Anchored sections (e.g. /kontakt/#anfrage): keep the fixed navbar off the target */
.vc_section[id] {
    scroll-margin-top: var(--vw-navbar-h);
}

/* =========================================================================
   8. GALLERIES & IMAGE GRIDS
   ========================================================================= */

/* --- Work grid (.work_grid_1 on an inner row) ----------------------------
   Static 6 -> 3 -> 2 image grid, no slider/JS (WPBakery 1/6 columns natively
   collapse straight to 1-per-row below 768px). */
.work_grid_1 {
    display: flex;
    flex-wrap: wrap;
    margin-left: -6px;
    margin-right: -6px;
}

.work_grid_1 > .wpb_column {
    width: 16.6667%; /* desktop: 6 per row */
    float: none;
    padding: 0 6px;
    margin-bottom: 12px;
}

/* Drop the theme's 15px column padding so the outer images sit flush with the
   section's text edges; the 6px padding + -6px row margin keep the 12px gutter. */
.work_grid_1 > .wpb_column > .vc_column-inner {
    padding-left: 0;
    padding-right: 0;
}

.work_grid_1 .vc_single_image-wrapper,
.work_grid_1 .vc_single_image-wrapper img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 991px) {
    .work_grid_1 > .wpb_column {
        width: 33.3333%;
    }
}

@media (max-width: 767px) {
    .work_grid_1 > .wpb_column {
        width: 50%;
    }
}

/* --- Dynamic gallery grid (.vw_gallery_grid) -----------------------------
   Rendered by the [vw_gallery_grid] child shortcode: thumbnails from a Gallery
   post, each a plain <a> to one target URL — deliberately NOT like_sc_gallery,
   so there is no swipebox lightbox and no magnifier/zoom on hover. */
.vw_gallery_grid {
    display: grid;
    grid-template-columns: repeat(var(--vw-gallery-grid-cols), 1fr);
    gap: var(--vw-gallery-grid-gap);
}

/* The anchor IS the crop box, so mixed source proportions render as an even row */
.vw_gallery_grid__item {
    display: block;
    overflow: hidden;
    aspect-ratio: var(--vw-gallery-grid-ratio);
}

.vw_gallery_grid__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: none; /* no hover animation (requirement) */
}

.vw_gallery_grid__item:hover img {
    opacity: var(--vw-gallery-grid-hover-opacity);
}

@media (max-width: 991px) {
    .vw_gallery_grid {
        grid-template-columns: repeat(var(--vw-gallery-grid-cols-md), 1fr);
    }
}

@media (max-width: 767px) {
    .vw_gallery_grid {
        grid-template-columns: repeat(var(--vw-gallery-grid-cols-sm), 1fr);
    }
}

/* --- Theme gallery, grid layout (.gallery_grid_1 on like_sc_gallery) ------
   The shortcode hardcodes col-md-3 (4 per row, only >=992px); below that no
   grid class matches and tiles would stack full-width. The theme turns .row
   into a flex container, so width alone beats Bootstrap's .col-md-3 (0,1,0)
   without !important. The base rule is unconditional, so it also covers <768px. */
.gallery-sc.gallery_grid_1 .col-md-3 {
    width: calc(100% / var(--vw-gallery-cols));
}

@media (max-width: 991px) {
    .gallery-sc.gallery_grid_1 .col-md-3 {
        width: calc(100% / var(--vw-gallery-cols-md));
    }
}

/* --- Theme gallery, masonry layout: mid-range fix -------------------------
   Its tiles carry only col-lg-6 (grid applies >=1200px), so between 768–1199px
   every photo stacks full-width. Extend the 50% geometry down to the theme's
   own 768px stack breakpoint. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .gallery-sc .row.centered .col-lg-6 {
        width: 50%;
    }
}

/* =========================================================================
   9. FEATURE ICONS (.vw_feature_icons on an inner row)
   -------------------------------------------------------------------------
   The theme's icon-font "Block with Icons" cannot take custom SVGs, so it is
   replaced by a nested row of Single Image columns (uploaded line SVGs). This
   restyles that row to read like the original block: centered icon above a
   small label, responsive 6 -> 3 -> 2.
   ========================================================================= */

.vw_feature_icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* same token as .text_block_pad_1, so both share one vertical rhythm */
    padding-top: var(--vw-block-pad-y);
    padding-bottom: var(--vw-block-pad-y);
}

.vw_feature_icons > .wpb_column {
    width: 16.6667%; /* desktop: 6 per row */
    float: none;
}

.vw_feature_icons .wpb_single_image {
    text-align: center;
    margin-bottom: 16px;
}

.vw_feature_icons .vc_single_image-wrapper,
.vw_feature_icons .vc_single_image-wrapper img {
    display: inline-block;
    width: var(--vw-feat-icon-size);
    height: auto;
}

.vw_feature_icons .wpb_text_column {
    text-align: center;
}

.vw_feature_icons .wpb_text_column p {
    margin: 0;
    font-size: var(--vw-feat-label-size);
    line-height: 1.45;
    color: var(--vw-feat-label-color);
}

@media (max-width: 991px) {
    .vw_feature_icons > .wpb_column {
        width: 33.3333%;
    }
}

@media (max-width: 767px) {
    .vw_feature_icons > .wpb_column {
        width: 50%;
    }
}

/* --- Feature strip variant (.feature_strip_1) -----------------------------
   Put BOTH classes on the inner row: "vw_feature_icons feature_strip_1". Four
   icon+label items on a light band with vertical hairlines. Each label is one
   Text Block of plain paragraphs — the FIRST <p> renders as the uppercase
   tracked line (WYSIWYG-safe: no classes in the HTML). Mobile: 2x2. */
.vw_feature_icons.feature_strip_1 {
    background: var(--vw-strip-bg);
    padding: var(--vw-strip-pad-y) 0;
    /* zero the inner row's -15px gutters so the band lines up with the content
       of the other sections instead of reaching the container edge */
    margin-left: 0;
    margin-right: 0;
}

.vw_feature_icons.feature_strip_1 > .wpb_column {
    width: 25%;
}

.vw_feature_icons.feature_strip_1 > .wpb_column + .wpb_column {
    border-left: 1px solid var(--vw-strip-sep);
}

/* the label is the band's last element — the theme's 35px trailing margin would
   open dead space inside the band */
.vw_feature_icons.feature_strip_1 .wpb_text_column {
    margin-bottom: 0;
}

.vw_feature_icons.feature_strip_1 .wpb_text_column p:first-child {
    font-family: var(--font-subheaders), 'Helvetica Neue', Arial, sans-serif;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-black);
}

@media (max-width: 767px) {
    .vw_feature_icons.feature_strip_1 > .wpb_column {
        width: 50%;
    }

    .vw_feature_icons.feature_strip_1 > .wpb_column + .wpb_column {
        border-left: 0;
    }

    .vw_feature_icons.feature_strip_1 > .wpb_column:nth-child(even) {
        border-left: 1px solid var(--vw-strip-sep);
    }

    .vw_feature_icons.feature_strip_1 > .wpb_column:nth-child(n+3) {
        margin-top: var(--vw-feat-gap-y);
    }

    /* long unbreakable caps words must fit half the band — tighten the type
       instead of letting the label overflow its column */
    .vw_feature_icons.feature_strip_1 .wpb_text_column p:first-child {
        font-size: var(--vw-strip-label-size-m);
        letter-spacing: var(--vw-strip-label-track-m);
    }
}

/* =========================================================================
   10. PRICE CARDS (.price_card_1)
   -------------------------------------------------------------------------
   Composition: an outer vc_row (Equal height ON) with one 1/2 column per card
   (el_class price_card_1). Each card = a vc_row_inner with a photo column
   (card_img_1) and a content column of Text Blocks (title h3 with an inline SVG
   icon / description + list / price with el_class card_price_1).

   Mechanics worth knowing:
   - The frame sits on .wpb_wrapper, NOT .vc_column-inner, so the theme's 15px
     column gutters survive (30px between cards, flush with the container).
   - The inner row is forced to flex here, so the photo column always stretches.
   - The photo is absolutely positioned (object-fit: cover): the CONTENT half
     defines the card height, exactly like the mockup. Once stacked it gets an
     aspect-ratio instead.
   ========================================================================= */

.price_card_1 {
    /* self-contained flex fallback if the outer row's Equal height is off */
    display: flex;
    margin-bottom: var(--vw-card-gap-y);
}

.price_card_1 > .vc_column-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* the frame; overflow:hidden clips the flush photo to the rounded corners */
.price_card_1 > .vc_column-inner > .wpb_wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    background: var(--vw-card-bg);
    border: var(--vw-card-border);
    border-radius: var(--vw-card-radius);
    box-shadow: var(--vw-card-shadow);
    overflow: hidden;
}

.price_card_1 .vc_row.vc_inner {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 auto;
    width: 100%;
    margin: 0; /* kill the -15px inner-row gutter inside the frame */
}

.price_card_1 .vc_row.vc_inner > .wpb_column {
    display: flex;
}

.price_card_1 .vc_row.vc_inner > .wpb_column > .vc_column-inner {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
}

/* --- photo half (card_img_1) --- */
.card_img_1 > .vc_column-inner {
    position: relative;
    padding: 0; /* the photo sits flush with the frame */
    overflow: hidden;
}

/* absolute fill: the photo adds no intrinsic height, so the content half
   dictates how tall the card is */
.card_img_1 .wpb_single_image {
    position: absolute;
    inset: 0;
    margin: 0;
}

.card_img_1 .vc_figure,
.card_img_1 .vc_single_image-wrapper,
.card_img_1 .vc_single_image-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
}

.card_img_1 .vc_single_image-wrapper img {
    object-fit: cover;
}

/* Photo supplied as a Design Options background instead of a Single Image
   (Workshops). WPBakery hard-codes `background-position: center !important` into
   .vc_custom_*, so the default focus needs !important too. :not() keeps the
   theme's native "Background Position" dropdown (.bg-pos-*) authoritative. */
.card_img_1:not([class*="bg-pos-"]) > .vc_column-inner {
    background-position: var(--vw-card-img-pos) !important;
}

/* --- content half --- */
.price_card_1 .vc_row.vc_inner > .wpb_column:not(.card_img_1) > .vc_column-inner {
    padding: var(--vw-card-pad);
}

/* flex column so the price block can push itself to the bottom */
.price_card_1 .vc_row.vc_inner > .wpb_column:not(.card_img_1) > .vc_column-inner > .wpb_wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.price_card_1 .wpb_text_column {
    margin-bottom: 0;
}

/* gap between the title underline and the description */
.price_card_1 .wpb_text_column:has(h3) {
    margin-bottom: var(--vw-card-title-gap);
}

/* title: inline SVG icon | hairline separator | tracked caps label */
.price_card_1 h3 {
    display: flex;
    flex-wrap: wrap; /* a long tracked title drops under the icon instead of widening the card */
    align-items: center;
    gap: 16px;
    /* no bottom margin here: js_composer's `#content .wpb_text_column :last-child
       { margin-bottom: 0 }` (ID selector) outweighs any class rule — the gap below
       the underline lives on the title's text column instead. */
    margin: 0;
    padding-bottom: 1em;
    border-bottom: var(--vw-card-border);
    font-family: var(--font-subheaders), 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--vw-card-title-size);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-black);
}

.price_card_1 h3 img {
    flex: 0 0 auto;
    box-sizing: content-box; /* so the separator padding doesn't shrink the icon */
    width: var(--vw-card-ico-size);
    height: var(--vw-card-ico-size);
    padding-right: 16px;
    border-right: 1px solid var(--vw-card-ico-sep);
}

/* Description/list typography is inherited from the theme body text on purpose —
   only spacing and bullets are styled here. */
.price_card_1 p {
    margin: 0 0 10px;
}

.price_card_1 ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.price_card_1 ul li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 0.35em;
}

.price_card_1 ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--vw-card-bullet-color);
}

/* price (card_price_1): pinned to the card bottom via the flex column above */
.price_card_1 .card_price_1 {
    margin-top: auto;
    padding-top: 1.25em;
    text-align: center;
}

.price_card_1 .card_price_1 p {
    margin: 0;
    font-family: var(--font-headers), Georgia, serif;
    font-size: var(--vw-card-price-size);
    color: var(--color-black);
}

/* --- Prices side by side (.price_grid_1 next to price_card_1) -------------
   The content wrapper becomes a 2-column grid: regular Text Blocks span the
   full width, each price is its own Text Block (el_class price_item_1) in one
   cell. Inside a price item the LAST <p> is styled as the big serif price
   (WYSIWYG-safe: no classes in the HTML). */
.price_card_1.price_grid_1 .vc_row.vc_inner > .wpb_column:not(.card_img_1) > .vc_column-inner > .wpb_wrapper {
    display: grid;
    /* minmax(0, …): a bare 1fr track refuses to shrink below its longest
       unbreakable word and would push the card past the viewport */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-content: start;
}

.price_card_1.price_grid_1 .wpb_text_column,
.price_card_1.price_grid_1 .btn-wrap {
    grid-column: 1 / -1;
}

.price_card_1.price_grid_1 .wpb_text_column.price_item_1 {
    grid-column: auto;
}

.price_card_1 .price_item_1 {
    margin-top: var(--vw-card-price-cols-gap);
    padding: 0 1em;
    text-align: center;
}

.price_card_1 .price_item_1 + .price_item_1 {
    border-left: 1px solid var(--vw-card-ico-sep);
}

.price_card_1 .price_item_1 p:last-child {
    margin: 0.4em 0 0;
    font-family: var(--font-headers), Georgia, serif;
    font-size: var(--vw-card-price-size);
    color: var(--color-black);
}

/* Footnote under a price grid (card_price_note_1 on a Text Block after the
   price cells). Same divider token as the vertical hairline between prices. */
.price_card_1 .card_price_note_1 {
    margin-top: var(--vw-card-price-cols-gap);
    padding-top: var(--vw-card-note-gap);
    border-top: 1px solid var(--vw-card-ico-sep);
    text-align: center;
}

/* vertical hairline on an inner column's left edge (card_vline_1) */
.price_card_1 .card_vline_1 > .vc_column-inner {
    border-left: 1px solid var(--vw-card-ico-sep);
}

/* --- Variant: icon in a filled circle (.card_ico_circle_1) ----------------
   The icon grows into a filled circle (no hairline separator, no underline) and
   is centered against the whole content block; the text indents past it, so
   title and copy share one left edge. */
.price_card_1.card_ico_circle_1 h3 {
    border-bottom: 0;
    padding-bottom: 0;
}

.price_card_1.card_ico_circle_1 h3 img {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    box-sizing: border-box;
    width: var(--vw-card-ico-circle-size);
    height: var(--vw-card-ico-circle-size);
    padding: calc(var(--vw-card-ico-circle-size) * 0.26);
    border: 0;
    border-radius: 50%;
    background: var(--vw-card-ico-circle-bg);
}

/* the wrapper reserves the left lane the circle is centered in */
.price_card_1.card_ico_circle_1 .vc_row.vc_inner > .wpb_column:has(h3) > .vc_column-inner > .wpb_wrapper {
    position: relative;
    padding-left: calc(var(--vw-card-ico-circle-size) + 20px);
}

@media (max-width: 767px) {
    /* circle back inline next to the title, text full width */
    .price_card_1.card_ico_circle_1 .vc_row.vc_inner > .wpb_column:has(h3) > .vc_column-inner > .wpb_wrapper {
        padding-left: 0;
    }

    .price_card_1.card_ico_circle_1 h3 img {
        position: static;
        transform: none;
    }

    /* unbreakable price labels can't sit side by side — stack them and turn the
       vertical divider into a horizontal one */
    .price_card_1.price_grid_1 .vc_row.vc_inner > .wpb_column:not(.card_img_1) > .vc_column-inner > .wpb_wrapper {
        grid-template-columns: minmax(0, 1fr);
    }

    .price_card_1 .price_item_1 + .price_item_1 {
        margin-top: 1.5em;
        padding-top: 1.5em;
        border-left: 0;
        border-top: 1px solid var(--vw-card-ico-sep);
    }
}

/* --- Stacked layout (photo on top, content below) ------------------------
   The photo|content split only fits on wide desktops: below ~1200px the content
   half gets too narrow for the tracked uppercase title (BRAUTSTYLING overflows).
   WPBakery inner columns natively stack only below 768px, so force it earlier. */
@media (max-width: 1199px) {
    /* A single flex COLUMN, not wrapped lines: with wrapping, the outer row's
       Equal height would stretch surplus space into the photo line too, making
       photos taller in cards with less text. */
    .price_card_1 .vc_row.vc_inner {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .price_card_1 .vc_row.vc_inner > .wpb_column {
        width: 100%;
    }

    .price_card_1 .vc_row.vc_inner > .wpb_column:not(.card_img_1) {
        flex: 1 1 auto;
    }

    /* the absolute photo has no height once stacked — give it a ratio;
       order pushes it BELOW the content */
    .card_img_1 {
        flex: 0 0 auto;
        order: 2;
    }

    .card_img_1 > .vc_column-inner {
        aspect-ratio: var(--vw-card-img-ratio-m);
    }

    .card_img_1.img_wide_1 > .vc_column-inner {
        aspect-ratio: var(--vw-card-img-ratio-m-wide);
    }

    /* stacked content columns: no vline, no doubled vertical padding */
    .price_card_1 .card_vline_1 > .vc_column-inner {
        border-left: 0;
    }

    .price_card_1 .vc_row.vc_inner > .wpb_column:not(.card_img_1) + .wpb_column:not(.card_img_1) > .vc_column-inner {
        padding-top: 0;
    }
}

/* =========================================================================
   11. WORKSHOP CARD (.workshop_card_1) — a price_card_1 variant
   -------------------------------------------------------------------------
   ALWAYS stacked with the photo on TOP and a centered header/price. All card
   mechanics (frame, cover photo, bottom-pinned price) are inherited from
   price_card_1 — only layout and centering are overridden here. In card_price_1
   the FIRST <p> is the big price, any following <p> a small note (WYSIWYG-safe).
   ========================================================================= */

/* The generic card stacks only below 1200px and pushes the photo BELOW the text
   (order:2) — here the photo leads, so the order is reset. These selectors
   outweigh the media-query stack rules by specificity. */
.price_card_1.workshop_card_1 .vc_row.vc_inner {
    flex-direction: column;
    flex-wrap: nowrap;
}

.price_card_1.workshop_card_1 .vc_row.vc_inner > .wpb_column {
    width: 100%;
}

.price_card_1.workshop_card_1 .vc_row.vc_inner > .wpb_column:not(.card_img_1) {
    flex: 1 1 auto;
}

.workshop_card_1 .card_img_1 {
    flex: 0 0 auto;
    order: 0;
}

/* the cards sit directly on the section's bottom padding — the generic card's
   bottom margin would add to it */
.price_card_1.workshop_card_1 {
    margin-bottom: 0;
}

/* the absolute cover photo needs a ratio at every width once stacked */
.workshop_card_1 .card_img_1 > .vc_column-inner {
    aspect-ratio: var(--vw-card-img-ratio-ws);
}

/* header: icon + title centered as a group, no underline, no icon hairline */
.workshop_card_1 h3 {
    justify-content: center;
    border-bottom: 0;
    padding-bottom: 0;
}

.workshop_card_1 h3 img {
    border-right: 0;
    padding-right: 0;
}

/* price: the first <p> inherits the big serif price from card_price_1, any
   following <p> becomes a small muted note */
.workshop_card_1 .card_price_1 {
    padding-top: var(--vw-card-price-gap-ws);
}

.workshop_card_1 .card_price_1 p + p {
    margin-top: 0.6em;
    font-family: var(--font-main), 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--vw-card-note-size);
    color: #555;
}

/* --- Duration badge (card_badge_1 on a Text Block) ------------------------
   A generic card element (not workshop-only): centered grey caps label. */
.price_card_1 .card_badge_1 {
    margin-top: 1.5em;
    text-align: center;
}

.price_card_1 .card_badge_1 p {
    display: inline-block;
    margin: 0;
    padding: 0.9em 2.2em;
    background: var(--vw-card-badge-bg);
    font-family: var(--font-subheaders), 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-black);
}

/* mobile: centered copy + a taller photo; the card gap returns BETWEEN the
   stacked cards only (not after the last one) */
@media (max-width: 767px) {
    .workshop_card_1 .wpb_text_column {
        text-align: center;
    }

    .workshop_card_1 .card_img_1 > .vc_column-inner {
        aspect-ratio: var(--vw-card-img-ratio-ws-m);
    }

    .price_card_1.workshop_card_1 + .price_card_1.workshop_card_1 {
        margin-top: var(--vw-card-gap-y);
    }
}

/* =========================================================================
   12. ICON IN A CIRCLE (.ico_circle_1 on a Single Image element)
   ========================================================================= */

.ico_circle_1 .vc_single_image-wrapper {
    width: var(--vw-ico-circle-size);
    height: var(--vw-ico-circle-size);
    border-radius: 50%;
    background: var(--vw-ico-circle-bg);
    border: var(--vw-ico-circle-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ico_circle_1 img {
    width: var(--vw-ico-circle-ico);
    height: auto;
}

/* --- Modifier .ico_edge_1: pin the circle astride the section's top edge ---
   (half above, half inside, horizontally centered). The section becomes the
   positioning context via :has(), so it needs no class of its own. */
.vc_section:has(.ico_edge_1) {
    position: relative;
}

/* js_composer clips every stretched section (overflow:hidden — its horizontal
   scroll guard), which would cut the circle's top half off. Keep the horizontal
   clip, let the circle poke out vertically. overflow-x:hidden would NOT work:
   one hidden axis forces the visible one to auto (= still clipped); clip doesn't. */
.vc_section[data-vc-full-width]:has(.ico_edge_1) {
    overflow-x: clip;
    overflow-y: visible;
}

.ico_circle_1.ico_edge_1 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 20;
}

/* Halo: a section-bg-colored disc behind the circle, so it sits in a soft notch */
.ico_circle_1.ico_edge_1 .vc_single_image-wrapper {
    box-shadow: 0 0 0 var(--vw-ico-circle-halo) var(--vw-ico-circle-halo-bg);
}

/* Mobile: the section above ends with far less padding, so the poking half would
   land on its content — push the host section down by exactly that half. */
@media (max-width: 767px) {
    .vc_section:has(.ico_edge_1) {
        margin-top: calc(var(--vw-ico-circle-size) / 2 + var(--vw-ico-circle-halo));
    }
}

/* =========================================================================
   13. CONTACT-INFO ROW (.info_item_1 on a vc_row_inner)
   -------------------------------------------------------------------------
   Icon-in-a-circle left, caps label + body text right. Two inner columns:
   first = Single Image with ico_circle_1, second = Text Block whose FIRST <p>
   is the caps label (WYSIWYG-safe). The circle re-skins itself through scoped
   token overrides; the geometry stays owned by .ico_circle_1. Flex (not the
   WPBakery grid) keeps the icon beside the text at every width.
   ========================================================================= */

.info_item_1 {
    /* scoped re-skin of the shared icon circle */
    --vw-ico-circle-size: var(--vw-info-ico-size);
    --vw-ico-circle-ico: var(--vw-info-ico);
    --vw-ico-circle-bg: var(--vw-info-circle-bg);
    --vw-ico-circle-border: 0;

    display: flex;
    align-items: flex-start;
    gap: var(--vw-info-gap);
    margin-left: 0; /* cancel the row's -15px gutter margins */
    margin-right: 0;
}

.info_item_1 + .info_item_1 {
    margin-top: var(--vw-info-row-gap);
}

/* js_composer's clearfix pseudos (display:table) become zero-width flex items —
   the ::before one inserts a phantom gap in front of the icon column and shifts
   the whole row off the container's grid line. */
.info_item_1::before,
.info_item_1::after {
    display: none;
}

.info_item_1 > .wpb_column {
    float: none;
    width: auto;
}

.info_item_1 > .wpb_column:first-child {
    flex: 0 0 auto;
}

.info_item_1 > .wpb_column:last-child {
    flex: 1 1 0;
    min-width: 0; /* shrink guard: flex won't squeeze below "PARKMÖGLICHKEITEN" without it */
    padding-top: var(--vw-info-text-offset); /* optical align label <-> circle */
}

.info_item_1 > .wpb_column > .vc_column-inner {
    padding-left: 0; /* the flex gap owns the spacing, not the theme's 15px */
    padding-right: 0;
}

/* the rhythm is owned by --vw-info-row-gap — strip the theme's 35px trailing margin */
.info_item_1 .wpb_content_element:last-child {
    margin-bottom: 0;
}

/* First <p> = caps tracked label (WYSIWYG-safe) */
.info_item_1 .wpb_text_column p:first-child {
    text-transform: uppercase;
    letter-spacing: var(--vw-info-label-track);
    font-size: var(--vw-info-label-size);
    font-weight: 500;
    color: var(--color-black);
    margin-bottom: 0.9em;
}

/* =========================================================================
   14. LEGAL PRICE NOTE (.price_note_1 on a vc_row_inner under a CTA)
   -------------------------------------------------------------------------
   Small (i) icon-in-a-circle left + muted disclaimer right, left-aligned as a
   group. Same flex idiom as .info_item_1; the circle is re-skinned small
   through scoped --vw-ico-circle-* overrides.
   ========================================================================= */

.price_note_1 {
    --vw-ico-circle-size: var(--vw-note-ico-size);
    --vw-ico-circle-ico: var(--vw-note-ico-glyph);
    --vw-ico-circle-bg: var(--vw-note-ico-bg);
    --vw-ico-circle-border: var(--vw-note-ico-border);

    display: flex;
    align-items: center;
    gap: var(--vw-note-gap);
    max-width: var(--vw-note-max-w);
    margin-left: 0; /* cancel the inner row's -15px gutter margins */
    margin-right: 0;
    padding-top: var(--vw-note-pad-y);
}

/* clearfix pseudos would shift the row off its grid line — same guard as .info_item_1 */
.price_note_1::before,
.price_note_1::after {
    display: none;
}

.price_note_1 > .wpb_column {
    float: none;
    width: auto;
}

.price_note_1 > .wpb_column:first-child {
    flex: 0 0 auto;
}

.price_note_1 > .wpb_column:last-child {
    flex: 1 1 0;
    min-width: 0; /* shrink guard so the disclaimer wraps instead of overflowing */
}

.price_note_1 > .wpb_column > .vc_column-inner {
    padding-left: 0;
    padding-right: 0;
}

/* cancel the theme's 35px trailing margins inside the group */
.price_note_1 .ico_circle_1,
.price_note_1 .wpb_content_element:last-child {
    margin-bottom: 0;
}

.price_note_1 .wpb_text_column p {
    font-size: var(--vw-note-text-size);
    line-height: var(--vw-note-text-lh);
    color: var(--vw-note-text-color);
    margin-bottom: 0;
}

/* =========================================================================
   15. CONTACT TILES (.contact_tiles_1 on a vc_row)
   -------------------------------------------------------------------------
   Centered 4-up grid of framed tiles: bare SVG icon + caps label + hairline +
   value. One vc_column per tile = Single Image (no circle) + a Text Block whose
   FIRST <p> is the caps label and the following <p>s the value (WYSIWYG-safe;
   phone/e-mail/Instagram wrap the value in a plain <a>).
   ========================================================================= */

.contact_tiles_1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: var(--vw-block-pad-y);
    padding-bottom: var(--vw-block-pad-y);
    margin-left: 0; /* cancel the row's -15px gutter margins */
    margin-right: 0;
}

/* clearfix pseudos would nudge the centered row — same guard as .info_item_1 */
.contact_tiles_1::before,
.contact_tiles_1::after {
    display: none;
}

.contact_tiles_1 > .wpb_column {
    float: none;
    width: 25%; /* desktop: 4 per row */
    min-width: 0; /* let long unbreakable values wrap instead of overflowing */
    text-align: center;
    display: flex; /* stretch the wrapper to equal tile height (price_card_1 idiom) */
}

/* Equal-height framed tiles: the frame sits on .wpb_wrapper (inside the 15px
   gutters, so neighbouring frames keep a 30px gap). Content stays top-aligned
   so icons and labels line up across the row. */
.contact_tiles_1 > .wpb_column > .vc_column-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.contact_tiles_1 > .wpb_column > .vc_column-inner > .wpb_wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    box-sizing: border-box;
    border: var(--vw-ctile-border);
    border-radius: var(--vw-ctile-radius);
    padding: var(--vw-ctile-frame-pad-y) var(--vw-ctile-frame-pad-x);
}

.contact_tiles_1 .wpb_single_image {
    text-align: center;
    margin-bottom: var(--vw-ctile-icon-gap);
}

.contact_tiles_1 .vc_single_image-wrapper,
.contact_tiles_1 .vc_single_image-wrapper img {
    display: inline-block;
    width: var(--vw-ctile-icon-size);
    height: auto;
}

/* strip the theme's 35px trailing margin, otherwise the bottom gap is 35px
   taller than the top one */
.contact_tiles_1 .wpb_content_element:last-child {
    margin-bottom: 0;
}

.contact_tiles_1 .wpb_text_column p {
    margin: 0;
    font-size: var(--vw-ctile-text-size);
    line-height: 1.6;
    color: var(--vw-ctile-text-color);
    overflow-wrap: anywhere; /* wrap long values (e-mail / @handle) inside the tile */
}

/* clickable values (tel:/mailto:/Instagram): body text, underline on hover only */
.contact_tiles_1 .wpb_text_column a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact_tiles_1 .wpb_text_column a:hover {
    color: var(--color-black);
    text-decoration: underline;
}

/* First <p> = caps tracked label (WYSIWYG-safe) + the theme's 40px hairline motif */
.contact_tiles_1 .wpb_text_column p:first-child {
    text-transform: uppercase;
    letter-spacing: var(--vw-ctile-label-track);
    font-size: var(--vw-ctile-label-size);
    font-weight: 500;
    color: var(--color-black);
    margin-bottom: var(--vw-ctile-label-gap);
}

.contact_tiles_1 .wpb_text_column p:first-child::after {
    content: "";
    display: block;
    width: var(--vw-ctile-divider-w);
    height: 1px;
    margin: var(--vw-ctile-divider-gap) auto 0;
    background: var(--vw-ctile-divider-color);
}

@media (max-width: 767px) {
    .contact_tiles_1 > .wpb_column {
        width: 100%; /* mobile: stacked, 1 per row */
    }

    .contact_tiles_1 > .wpb_column:nth-child(n + 2) {
        margin-top: var(--vw-feat-gap-y);
    }
}

/* =========================================================================
   16. CONTACT FORM (.contact_form_1 on the section's column)
   -------------------------------------------------------------------------
   Restyles the theme's CF7 skin to the mockup: caps labels above hairline-framed
   fields, a two-column Anlass checkbox grid with square custom boxes, centered
   submit, small footnote. The two halves are the Bootstrap .row/.col-lg-6 grid
   written inside the CF7 template itself. A service arrives pre-checked via CF7's
   native default:get — /kontakt/?anlass=Brautstyling.
   ========================================================================= */

/* the theme renders every form as a centered 45px-padded panel — neutralize it */
.contact_form_1 form.wpcf7-form {
    text-align: left;
    padding: 0;
}

/* Caps label above each field. Deeper labels (checkbox/acceptance items) keep
   their normal casing. */
.contact_form_1 form.wpcf7-form p > label,
.contact_form_1 .vw-form-label {
    display: block;
    font-size: var(--vw-form-label-size);
    letter-spacing: var(--vw-form-label-track);
    text-transform: uppercase;
    font-weight: 500;
    color: var(--vw-form-label-color);
    margin-bottom: 8px;
}

.contact_form_1 form.wpcf7-form .row p {
    margin-bottom: var(--vw-form-gap);
}

/* CF7's autop drops a <br> between the (block) label and its field — a phantom
   empty line, not rhythm. */
.contact_form_1 form.wpcf7-form p > label + br,
.contact_form_1 .vw-form-label + br {
    display: none;
}

.contact_form_1 form.wpcf7-form input[type="text"],
.contact_form_1 form.wpcf7-form input[type="email"],
.contact_form_1 form.wpcf7-form input[type="tel"],
.contact_form_1 form.wpcf7-form input[type="date"],
.contact_form_1 form.wpcf7-form textarea {
    width: 100%;
    height: auto;
    background: var(--vw-form-field-bg);
    border: var(--vw-form-border);
    border-radius: 0;
    box-shadow: none;
    padding: var(--vw-form-field-pad);
    color: var(--color-black);
}

.contact_form_1 form.wpcf7-form input:focus,
.contact_form_1 form.wpcf7-form textarea:focus {
    border-color: var(--vw-form-border-focus);
    outline: none;
}

/* both halves become flex columns so the message textarea can stretch and close
   its bottom edge with the taller left half */
.contact_form_1 form.wpcf7-form .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

/* The theme makes .row a flex container and Bootstrap's .col-lg-6 only gets its
   50% width at >=1200px — so below that the halves sit side by side at content
   width, leaving the fields half-wide. Force a single-column stack (the
   two-column layout is desktop-only, per the mockup). */
@media (max-width: 1199.98px) {
    .contact_form_1 form.wpcf7-form .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.contact_form_1 .vw-msg-wrap {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.contact_form_1 .vw-msg-wrap .wpcf7-form-control-wrap {
    flex: 1 1 auto;
}

.contact_form_1 .vw-msg-wrap textarea {
    height: 100%;
    min-height: var(--vw-form-msg-min-h);
    resize: vertical;
}

/* Anlass checkbox grid. minmax(0,1fr) so an unbreakable label
   ("Augenbrauenlifting") can never push the column past the viewport. */
.contact_form_1 .wpcf7-checkbox {
    display: grid;
    grid-template-columns: repeat(var(--vw-form-check-cols), minmax(0, 1fr));
    gap: 10px 16px;
}

.contact_form_1 .wpcf7-checkbox .wpcf7-list-item {
    margin: 0;
}

@media (max-width: 575.98px) {
    .contact_form_1 {
        --vw-form-check-cols: 1;
    }
}

/* Square hairline checkbox re-skin (checkbox group + GDPR acceptance). The box is
   the ::before the theme already draws — repainting it; the background shorthand
   also discards the theme's PNG art (incl. its :checked swap). */
.contact_form_1 .wpcf7-checkbox input + span::before,
.contact_form_1 .wpcf7-acceptance input + span::before {
    content: " ";
    display: inline-block;
    vertical-align: middle;
    width: var(--vw-form-check-size);
    height: var(--vw-form-check-size);
    background: var(--vw-form-field-bg);
    border: var(--vw-form-border);
    margin-right: 10px;
    margin-bottom: 2px;
    padding: 0;
}

.contact_form_1 .wpcf7-checkbox input:checked + span::before,
.contact_form_1 .wpcf7-acceptance input:checked + span::before {
    background-color: var(--color-black);
    border-color: var(--color-black);
}

/* the checkmark: a masked overlay on the box, tinted by one variable */
.contact_form_1 .wpcf7-checkbox input:checked + span::after,
.contact_form_1 .wpcf7-acceptance input:checked + span::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--vw-form-check-size);
    height: var(--vw-form-check-size);
    -webkit-mask: var(--vw-form-check-icon) center / 60% auto no-repeat;
    mask: var(--vw-form-check-icon) center / 60% auto no-repeat;
    background-color: var(--vw-form-field-bg);
}

/* the theme skins only .wpcf7-checkbox/.wpcf7-radio — give the acceptance item
   the same anatomy (hidden real input, relative label span) */
.contact_form_1 .wpcf7-acceptance input {
    position: absolute;
    opacity: 0;
    width: var(--vw-form-check-size);
    height: var(--vw-form-check-size);
}

.contact_form_1 .wpcf7-acceptance input + span {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* keyboard focus ring on the drawn box (the real inputs are visually hidden) */
.contact_form_1 .wpcf7-checkbox input:focus-visible + span::before,
.contact_form_1 .wpcf7-acceptance input:focus-visible + span::before {
    outline: 2px solid var(--color-gray);
    outline-offset: 1px;
}

/* GDPR line + "* Pflichtfelder" footnote: small, muted. The inner label span must
   be forced — the theme bolds every form label to 16px. */
.contact_form_1 .vw-form-gdpr,
.contact_form_1 .vw-form-footnote,
.contact_form_1 .wpcf7-acceptance label,
.contact_form_1 .wpcf7-acceptance .wpcf7-list-item-label {
    font-size: var(--vw-form-note-size) !important;
    font-weight: 400;
    color: var(--vw-form-note-color);
}

.contact_form_1 .vw-form-gdpr a {
    text-decoration: underline;
    color: inherit;
}

.contact_form_1 .vw-form-footnote {
    margin-bottom: 0;
}

/* CF7's own stylesheet indents inline list items by 1em — the GDPR line should
   start flush with the fields. */
.contact_form_1 .wpcf7-acceptance .wpcf7-list-item {
    margin-left: 0;
}

.contact_form_1 form.wpcf7-form p:has(.wpcf7-submit) {
    text-align: center;
    margin-top: var(--vw-form-gap);
    margin-bottom: 12px;
}

/* Submit — metrics ONLY. The dark fill, white text and hover come natively from
   the theme's .btn-black + .color-hover-main classes on the submit tag (set in
   the CF7 template). KEY: the theme paints the fill with an INSET box-shadow, not
   the background, and shrinks it on hover — setting background/box-shadow here
   would kill that animation. CF7 renders the submit as .btn.btn-lg (oversized),
   sized via input[type="submit"].btn-lg (0,2,1), so this selector (0,3,1) only
   out-specifies the size. */
.contact_form_1 .wpcf7-form input.wpcf7-submit {
    color: var(--color-white);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 20px;
    padding: 20px 40px;
    min-width: 200px;
    height: auto;
}

/* disabled = consent not yet given (Bootstrap greys it at .65; 0.4 reads more
   distinctly against the solid-dark active state) */
.contact_form_1 .wpcf7-form input.wpcf7-submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* CF7's response banner is kept narrower than the fields by two rules: CF7's own
   side margins (0,2,1) and the theme's max-width:600px. This selector (0,3,1)
   out-specifies both. */
.contact_form_1 form.wpcf7-form .wpcf7-response-output {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* =========================================================================
   17. PLAIN TEXT / LEGAL PAGES (.text_page_1)

   For pages written in the block editor (Datenschutz, Impressum, AGB…), where
   the headings are bare <h1>/<h2> and not the theme's like_sc_header shortcode.
   Put text_page_1 on a Group block wrapping the page content
   (block editor: Advanced -> Additional CSS class), then everything below
   applies to that page only. Reusable on any further text page.
   ========================================================================= */

/* h1 = same look as the like_sc_header .header_1 headline */
.text_page_1 h1 {
    font-size: var(--vw-text-page-h1-size);
    line-height: var(--vw-header-lh);
    margin: 0 0 var(--vw-text-page-h1-gap);
}

/* …including the hairline divider (same tokens as .divider_1_head) */
.text_page_1 h1::after {
    content: '';
    display: block;
    width: var(--vw-divider-1-width);
    height: var(--vw-divider-1-thickness);
    margin-top: var(--vw-divider-1-gap);
    background-color: var(--vw-divider-1-color);
}

/* The theme sizes h2 at 48px — nearly the h1 — so subheadings need their own ramp */
.text_page_1 h2 {
    font-size: var(--vw-text-page-h2-size);
    line-height: var(--vw-header-lh);
    margin: var(--vw-text-page-h-top) 0 var(--vw-text-page-h-bottom);
}

.text_page_1 h3 {
    font-size: var(--vw-text-page-h3-size);
    line-height: var(--vw-header-lh);
    margin: var(--vw-text-page-h-top) 0 var(--vw-text-page-h-bottom);
}

/* Inline links: theme paints them var(--main) (light grey, low contrast on white).
   Keep them in the text colour; the underline appears on hover only. */
.text_page_1 a {
    color: inherit;
    text-decoration: none;
}

.text_page_1 a:hover,
.text_page_1 a:focus {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: var(--vw-text-page-link-offset);
}