/*
 Theme Name:     Divi Child-Theme
 Theme URI:      http://www.elegantthemes.com
 Description:    Divi Child-Theme
 Author:         The Digitale GmbH
 Author URI:     https://the-digitale.com/
 Template:       Divi
 Version:        1.0.0
*/

/* ==========================================================================
   Self-hosted fonts
   ========================================================================== */

@font-face {
    font-display: optional;
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 300;
    src: url('/wp-content/themes/divi-child/webfonts/nunito-sans-v19-latin-300.woff2') format('woff2');
}

@font-face {
    font-display: optional;
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 400;
    src: url('/wp-content/themes/divi-child/webfonts/nunito-sans-v19-latin-regular.woff2') format('woff2');
}

@font-face {
    font-display: optional;
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 700;
    src: url('/wp-content/themes/divi-child/webfonts/nunito-sans-v19-latin-700.woff2') format('woff2');
}

@font-face {
    font-display: optional;
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 800;
    src: url('/wp-content/themes/divi-child/webfonts/nunito-sans-v19-latin-800.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 300;
    src: url('/wp-content/themes/divi-child/webfonts/material-symbols-outlined-v307-latin-300.woff2') format('woff2');
}

/* ==========================================================================
   Typography — Mobile First
   Mobile/Tablet share identical values, desktop overrides where needed.
   ========================================================================== */

.et_pb_section h1 {
    font-size: 2.5rem;
    line-height: 1.2;
    text-transform: uppercase;
	overflow-wrap: normal;
	-webkit-hyphens: auto;
    hyphens: auto;
}

.et_pb_section h2 {
    font-size: 2.25rem;
    line-height: 1.2;
}

.et_pb_section h3 {
    font-size: 2rem;
    line-height: 1.2;
}

.et_pb_section h4 {
    font-size: 1.5rem;
    line-height: 1.4;
}

.et_pb_section h5 {
    font-size: 1.25rem;
    line-height: 1.4;
}

.et_pb_section h6 {
    font-size: 1.125rem;
    line-height: 1.4;
}

/* Desktop overrides */
@media (min-width: 981px) {
    .et_pb_section h1 {
        font-size: 3rem;
    }

    .et_pb_section h2 {
        font-size: 2.5rem;
    }

    .et_pb_section h4 {
        line-height: 1.3;
    }
}

/* ==========================================================================
   Blog Content – Heading Sizes
   Targets heading elements (h2–h6) inside the Divi Post Content module
   (Theme Builder blog templates) and the Divi Heading module when the CSS
   class "blog-content" is assigned manually.

   Provides a distinct, reader-friendly heading scale for blog-style content
   (e.g. "Aktuelles", "Wissen"), separate from the site-wide defaults.

   Architecture: Mobile First (min-width breakpoints).
   ========================================================================== */

.et_pb_heading.blog-content .et_pb_module_header {
    font-size: 1.625rem;
    line-height: 1.25;
    text-transform: uppercase;
}
.et_pb_post_content h2 {
    font-size: 1.375rem;
    line-height: 1.25;
}
.et_pb_post_content h3 {
    font-size: 1.25rem;
    line-height: 1.25;
}
.et_pb_post_content h4 {
    font-size: 1.125rem;
    line-height: 1.35;
}
.et_pb_post_content h5 {
    font-size: 1rem;
    line-height: 1.4;
}
.et_pb_post_content h6 {
    font-size: 0.9375rem;
    line-height: 1.4;
}

/* Tablet (>=768px) */
@media (min-width: 768px) {
    .et_pb_heading.blog-content .et_pb_module_header { font-size: 2rem; }
    .et_pb_post_content h2 { font-size: 1.75rem; }
    .et_pb_post_content h3 { font-size: 1.5rem; }
    .et_pb_post_content h4 { font-size: 1.25rem; }
    .et_pb_post_content h5 { font-size: 1.125rem; }
    .et_pb_post_content h6 { font-size: 1rem; }
}

/* Desktop (>=1024px) */
@media (min-width: 1024px) {
    .et_pb_heading.blog-content .et_pb_module_header { font-size: 2.5rem; }
    .et_pb_post_content h2 { font-size: 2.25rem; }
    .et_pb_post_content h3 { font-size: 2rem; }
    .et_pb_post_content h4 { font-size: 1.5rem; }
    .et_pb_post_content h5 { font-size: 1.25rem; }
    .et_pb_post_content h6 { font-size: 1.125rem; }
}

/* ==========================================================================
   Success Story Teaser Styling
   ========================================================================== */

/* Force full-width image with fixed height, cropping overflow without distortion */
.success-story-teaser-image img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* ==========================================================================
   Material Symbols Icon Font
   ========================================================================== */

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: 300;
    font-style: normal;
    font-size: inherit;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga';
}

/* Prevent hyphenation, allow emergency word breaks for overflow prevention */
body {
    -webkit-hyphens: none;
    hyphens: none;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Aesthetic line balancing for paragraphs */
p {
    text-wrap: pretty;
}

/* Balanced headlines without hyphenation */
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

/* Overline Fontstyle */
div.overline {
	font-style: normal;
	font-size: 1rem;
	line-height: 1rem;
	letter-spacing: 0.1em;
	padding-bottom: 0.5rem;
	text-transform: uppercase;
}

/* Inline weight override for mixed-weight headings */
.custom-weight-400 {
    font-weight: 400 !important;
    display: inline;
}

/* Consistent indentation for lists — wrapped text aligns with first line */
.et_pb_section .et_pb_row ul,
.et_pb_section .et_pb_row ol {
    list-style-position: outside;
    padding-left: 1.5em;
    padding-top: 0;
}

/* Force line break on desktop, collapses on smaller screens if needed */
.custom-line-break {
    display: block;
}
/* Controlled line break, visible on desktop only */
.custom-line-break {
    display: none;
}
@media (min-width: 981px) {
    .custom-line-break {
        display: block;
    }
}
/* Background Image Flip */

.flip-bg > .et_pb_section_background {
    transform: scaleX(-1) !important;
    transform-origin: center !important;
}

/* Text Selection Styling */
::selection {
    background-color: #DEAF50;
    color: #000;
}

/* Change color for "go to top" button */
.et_pb_scroll_top.et-pb-icon {
	background: #142038;
}

/* Typography Utility - Forced White Text */
.text-force-black {
    color: #000 !important;
	}

/* Utility - Forced Gold Text (для ховер-взаимодействий) */
.text-force-gold {
    color: #deaf50 !important;
}

/* Only apply hover effects on devices that actually support hovering (Mouse/Pointer).
   This targets desktop users and excludes touch devices (Mobile/Tablet).
*/
@media (hover: none) {
    /* Resetting the hover state for all Divi modules on touch devices */
    .et_pb_module:hover {
        /* This forces the element to ignore hover-triggered transformations or filters */
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   Contact Form Styling
   ========================================================================== */

/* Captcha input field – border with rounded corners */
.et_pb_contact_form_container .et_contact_bottom_container input.et_pb_contact_captcha {
    border: solid;
    border-radius: 3px;
}

/* Contact button – scale up on hover */
.et_pb_contact_form_container.et_pb_contact_form_container .et_contact_bottom_container .et_pb_contact_submit.et_pb_button {
    transition: transform 0.3s ease;
}

/* Contact form message – white text */
.et_pb_contact_form_container > .et-pb-contact-message {
    color: #ffffff;
}
/* Hover effect for submit button */
.et_pb_contact_form_container.et_pb_contact_form_container .et_contact_bottom_container .et_pb_contact_submit.et_pb_button:hover {
    transform: scale(1.05);
}

/* Display The Divi Contact Form Checkbox Or Radio Buttons In Columns */
.pa-checkboxes-radio-buttons-columns .et_pb_contact_field_options_list {
    display: flex;
    flex-flow: row wrap;
}

/* Desktop: 3 columns */
.pa-checkboxes-radio-buttons-columns .et_pb_contact_field_checkbox,
.pa-checkboxes-radio-buttons-columns .et_pb_contact_field_radio {
    flex-basis: 33.333%;
}

/* Tablet: 2 columns */
@media (max-width: 980px) {
    .pa-checkboxes-radio-buttons-columns .et_pb_contact_field_checkbox,
    .pa-checkboxes-radio-buttons-columns .et_pb_contact_field_radio {
        flex-basis: 50%;
    }
}

/* Mobile: 1 column */
@media (max-width: 767px) {
    .pa-checkboxes-radio-buttons-columns .et_pb_contact_field_checkbox,
    .pa-checkboxes-radio-buttons-columns .et_pb_contact_field_radio {
        flex-basis: 100%;
    }
}
@media (max-width: 767px) {
  .et_pb_contact_field_options_list {
    display: flex !important;
    flex-direction: column !important;
  }

  .et_pb_contact_field_options_list .et_pb_contact_field_checkbox {
    flex-basis: 100% !important;
  }
}
/* ==========================================================================
	Floating Effect
	Can be used standalone or combined with other classes.
	(Class must be applied to column, when used along class="hexagon-mask")
   ========================================================================== */

:root {
  --df-float-distance: 1px;
  --df-float-speed: 1s;
}

.effect-floating1 {
  /* Stabilize the rendering layer to prevent flickering with masks/filters */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  
  /* Performance & Animation */
  will-change: transform;
  animation: divi-float var(--df-float-speed) ease-in-out infinite;
}

@keyframes divi-float {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, calc(var(--df-float-distance) * -1), 0);
  }
}

/* Responsive adjustments */
@media (max-width: 980px) {
  .effect-floating {
    --df-float-distance: 15px; /* Smaller movement on tablets/mobile */
  }
}

/* The floating hero artwork is attractive on large screens, but a continuous
   transform on the mobile LCP candidate costs compositor/GPU work during the
   critical render window. Keep the artwork static on phones. */
@media (max-width: 767px) {
  .hero-dark .effect-floating,
  .hero-light .effect-floating {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .effect-floating {
    animation: none !important;
    will-change: auto;
  }
}

/* ==========================================================================
	Hexagon mask with drop-shadow that follows the mask shape.
	Uses SVG mask instead of clip-path to enable proper drop-shadow rendering.
   ========================================================================== */

.hexagon-mask {
    overflow: visible !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    filter: drop-shadow(0px 8px 15px rgba(0, 0, 0, 0.2));
}

.hexagon-mask img {
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    --hex-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 1 L93 26 L93 74 L50 99 L7 74 L7 26 Z' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-image: var(--hex-shape);
    mask-image: var(--hex-shape);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

@media (min-width: 981px) {
    .hexagon-mask {
        filter: drop-shadow(0px 12px 20px rgba(0, 0, 0, 0.25));
    }
}

/* ==========================================================================
	Style Team Module shadow overlay
   ========================================================================== */

/* Shadow overlay: gradient fade at bottom edge of team module images */
.shadow-overlay-bottom {
    position: relative;
    overflow: hidden !important;
    border-radius: 5px !important;
}

.shadow-overlay-bottom::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 65%,
        rgba(0, 0, 0, 0.2)
    );
    z-index: 10;
    pointer-events: none;
}

/* ==========================================================================
   Carousel Bottom-Right Navigation
   Repositions Divi 5 Group Carousel arrows to bottom-right
   and replaces default icons with Material Symbols.
   DEPENDENCY: Material Symbols Outlined font
   CLASS: .arrows-bottom-right (apply to arrow elements in Builder)
   ========================================================================== */

/* --- Layout --- */

/* Reserve space for repositioned arrows when custom class is present */
.et_pb_group_carousel:has(.arrows-bottom-right) {
    position: relative !important;
    padding-bottom: 50px !important;
}

@media (min-width: 768px) {
    .et_pb_group_carousel:has(.arrows-bottom-right) {
        padding-bottom: 60px !important;
    }
}

/* Override Divi's default vertical centering, anchor arrows at bottom */
.et_pb_group_carousel_arrow.arrows-bottom-right {
    top: auto !important;
    left: auto !important;
    transform: none !important;
    position: absolute !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10;
}

.et_pb_group_carousel_arrow_next.arrows-bottom-right {
    right: 10px !important;
}

.et_pb_group_carousel_arrow_prev.arrows-bottom-right {
    right: 60px !important;
}

/* --- Icon Replacement --- */

/* Hide native Divi icon while preserving hit area */
.et_pb_group_carousel_arrow.arrows-bottom-right .et-pb-icon {
    color: transparent !important;
    position: relative !important;
}

/* Inject Material Symbol centered within arrow container */
.et_pb_group_carousel_arrow.arrows-bottom-right .et-pb-icon::after {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: 300 !important;
    font-style: normal !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 32px !important;
    line-height: 1 !important;
    color: #15253e !important;
    white-space: nowrap;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
}

.et_pb_group_carousel_arrow_prev.arrows-bottom-right .et-pb-icon::after {
    content: "arrow_back";
}

.et_pb_group_carousel_arrow_next.arrows-bottom-right .et-pb-icon::after {
    content: "arrow_forward";
}

/* ==========================================================================
   COMPONENT: Hexagon Background System
   Layered edge-fade with directional gradient and hexagon image asset.
   Layer 1: Vertical edge fade (top/bottom)
   Layer 2: Horizontal edge fade (left/right)
   Layer 3: Directional overlay gradient
   Layer 4: Hexagon image asset
   ========================================================================== */

/* Base styles shared across all directions */
.hexagon-bg-bottom-right-to-top-left,
.hexagon-bg-bottom-left-to-top-right,
.hexagon-bg-top-left-to-bottom-right,
.hexagon-bg-top-right-to-bottom-left {
    --hex-width: 600px;
    --edge-fade: 5vw;

    background-image:
        linear-gradient(
            to bottom,
            #fff 0%,
            transparent var(--edge-fade),
            transparent calc(100% - var(--edge-fade)),
            #fff 100%
        ),
        linear-gradient(
            to right,
            #fff 0%,
            transparent var(--edge-fade),
            transparent calc(100% - var(--edge-fade)),
            #fff 100%
        ),
        var(--hex-grad),
        url('/wp-content/uploads/box-id_hintergrund_hexagon_weiss.avif');

    background-size: 100% 100%, 100% 100%, 100% 100%, var(--hex-width) auto;
    background-position: center, center, center, var(--hex-pos);
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}

/* Directional configurations */
.hexagon-bg-bottom-right-to-top-left {
    --hex-pos: bottom right;
    --hex-grad: linear-gradient(to top left, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 25%, #fff 40%);
}

.hexagon-bg-bottom-left-to-top-right {
    --hex-pos: bottom left;
    --hex-grad: linear-gradient(to top right, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 25%, #fff 40%);
}

.hexagon-bg-top-left-to-bottom-right {
    --hex-pos: top left;
    --hex-grad: linear-gradient(to bottom right, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 25%, #fff 40%);
}

.hexagon-bg-top-right-to-bottom-left {
    --hex-pos: top right;
    --hex-grad: linear-gradient(to bottom left, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 25%, #fff 40%);
}

/* Disable background system on mobile for performance */
@media (max-width: 767px) {
    .hexagon-bg-bottom-right-to-top-left,
    .hexagon-bg-bottom-left-to-top-right,
    .hexagon-bg-top-left-to-bottom-right,
    .hexagon-bg-top-right-to-bottom-left {
        background-image: none !important;
    }
}

/* ==========================================================================
	Click-Through Utility - Context Aware
	Logic:
	1. Default (Frontend): Disable pointer events to allow clicking through to layers below.
	2. Visual Builder (.et-fb): Force restore pointer events for editability.
   ========================================================================== */

/* Standard logic for the live website (Frontend) */
.click-through {
    pointer-events: none !important;
    user-select: none;
    cursor: default;
}

/* Visual Builder Override Targeted via the .et-fb body class to ensure the module remains fully interactive during the design process. */
.et-fb .click-through {
    pointer-events: auto !important;
    user-select: auto !important;
    cursor: initial !important;
}

/* ==========================================================================
   WPML Language Switcher Reset
   Overrides Divi 5 inline styles and WPML legacy-list-horizontal defaults
   to render the language switcher as inline text within the footer.
   CLASS: .custom-wpml-switch-container (apply to wrapping text module)
   ========================================================================== */

/* WPML legacy list container reset */
.custom-wpml-switch-container .wpml-ls-legacy-list-horizontal {
    padding: 0 !important;
    border: none !important;
    clear: none !important;
    display: inline !important;
}

/* Footer UL override — neutralize Divi's list spacing */
.et-l--footer .custom-wpml-switch-container ul,
.custom-wpml-switch-container ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    list-style-type: none !important;
    display: inline !important;
    line-height: inherit !important;
}

/* Module wrapper reset — force inline rendering */
.custom-wpml-switch-container,
.custom-wpml-switch-container .et_pb_text_inner,
.custom-wpml-switch-container .et_pb_module_inner {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}

/* List items and links — inline with no spacing */
.custom-wpml-switch-container li,
.custom-wpml-switch-container a.wpml-ls-link,
.custom-wpml-switch-container .wpml-ls-native {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
    vertical-align: baseline !important;
    text-decoration: none !important;
}

/* ==========================================================================
   Navigation Styles — Divi 5 Menu Module (Theme Builder)
   ========================================================================== */


/* === Divi 5 Menu Module — typography & color baseline === */
/*
 * Default text color: white for all menu levels (top, 1st-, 2nd-level submenu).
 * Font weight: bold for top-level (Level 1) and 1st-level submenu items (Level 2).
 *              normal for 2nd-level submenu items (Level 3) — left untouched.
 * Hover color stays on the text only; the yellow underline on Level 2 headers
 *              keeps its static color because `border-color` is decoupled from
 *              the inherited text color (currentColor) by setting it explicitly.
 * Active state: current menu item / parent / ancestor rendered in brand yellow
 *              (#deaf50) across all levels. Relies on the PHP filter in
 *              functions.php that strips active-state classes from anchor-link
 *              menu items (href containing #), so only the canonical item
 *              receives the highlight.
 */

/* Baseline text color — all menu levels */
.et_pb_menu .et_pb_menu__menu .et-menu > li > a,
.et_pb_menu .et_pb_menu__menu .sub-menu li a,
.et_pb_fullwidth_menu .et_pb_menu__menu .et-menu > li > a,
.et_pb_fullwidth_menu .et_pb_menu__menu .sub-menu li a,
.et_pb_menu .et_mobile_menu li a,
.et_pb_fullwidth_menu .et_mobile_menu li a {
    color: #ffffff;
}

/* Bold weight on top-level (Level 1) menu items */
.et_pb_menu .et_pb_menu__menu .et-menu > li > a,
.et_pb_fullwidth_menu .et_pb_menu__menu .et-menu > li > a,
.et_pb_menu .et_mobile_menu > li > a,
.et_pb_fullwidth_menu .et_mobile_menu > li > a {
    font-weight: 700;
}

/* Active link color — current menu item / parent / ancestor across all levels */
.et_pb_menu .et_pb_menu__menu .et-menu > li.current-menu-item > a,
.et_pb_menu .et_pb_menu__menu .et-menu > li.current-menu-parent > a,
.et_pb_menu .et_pb_menu__menu .et-menu > li.current-menu-ancestor > a,
.et_pb_menu .et_pb_menu__menu .sub-menu li.current-menu-item > a,
.et_pb_menu .et_pb_menu__menu .sub-menu li.current-menu-parent > a,
.et_pb_menu .et_pb_menu__menu .sub-menu li.current-menu-ancestor > a,
.et_pb_fullwidth_menu .et_pb_menu__menu .et-menu > li.current-menu-item > a,
.et_pb_fullwidth_menu .et_pb_menu__menu .et-menu > li.current-menu-parent > a,
.et_pb_fullwidth_menu .et_pb_menu__menu .et-menu > li.current-menu-ancestor > a,
.et_pb_fullwidth_menu .et_pb_menu__menu .sub-menu li.current-menu-item > a,
.et_pb_fullwidth_menu .et_pb_menu__menu .sub-menu li.current-menu-parent > a,
.et_pb_fullwidth_menu .et_pb_menu__menu .sub-menu li.current-menu-ancestor > a,
.et_pb_menu .et_mobile_menu li.current-menu-item > a,
.et_pb_menu .et_mobile_menu li.current-menu-parent > a,
.et_pb_menu .et_mobile_menu li.current-menu-ancestor > a,
.et_pb_fullwidth_menu .et_mobile_menu li.current-menu-item > a,
.et_pb_fullwidth_menu .et_mobile_menu li.current-menu-parent > a,
.et_pb_fullwidth_menu .et_mobile_menu li.current-menu-ancestor > a {
    color: #deaf50;
}

/*
 * Pin border color on Level 2 column headers (.menu-multiple-cols).
 * Without this, `border-bottom: 2px solid #deaf50` inherits border-color
 * from `currentColor`, which the :hover rule changes to #deaf50 anyway —
 * but for defensive specificity (and to make the decoupling explicit when
 * future color tokens are introduced), border-color is set independently.
 */
.et_pb_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu > li > a,
.et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu > li > a,
.et_pb_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu > li > a:hover,
.et_pb_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu > li > a:focus,
.et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu > li > a:hover,
.et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu > li > a:focus {
    border-bottom-color: #deaf50;
}

/* === Menu items marked as non-navigating (.menu-no-link) === */
/*
 * Visual hint: default cursor instead of pointer, since the link does not
 * navigate. JS handles the actual click suppression and a11y attributes.
 */
.et_pb_menu .et_pb_menu__menu li.menu-no-link > a,
.et_pb_fullwidth_menu .et_pb_menu__menu li.menu-no-link > a,
.et_pb_menu .et_mobile_menu li.menu-no-link > a,
.et_pb_fullwidth_menu .et_mobile_menu li.menu-no-link > a {
    cursor: default;
}

/* === Submenu container: rounded corners === */
/*
 * Applied to all submenus. `overflow: hidden` clips child backgrounds
 * (e.g. hover states) to the rounded boundary of the container itself.
 * No per-item corner radii needed because of this clipping.
 */
.et_pb_menu .et_pb_menu__menu .sub-menu,
.et_pb_fullwidth_menu .et_pb_menu__menu .sub-menu {
    border-radius: 5px;
    overflow: hidden;
}

/* === Submenu: remove hover background on items === */
.et_pb_menu .et_pb_menu__menu .sub-menu li a:hover,
.et_pb_menu .et_pb_menu__menu .sub-menu li a:focus,
.et_pb_fullwidth_menu .et_pb_menu__menu .sub-menu li a:hover,
.et_pb_fullwidth_menu .et_pb_menu__menu .sub-menu li a:focus {
    background-color: transparent;
}

/* === Menu hover/focus color: applies to all levels (top, 1st, 2nd) === */
/*
 * Brand yellow (#deaf50) is applied uniformly on hover and keyboard focus.
 * Covers top-level menu items and all nested submenu levels.
 */
.et_pb_menu .et_pb_menu__menu .et-menu > li > a:hover,
.et_pb_menu .et_pb_menu__menu .et-menu > li > a:focus,
.et_pb_menu .et_pb_menu__menu .sub-menu li a:hover,
.et_pb_menu .et_pb_menu__menu .sub-menu li a:focus,
.et_pb_fullwidth_menu .et_pb_menu__menu .et-menu > li > a:hover,
.et_pb_fullwidth_menu .et_pb_menu__menu .et-menu > li > a:focus,
.et_pb_fullwidth_menu .et_pb_menu__menu .sub-menu li a:hover,
.et_pb_fullwidth_menu .et_pb_menu__menu .sub-menu li a:focus {
    color: #deaf50;
}

/* Mobile menu: same hover/focus color across all nesting levels */
.et_pb_menu .et_mobile_menu li a:hover,
.et_pb_menu .et_mobile_menu li a:focus,
.et_pb_fullwidth_menu .et_mobile_menu li a:hover,
.et_pb_fullwidth_menu .et_mobile_menu li a:focus {
    color: #deaf50;
}

/* === Main menu: neutralize Divi's default hover opacity fade === */
/* Divi applies opacity: 0.7 to .et-menu a:hover via dynamic TB CSS,
   which visually darkens links whose hover color is intentionally
   identical to the active state. Restore full opacity to keep
   #deaf50 rendering consistently on hover and active. */
#main-header .et-menu a:hover,
.et_pb_menu .et_pb_menu__menu .et-menu > li > a:hover,
.et_pb_menu .et_pb_menu__menu .sub-menu li a:hover,
.et_pb_fullwidth_menu .et_pb_menu__menu .et-menu > li > a:hover,
.et_pb_fullwidth_menu .et_pb_menu__menu .sub-menu li a:hover {
    opacity: 1;
}

/* === Submenu: remove top border === */
/*
 * Divi 5 applies a top border (typically the theme accent color) on .sub-menu
 * as a visual separator from the parent menu bar. Removed for a cleaner look.
 */
.et_pb_menu .et_pb_menu__menu .sub-menu,
.et_pb_fullwidth_menu .et_pb_menu__menu .sub-menu {
    border-top: none;
}

/* === Submenu: tighten line-height for wrapped multi-line items === */
/* Divi's default submenu line-height creates excessive vertical
   spacing when long labels wrap. Reduce to a compact value while
   keeping readable rhythm. */
#main-header .sub-menu li a,
.et_pb_menu .sub-menu li a,
.et_pb_fullwidth_menu .sub-menu li a {
    line-height: 1.3;
}

/* === Submenu offset + hover bridge ===
 *
 * Goal:
 * - 15px visual gap between top-level menu item and its dropdown submenu.
 * - Hover persists when the cursor traverses the 15px gap.
 *
 * Bridge placement note: the submenu uses `overflow: hidden` to clip its
 * border-radius corners. A bridge attached to .sub-menu::before would be
 * clipped by that overflow. Therefore the bridge is attached to the
 * top-level <li>::after, which has no overflow constraint.
 *
 * State sources for "open":
 * - :hover and :focus-within on the <li> (native).
 * - .et-hover / .et-show-dropdown set by Divi's JS on mouseenter.
 * Divi removes those classes immediately on mouseleave, so the bridge
 * must already exist while the cursor is still on the <li>, ready to
 * catch the cursor as it crosses the 15px gap. Once the cursor enters
 * the submenu, the submenu's own :hover state keeps it open.
 */

/* Positioning context for top-level <li>s and the bridge */
.et_pb_menu .et_pb_menu__menu > nav > ul > li,
.et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul > li {
    position: relative;
}

/* Visual offset of the 1st-level submenu */
.et_pb_menu .et_pb_menu__menu > nav > ul > li > .sub-menu,
.et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul > li > .sub-menu {
    top: calc(100% + 15px);
}

/* Force the 1st-level submenu to stay open while the cursor is on it.
 * Covers the case where the cursor leaves the <li>, crosses the bridge,
 * and enters the submenu — Divi's JS has removed .et-hover by then. */
.et_pb_menu .et_pb_menu__menu > nav > ul > li > .sub-menu:hover,
.et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul > li > .sub-menu:hover {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* Hover bridge — attached to the <li>::after (not the submenu) to avoid
 * being clipped by the submenu's overflow:hidden. Renders only when the
 * <li> is in an open state. */
.et_pb_menu .et_pb_menu__menu > nav > ul > li:hover::after,
.et_pb_menu .et_pb_menu__menu > nav > ul > li:focus-within::after,
.et_pb_menu .et_pb_menu__menu > nav > ul > li.et-hover::after,
.et_pb_menu .et_pb_menu__menu > nav > ul > li.et-show-dropdown::after,
.et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul > li:hover::after,
.et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul > li:focus-within::after,
.et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul > li.et-hover::after,
.et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul > li.et-show-dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 15px;
    background: transparent;
}

/* === Submenu background gradient ===
 *
 * Desktop (≥ 768px): horizontal gradient, black left → #15253e right.
 * Mobile  (< 768px): vertical gradient, black top → #15253e bottom.
 *
 * Mobile note: Divi 5 renders the mobile flyout via .et_mobile_menu, not via
 * the standard .sub-menu container — separate selector required.
 */

/* Desktop: horizontal gradient on all top-level submenus */
@media (min-width: 1280px) {
    .et_pb_menu .et_pb_menu__menu .sub-menu,
    .et_pb_fullwidth_menu .et_pb_menu__menu .sub-menu {
        background: linear-gradient(to right, #000000 0%, #15253e 100%);
    }
}
/* Mobile: vertical gradient on the mobile menu container */
@media (max-width: 1280px) {
    .et_pb_menu .et_mobile_menu,
    .et_pb_fullwidth_menu .et_mobile_menu {
        background: linear-gradient(to bottom, #000000 0%, #15253e 100%);
    }
    /* Nested submenus on mobile inherit transparency so the parent gradient shows through */
    .et_pb_menu .et_mobile_menu .sub-menu,
    .et_pb_fullwidth_menu .et_mobile_menu .sub-menu {
        background: transparent;
    }
}

/* === Multi-column submenu (opt-in via .menu-multiple-cols) ===
 *
 * Activation: assign CSS class `menu-multiple-cols` to the top-level menu item
 * in WordPress → Appearance → Menus.
 *
 * Behavior (Desktop ≥ 1280px):
 * - 1st-level submenu items render as columns (one column per item).
 * - Auto-flow: column → each top-level submenu item gets its own column.
 * - Max 4 columns per row; items beyond that wrap to the next row.
 * - 1st-level items get a yellow bottom border sized to the text width.
 * - Dropdown indicator icon on 1st-level items is hidden (sub-items are static).
 * - 2nd-level items are always visible, stacked vertically under their parent.
 *
 * Behavior (Mobile < 1280px):
 * - Falls back to default single-column submenu behavior.
 *
 * Wrap-cap implementation:
 * `grid-auto-flow: column` distributes items column-first. The cascading
 * `:has(> li:nth-child(N))` rules cap the row count in steps of 4 items, so
 * 5+ items wrap into a second row, 9+ into a third, etc. Up to 16 items total.
 *
 * Browser support: :has() is supported in all evergreen browsers since 2023.
 * Older browsers fall back to a single-row grid (no wrap), which remains
 * functionally usable.
 */

@media (min-width: 1280px) {

    /* Submenu container: column-flow grid, content-driven width */
    .et_pb_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu,
    .et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        grid-template-rows: 1fr;
        column-gap: 40px;
        row-gap: 24px;
        width: max-content;
        max-width: calc(100vw - 40px);
        padding: 20px 25px;
    }

    /* Wrap-cap at 4 columns: progressively increase row count for 5+, 9+, 13+ items */
    .et_pb_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu:has(> li:nth-child(5)),
    .et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu:has(> li:nth-child(5)) {
        grid-template-rows: repeat(2, auto);
    }

    .et_pb_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu:has(> li:nth-child(9)),
    .et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu:has(> li:nth-child(9)) {
        grid-template-rows: repeat(3, auto);
    }

    .et_pb_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu:has(> li:nth-child(13)),
    .et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu:has(> li:nth-child(13)) {
        grid-template-rows: repeat(4, auto);
    }

    /* Reset list-item display for 1st-level items inside the grid */
    .et_pb_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu > li,
    .et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu > li {
        display: block;
        width: auto;
        float: none;
    }

    /*
     * 1st-level submenu items: yellow bottom border (column headers).
     * `inline-block` constrains the anchor width (and thus the border) to text size.
     */
    .et_pb_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu > li > a,
    .et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu > li > a {
        display: inline-block;
        border-bottom: 2px solid #deaf50;
        padding-bottom: 8px;
        margin-bottom: 8px;
        font-weight: 700;
    }

    /*
     * Hide dropdown indicator icon on 1st-level items.
     * Divi 5 may render the chevron via ::after on the <a> (font-icon),
     * via a dedicated .et-menu-arrow element, or as inline-SVG.
     * All variants are neutralised here.
     */
    .et_pb_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu > li.menu-item-has-children > a::after,
    .et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu > li.menu-item-has-children > a::after {
        content: none;
        display: none;
    }

    .et_pb_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu > li.menu-item-has-children > a .et-menu-arrow,
    .et_pb_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu > li.menu-item-has-children > a > svg,
    .et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu > li.menu-item-has-children > a .et-menu-arrow,
    .et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu > li.menu-item-has-children > a > svg {
        display: none;
    }

/* 2nd-level submenu layout — applies always, defines the static stacked layout.
 * Visibility/opacity intentionally NOT set here, so the nested submenu inherits
 * the parent submenu's hidden state while the dropdown is closed. */
.et_pb_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu .sub-menu,
.et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu .sub-menu {
    position: static;
    display: block;
    top: auto;
    left: auto;
    width: auto;
    min-width: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
    border: none;
    transform: none;
}

/* 2nd-level submenu visibility — only revealed when the parent .menu-multiple-cols
 * <li> is in an open state (hover, keyboard focus, or Divi's runtime classes). */
.et_pb_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols:hover > .sub-menu .sub-menu,
.et_pb_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols:focus-within > .sub-menu .sub-menu,
.et_pb_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols.et-hover > .sub-menu .sub-menu,
.et_pb_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols.et-show-dropdown > .sub-menu .sub-menu,
.et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols:hover > .sub-menu .sub-menu,
.et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols:focus-within > .sub-menu .sub-menu,
.et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols.et-hover > .sub-menu .sub-menu,
.et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols.et-show-dropdown > .sub-menu .sub-menu {
    visibility: visible;
    opacity: 1;
}

    /* 2nd-level list items: vertical stack, left-aligned with parent */
    .et_pb_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu .sub-menu > li,
    .et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu .sub-menu > li {
        display: block;
        width: 100%;
        float: none;
        clear: both;
    }

    /* 2nd-level item links: no border, normal weight, flush-left */
    .et_pb_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu .sub-menu > li > a,
    .et_pb_fullwidth_menu .et_pb_menu__menu > nav > ul > li.menu-multiple-cols > .sub-menu .sub-menu > li > a {
    border-bottom: none;
    padding: 8px 0;
    margin-bottom: 0;
    font-weight: 400;
    }
}

/* === Mobile menu spacing, offset & hover cleanup — up to 1280px === */
@media (max-width: 1280px) {

    /* Remove Divi's default top border above the mobile menu */
    .et_pb_menu .et_mobile_menu,
    .et_pb_fullwidth_menu .et_mobile_menu {
        border-top: none;
        top: calc(100% + 40px);
        border-radius: 5px;
        overflow: hidden;
    }

    /* 25px space before the first visible menu item */
    .et_pb_menu .et_mobile_menu > li:first-child,
    .et_pb_fullwidth_menu .et_mobile_menu > li:first-child {
        margin-top: 20px;
    }

    /* Remove Divi mobile item hover/tap background/shadow effect */
    .et_pb_menu .et_mobile_menu li a:hover,
    .et_pb_menu .et_mobile_menu li a:focus,
    .et_pb_menu .et_mobile_menu li a:active,
    .et_pb_fullwidth_menu .et_mobile_menu li a:hover,
    .et_pb_fullwidth_menu .et_mobile_menu li a:focus,
    .et_pb_fullwidth_menu .et_mobile_menu li a:active {
        background-color: transparent;
        box-shadow: none;
        -webkit-box-shadow: none;
        opacity: 1;
    }
}

/* === Force hamburger menu for selected Divi Menu Module === */

.force-burger-menu.et_pb_menu .et_pb_menu__menu,
.force-burger-menu.et_pb_fullwidth_menu .et_pb_menu__menu {
    display: none !important;
}

.force-burger-menu.et_pb_menu .et_mobile_nav_menu,
.force-burger-menu.et_pb_fullwidth_menu .et_mobile_nav_menu {
    display: block !important;
    margin-left: auto;
}

/* ==========================================================================
   Compact language switcher "DE / EN"
   Markup comes from td_render_language_codes_switcher() in functions.php.
   The active language is a <span>, not a link, so Divi's link rules skip it —
   typography is pinned to the module's own text styles with `inherit` so the
   codes match the neighbouring footer links at every breakpoint.
   ========================================================================== */

.custom-wpml-switch-container .td-lang {
    display: inline;
    white-space: nowrap;
}

.custom-wpml-switch-container .td-lang__item,
.custom-wpml-switch-container .td-lang__sep {
    display: inline;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-style: normal !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    text-transform: none !important;
    text-decoration: none !important;
}

.custom-wpml-switch-container .td-lang__item {
    transition: color .2s ease;
}

/* Inactive language — match the neighbouring footer links.
   Divi points this module's link colour at an undefined custom property, so the
   global gold link colour wins by default. Set it explicitly instead. */
.custom-wpml-switch-container a.td-lang__item {
    color: #ffffff !important;
}

/* Current language — brand accent, same signal as the active menu item */
.custom-wpml-switch-container .td-lang__item--active {
    color: #deaf50 !important;
}

.custom-wpml-switch-container a.td-lang__item:hover,
.custom-wpml-switch-container a.td-lang__item:focus-visible {
    color: #deaf50 !important;
}

.custom-wpml-switch-container .td-lang__sep {
    /* Also a <span>, so it inherits the module body colour (black) instead of
       the link colour — set it explicitly or it vanishes on the dark footer. */
    color: #ffffff !important;
    opacity: .45;
}

/* ==========================================================================
   Hero: running light hexagon
   Ассет вписан в золотой гексагон, снаружи по контуру бежит белая комета.
   CLASS: .hero-running-light-hexagon  (вешается на модуль Image через Advanced)
   Разметку кометы достраивает td_hero_hex_script() в functions.php.
   Значения эффекта задаются переменными ниже.
   ========================================================================== */

.hero-running-light-hexagon {
    --hrlh-art: 62%;       /* вписанный в гексагон квадрат */
    --hrlh-gold: #deaf50;  /* рамка */
    --hrlh-light: #ffffff; /* комета; #deaf50 = золотая, как рамка */
    --hrlh-frame: 0;       /* толщина рамки; 0 = рамки нет, 2.2 = вернуть золотую */
    --hrlh-speed: 10s;

    position: relative;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    overflow: visible !important;
}

/* картинка — целиком внутри гексагона, без обрезки */
.hero-running-light-hexagon .et_pb_image_wrap {
    display: block;
    width: var(--hrlh-art);
    max-width: var(--hrlh-art);
    line-height: 0;
}

.hero-running-light-hexagon .et_pb_image_wrap img {
    display: block;
    width: 100%;
    height: auto;
}

/* слой с рамкой и кометой поверх картинки; комета замаскирована наружу,
   поэтому изображение она не перекрывает */
.hero-running-light-hexagon .hrlh {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.hero-running-light-hexagon .hrlh-frame {
    fill: none;
    stroke: var(--hrlh-gold);
    stroke-width: var(--hrlh-frame);
    stroke-linejoin: round;
}

.hero-running-light-hexagon .hrlh-cut {
    fill: #000;
    stroke: #000;
    stroke-width: 0;          /* «срез у рамки» = 0 */
    stroke-linejoin: round;
}

/* Цвет кометы. Хвост красим через CSS (fill как presentation attribute
   перебивается правилом), голову — через stop-color её градиента.
   Голову исключаем из общего правила, иначе потеряется градиентная заливка. */
.hero-running-light-hexagon .hrlh-p:not(.hrlh-head) {
    fill: var(--hrlh-light);
}

.hero-running-light-hexagon .hrlh-stop {
    stop-color: var(--hrlh-light);
}

/* Траектория кометы — тот же контур, что у рамки. Держим её здесь, а не в JS,
   чтобы путь правился в одном месте. */
.hero-running-light-hexagon .hrlh-p {
    offset-path: path("M50 1 L93 26 L93 74 L50 99 L7 74 L7 26 Z");
    offset-rotate: 0deg;
    animation: hrlh-run var(--hrlh-speed) linear infinite;
    will-change: offset-distance;
}

@keyframes hrlh-run {
    from { offset-distance: 0%; }
    to   { offset-distance: 100%; }
}

/* Телефоны: гасим комету целиком. Картинка здесь — LCP-элемент,
   постоянная анимация 64 узлов стоит слишком дорого в критический момент.
   Золотая рамка остаётся. */
@media (max-width: 767px) {
    .hero-running-light-hexagon .hrlh-comet { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-running-light-hexagon .hrlh-p { animation: none; }
    .hero-running-light-hexagon .hrlh-comet { opacity: .35; }
}


/* ==========================================================================
   Grow on hover — зум картинки ВНУТРИ её рамки (без наезда на подложку).
   .grow-ready  — постоянный класс на модуле изображения (Advanced -> CSS Class):
                  обрезает увеличенную картинку по краю модуля + держит плавность.
   .grow-on-hover — переключается через Divi Interactions (enter add / exit remove):
                  увеличивает только внутреннюю картинку, рамка остаётся на месте.
   ========================================================================== */
.grow-ready {
    overflow: hidden !important;
}
.grow-ready img,
.grow-ready .et_pb_image_wrap {
    transition: transform .45s cubic-bezier(.22,.61,.36,1) !important;
    transform-origin: center bottom !important;
    will-change: transform;
}
.grow-on-hover img,
.grow-on-hover .et_pb_image_wrap img {
    transform: scale(1.08) !important;
}

/* Золотой цвет и для ССЫЛОК внутри text-force-gold.
   У <a> собственный color (Divi, через --gcid, без !important), поэтому
   наследование от родителя его не берёт — целимся в саму ссылку. */
.text-force-gold a,
a.text-force-gold,
.text-force-gold .et_pb_text_inner a {
    color: #deaf50 !important;
}

/* ==========================================================================
   link-gold-hover — золотой цвет ссылки ТОЛЬКО при наведении на неё саму.
   Чистый CSS :hover, срабатывает по каждой ссылке отдельно (в отличие от
   Divi Interactions, который реагирует на наведение на весь модуль).
   Навешивается постоянным классом на модуль (Advanced -> CSS Class) или
   прямо на ссылку. Взаимодействия не нужны.
   ========================================================================== */
.link-gold-hover a,
a.link-gold-hover {
    transition: color .25s ease !important;
}
.link-gold-hover a:hover,
.link-gold-hover .et_pb_text_inner a:hover,
a.link-gold-hover:hover {
    color: #deaf50 !important;
}


/* ==========================================================================
   Hero hex anchor — привязка анимированного гексагона к гексагону НА ФОНЕ.
   Класс вешается на СЕКЦИЮ геро (Advanced -> CSS Class: hero-hex-anchor).

   Геометрия выведена из координат фоновой картинки 2560x1709:
     цель: центр (1845, 778), ширина 510  ->  смещение от центра картинки
           +565 по X, -76.5 по Y
   При background-size:cover + position:center масштаб s = max(W/2560, H/1709).
   Пока cover упирается в ШИРИНУ (высота секции < 66.76% ширины окна),
   s = 100vw/2560, и всё выражается чистым CSS без JS:
     565   / 2560 = 22.070vw   смещение центра по X
     76.5  / 2560 =  2.988vw   смещение центра по Y (вверх)
     510   / 2560 = 19.922vw   ширина гексагона
   Гексагон занимает 86 из 100 единиц viewBox, поэтому бокс SVG шире:
     19.922 / 0.86 = 23.165vw
   ========================================================================== */

.hero-hex-anchor {
    position: relative;
}

.hero-hex-anchor > .hrlh {
    position: absolute;
    width:  23.165vw;
    height: 23.165vw;
    left: calc(50% + 22.070vw);
    top:  calc(50% - 2.988vw);
    transform: translate(-50%, -50%);
    pointer-events: none;
    overflow: visible;
    z-index: 1;
}

/* Портрет/узкие экраны: cover упирается в высоту, формула перестаёт быть
   линейной по vw — эффект гасим (там он и так выключен ради LCP). */
@media (max-width: 980px) {
    .hero-hex-anchor > .hrlh { display: none; }
}


/* ==========================================================================
   Внутренности SVG кометы — НЕ зависят от контейнера.
   Раньше все правила были привязаны к .hero-running-light-hexagon, поэтому
   при переносе слоя на секцию (.hero-hex-anchor) они переставали применяться:
   контур рисовался чёрной заливкой (дефолт SVG), а частицы теряли offset-path
   и схлопывались в начало координат. Теперь всё висит на самом .hrlh.
   ========================================================================== */

.hrlh {
    --hrlh-gold:  #deaf50;
    --hrlh-light: #ffffff;
    --hrlh-frame: 0;
    --hrlh-speed: 10s;
}

.hrlh .hrlh-frame {
    fill: none;
    stroke: var(--hrlh-gold);
    stroke-width: var(--hrlh-frame);
    stroke-linejoin: round;
}

.hrlh .hrlh-cut {
    fill: #000;
    stroke: #000;
    stroke-width: 0;
    stroke-linejoin: round;
}

.hrlh .hrlh-p {
    offset-path: path("M50 1 L93 26 L93 74 L50 99 L7 74 L7 26 Z");
    offset-rotate: 0deg;
    animation: hrlh-run var(--hrlh-speed) linear infinite;
}

.hrlh .hrlh-p:not(.hrlh-head) {
    fill: var(--hrlh-light);
}

.hrlh .hrlh-stop {
    stop-color: var(--hrlh-light);
}

@media (prefers-reduced-motion: reduce) {
    .hrlh .hrlh-p { animation: none; }
}