:root, html, body {color-scheme: light !important;}:root {--bs-primary: rgb(182, 166, 137);--bs-secondary: rgb(255, 255, 255);--bs-tertiary: rgb(46, 44, 41);--bs-success: rgb(25, 135, 84);--bs-info: rgb(23, 162, 184);--bs-warning: rgb(255, 193, 7);--bs-danger: rgb(220, 53, 69);--bs-light: rgb(237, 236, 234);--bs-dark: rgb(33, 31, 29);--bs-white: rgb(255, 255, 255);--bs-black: rgb(0, 0, 0);--bs-emphasis-color: rgb(38, 37, 36);--bs-emphasis-color-rgb: 38, 37, 36;--bs-border-color: rgba(207, 207, 207, 1);--bs-primary-rgb: 182, 166, 137;--bs-secondary-rgb: 255, 255, 255;--bs-tertiary-rgb: 46, 44, 41;--bs-success-rgb: 25, 135, 84;--bs-info-rgb: 23, 162, 184;--bs-warning-rgb: 255, 193, 7;;--bs-danger-rgb: 220, 53, 69;--bs-light-rgb: 237, 236, 234;--bs-dark-rgb: 33, 31, 29;--bs-white-rgb: 255, 255, 255;--bs-black-rgb: 0, 0, 0;--bs-primary-bg: rgb(239, 233, 220);--bs-secondary-bg: #E3E1DD;--bs-tertiary-bg: #D5D3CF;--bs-primary-bg-rgb: 239, 233, 220;--bs-secondary-bg-rgb: 227, 225, 221;--bs-tertiary-bg-rgb: 213, 211, 207;--bs-primary-color: rgba(182, 166, 137, .75);--bs-secondary-color: rgba(255, 255, 255, .75);--bs-tertiary-color: rgba(46, 44, 41, .75);--bs-link-color: rgb(182, 166, 137);--bs-link-color-rgb: 182, 166, 137;--bs-link-hover-color-rgb: 155, 141, 116;--bs-link-hover-color: rgba(155, 141, 116, 1);--bs-body-color: rgb(69, 68, 66);--bs-body-color-rgb: 69, 68, 66;--bs-body-bg: rgb(244, 244, 243);--bs-body-bg-rgb: 244, 244, 243;--bs-primary-text-emphasis: rgba(109, 100, 82, 1);--bs-secondary-text-emphasis: rgba(153, 153, 153, 1);--bs-tertiary-text-emphasis: rgba(28, 26, 25, 1);--bs-success-text-emphasis: rgba(15, 81, 50, 1);--bs-info-text-emphasis: rgba(14, 97, 110, 1);--bs-warning-text-emphasis: rgba(153, 116, 4, 1);--bs-danger-text-emphasis: rgba(132, 32, 41, 1);--bs-primary-bg-subtle: rgb(239, 233, 220);--bs-secondary-bg-subtle: #E3E1DD;--bs-tertiary-bg-subtle: #D5D3CF;--bs-success-bg-subtle: rgba(244, 249, 246, 1);--bs-info-bg-subtle: rgba(243, 250, 251, 1);--bs-warning-bg-subtle: rgba(255, 252, 243, 1);--bs-danger-bg-subtle: rgba(253, 245, 246, 1);--bs-primary-border-subtle: rgba(191, 186, 176, 1);--bs-secondary-border-subtle: rgba(182, 180, 177, 1);--bs-tertiary-border-subtle: rgba(170, 169, 166, 1);--bs-success-border-subtle: rgba(209, 231, 221, 1);--bs-info-border-subtle: rgba(209, 236, 241, 1);--bs-warning-border-subtle: rgba(255, 243, 205, 1);--bs-danger-border-subtle: rgba(248, 215, 218, 1);--bs-box-shadow: 0 .5rem 1rem rgba(33, 31, 29, 0.12);--bs-box-shadow-sm: 0 .125rem .25rem rgba(33, 31, 29, 0.12);--bs-box-shadow-lg: 0 1rem 3rem rgba(33, 31, 29, 0.12);--bs-box-shadow-inset: inset 0 1px 2px rgba(33, 31, 29, 0.12);--bs-body-font-family: "Manrope Variable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--bs-heading-font-family: "Manrope Variable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--bs-header-menu-breakpoint: 992px;--bs-header-logo-height: 48%;--bs-on-primary-text: rgb(33, 31, 29);--bs-on-secondary-text: #827358;--bs-on-tertiary-text: rgb(236, 234, 230);--bs-header-additional-menu-bg: var(--bs-dark);--bs-header-main-menu-bg: var(--bs-white);--bs-footer-bg: var(--bs-dark);--bs-footer-cta-bg: var(--bs-primary);--bs-container-max: 1320px;--bs-container-narrow-max: 960px;--bs-shadow-color: rgba(33, 31, 29, 0.12);--bs-shadow-rgb: 33, 31, 29;}html {background-color: var(--bs-dark);}h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {font-family: var(--bs-heading-font-family);}.swiper, .swiper-button-prev, .swiper-button-next {--swiper-navigation-color: rgb(182, 166, 137);}.swiper-pagination, .swiper-pagination-bullet {--swiper-pagination-color: rgb(182, 166, 137);}.btn-close {--bs-btn-close-focus-shadow: 0 0 0 .25rem rgba(33, 31, 29, 0.12);}.btn-primary {--bs-btn-color: rgb(33, 31, 29);--bs-btn-bg: rgb(182, 166, 137);--bs-btn-border-color: rgb(182, 166, 137);--bs-btn-hover-color: rgb(33, 31, 29);--bs-btn-hover-bg: rgba(193, 179, 155, 1);--bs-btn-hover-border-color: rgb(182, 166, 137);--bs-btn-focus-shadow-rgb: 33, 31, 29;--bs-btn-active-color: rgb(33, 31, 29);--bs-btn-active-bg: rgba(197, 184, 161, 1);--bs-btn-active-border-color: rgba(197, 184, 161, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(33, 31, 29, 0.12);--bs-btn-disabled-color: rgb(33, 31, 29);--bs-btn-disabled-bg: rgba(204, 193, 172, 1);--bs-btn-disabled-border-color: rgba(204, 193, 172, 1);}.btn-primary-subtle {--bs-btn-color: rgb(33, 31, 29);--bs-btn-bg: rgb(239, 233, 220);--bs-btn-border-color: rgb(182, 166, 137);--bs-btn-hover-color: rgb(33, 31, 29);--bs-btn-hover-bg: rgba(193, 179, 155, 1);--bs-btn-hover-border-color: rgb(182, 166, 137);--bs-btn-focus-shadow-rgb: 33, 31, 29;--bs-btn-active-color: rgb(33, 31, 29);--bs-btn-active-bg: rgba(197, 184, 161, 1);--bs-btn-active-border-color: rgba(197, 184, 161, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(33, 31, 29, 0.12);--bs-btn-disabled-color: rgb(33, 31, 29);--bs-btn-disabled-bg: rgba(204, 193, 172, 1);--bs-btn-disabled-border-color: rgba(204, 193, 172, 1);}.btn-outline-primary-subtle {--bs-btn-color: rgb(239, 233, 220);--bs-btn-border-color: rgb(239, 233, 220);--bs-btn-hover-color: rgb(33, 31, 29);--bs-btn-hover-bg: rgba(241, 236, 225, 1);--bs-btn-hover-border-color: rgb(239, 233, 220);--bs-btn-focus-shadow-rgb: 33, 31, 29;--bs-btn-active-color: rgb(33, 31, 29);--bs-btn-active-bg: rgba(197, 184, 161, 1);--bs-btn-active-border-color: rgba(197, 184, 161, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(33, 31, 29, 0.12);--bs-btn-disabled-color: rgb(33, 31, 29);--bs-btn-disabled-bg: rgba(204, 193, 172, 1);--bs-btn-disabled-border-color: rgba(204, 193, 172, 1);}.btn-secondary {--bs-btn-color: #827358;--bs-btn-bg: rgb(255, 255, 255);--bs-btn-border-color: rgb(255, 255, 255);--bs-btn-hover-color: #827358;--bs-btn-hover-bg: rgba(255, 255, 255, 1);--bs-btn-hover-border-color: rgb(255, 255, 255);--bs-btn-focus-shadow-rgb: 33, 31, 29;--bs-btn-active-color: #827358;--bs-btn-active-bg: rgba(255, 255, 255, 1);--bs-btn-active-border-color: rgba(255, 255, 255, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(33, 31, 29, 0.12);--bs-btn-disabled-color: #827358;--bs-btn-disabled-bg: rgba(255, 255, 255, 1);--bs-btn-disabled-border-color: rgba(255, 255, 255, 1);}.btn-tertiary {--bs-btn-color: rgb(236, 234, 230);--bs-btn-bg: rgb(46, 44, 41);--bs-btn-border-color: rgb(46, 44, 41);--bs-btn-hover-color: rgb(236, 234, 230);--bs-btn-hover-bg: rgba(77, 76, 73, 1);--bs-btn-hover-border-color: rgb(46, 44, 41);--bs-btn-focus-shadow-rgb: 33, 31, 29;--bs-btn-active-color: rgb(236, 234, 230);--bs-btn-active-bg: rgba(88, 86, 84, 1);--bs-btn-active-border-color: rgba(88, 86, 84, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(33, 31, 29, 0.12);--bs-btn-disabled-color: rgb(236, 234, 230);--bs-btn-disabled-bg: rgba(109, 107, 105, 1);--bs-btn-disabled-border-color: rgba(109, 107, 105, 1);}.btn-secondary-subtle {--bs-btn-color: #827358;--bs-btn-bg: #E3E1DD;--bs-btn-border-color: rgb(255, 255, 255);--bs-btn-hover-color: #827358;--bs-btn-hover-bg: rgba(255, 255, 255, 1);--bs-btn-hover-border-color: rgb(255, 255, 255);--bs-btn-focus-shadow-rgb: 33, 31, 29;--bs-btn-active-color: #827358;--bs-btn-active-bg: rgba(255, 255, 255, 1);--bs-btn-active-border-color: rgba(255, 255, 255, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(33, 31, 29, 0.12);--bs-btn-disabled-color: #827358;--bs-btn-disabled-bg: rgba(255, 255, 255, 1);--bs-btn-disabled-border-color: rgba(255, 255, 255, 1);}.btn-tertiary-subtle {--bs-btn-color: rgb(236, 234, 230);--bs-btn-bg: #D5D3CF;--bs-btn-border-color: rgb(46, 44, 41);--bs-btn-hover-color: rgb(236, 234, 230);--bs-btn-hover-bg: rgba(77, 76, 73, 1);--bs-btn-hover-border-color: rgb(46, 44, 41);--bs-btn-focus-shadow-rgb: 33, 31, 29;--bs-btn-active-color: rgb(236, 234, 230);--bs-btn-active-bg: rgba(88, 86, 84, 1);--bs-btn-active-border-color: rgba(88, 86, 84, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(33, 31, 29, 0.12);--bs-btn-disabled-color: rgb(236, 234, 230);--bs-btn-disabled-bg: rgba(109, 107, 105, 1);--bs-btn-disabled-border-color: rgba(109, 107, 105, 1);}.btn-outline-secondary-subtle {--bs-btn-color: #E3E1DD;--bs-btn-border-color: #E3E1DD;--bs-btn-hover-color: #827358;--bs-btn-hover-bg: rgba(231, 230, 226, 1);--bs-btn-hover-border-color: #E3E1DD;--bs-btn-focus-shadow-rgb: 33, 31, 29;--bs-btn-active-color: #827358;--bs-btn-active-bg: rgba(255, 255, 255, 1);--bs-btn-active-border-color: rgba(255, 255, 255, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(33, 31, 29, 0.12);--bs-btn-disabled-color: #827358;--bs-btn-disabled-bg: rgba(255, 255, 255, 1);--bs-btn-disabled-border-color: rgba(255, 255, 255, 1);}.btn-outline-tertiary-subtle {--bs-btn-color: #D5D3CF;--bs-btn-border-color: #D5D3CF;--bs-btn-hover-color: rgb(236, 234, 230);--bs-btn-hover-bg: rgba(219, 218, 214, 1);--bs-btn-hover-border-color: #D5D3CF;--bs-btn-focus-shadow-rgb: 33, 31, 29;--bs-btn-active-color: rgb(236, 234, 230);--bs-btn-active-bg: rgba(88, 86, 84, 1);--bs-btn-active-border-color: rgba(88, 86, 84, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(33, 31, 29, 0.12);--bs-btn-disabled-color: rgb(236, 234, 230);--bs-btn-disabled-bg: rgba(109, 107, 105, 1);--bs-btn-disabled-border-color: rgba(109, 107, 105, 1);}.btn-light {--bs-btn-color: rgb(33, 31, 29);--bs-btn-bg: rgb(237, 236, 234);--bs-btn-border-color: rgb(237, 236, 234);--bs-btn-hover-color: rgba(66, 65, 63, 1);--bs-btn-hover-bg: rgba(225, 224, 222, 1);--bs-btn-hover-border-color: rgba(225, 224, 222, 1);--bs-btn-focus-shadow-rgb: 33, 31, 29;--bs-btn-active-color: rgba(66, 65, 63, 1);--bs-btn-active-bg: rgba(213, 212, 211, 1);--bs-btn-active-border-color: rgba(213, 212, 211, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(33, 31, 29, 0.12);--bs-btn-disabled-color: rgba(66, 65, 63, 1);--bs-btn-disabled-bg: rgba(190, 189, 187, 1);--bs-btn-disabled-border-color: rgba(190, 189, 187, 1);}.btn-dark {--bs-btn-color: rgb(237, 236, 234);--bs-btn-bg: rgb(33, 31, 29);--bs-btn-border-color: rgb(33, 31, 29);--bs-btn-hover-color: rgba(240, 239, 237, 1);--bs-btn-hover-bg: rgba(66, 65, 63, 1);--bs-btn-hover-border-color: rgba(66, 65, 63, 1);--bs-btn-focus-shadow-rgb: 33, 31, 29;--bs-btn-active-color: rgba(242, 241, 239, 1);--bs-btn-active-bg: rgba(89, 87, 86, 1);--bs-btn-active-border-color: rgba(89, 87, 86, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(33, 31, 29, 0.12);--bs-btn-disabled-color: rgba(190, 189, 187, 1);--bs-btn-disabled-bg: rgb(33, 31, 29);--bs-btn-disabled-border-color: rgb(33, 31, 29);}.text-bg-primary {color: rgb(33, 31, 29) !important;}.text-primary-subtle {color: rgb(239, 233, 220);}.text-bg-secondary {color: #827358 !important;}.text-secondary-subtle {color: #E3E1DD;}.bg-tertiary {background-color: rgb(46, 44, 41) !important;}.text-bg-tertiary {background-color: rgb(46, 44, 41) !important;color: rgb(236, 234, 230) !important;}.text-tertiary {color: rgb(46, 44, 41) !important;}.text-tertiary-subtle {color: #D5D3CF;}.dropdown-menu {--bs-dropdown-bg: rgb(244, 244, 243);--bs-dropdown-link-active-color: rgb(182, 166, 137);--bs-dropdown-link-hover-color: rgba(193, 179, 155, 1);--bs-dropdown-link-hover-bg: rgb(239, 233, 220);--bs-dropdown-link-color: rgb(38, 37, 36);}.pagination {--bs-pagination-active-bg: rgb(182, 166, 137);--bs-pagination-disabled-bg: inherit;--bs-pagination-disabled-color: inherit;--bs-pagination-active-border-color: rgb(182, 166, 137);--bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(33, 31, 29, 0.12);}.navbar {--bs-navbar-active-color: var(--bs-primary) ;--bs-navbar-color: inherit;}.navbar .nav-link.static-active { color: var(--bs-navbar-active-color);}.navbar-nav {--bs-nav-link-hover-color: rgba(193, 179, 155, 1); --bs-nav-link-font-weight: 600;}.nav-pills {--bs-nav-pills-link-active-color: rgb(38, 37, 36);--bs-nav-pills-link-active-bg: #E3E1DD;}.progress {--bs-progress-bar-bg: rgb(182, 166, 137);}.accordion {--bs-accordion-active-color: rgb(182, 166, 137);}.btn-outline-primary {--bs-btn-color: rgb(182, 166, 137);--bs-btn-border-color: rgb(182, 166, 137);--bs-btn-hover-color: rgb(255, 255, 255);--bs-btn-hover-bg: rgb(182, 166, 137);--bs-btn-hover-border-color: rgb(182, 166, 137);--bs-btn-focus-shadow-rgb: 182, 166, 137;--bs-btn-active-color: rgb(255, 255, 255);--bs-btn-active-bg: rgb(182, 166, 137);--bs-btn-active-border-color: rgb(182, 166, 137);--bs-btn-active-shadow: inset 0 3px 5px rgba(33, 31, 29, 0.12);--bs-btn-disabled-color: rgb(182, 166, 137);--bs-btn-disabled-border-color: rgb(182, 166, 137);}.btn-outline-secondary {--bs-btn-color: rgb(255, 255, 255);--bs-btn-border-color: rgb(255, 255, 255);--bs-btn-hover-color: rgb(255, 255, 255);--bs-btn-hover-bg: rgb(255, 255, 255);--bs-btn-hover-border-color: rgb(255, 255, 255);--bs-btn-focus-shadow-rgb: 255, 255, 255;--bs-btn-active-color: rgb(255, 255, 255);--bs-btn-active-bg: rgb(255, 255, 255);--bs-btn-active-border-color: rgb(255, 255, 255);--bs-btn-active-shadow: inset 0 3px 5px rgba(33, 31, 29, 0.12);--bs-btn-disabled-color: rgb(255, 255, 255);--bs-btn-disabled-border-color: rgb(255, 255, 255);}.btn-outline-tertiary {--bs-btn-color: rgb(46, 44, 41);--bs-btn-border-color: rgb(46, 44, 41);--bs-btn-hover-color: rgb(255, 255, 255);--bs-btn-hover-bg: rgb(46, 44, 41);--bs-btn-hover-border-color: rgb(46, 44, 41);--bs-btn-focus-shadow-rgb: 46, 44, 41;--bs-btn-active-color: rgb(255, 255, 255);--bs-btn-active-bg: rgb(46, 44, 41);--bs-btn-active-border-color: rgb(46, 44, 41);--bs-btn-active-shadow: inset 0 3px 5px rgba(33, 31, 29, 0.12);--bs-btn-disabled-color: rgb(46, 44, 41);--bs-btn-disabled-border-color: rgb(46, 44, 41);}.table-primary {--bs-table-bg:rgb(182, 166, 137);--bs-table-color:rgb(33, 31, 29);}.table-secondary {--bs-table-bg:rgb(255, 255, 255);--bs-table-color:#827358;}.table-tertiary {--bs-table-bg:rgb(46, 44, 41);--bs-table-color:rgb(236, 234, 230);}.form-check-input:checked {background-color: rgb(255, 255, 255) ;border-color: rgb(255, 255, 255) ;}.form-control:focus, .form-select:focus {border-color: rgba(219, 211, 196, 1);}.list-group {--bs-list-group-active-bg: rgb(182, 166, 137);--bs-list-group-active-border-color: rgb(182, 166, 137);--bs-list-group-active-color: rgb(33, 31, 29);}.text-bg-success { color: rgb(255, 255, 255) !important; background-color: rgb(25, 135, 84) !important;}.text-bg-warning { color: rgb(255, 255, 255) !important; background-color: rgb(255, 193, 7) !important;}.text-bg-danger { color: rgb(69, 68, 66) !important; background-color: rgb(220, 53, 69) !important;}.text-bg-info { color: rgb(255, 255, 255) !important; background-color: rgb(23, 162, 184) !important;}.text-bg-light { color: rgb(69, 68, 66) !important; background-color: rgb(237, 236, 234) !important;}.text-bg-dark { color: rgb(255, 255, 255) !important; background-color: rgb(33, 31, 29) !important;}.text-bg-primary-subtle { background-color: rgb(239, 233, 220) !important; color: rgb(69, 68, 66) !important;}.text-bg-secondary-subtle { background-color: #E3E1DD !important; color: rgb(69, 68, 66) }.text-bg-tertiary-subtle { background-color: #D5D3CF !important; color: rgb(69, 68, 66) }.text-bg-body { background-color: rgb(244, 244, 243) !important; color: rgb(69, 68, 66) !important;}.text-bg-white { background-color: rgb(255, 255, 255) !important; color: rgb(0, 0, 0) !important;}.text-body-bg { color: var(--bs-body-bg);}.btn-body { --bs-btn-color: var(--bs-body-color); --bs-btn-bg: var(--bs-body-bg);}.btn-outline-body { --bs-btn-color: var(--bs-body-bg); --bs-btn-border-color: var(--bs-body-bg);}.offcanvas, .offcanvas-sm, .offcanvas-md, .offcanvas-lg, .offcanvas-xl, .offcanvas-xxl { --bs-offcanvas-bg: var(--bs-white) !important;}.card {--bs-card-box-shadow: 0 .125rem .25rem rgba(33, 31, 29, 0.12);--bs-card-title-color: rgb(38, 37, 36);--bs-card-color: rgb(69, 68, 66);--bs-card-border-color: rgba(207, 207, 207, 1);} .card {--bs-card-border-radius: 0.25rem !important;--bs-card-inner-border-radius: 0.25rem !important;}:root { --bs-border-radius: 0.25rem !important; --bs-border-radius-sm: 0.25rem !important; --bs-border-radius-lg: 0.25rem !important; --bs-border-radius-xl: 0.25rem !important; --bs-border-radius-xxl: 0.25rem !important; --bs-border-radius-2xl: 0.25rem !important;} .btn, .btn-sm, .btn-lg { --bs-btn-border-radius: 0.25rem !important; } .dropdown-menu { --bs-dropdown-border-radius: 0.25rem !important; --bs-dropdown-inner-border-radius: 0.25rem !important; } .dropdown { --bs-dropdown-item-border-radius: 0.25rem !important; } .badge { --bs-badge-border-radius: 0.25rem !important; } .img-rounded, .form-check-input[type=checkbox] { border-radius: 0.25rem !important; } .card_kite { --kite-clip-radius: 0.25rem !important; --bs-card-border-radius: 0.25rem !important; } .form-control { border-radius: 0.25rem; } .border-body { border-color: var(--bs-body-bg) !important; }/* ##### ALAP BEÁLLÍTÁSOK ##### *//* scroll padding */:root { --safe-header-spacing: 99px;}@media (max-width: 1200px) { :root { --safe-header-spacing: 59px; }}/* árvasorok megszüntetése */p, label, span, small, .accordion-header { text-wrap: pretty !important;}h1, h2, h3, h4, h5, h6, .introduction-box_title { text-wrap: balance !important;}/* szöveg szín */h1, h2, h3, h4, h5, h6, p { color: unset;}/* hangsúlyos szövegszín reset */strong { color: unset !important;}/* mobil menü és focus állapotok színezése */.navbar-toggler, .btn-close { color: var(--bs-primary);}form *:focus-visible, .navbar-toggler:focus, .btn-close:focus { box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25) !important;}form-control:focus, .form-select:focus { outline-color: var(--bs-primary) !important;}.form-check-input:focus, .navbar-toggler:focus, .btn-close:focus, .page-link:focus { box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25) !important;}/* banner háttér */.section-builder-component:has(.header_banner) { background-color: var(--bs-tertiary);}/* swiper mobil padding */.box-swiper { padding-left: 1rem !important; padding-right: 1rem !important;}/* lábléc menü hover: a látványterv szerint fehér; a copyright sáv linkjei maradnak márkaszínűek */#footer-menu nav a:hover { color: var(--bs-white) !important;}#footer-copyright a:not(.btn):hover { color: var(--bs-white) !important;}/* lábléc logo magasság */#footer-menu picture { height: 75% !important;}/* lebegő gombok */.floating-buttons .btn-floating:not(.floating-buttons__cookie--hidden) { padding: .75rem 1rem !important; margin-top: .5rem !important;}.floating-buttons .btn-floating { border: none !important; border-radius: 100vh !important;}.floating-buttons .btn-floating i { line-height: .75rem !important;}/* süti kezelés */#cookies-policy .cookies__title { margin-block-end: 1rem !important;}#cookies-policy .cookies__sections { overflow-y: auto !important;}#cookies-policy .cookies__name { margin-inline-end: .5rem;}/* ##### PORTÁL FORMÁZÁS ##### *//* címsor betűtípus: Space Grotesk — a Spark választólistáján nem szerepel, ezért a head scriptből töltődik, és itt ül rá a téma címsor-változójára. A séma font_family_headings értéke a fallback. */:root { --bs-heading-font-family: "Space Grotesk", var(--bs-body-font-family), sans-serif;}h1, h2, h3, h4, h5, h6 { letter-spacing: -.01em;}/* ##### FEJLÉC ##### *//* --- Kiegészítő sáv: a téma gombokként rendereli az elérhetőségeket és a social ikonokat, a látványterven ezek szöveglinkek, illetve keret nélküli ikonok --- */#header .additional-menu { /* A látványterven a sáv szövege és linkjei is a tompított tónuson vannak (--on-dark-muted), és csak hoverre váltanak világosra. A sémában ehhez a világos szövegtoken csökkentett fedése áll a legközelebb — a márkaszín ide túl arany. Az eltüntetett fedés csak a szövegre megy, hogy az elérhetőség-ikonok bézse teljes erősségű maradjon. */ --pem-on-dark: var(--bs-white); --pem-on-dark-muted: var(--bs-on-tertiary-text); font-size: .84375rem; color: var(--pem-on-dark-muted);}/* elérhetőség-linkek *//* a sáv szövegei, link-feliratai és social ikonjai: tompított tónus, hoverre világos — a látványterven az ikonok is a szöveg tónusán vannak. A sáv teljes magassága 36px: a konténer min-height 2rem + a téma py-0-5 paddingja (4px). A terv 42px-e túl magasnak hatott a görgetéskor összehúzódó főmenü mellett, a téma saját 32px-e viszont szűk. */#header .additional-menu > .container-xxl { min-height: 2rem;}#header .additional-menu > .container-xxl > div:first-child { column-gap: .75rem !important;}#header .additional-menu > .container-xxl > div:first-child > span,#header .additional-menu .contacts_wrapper .btn > span,#header .additional-menu .social.btn > i { opacity: .68; transition: opacity .15s ease;}#header .additional-menu .contacts_wrapper .btn:hover > span,#header .additional-menu .contacts_wrapper .btn:focus-visible > span,#header .additional-menu .social.btn:hover > i,#header .additional-menu .social.btn:focus-visible > i { opacity: 1;}/* elérhetőség-linkek */#header .additional-menu .contacts_wrapper { gap: 1.375rem !important;}#header .additional-menu .contacts_wrapper .btn { --bs-btn-color: var(--pem-on-dark-muted); --bs-btn-hover-color: var(--pem-on-dark); --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--bs-white); --bs-btn-active-bg: transparent; --bs-btn-active-border-color: transparent; --bs-btn-active-color: var(--bs-white); display: inline-flex; align-items: center; gap: .5rem; padding: 0 !important; font-size: .84375rem; font-weight: 500; transition: color .15s ease;}#header .additional-menu .contacts_wrapper .btn i { font-size: .875rem; color: var(--bs-primary); transition: color .15s ease;}/* social ikonok: keret nélküli 28×28, hoverre halvány fehér lap */#header .additional-menu .social_wrapper { gap: .25rem !important;}#header .additional-menu .social.btn { --bs-btn-color: var(--pem-on-dark-muted); --bs-btn-hover-color: var(--pem-on-dark); --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-bg: rgba(var(--bs-white-rgb, 255, 255, 255), .12); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--bs-white); --bs-btn-active-bg: rgba(var(--bs-white-rgb, 255, 255, 255), .12); --bs-btn-active-border-color: transparent; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0 !important; transition: color .15s ease, background-color .15s ease;}#header .additional-menu .social.btn i { font-size: .9375rem;}/* --- Ajánlatkérés CTA: a „Fejléc másodlagos menü” egyetlen pontja. Korábban a menüpont css_class mezőjébe beégetett inline stílus formázta (fix #B6A689 hex), így nem követte a színsablont. Ha ide második menüpont kerül, az is gomb kinézetű lesz — akkor célzottabb szelektor kell. --- */#menu_container_top_secondary_menu_level_1 > .nav-item > .nav-link { display: inline-flex; align-items: center; gap: .625rem; padding: 1rem 1.875rem; background: var(--bs-primary); color: var(--bs-dark); border-radius: var(--bs-border-radius); font-weight: 600; font-size: .9375rem; line-height: 1; text-decoration: none; transition: background-color .2s ease, color .2s ease, transform .2s ease;}#menu_container_top_secondary_menu_level_1 > .nav-item > .nav-link:hover,#menu_container_top_secondary_menu_level_1 > .nav-item > .nav-link:focus-visible { /* a main-en belüli elsődleges gombokkal azonos hover: sötétített márkaszín, fehér felirat és 2px emelkedés */ background: color-mix(in srgb, var(--bs-primary) 78%, var(--bs-dark)); color: var(--bs-white); transform: translateY(-2px);}/* a látványterv szerint a logó és a menü között 2rem a térköz (a téma gap-lg-5 = 3rem) */@media (min-width: 992px) { #header_navbar > .container-xxl { gap: 2rem !important; }}/* --- Fő menü: 15px-es linkek, hoverre márkaszín + 2px-es alsó csík; az aktív menüpont alatt nincs csík (látványterv) --- */#header #menu_container_top_menu_level_1 { --bs-nav-link-hover-color: var(--bs-primary); gap: .5rem;}#header #menu_container_top_menu_level_1 > .nav-item > .nav-link { position: relative; padding: .625rem .875rem; font-size: .9375rem;}/* a téma hoverre alhúzást, az aktív menüpontra pedig saját ::before csíkot tesz — a látványterven csak a 2px-es, balról nyíló hover-csík van */#header #menu_container_top_menu_level_1 .nav-link,#header #menu_container_top_menu_level_1 .nav-link:hover,#header #menu_container_top_menu_level_1 .nav-link:focus,#header #menu_container_top_menu_level_1 .nav-link:focus-visible,#header #menu_container_top_menu_level_1 .nav-link.active { text-decoration: none !important;}#header #menu_container_top_menu_level_1 .nav-link::before { display: none !important;}/* az aktív menüpont a téma saját jelölői nélkül (keret, árnyék, gradiens-alhúzás), hogy csak a látványterv 2px-es bézs csíkja látszódjon */#header #menu_container_top_menu_level_1 .nav-link.active,#header #menu_container_top_menu_level_1 .nav-item.active > .nav-link,#header #menu_container_top_menu_level_1 .nav-link[aria-current] { border-bottom-color: transparent; box-shadow: none; background-image: none;}/* A díszítő alsó csík csak a menü-töréspont felett (lg = 992px) — a mobil offcanvasban a menüpontok egymás alatt állnak, ott a csík zavaró. */@media (min-width: 992px) { #header #menu_container_top_menu_level_1 > .nav-item > .nav-link::after { content: ""; position: absolute; left: .875rem; right: .875rem; bottom: .375rem; height: 2px; background: var(--bs-primary); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } #header #menu_container_top_menu_level_1 > .nav-item:hover > .nav-link::after, #header #menu_container_top_menu_level_1 > .nav-item:focus-within > .nav-link::after { transform: scaleX(1); } /* az aktív menüpont: állandóan kitett csík */ #header #menu_container_top_menu_level_1 > .nav-item > .nav-link.active::after, #header #menu_container_top_menu_level_1 > .nav-item > .nav-link.static-active::after, #header #menu_container_top_menu_level_1 > .nav-item > .nav-link[aria-current]::after { transform: scaleX(1); }}#header #menu_container_top_menu_level_1 > .nav-item:hover > .nav-link,#header #menu_container_top_menu_level_1 > .nav-item:focus-within > .nav-link { color: var(--bs-primary);}/* az aktív menüpont bézs szövegszíne (a csík a media query-ben) */#header #menu_container_top_menu_level_1 > .nav-item > .nav-link.active,#header #menu_container_top_menu_level_1 > .nav-item > .nav-link.static-active,#header #menu_container_top_menu_level_1 > .nav-item > .nav-link[aria-current] { color: var(--bs-primary);}/* A lábléc bal menüoszlopa ugyanazt a menükategóriát (Fejléc menü) rendereli, ezért a #menu_container_top_menu_level_1 id kétszer szerepel az oldalon. A fejléc-specifikus formazás itt visszavonva — a lábléc menüformázása a LÁBLÉC blokkban van. *//* A mobil offcanvas fejlécében álló logó kisebb volt, mint a főfejlécé: a téma mindkettőn h-100 + 48% arányt használ, de az offcanvas fejlécének nincs szülő magassága, amihez arányosítani lehetne. Fix magasság állítja őket egy méretre (a főfejléc 80px-es sávjának 48%-a). */#header .offcanvas-header .navbar_logo_group picture { height: 2.375rem !important;}/* a téma pt-1 (4px) felső paddingot tesz az offcanvas fejlécére, és a sáv magasságát a nála magasabb bezáró gomb (p-3) határozza meg, ezért a középre igazított logó nem ott ült, mint a főfejlécben. A sáv magassága a főfejléc 80px-es sávjával egyezik, így a középre igazítás ugyanoda teszi (21px). */#header .offcanvas-header { height: 5rem; padding-top: 0 !important; padding-bottom: 0 !important;}/* Az offcanvas lábléce (mobil menü alja) csak a mobil menüben tartalmaz elemeket (`contacts_wrapper d-lg-none`), asztali nézetben viszont üresen is helyet foglal és balra tolja az Ajánlatkérés gombot. A töréspont a header.menu_breakpoint beállításból lg = 992px; ha az változik, ezt a media query-t is át kell írni. Ha ide később asztali tartalom kerül (pl. nyelvváltó, kosár), a szabály törlendő. */@media (min-width: 992px) { #header .offcanvas-footer { display: none !important; }}/* ##### ROVATCÍM (eyebrow) ##### Globális: szekció-fejekben, banner slide-okon és a kép-szöveg (introduction) dobozokban is. Ez utóbbi nem az `editorial_` hookot használja, ezért kell a saját osztálya is a szelektorlistába. A szín admin mezőből jön (eyebrowColor / text-primary), ide csak a típus és a 30px-es vonalka kerül. */.editorial_eyebrow,.introduction-box_eyebrow { display: inline-flex; align-items: center; gap: .75rem; font-size: .8125rem !important; font-weight: 600; letter-spacing: .2em; line-height: 1.2; text-transform: uppercase;}.editorial_eyebrow::before,.introduction-box_eyebrow::before { content: ""; display: inline-block; flex: 0 0 auto; width: 30px; height: 2px; background: currentColor;}/* A rovatcím és a cím közötti térköz. A téma mindkettőre `mb-2` utility-t tesz (editorial: a wrapperre és mb-0-t az elemre; introduction: magára az elemre), a Bootstrap utility pedig !important — ezért kell ide is. */.editorial_eyebrow_wrapper,.introduction-box_eyebrow { margin-bottom: 1.375rem !important;}/* ##### SZEKCIÓCÍM (editorial_title) ##### A látványterven minden szekciócím ugyanaz a méret (29px → 46px), függetlenül attól, hogy a szekció headerLevel mezője h2-t vagy h3-at rendel hozzá — a címszint marad szemantikai döntés, a méretet innen kapja. A rejtett (visually-hidden) címeket nem érinti. */.editorial_title:not(.visually-hidden) { font-size: clamp(1.8125rem, 3.4vw, 2.875rem); line-height: 1.12;}/* Sorhossz: a cím a konténer 60%-án, a bevezető 70%-án tördelődik — így nem fut ki a teljes szélességben. Csak a menü-töréspont felett; mobilon és tableten mindkettő teljes szélességű. */@media (min-width: 992px) { .editorial_title:not(.visually-hidden) { max-width: 60%; } .editorial_lead { max-width: 70%; }}/* ##### GOMBOK ##### A látványterv gombja: 16/30px padding, 15px félkövér felirat, 10px ikonköz, 1,5px keret, hoverre sötétebb márkaszín, fehér felirat és 2px emelkedés. A <main>-re szűkítve: a fejléc és a lábléc gombjai (social ikonok, elérhetőség-linkek, CTA) saját szabályokat kapnak a maguk blokkjában. Színek a sémából: --bs-primary és annak sötétített változata. */main .btn { display: inline-flex; align-items: center; justify-content: center; gap: .625rem; padding: 1rem 1.875rem; font-size: .9375rem; font-weight: 600; letter-spacing: .01em; border-width: 1.5px; white-space: nowrap; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;}main .btn:hover,main .btn:focus-visible { transform: translateY(-2px);}main .btn-primary { --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 78%, var(--bs-dark)); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 78%, var(--bs-dark)); --bs-btn-hover-color: var(--bs-white); --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 78%, var(--bs-dark)); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 78%, var(--bs-dark)); --bs-btn-active-color: var(--bs-white);}main .btn-primary:hover,main .btn-primary:focus-visible { box-shadow: 0 .5rem 1.25rem rgba(var(--bs-dark-rgb), .14);}/* Nyíl ikon a felirat után — csak a bannereken és a kép-szöveg dobozokban, nem minden elsődleges gombon (űrlap küldés, szűrők stb. nyíl nélkül). A Font Awesome saját változója bármelyik telepítés helyes családját adja. */[class*="header_banner"] .btn-primary::after,.introduction-box .btn-primary::after,.section_form .btn-primary::after,main .service_box .card-footer .btn-primary::after { content: "\f061"; font: var(--fa-font-solid, normal 900 1em/1 "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome); font-size: .8125em; font-style: normal; font-variant: normal; -webkit-font-smoothing: antialiased; display: inline-block; vertical-align: .05em; transition: transform .2s ease;}[class*="header_banner"] .btn-primary:hover::after,.introduction-box .btn-primary:hover::after,.section_form .btn-primary:hover::after,main .service_box .card-footer .btn-primary:hover::after { transform: translateX(3px);}/* ##### KÉP-SZÖVEG DOBOZOK (introduction / introduction-2) ##### A téma ezekben a címet <p>-ként rendereli `fs-2 fw-bold` utility-kkel, ezért a szövegtörzs betűtípusát és egy fix 2rem méretet kap. A látványterven ez a szekciócímekkel azonos típus és méret (29px → 46px). A méret !important, mert az `fs-2` utility maga is !important. */.introduction-box_title { font-family: var(--bs-heading-font-family); font-size: clamp(1.8125rem, 3.4vw, 2.875rem) !important; line-height: 1.12; letter-spacing: -.01em;}/* A kép a mellette lévő szövegoszlop magasságát veszi fel, torzítás nélkül (object-fit: cover). A kép a flow-ban marad: a <picture> flex elemként `flex: 1 1 0` + `min-height: 0` értékkel nulla saját magasságot hoz, ezért nem ő határozza meg a sor magasságát, hanem a szöveg — majd kitölti azt. Csak asztali (lg) elrendezésben, ahol a két oszlop egymás mellett van. */@media (min-width: 992px) { .introduction-box > .row { align-items: stretch !important; } .introduction-box_image { flex-direction: column; align-items: stretch !important; } .introduction-box_image picture { display: flex; flex: 1 1 0; min-height: 0; } .introduction-box_image img { width: 100%; height: 100%; object-fit: cover; }}/* Felsorolás: pont helyett pipa (látványterv `checklist`) */.introduction-box_content ul { list-style: none; padding-left: 0; display: grid; gap: .5rem;}.introduction-box_content ul > li { position: relative; padding-left: 1.875rem;}.introduction-box_content ul > li::before { content: "\f00c"; font: var(--fa-font-solid, normal 900 1em/1 "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome); font-size: .875em; position: absolute; left: 0; top: .45em; color: color-mix(in srgb, var(--bs-primary) 78%, var(--bs-dark));}/* ##### SZÁMLÁLÓ SÁV (counter box stílus) ##### Beállításból jön: 4 elem (perPage), gap 0, konténer, térköz nélküli sáv és a sávszín — azokhoz nem nyúlunk. A látványterven a sáv EGY fehér csík, hajszálvonalas osztásokkal és balra igazított bronz számokkal; a téma ezzel szemben külön árnyékos, lekerekített, középre igazított kártyákat rendel — ezért kell ide CSS. A téma utility-jei (p-4, rounded-3, shadow-sm, fs-3, fw-semibold, mb-1, text-center) mind !important-tal jönnek. FIGYELEM: ebben a stílusban a nagy szám a `data.subtitle` mezőből jön (.counter-number), a felirat pedig az entitás nevéből (.counter-subtitle). *//* a sáv alján és tetején teljes szélességű hajszálvonal */.section_box:has(.counter-col) { border-top: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color);}.counter-col { text-align: left !important;}.counter-bg { padding: 1.75rem 1.625rem !important; /* a kártyáknak nincs saját háttere: a sáv háttere a szekció sávszínéből jön, az osztásokat és a két szélső keretet hajszálvonalak adják */ background: transparent !important; border: 0; border-right: 1px solid var(--bs-border-color); border-radius: 0 !important; box-shadow: none !important;}/* a sor első cellája bal oldali keretet is kap — asztalon 4, alatta 2 oszlop (a téma grid-cols-2 / grid-cols-xl-4 osztályai, xl = 1200px) */@media (min-width: 1200px) { .d-grid > *:nth-child(4n+1):has(> .counter-col) .counter-bg { border-left: 1px solid var(--bs-border-color); }}@media (max-width: 1199.98px) { .d-grid > *:nth-child(odd):has(> .counter-col) .counter-bg { border-left: 1px solid var(--bs-border-color); }}/* slider módban a DOM nem .d-grid, hanem swiper-slide-ok sora, ezért a fenti nth-child szabályok nem fognak. Ott minden cella BAL keretet kap és a jobbat elhagyjuk — így két szomszédos cella találkozásánál egyetlen vonal marad, a jobb szélső élt pedig a következő cella bal kerete adja. */.swiper-slide:has(.counter-col) .counter-bg { border-left: 1px solid var(--bs-border-color); border-right: 0;}.swiper-slide:last-child:has(.counter-col) .counter-bg { border-right: 1px solid var(--bs-border-color);}.counter-number { font-family: var(--bs-heading-font-family); font-size: clamp(1.5rem, 2.3vw, 2.125rem) !important; font-weight: 700 !important; line-height: 1.1; letter-spacing: -.01em; color: color-mix(in srgb, var(--bs-primary) 78%, var(--bs-dark)); margin-bottom: .625rem !important; /* a téma egy sorra vágja (lc-1), így a hosszabb értékek („MAPEI és STO”, „akár 3000 m²”) háromponttal csonkultak */ -webkit-line-clamp: 2 !important;}.counter-subtitle { font-size: .84375rem; font-weight: 400 !important; line-height: 1.45; color: color-mix(in srgb, var(--bs-body-color) 60%, var(--bs-light)); -webkit-line-clamp: 2 !important;}/* ##### BANNEREK ##### Minden banner szekcióra érvényes alapok. A fólia (szín, láthatóság), a szöveg/gomb színe, a magasság és az elrendezés admin mezőkből jön (foilColor/foilPercentage, textColor, buttonColor, buttonOutline, height, textPosition) — a fólia gradienst a téma maszkja adja, azt nem írjuk felül. Itt csak a típusméretek, a térközök és a világos ghost-gomb van. *//* Címsor: mobilon 33px, asztalon 52px (a látványterv értékei), 1.12 sortáv, legfeljebb 20 karakter szélességű sorok */.section_banner .header_banner_title { font-size: clamp(2.0625rem, 5vw, 3.25rem); line-height: 1.12; max-width: 20ch; margin-bottom: 1.375rem;}/* Bevezető: nem félkövér, mobilon 16px → asztalon 21px, 54 karakter sorhossz. A méret és a vastagság !important, mert a téma `fs-5` és `fw-bold` utility osztályokat tesz a bekezdésre, azok pedig maguk is !important-tal jönnek. */.section_banner .header_banner_text { font-size: clamp(1.0625rem, 1.5vw, 1.3125rem) !important; font-weight: 400 !important; line-height: 1.6; max-width: 54ch; color: rgba(var(--bs-white-rgb, 255, 255, 255), .84);}.section_banner .header_banner_text p:last-child { margin-bottom: 0;}/* --- „Sötét sáv” bannerek (u-sotet-sav): az Anyaghasználat és a CTA sáv. A látványterven ezek nem fotós bannerek, hanem sötét sávok, amelyeken a kép csak textúra: szürkeárnyalatos és alacsony fedésű. A téma fóliája 45°-os maszkkal gradiens — itt egyenletesre állítjuk (mask-image: none), és a fólia láthatósága 85% (admin mező). --- */.u-sotet-sav .header_banner_foliage { -webkit-mask-image: none !important; mask-image: none !important;}.u-sotet-sav .header_banner_background { filter: grayscale(1); opacity: .5;}/* --- Anyaghasználat sáv: a szövegoszlop a konténer teljes szélességét kapja (a téma col-lg-9 / col-xl-7 / col-xxl-6 osztályai helyett), a cím 100%, a leírás 75% — mint a látványterven. FIGYELEM: a tartalom flex column, ezért itt csak szélességet állítunk — a flex-basis a főtengelyen (magasság) hatna és lenyomná a gombot. --- */.u-anyaghasznalat .header_banner_content > [class*="col-"] { width: 100%; max-width: 100%;}.u-anyaghasznalat .header_banner_title { max-width: 100%;}.u-anyaghasznalat .header_banner_text { max-width: 75%;}/* --- u-szurke-kep: szürkeárnyalatos banner-fotó (látványterv szerint az aloldali herókon). Utility, bármely bannerre feltehető; a fóliát és a szövegszínt nem érinti, csak a képet szürkíti. A szűrő a háttér-div-en ül, így a thumbnail (gyenge hálózat) és a nagy kép egyszerre válik szürkévé. --- */.u-szurke-kep .header_banner_background { filter: grayscale(1);}/* --- CTA sáv (u-cta-sav): a szövegoszlop teljes szélességű, a cím mobil töréspont felett 50%-on tartja a sorhosszt, a leírás 75%. Az igazítást a szekció textPosition: center adja, de a max-width-es blokkokat margin-inline: auto húzza középre — az align-items csak az oszlopra hat. --- */.u-cta-sav .header_banner_content > [class*="col-"] { width: 100%; max-width: 100%;}.u-cta-sav .header_banner_title { max-width: 100%; margin-inline: auto;}@media (min-width: 768px) { .u-cta-sav .header_banner_title { max-width: 50%; }}.u-cta-sav .header_banner_text { max-width: 75%; margin-inline: auto;}/* a sáv gombjai a menü-töréspont alatt középre igazodnak (a téma textPosition: center csak a szövegoszlopot igazítja) */@media (max-width: 991.98px) { .u-cta-sav .header_banner_buttons { justify-content: center; }}/* --- Banner gombok: a méretezés és a hover a globális GOMBOK blokkból jön, itt csak a sávon belüli térközük és a világos ghost másodlagos gomb van. --- */.section_banner .header_banner_buttons { gap: 1rem !important; margin-top: 2.375rem !important;}/* A másodlagos gomb a látványterven világos ghost (nem márkaszínű körvonal), mert fényképen ül. A témában a buttonColor egyszerre vonatkozik mindkettőre, ezért marad CSS. */.section_banner .header_banner_buttons .btn-outline-primary { --bs-btn-color: var(--bs-white); --bs-btn-bg: rgba(var(--bs-white-rgb, 255, 255, 255), .06); --bs-btn-border-color: rgba(var(--bs-white-rgb, 255, 255, 255), .4); --bs-btn-hover-color: var(--bs-dark); --bs-btn-hover-bg: var(--bs-white); --bs-btn-hover-border-color: var(--bs-white); --bs-btn-active-color: var(--bs-dark); --bs-btn-active-bg: var(--bs-white); --bs-btn-active-border-color: var(--bs-white);}/* ##### ŰRLAP ##### A látványterv mezője: 1,5px hajszálkeret, 13/15px padding, 15px szöveg fehér alapon, hoverre erősebb keret, fókuszban márkaszínű keret + halvány gyűrű. A <main>-re szűkítve, hogy a fejléc keresője és a lábléc űrlapjai ne örököljék. A kötelezőség jelölése a látványterven márkaszín, nem piros. */main .form-label { font-size: .84375rem !important; font-weight: 600; color: var(--bs-emphasis-color); margin-bottom: .5rem; letter-spacing: .01em;}main .form-control,main .form-select { padding: .8125rem .9375rem; font-size: .9375rem; color: var(--bs-emphasis-color); background-color: var(--bs-white); border: 1.5px solid var(--bs-border-color); border-radius: var(--bs-border-radius); transition: border-color .2s ease, box-shadow .2s ease;}main .form-control::placeholder { color: color-mix(in srgb, var(--bs-body-color) 60%, var(--bs-light)); opacity: 1;}main .form-control:hover,main .form-select:hover { border-color: color-mix(in srgb, var(--bs-body-color) 60%, var(--bs-light));}/* fókusz: márkaszínű keret és a sémából jövő halvány gyűrű. A böngésző saját sötét körvonala kikapcsolva, és a háttér fehér marad — a Bootstrap alapból a body háttérszínre váltja fókuszban. */main .form-control:focus,main .form-select:focus,main .form-control:focus-visible,main .form-select:focus-visible { outline: none !important; background-color: var(--bs-white) !important; border-color: var(--bs-primary) !important;}main textarea.form-control { min-height: 8.125rem; resize: vertical;}/* jelölőnégyzet: 18px, márkaszínű pipa */main .form-check-input { width: 1.125rem; height: 1.125rem; margin-top: .125rem; background-color: var(--bs-white); border: 1.5px solid var(--bs-border-color);}main .form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary);}main .form-check-label { font-size: .84375rem;}/* mezők közötti térköz: a téma mb-3 (16px) helyett 20px */main .section_form .row > [class*="col-"] { margin-bottom: 1.25rem !important;}/* ##### „AMIBEN HISZÜNK” SZEKCIÓ (u-amiben-hiszunk) ##### A szekció sávszíne beállításból sötét (sectionColor: dark), de a feltöltött egyedi háttérkép (sectionBg: unique) teljesen elfedi. A látványterven — mint a CTA sávon és az Anyaghasználat banneren — a kép csak textúra: szürke- árnyalatos és alacsony fedésű, alatta a sötét sáv. A banneres megoldás (fólia-div) itt nincs, ezért a fedés magukon a képen áll. */.u-amiben-hiszunk .unique_bg_image { filter: grayscale(1); opacity: .15;}/* ##### KÁRTYÁK (services-box) — ÁLTALÁNOS ##### A keret / háttér / árnyék / kép-kihúzás / gombigazítás a doboz-kategória beállításaiból jön — ide csak az kerül, amit a rendszer nem tud. Ikonchip színei: a téma bg-primary-subtle + text-primary párt használ, tehát bézs lapon bézs glyph. A látványterven (Kavics paletta) a chip ellenben SEMLEGES szürke lap sötét glyph-fel — a bézs márkaszín itt szándékosan nem jelenik meg. A séma semleges tokenjeiből származtatva. *//* kártya háttere: teljesen fehér. A téma a séma világos tokenjét használja, ami bézs felé húz — itt szándékosan fix #fff. Csak azokra a kártyákra hat, ahol a kategória beállítása szerint van háttér (a háttér nélküli kártyákon a téma bg-transparent osztálya ül). *//* --- Hover: minden hátteres kártya 6px-et emelkedik (a háttér nélküli, csupasz ikonos kártyák nem — azokon nincs mit megemelni). A képes kártyákon ehhez jön a kép lassabb 5%-os zoomja. Egyedi osztály nélkül, a tartalomra szűrve. */main .service_box .card_item:not(.bg-transparent) { transition: transform .28s ease, box-shadow .28s ease;}main .service_box .card_item:not(.bg-transparent):hover { transform: translateY(-6px);}main .service_box .card-image img { transition: transform .5s ease;}main .service_box .card_item:has(.card-image):hover .card-image img { transform: scale(1.05);}/* felsorolás a kártyán: pont helyett pipa (mint a kép-szöveg dobozokban) */main .service_box .card-text ul { list-style: none; padding-left: 0; display: grid; gap: .4375rem; margin-top: 1rem; margin-bottom: 0;}main .service_box .card-text ul > li { position: relative; padding-left: 1.5rem;}main .service_box .card-text ul > li::before { content: "\f00c"; font: var(--fa-font-solid, normal 900 1em/1 "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome); font-size: .8125em; position: absolute; left: 0; top: .45em; color: color-mix(in srgb, var(--bs-primary) 78%, var(--bs-dark));}main .service_box .card_item:not(.bg-transparent) { background-color: #fff;}main .service_box .card-icon { /* a látványterv chipje #E6E4E0: a világos sávszínnél egy fokkal sötétebb, semleges lap. A séma sötét tokenje meleg tónusú, ezért a keveredett háttér is meleg lett — a hajszálvonal-token (border-color) semlegesebb, abból származtatva pontosan a terv árnyalatát adja. */ background-color: color-mix(in srgb, var(--bs-border-color) 52%, var(--bs-white)) !important; color: var(--bs-primary-text-emphasis) !important;}/* ##### u-inverz: kártyaés tartalomszínek sötét sávon ##### Utility — bármely sötét hátterű szekcióra feltehető. A látványterven sötét háttéren az ikonchip átlátszó fehér lap márkaszínű glyph-fel, a cím fehér, a szöveg és a bevezető tompított fehér. */.u-inverz .service_box .card-icon { background-color: rgba(var(--bs-white-rgb, 255, 255, 255), .08) !important; color: var(--bs-primary) !important;}.u-inverz .service_box .card-title,.u-inverz .service_box .card-title a { color: var(--bs-white);}.u-inverz .service_box .card-text,.u-inverz .editorial_lead { color: rgba(var(--bs-white-rgb, 255, 255, 255), .72);}/* ##### KAPCSOLATI ELÉRHETŐSÉGEK (u-elerhetosegek) ##### A látványterven ez nem kártyarács, hanem egy hajszálvonalakkal osztott sáv: felül a nagy, márkaszínű érték, alatta a kisebb, tompított felirat — vagyis a téma sorrendjének fordítottja. A rács (4 elem, gap 0), a sávszín és a térköz-mentesség beállításból jön. *//* 1. sorrend: az érték (card-text) kerül felül, a felirat (card-title) alá */.u-elerhetosegek .service_box .card-body { display: flex; flex-direction: column; padding: clamp(1.625rem, 2.8vw, 2.125rem);}.u-elerhetosegek .service_box .card-text { order: -1;}/* 2. tipográfia: érték címsor betűtípussal, márkaszínnel; felirat kisebb és tompított, nem félkövér (a téma h6 utility-je adja az eredeti méretet) */.u-elerhetosegek .service_box .card-text { font-family: var(--bs-heading-font-family); font-size: clamp(1.0625rem, 1.75vw, 1.5rem); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; color: var(--bs-primary); overflow-wrap: anywhere; margin-bottom: .75rem !important;}.u-elerhetosegek .service_box .card-text p { margin-bottom: 0;}/* ezen a sávon nincs „külső hivatkozás” nyíl (látványterv) */.u-elerhetosegek .service_box .card-text .external-link { display: none;}/* hoverre nem emelkedik (felülbirálja az általános hátteres-kártya szabályt) */main .u-elerhetosegek .service_box .card_item:hover { transform: none !important;}.u-elerhetosegek .service_box .card-text a { color: inherit; text-decoration: none; transition: color .15s ease;}.u-elerhetosegek .service_box .card-text a:hover { color: var(--bs-primary-text-emphasis);}.u-elerhetosegek .service_box .card-title { font-family: var(--bs-body-font-family); font-size: .90625rem !important; font-weight: 500; line-height: 1.4; letter-spacing: .01em; color: color-mix(in srgb, var(--bs-body-color) 62%, var(--bs-light)); margin-bottom: 0 !important;}.u-elerhetosegek .service_box .card-body > .d-flex.flex-column-reverse { gap: 0 !important;}/* 3. hajszálvonalak: a sáv alján és tetején teljes szélességben, a cellák között osztásként — ugyanúgy, mint a számlálósávon. A sor első cellája bal oldali keretet is kap; asztalon 4, alatta 2 oszlop (a téma xl töréspontja 1200px). */section.u-elerhetosegek { border-top: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color);}.u-elerhetosegek .service_box .card_item { border-radius: 0 !important; border-right: 1px solid var(--bs-border-color) !important;}@media (min-width: 1200px) { .u-elerhetosegek .d-grid > *:nth-child(4n+1) .card_item { border-left: 1px solid var(--bs-border-color) !important; }}@media (max-width: 1199.98px) { .u-elerhetosegek .d-grid > *:nth-child(odd) .card_item { border-left: 1px solid var(--bs-border-color) !important; }}/* slider mód: lásd a számlálósávnál — bal keret minden cellán, jobb nélkül */.u-elerhetosegek .swiper-slide .card_item { border-left: 1px solid var(--bs-border-color) !important; border-right: 0 !important;}.u-elerhetosegek .swiper-slide:last-child .card_item { border-right: 1px solid var(--bs-border-color) !important;}/* ##### VIDEÓ GALÉRIA — lejátszás gomb ##### A „csak kép” képeslap-változat poszterképet mutat, de semmi nem jelzi, hogy videó nyílik rá. A jelölő attribútumot (data-kite-video-inited) a téma JS-e csak a videós kártyákra teszi ki, így a sima képgalériák nem kapnak lejátszás gombot. */main .card_kite[data-kite-video-inited] { cursor: pointer;}main .card_kite[data-kite-video-inited]::after { content: "\f04b"; font: var(--fa-font-solid, normal 900 1em/1 "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome); font-size: 1.75rem; position: absolute; top: 50%; left: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 5.25rem; height: 5.25rem; /* a glyph optikai középpontja jobbra tolódik, ezért a 2px korrekció */ padding-left: 2px; border-radius: 50%; /* a látványterv gombja: áttetsző sötét korong elmosással, fehér glyph-fel; hoverre márkaszínű lesz, a felirat marad fehér */ background: rgba(var(--bs-dark-rgb), .55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); color: var(--bs-white); transform: translate(-50%, -50%); transition: transform .25s ease, background-color .25s ease;}main .card_kite[data-kite-video-inited]:hover::after,main .card_kite[data-kite-video-inited]:focus-visible::after { background: var(--bs-primary); transform: translate(-50%, -50%) scale(1.06);}/* a fancybox lightboxban a beágyazott videó mögött fehér lap ül (a téma .f-html alapértelmezett háttere) — a videó saját keret nélkül jobb */.fancybox__slide .gallery_image_embed_container,.fancybox__slide .f-html { background: transparent; padding: 0;}/* ##### TÉRKÉP (u-terkep) ##### A beágyazott térkép alaphelyzetben szürkeárnyalatos, hoverre visszakapja a színét. Csak erre a szekcióra szűkítve — a YouTube és egyéb beágyazások így nem örökölik. A záró <p> alsó margója és az iframe inline-tört sora adta a köztük lévő rést, ezért block megjelenítés + nulla margó. */.u-terkep iframe { display: block; filter: grayscale(1); transition: filter .15s ease;}.u-terkep iframe:hover { filter: grayscale(0);}.u-terkep .content p:last-child { margin-bottom: 0;}/* ##### LÁBLÉC ##### A sáv háttere beállításból jön (Lábléc → Alap háttérszín = dark), itt csak a tipográfia, az ikonok és a social gombok formázása. A fehér-alfa értékek sötét lábléc-sávot feltételeznek. *//* a lábléc szövegblokkjának elérhetőség-linkjein nincs „külső hivatkozás” nyíl (a copyright sáv „Készítette” linkjén szándékosan marad) */#footer-menu .small .external-link { display: none;}/* szövegblokk: leírás + elérhetőségek */#footer-menu .small { font-size: .90625rem; line-height: 1.7; color: rgba(var(--bs-white-rgb, 255, 255, 255), .72);}#footer-menu .small p { max-width: 42ch; margin-bottom: 0;}#footer-menu .small a { color: rgba(var(--bs-white-rgb, 255, 255, 255), .72); transition: color .2s ease;}#footer-menu .small a:hover { color: var(--bs-white);}/* az elérhetőség-bekezdés: <br>-rel tördelt sorok, ezért a sortáv adja a sorok közti térközt (a látványterven 10px) */#footer-menu .small p:has(> i) { margin-top: .75rem; line-height: 2.1;}#footer-menu .small p > i { width: 1rem; margin-right: .6875rem; font-size: 1rem; text-align: center; color: var(--bs-primary);}/* social ikonok: hajszálkeretes négyzet, hoverre márkaszín */#footer-menu .social_wrapper { gap: .625rem !important; margin-top: .5rem;}#footer-menu .social_wrapper .social.btn { --bs-btn-color: rgba(var(--bs-white-rgb, 255, 255, 255), .72); --bs-btn-bg: transparent; --bs-btn-border-color: rgba(var(--bs-white-rgb, 255, 255, 255), .16); --bs-btn-hover-color: var(--bs-dark); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-active-color: var(--bs-dark); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); display: inline-flex; align-items: center; justify-content: center; width: 2.375rem; height: 2.375rem; padding: 0 !important;}#footer-menu .social_wrapper .social.btn i { font-size: 1rem;}/* menüoszlopok */#footer-menu nav .navbar-nav { gap: .5625rem;}#footer-menu nav .nav-link { padding: 0; font-size: .90625rem; line-height: 1.5; color: rgba(var(--bs-white-rgb, 255, 255, 255), .72);}/* elválasztó hajszálvonal */#footer-menu hr { border-color: rgba(var(--bs-white-rgb, 255, 255, 255), .12); opacity: 1;}/* Demján Sándor Program sáv (kötelező tartalmi elem): a felirat és a logo-feliratok a lábléc szövegszínét veszik fel, a porté (clip-path-os csoport) érintetlen */#footer-menu .container-xxl > p.text-center { color: rgba(var(--bs-white-rgb, 255, 255, 255), .72);}#footer-menu .container-xxl > .row:last-child svg { opacity: .72;}/* a porté sötét (navy) felületei a lábléc sávszínét veszik fel, hogy a logo ne üljen idégenként a sávon; a fehér részek maradnak fehérek */#footer-menu .container-xxl > .row:last-child svg > g > g[clip-path] > path[fill]:not([fill="#fff"]):not([fill="none"]),#footer-menu .container-xxl > .row:last-child svg > g > g[clip-path] > polygon[fill]:not([fill="#fff"]):not([fill="none"]) { fill: var(--bs-footer-bg, var(--bs-dark));}/* copyright sáv */#footer-copyright { font-size: .8125rem; color: rgba(var(--bs-white-rgb, 255, 255, 255), .72);}#footer-copyright a:not(.btn) { color: rgba(var(--bs-white-rgb, 255, 255, 255), .72);}/* a „külső hivatkozás” nyíl a link színét követi, nem marad márkaszínű */#footer-copyright a:not(.btn) .external-link { color: inherit !important;}