:root, html, body {color-scheme: light !important;}:root {--bs-primary: rgb(0, 135, 129);--bs-secondary: rgb(17, 24, 39);--bs-tertiary: rgb(17, 24, 39);--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(249, 250, 251);--bs-dark: rgb(3, 7, 18);--bs-white: rgb(255, 255, 255);--bs-black: rgb(0, 0, 0);--bs-emphasis-color: rgb(3, 7, 18);--bs-emphasis-color-rgb: 3, 7, 18;--bs-border-color: rgba(217, 217, 217, 1);--bs-primary-rgb: 0, 135, 129;--bs-secondary-rgb: 17, 24, 39;--bs-tertiary-rgb: 17, 24, 39;--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: 249, 250, 251;--bs-dark-rgb: 3, 7, 18;--bs-white-rgb: 255, 255, 255;--bs-black-rgb: 0, 0, 0;--bs-primary-bg: rgb(236, 248, 247);--bs-secondary-bg: rgb(236, 248, 247);--bs-tertiary-bg: rgba(222, 226, 230, 0.5);--bs-primary-bg-rgb: 236, 248, 247;--bs-secondary-bg-rgb: 236, 248, 247;--bs-tertiary-bg-rgb: 222, 226, 230;--bs-primary-color: rgba(0, 135, 129, .75);--bs-secondary-color: rgba(17, 24, 39, .75);--bs-tertiary-color: rgba(17, 24, 39, .75);--bs-link-color: rgb(0, 135, 129);--bs-link-color-rgb: 0, 135, 129;--bs-link-hover-color-rgb: 0, 115, 110;--bs-link-hover-color: rgba(0, 115, 110, 1);--bs-body-color: rgb(55, 65, 81);--bs-body-color-rgb: 55, 65, 81;--bs-body-bg: rgb(255, 255, 255);--bs-body-bg-rgb: 255, 255, 255;--bs-primary-text-emphasis: rgba(0, 81, 77, 1);--bs-secondary-text-emphasis: rgba(10, 14, 23, 1);--bs-tertiary-text-emphasis: rgba(10, 14, 23, 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(236, 248, 247);--bs-secondary-bg-subtle: rgb(236, 248, 247);--bs-tertiary-bg-subtle: rgba(222, 226, 230, 0.5);--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(189, 198, 198, 1);--bs-secondary-border-subtle: rgba(189, 198, 198, 1);--bs-tertiary-border-subtle: rgba(178, 181, 184, 0.5);--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(3, 7, 18, 0.1);--bs-box-shadow-sm: 0 .125rem .25rem rgba(3, 7, 18, 0.1);--bs-box-shadow-lg: 0 1rem 3rem rgba(3, 7, 18, 0.1);--bs-box-shadow-inset: inset 0 1px 2px rgba(3, 7, 18, 0.1);--bs-body-font-family: "DM Sans 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: "Jost", 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: 1200px;--bs-header-logo-height: 52%;--bs-on-primary-text: rgb(255, 255, 255);--bs-on-secondary-text: rgb(0, 135, 129);--bs-on-tertiary-text: rgb(226, 232, 240);--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(3, 7, 18, 0.1);--bs-shadow-rgb: 3, 7, 18;}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(0, 135, 129);}.swiper-pagination, .swiper-pagination-bullet {--swiper-pagination-color: rgb(0, 135, 129);}.btn-close {--bs-btn-close-focus-shadow: 0 0 0 .25rem rgba(3, 7, 18, 0.1);}.btn-primary {--bs-btn-color: rgb(255, 255, 255);--bs-btn-bg: rgb(0, 135, 129);--bs-btn-border-color: rgb(0, 135, 129);--bs-btn-hover-color: rgb(255, 255, 255);--bs-btn-hover-bg: rgba(38, 153, 148, 1);--bs-btn-hover-border-color: rgb(0, 135, 129);--bs-btn-focus-shadow-rgb: 3, 7, 18;--bs-btn-active-color: rgb(255, 255, 255);--bs-btn-active-bg: rgba(51, 159, 154, 1);--bs-btn-active-border-color: rgba(51, 159, 154, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(3, 7, 18, 0.1);--bs-btn-disabled-color: rgb(255, 255, 255);--bs-btn-disabled-bg: rgba(77, 171, 167, 1);--bs-btn-disabled-border-color: rgba(77, 171, 167, 1);}.btn-primary-subtle {--bs-btn-color: rgb(255, 255, 255);--bs-btn-bg: rgb(236, 248, 247);--bs-btn-border-color: rgb(0, 135, 129);--bs-btn-hover-color: rgb(255, 255, 255);--bs-btn-hover-bg: rgba(38, 153, 148, 1);--bs-btn-hover-border-color: rgb(0, 135, 129);--bs-btn-focus-shadow-rgb: 3, 7, 18;--bs-btn-active-color: rgb(255, 255, 255);--bs-btn-active-bg: rgba(51, 159, 154, 1);--bs-btn-active-border-color: rgba(51, 159, 154, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(3, 7, 18, 0.1);--bs-btn-disabled-color: rgb(255, 255, 255);--bs-btn-disabled-bg: rgba(77, 171, 167, 1);--bs-btn-disabled-border-color: rgba(77, 171, 167, 1);}.btn-outline-primary-subtle {--bs-btn-color: rgb(236, 248, 247);--bs-btn-border-color: rgb(236, 248, 247);--bs-btn-hover-color: rgb(255, 255, 255);--bs-btn-hover-bg: rgba(239, 249, 248, 1);--bs-btn-hover-border-color: rgb(236, 248, 247);--bs-btn-focus-shadow-rgb: 3, 7, 18;--bs-btn-active-color: rgb(255, 255, 255);--bs-btn-active-bg: rgba(51, 159, 154, 1);--bs-btn-active-border-color: rgba(51, 159, 154, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(3, 7, 18, 0.1);--bs-btn-disabled-color: rgb(255, 255, 255);--bs-btn-disabled-bg: rgba(77, 171, 167, 1);--bs-btn-disabled-border-color: rgba(77, 171, 167, 1);}.btn-secondary {--bs-btn-color: rgb(0, 135, 129);--bs-btn-bg: rgb(17, 24, 39);--bs-btn-border-color: rgb(17, 24, 39);--bs-btn-hover-color: rgb(0, 135, 129);--bs-btn-hover-bg: rgba(53, 59, 71, 1);--bs-btn-hover-border-color: rgb(17, 24, 39);--bs-btn-focus-shadow-rgb: 3, 7, 18;--bs-btn-active-color: rgb(0, 135, 129);--bs-btn-active-bg: rgba(65, 70, 82, 1);--bs-btn-active-border-color: rgba(65, 70, 82, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(3, 7, 18, 0.1);--bs-btn-disabled-color: rgb(0, 135, 129);--bs-btn-disabled-bg: rgba(88, 93, 104, 1);--bs-btn-disabled-border-color: rgba(88, 93, 104, 1);}.btn-tertiary {--bs-btn-color: rgb(226, 232, 240);--bs-btn-bg: rgb(17, 24, 39);--bs-btn-border-color: rgb(17, 24, 39);--bs-btn-hover-color: rgb(226, 232, 240);--bs-btn-hover-bg: rgba(53, 59, 71, 1);--bs-btn-hover-border-color: rgb(17, 24, 39);--bs-btn-focus-shadow-rgb: 3, 7, 18;--bs-btn-active-color: rgb(226, 232, 240);--bs-btn-active-bg: rgba(65, 70, 82, 1);--bs-btn-active-border-color: rgba(65, 70, 82, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(3, 7, 18, 0.1);--bs-btn-disabled-color: rgb(226, 232, 240);--bs-btn-disabled-bg: rgba(88, 93, 104, 1);--bs-btn-disabled-border-color: rgba(88, 93, 104, 1);}.btn-secondary-subtle {--bs-btn-color: rgb(0, 135, 129);--bs-btn-bg: rgb(236, 248, 247);--bs-btn-border-color: rgb(17, 24, 39);--bs-btn-hover-color: rgb(0, 135, 129);--bs-btn-hover-bg: rgba(53, 59, 71, 1);--bs-btn-hover-border-color: rgb(17, 24, 39);--bs-btn-focus-shadow-rgb: 3, 7, 18;--bs-btn-active-color: rgb(0, 135, 129);--bs-btn-active-bg: rgba(65, 70, 82, 1);--bs-btn-active-border-color: rgba(65, 70, 82, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(3, 7, 18, 0.1);--bs-btn-disabled-color: rgb(0, 135, 129);--bs-btn-disabled-bg: rgba(88, 93, 104, 1);--bs-btn-disabled-border-color: rgba(88, 93, 104, 1);}.btn-tertiary-subtle {--bs-btn-color: rgb(226, 232, 240);--bs-btn-bg: rgba(222, 226, 230, 0.5);--bs-btn-border-color: rgb(17, 24, 39);--bs-btn-hover-color: rgb(226, 232, 240);--bs-btn-hover-bg: rgba(53, 59, 71, 1);--bs-btn-hover-border-color: rgb(17, 24, 39);--bs-btn-focus-shadow-rgb: 3, 7, 18;--bs-btn-active-color: rgb(226, 232, 240);--bs-btn-active-bg: rgba(65, 70, 82, 1);--bs-btn-active-border-color: rgba(65, 70, 82, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(3, 7, 18, 0.1);--bs-btn-disabled-color: rgb(226, 232, 240);--bs-btn-disabled-bg: rgba(88, 93, 104, 1);--bs-btn-disabled-border-color: rgba(88, 93, 104, 1);}.btn-outline-secondary-subtle {--bs-btn-color: rgb(236, 248, 247);--bs-btn-border-color: rgb(236, 248, 247);--bs-btn-hover-color: rgb(0, 135, 129);--bs-btn-hover-bg: rgba(239, 249, 248, 1);--bs-btn-hover-border-color: rgb(236, 248, 247);--bs-btn-focus-shadow-rgb: 3, 7, 18;--bs-btn-active-color: rgb(0, 135, 129);--bs-btn-active-bg: rgba(65, 70, 82, 1);--bs-btn-active-border-color: rgba(65, 70, 82, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(3, 7, 18, 0.1);--bs-btn-disabled-color: rgb(0, 135, 129);--bs-btn-disabled-bg: rgba(88, 93, 104, 1);--bs-btn-disabled-border-color: rgba(88, 93, 104, 1);}.btn-outline-tertiary-subtle {--bs-btn-color: rgba(222, 226, 230, 0.5);--bs-btn-border-color: rgba(222, 226, 230, 0.5);--bs-btn-hover-color: rgb(226, 232, 240);--bs-btn-hover-bg: rgba(227, 230, 234, 0.5);--bs-btn-hover-border-color: rgba(222, 226, 230, 0.5);--bs-btn-focus-shadow-rgb: 3, 7, 18;--bs-btn-active-color: rgb(226, 232, 240);--bs-btn-active-bg: rgba(65, 70, 82, 1);--bs-btn-active-border-color: rgba(65, 70, 82, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(3, 7, 18, 0.1);--bs-btn-disabled-color: rgb(226, 232, 240);--bs-btn-disabled-bg: rgba(88, 93, 104, 1);--bs-btn-disabled-border-color: rgba(88, 93, 104, 1);}.btn-light {--bs-btn-color: rgb(3, 7, 18);--bs-btn-bg: rgb(249, 250, 251);--bs-btn-border-color: rgb(249, 250, 251);--bs-btn-hover-color: rgba(41, 44, 54, 1);--bs-btn-hover-bg: rgba(237, 237, 238, 1);--bs-btn-hover-border-color: rgba(237, 237, 238, 1);--bs-btn-focus-shadow-rgb: 3, 7, 18;--bs-btn-active-color: rgba(41, 44, 54, 1);--bs-btn-active-bg: rgba(224, 225, 226, 1);--bs-btn-active-border-color: rgba(224, 225, 226, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(3, 7, 18, 0.1);--bs-btn-disabled-color: rgba(41, 44, 54, 1);--bs-btn-disabled-bg: rgba(199, 200, 201, 1);--bs-btn-disabled-border-color: rgba(199, 200, 201, 1);}.btn-dark {--bs-btn-color: rgb(249, 250, 251);--bs-btn-bg: rgb(3, 7, 18);--bs-btn-border-color: rgb(3, 7, 18);--bs-btn-hover-color: rgba(250, 251, 252, 1);--bs-btn-hover-bg: rgba(41, 44, 54, 1);--bs-btn-hover-border-color: rgba(41, 44, 54, 1);--bs-btn-focus-shadow-rgb: 3, 7, 18;--bs-btn-active-color: rgba(251, 251, 252, 1);--bs-btn-active-bg: rgba(66, 69, 77, 1);--bs-btn-active-border-color: rgba(66, 69, 77, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(3, 7, 18, 0.1);--bs-btn-disabled-color: rgba(199, 200, 201, 1);--bs-btn-disabled-bg: rgb(3, 7, 18);--bs-btn-disabled-border-color: rgb(3, 7, 18);}.text-bg-primary {color: rgb(255, 255, 255) !important;}.text-primary-subtle {color: rgb(236, 248, 247);}.text-bg-secondary {color: rgb(0, 135, 129) !important;}.text-secondary-subtle {color: rgb(236, 248, 247);}.bg-tertiary {background-color: rgb(17, 24, 39) !important;}.text-bg-tertiary {background-color: rgb(17, 24, 39) !important;color: rgb(226, 232, 240) !important;}.text-tertiary {color: rgb(17, 24, 39) !important;}.text-tertiary-subtle {color: rgba(222, 226, 230, 0.5);}.dropdown-menu {--bs-dropdown-bg: rgb(255, 255, 255);--bs-dropdown-link-active-color: rgb(0, 135, 129);--bs-dropdown-link-hover-color: rgba(38, 153, 148, 1);--bs-dropdown-link-hover-bg: rgb(236, 248, 247);--bs-dropdown-link-color: rgb(3, 7, 18);}.pagination {--bs-pagination-active-bg: rgb(0, 135, 129);--bs-pagination-disabled-bg: inherit;--bs-pagination-disabled-color: inherit;--bs-pagination-active-border-color: rgb(0, 135, 129);--bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(3, 7, 18, 0.1);}.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(38, 153, 148, 1); --bs-nav-link-font-weight: 600;}.nav-pills {--bs-nav-pills-link-active-color: rgb(3, 7, 18);--bs-nav-pills-link-active-bg: rgb(236, 248, 247);}.progress {--bs-progress-bar-bg: rgb(0, 135, 129);}.accordion {--bs-accordion-active-color: rgb(0, 135, 129);}.btn-outline-primary {--bs-btn-color: rgb(0, 135, 129);--bs-btn-border-color: rgb(0, 135, 129);--bs-btn-hover-color: rgb(255, 255, 255);--bs-btn-hover-bg: rgb(0, 135, 129);--bs-btn-hover-border-color: rgb(0, 135, 129);--bs-btn-focus-shadow-rgb: 0, 135, 129;--bs-btn-active-color: rgb(255, 255, 255);--bs-btn-active-bg: rgb(0, 135, 129);--bs-btn-active-border-color: rgb(0, 135, 129);--bs-btn-active-shadow: inset 0 3px 5px rgba(3, 7, 18, 0.1);--bs-btn-disabled-color: rgb(0, 135, 129);--bs-btn-disabled-border-color: rgb(0, 135, 129);}.btn-outline-secondary {--bs-btn-color: rgb(17, 24, 39);--bs-btn-border-color: rgb(17, 24, 39);--bs-btn-hover-color: rgb(255, 255, 255);--bs-btn-hover-bg: rgb(17, 24, 39);--bs-btn-hover-border-color: rgb(17, 24, 39);--bs-btn-focus-shadow-rgb: 17, 24, 39;--bs-btn-active-color: rgb(255, 255, 255);--bs-btn-active-bg: rgb(17, 24, 39);--bs-btn-active-border-color: rgb(17, 24, 39);--bs-btn-active-shadow: inset 0 3px 5px rgba(3, 7, 18, 0.1);--bs-btn-disabled-color: rgb(17, 24, 39);--bs-btn-disabled-border-color: rgb(17, 24, 39);}.btn-outline-tertiary {--bs-btn-color: rgb(17, 24, 39);--bs-btn-border-color: rgb(17, 24, 39);--bs-btn-hover-color: rgb(255, 255, 255);--bs-btn-hover-bg: rgb(17, 24, 39);--bs-btn-hover-border-color: rgb(17, 24, 39);--bs-btn-focus-shadow-rgb: 17, 24, 39;--bs-btn-active-color: rgb(255, 255, 255);--bs-btn-active-bg: rgb(17, 24, 39);--bs-btn-active-border-color: rgb(17, 24, 39);--bs-btn-active-shadow: inset 0 3px 5px rgba(3, 7, 18, 0.1);--bs-btn-disabled-color: rgb(17, 24, 39);--bs-btn-disabled-border-color: rgb(17, 24, 39);}.table-primary {--bs-table-bg:rgb(0, 135, 129);--bs-table-color:rgb(255, 255, 255);}.table-secondary {--bs-table-bg:rgb(17, 24, 39);--bs-table-color:rgb(0, 135, 129);}.table-tertiary {--bs-table-bg:rgb(17, 24, 39);--bs-table-color:rgb(226, 232, 240);}.form-check-input:checked {background-color: rgb(0, 135, 129) ;border-color: rgb(0, 135, 129) ;}.form-control:focus, .form-select:focus {border-color: rgba(128, 195, 192, 1);}.list-group {--bs-list-group-active-bg: rgb(0, 135, 129);--bs-list-group-active-border-color: rgb(0, 135, 129);--bs-list-group-active-color: rgb(255, 255, 255);}.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(55, 65, 81) !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(55, 65, 81) !important; background-color: rgb(249, 250, 251) !important;}.text-bg-dark { color: rgb(255, 255, 255) !important; background-color: rgb(3, 7, 18) !important;}.text-bg-primary-subtle { background-color: rgb(236, 248, 247) !important; color: rgb(55, 65, 81) !important;}.text-bg-secondary-subtle { background-color: rgb(236, 248, 247) !important; color: rgb(55, 65, 81) }.text-bg-tertiary-subtle { background-color: rgba(222, 226, 230, 0.5) !important; color: rgb(55, 65, 81) }.text-bg-body { background-color: rgb(255, 255, 255) !important; color: rgb(55, 65, 81) !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(3, 7, 18, 0.1);--bs-card-title-color: rgb(3, 7, 18);--bs-card-color: rgb(55, 65, 81);--bs-card-border-color: rgba(217, 217, 217, 1);} .card {--bs-card-border-radius: 0.5rem !important;--bs-card-inner-border-radius: 0.5rem !important;}:root { --bs-border-radius: 0.5rem !important; --bs-border-radius-sm: 0.5rem !important; --bs-border-radius-lg: 0.5rem !important; --bs-border-radius-xl: 0.5rem !important; --bs-border-radius-xxl: 0.5rem !important; --bs-border-radius-2xl: 0.5rem !important;} .btn, .btn-sm, .btn-lg { --bs-btn-border-radius: 0.5rem !important; } .dropdown-menu { --bs-dropdown-border-radius: 0.5rem !important; --bs-dropdown-inner-border-radius: 0.5rem !important; } .dropdown { --bs-dropdown-item-border-radius: 0.5rem !important; } .badge { --bs-badge-border-radius: 0.5rem !important; } .img-rounded, .form-check-input[type=checkbox] { border-radius: 0.5rem !important; } .card_kite { --kite-clip-radius: 0.5rem !important; --bs-card-border-radius: 0.5rem !important; } .form-control { border-radius: 0.5rem; } .border-body { border-color: var(--bs-body-bg) !important; }/* ========================================================================== BIMENZIÓ — nyitólap: csak a mockup és a téma-alap közti valós különbségek. Minden szín --bs-* tokenből; a szekció-hátteret/paddingot az admin adja. ========================================================================== *//* ========================================================================== HERO — a mockup szerint: full-bleed kép jobbra, bal oldalon sötét gradiens, a mini-előnyök a gombok ALATT (a téma sorrendje szerint fölöttük lennének). ========================================================================== *//* A mérnök a két oszlop HATÁRÁN átnyúló réteg (a mockupban: left:-16%, height:min(88%,760px), max-width:62% a képoszlopon belül). A képoszlop overflow-hidden, ezért a slide gyökerére tesszük, a 50%-os határhoz mérve. */#hero .divided_slide { position: relative; }/* a mockup 72px-es finom rácsa a sötét oldalon (a képoszlop pozícionált, ezért fölé rajzolódik — a rács csak a szöveg mögött látszik) */#hero .divided_slide::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(var(--bs-white-rgb), 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(var(--bs-white-rgb), 0.05) 1px, transparent 1px); background-size: 72px 72px;}#hero .divided_slide::after { content: ""; position: absolute; z-index: 2; bottom: 0; left: 44%; width: 30%; height: min(88%, 760px); background-image: url("/storage/bimenzio/editor/hero/mernok.webp"); background-repeat: no-repeat; background-position: bottom center; background-size: contain; filter: drop-shadow(0 1.75rem 3.75rem rgba(var(--bs-dark-rgb), 0.5)); pointer-events: none;}/* A képoszlop fölé a mockup 90°-os gradiense, hogy a látványterv bal széle beleérjen a sötét sávba, a jobb széle pedig ne vágjon el élesen. */#hero .divided_slide > div:first-child::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient( 90deg, rgba(var(--bs-dark-rgb), 0.55) 0%, rgba(var(--bs-dark-rgb), 0.08) 45%, rgba(var(--bs-dark-rgb), 0.35) 100% );}@media (min-width: 992px) { /* a mockup képoszlopa min-height: 520px */ #hero .divided_slide > div:first-child { min-height: 32.5rem; }}/* A téma a szövegblokkot már a konténer bal széléhez igazítja (660px-es belső box), ezért CSAK a kép felé eső oldalon kell hézag — a mockup rács-gapje: clamp(32px, 4vw, 64px). */@media (min-width: 992px) { #hero .header_banner_content > .container-fluid { padding-right: clamp(2rem, 4vw, 4rem) !important; }}@media (max-width: 991.98px) { /* mobilon nincs oszlophatár, amin átnyúlhatna — a képoszlop kap magasságot */ #hero .divided_slide::after { display: none; } #hero .divided_slide > div:first-child { min-height: 52vw; }}/* A mini-előnyök a gombok ALÁ kerülnek — a téma sorrendje szerint fölöttük lennének. display:contents-szel a comment belső elemei a szövegoszlop flex-elemei lesznek, így order-rel rendezhetők. */#hero .header_banner_text { display: contents;}#hero .editorial_eyebrow_wrapper { order: 1; }#hero .header_banner_title { order: 2; }#hero .header_banner_text > p:nth-of-type(1) { order: 3; }#hero .header_banner_text > p:nth-of-type(2) { order: 4; }#hero .header_banner_buttons { order: 5; }#hero .header_banner_text > ul { order: 6; }/* display:contents megszünteti az oszlop szélességét — visszaadjuk elemenként */#hero .header_banner_content > .container-fluid > *,#hero .header_banner_text > * { max-width: 30rem;}/* a mini-előnyök hármas sora szélesebb lehet, mint a folyószöveg */#hero .header_banner_text > ul { max-width: 34rem; }#hero .editorial_eyebrow { text-transform: uppercase; letter-spacing: 0.18em; font-weight: 700; font-size: 0.8125rem;}#hero .header_banner_content > .container-fluid > .header_banner_title { font-size: clamp(2.25rem, 3.6vw, 3.75rem); line-height: 1.03; letter-spacing: -0.02em; max-width: 34rem; margin-bottom: 1.5rem;}/* bevezető bekezdés: a téma fw-bold fs-5-öt ad, a mockup halkabb folyószöveg */#hero .header_banner_text > p:nth-of-type(1) { font-weight: 400; font-size: 1.0625rem; line-height: 1.65; opacity: 0.78; margin-bottom: 1.5rem;}/* a két soros állítás: első sor primary, második fehér */#hero .header_banner_text > p:nth-of-type(2) { font-weight: 600; font-size: 1.25rem; line-height: 1.45; margin-bottom: 0;}#hero .header_banner_text > p:nth-of-type(2) strong,#hero .header_banner_text > p:nth-of-type(2) b { color: var(--bs-primary) !important; font-weight: 600;}/* mini-előnyök: ikon + két soros felirat, egy sorban */#hero .header_banner_text > ul { list-style: none; padding-left: 0; margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: 1rem 1.75rem;}#hero .header_banner_text > ul li { display: flex; align-items: center; gap: 0.625rem; font-size: 0.875rem; font-weight: 500; line-height: 1.35; opacity: 0.9;}#hero .header_banner_text > ul li i { color: var(--bs-primary); font-size: 1rem;}#hero .header_banner_buttons { margin-top: 2rem; }/* a mockupban a második CTA világos, tömör gomb */#hero .header_banner_buttons .btn-outline-primary { background-color: var(--bs-white); border-color: var(--bs-white); color: var(--bs-dark);}/* ========================================================================== SZAKÁGAK — a mockupban a hero alján egy pill-sor, nem kártyarács. ========================================================================== *//* a mockupban a sáv a hero része, felül hajszálvonallal elválasztva */#szakagak { border-top: 1px solid rgba(var(--bs-white-rgb), 0.1);}/* a felirat és a pill-sor EGY sorban, középre igazítva (mockup gap: 10px 28px). A szekció-konténer közvetlen gyermeke a cím és a rács, így flexbe tehető. */#szakagak .container-xxl { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1.75rem;}#szakagak .editorial_title { font-family: var(--bs-body-font-family); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(var(--bs-white-rgb), 0.45); margin: 0 !important;}/* A Box szekció rácsa d-grid + grid-cols-* (NEM Bootstrap .row/.col-*). Tartalomhoz méretezett, tördelő pill-sorra váltjuk (mockup gap: 8px). A display felülírásához !important kell, mert a .d-grid utility az. */#szakagak .container-xxl > .d-grid { display: flex !important; flex-wrap: wrap; gap: 0.5rem; margin: 0; width: auto; flex: 1 1 auto; min-width: 0;}#szakagak .container-xxl > .d-grid > * { flex: 0 0 auto; min-width: 0;}/* A mockup pillje: halvány áttetsző kitöltés + 1px BELSŐ körvonal (box-shadow inset), nem klasszikus border — így nem növeli a méretet. */#szakagak .service_box > div { display: inline-flex; padding: 7px 14px !important; gap: 0.5rem !important; align-items: center; justify-content: flex-start; /* a téma .border-bottom utility-je !important, ezért kell ide is */ border: 0 !important; border-radius: var(--bs-border-radius-pill); background-color: rgba(var(--bs-white-rgb), 0.06); box-shadow: inset 0 0 0 1px rgba(var(--bs-white-rgb), 0.12);}#szakagak .service_box .d-flex { align-items: center !important; gap: 0.5rem !important; flex-grow: 0 !important;}#szakagak .service_box .flex-grow-1 { flex-grow: 0 !important; }/* a pill-ben csak ikon + felirat: a leíró szöveg és az ikoncsempe elmarad */#szakagak .service_box p { display: none; }#szakagak .service_box .d-inline-flex { background-color: transparent !important; padding: 0 !important; width: auto !important; margin-bottom: 0 !important; aspect-ratio: auto;}/* a mockupban az ikon a világosabb teal (accent-300) — a primary tokenből származtatva, hogy színséma-váltást is kövessen */#szakagak .service_box .d-inline-flex i { color: color-mix(in srgb, var(--bs-primary) 55%, var(--bs-white));}#szakagak .service_box h3 { font-family: var(--bs-body-font-family); font-size: 0.75rem !important; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(var(--bs-white-rgb), 0.9); margin: 0 !important; white-space: nowrap;}/* ========================================================================== ELŐNYÖK (USP sáv) — a mockup szerint: csupasz teal ikon + cím egy sorban, alatta a leírás. Nincs ikoncsempe és nincs elválasztó vonal. A téma padding-/border-utility-jei !important-tal jönnek, ezért kell ide is. ========================================================================== */#elonyok .service_box > div { padding: 0 !important; border: 0 !important; align-items: flex-start;}/* ikon és szövegoszlop közötti rés a mockupban 16px (a téma gap-4 = 24px) */#elonyok .service_box .d-flex { gap: 1rem !important; align-items: flex-start !important;}/* csupasz ikon: a téma csempéjét (háttér, arány, padding) leszedjük */#elonyok .service_box .d-inline-flex { background-color: transparent !important; padding: 0 !important; width: auto !important; margin-bottom: 0 !important; aspect-ratio: auto; margin-top: 2px;}#elonyok .service_box .d-inline-flex i { font-size: 22px; color: color-mix(in srgb, var(--bs-primary) 55%, var(--bs-white));}#elonyok .service_box h3 { font-size: 1rem !important; font-weight: 600; line-height: 1.35; color: var(--bs-white); margin: 0 0 0.375rem !important;}#elonyok .service_box p { font-size: 0.8125rem; line-height: 1.5; color: rgba(var(--bs-white-rgb), 0.66); margin: 0;}/* ========================================================================== RÓLUNK — a mockup műszaki rajza NEM a teljes szekció háttere: a viewport jobb széléhez tapadó, min(1100px, 74vw) széles sáv (a designban right: calc(50% - 50vw); width: min(1100px,74vw); overflow:hidden, az SVG pedig xMaxYMid slice = cover + jobbra igazítás). A sectionBg=unique wrappere a teljes szekciót fedi, ezért itt szűkítjük — a start-0/end-0 utility miatt a left-et is vissza kell venni auto-ra, különben a width nem érvényesül. ========================================================================== */#rolunk .unique_bg_image { left: auto !important; right: 0 !important; width: min(1100px, 74vw);}/* Rólunk – a számláló feliratai a mockupban két sorosak, a téma .lc-1 osztálya egy sorra vágja őket. */#rolunk .counter-col .counter-subtitle { -webkit-line-clamp: 2; line-clamp: 2;}/* ========================================================================== SZOLGÁLTATÁSOK — hover: a kártya primary alapra vált, minden tartalom fehérre. A téma bg- és text- utility-jei !important-tal jönnek (így a .bg-primary-subtle ikoncsempéje is), ezért kell ide is. (A korábbi változatban itt csillagos utility-nevek álltak, és a belülük adódó csillag-per karakterpár idő előtt zárta a kommentet — ez némán megölte az utána jövő transition-szabályt.) ========================================================================== */#szolgaltatasok .service_box .card_item { transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;}#szolgaltatasok .service_box .card_item:hover { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important;}#szolgaltatasok .service_box .card_item:hover,#szolgaltatasok .service_box .card_item:hover .card-title,#szolgaltatasok .service_box .card_item:hover .card-title a,#szolgaltatasok .service_box .card_item:hover .card-text { color: var(--bs-white) !important;}/* az ikoncsempéből áttetsző fehér lesz, benne fehér ikon */#szolgaltatasok .service_box .card_item:hover .card-icon { background-color: rgba(var(--bs-white-rgb), 0.16) !important; color: var(--bs-white) !important;}/* a primary gomb a primary alapon eltűnne — fehér alap, primary felirat */#szolgaltatasok .service_box .card_item:hover .btn-primary { background-color: var(--bs-white); border-color: var(--bs-white); color: var(--bs-primary);}/* Kártya-chrome a simple-content stílusra ott, ahol a mockup keretes panelt mutat: a konzultációs árkártyák és a kiegészítő szolgáltatások listája. */#konzultacio .simple-content-box,#kiegeszito-szolgaltatasok .simple-content-box { height: 100%; padding: clamp(1.5rem, 2vw, 2rem); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); background-color: var(--bs-body-bg);}/* Kiegészítő szolgáltatások – a mockup három hasábos pipás listát mutat. */#kiegeszito-szolgaltatasok .simple-content-box ul { columns: 3; column-gap: 2.5rem; list-style: none; padding-left: 0; margin-bottom: 1.5rem;}#kiegeszito-szolgaltatasok .simple-content-box li { break-inside: avoid; margin-bottom: 0.5rem; display: flex; gap: 0.625rem;}#kiegeszito-szolgaltatasok .simple-content-box li .fa-check { color: var(--bs-primary); flex: 0 0 auto; margin-top: 0.35em;}@media (max-width: 991.98px) { #kiegeszito-szolgaltatasok .simple-content-box ul { columns: 2; }}@media (max-width: 575.98px) { #kiegeszito-szolgaltatasok .simple-content-box ul { columns: 1; }}/* ========================================================================== NYELVVÁLASZTÓ — a mockup tone="light", hint-size auto×40px kapcsolója. A gomb színét az admin adja (header.main_menu_button_color = light), de a btn-light kerete a SAJÁT háttérszíne, így a fehér fejlécen nem látszik — erre nincs admin mező, ezért itt csak a keretszín és a magasság. ========================================================================== */#header_navbar .dropdown > .dropdown-toggle.btn { border-color: var(--bs-border-color); min-height: 40px;}/* Fejléc CTA — a KIEGÉSZÍTŐ MENÜ (top_secondary_menu) „Időpontfoglalás” menüpontja primary gombként, a mockup Button variant=primary, size=md, 44px kinézetével. A menüpont ikon-mezőjét szándékosan NEM használjuk: a téma menüsablonja ikon VAGY felirat közül csak az egyiket rendereli (ikon esetén a név csak aria-label lenne), ezért a fa-calendar-check innen, ::before-ból jön. A felirat és a link adminból szerkeszthető. */#header_navbar #menu_container_top_secondary_menu_level_1 > .nav-item > .nav-link { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; padding: 0.5rem 1.25rem; border-radius: var(--bs-border-radius); background-color: var(--bs-primary); color: var(--bs-on-primary-text); font-weight: 600; white-space: nowrap; transition: background-color 0.15s ease-in-out;}#header_navbar #menu_container_top_secondary_menu_level_1 > .nav-item > .nav-link::before { content: "\f274"; /* fa-calendar-check */ font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free"; font-weight: 900; font-size: 0.9375rem; line-height: 1;}#header_navbar #menu_container_top_secondary_menu_level_1 > .nav-item > .nav-link:hover,#header_navbar #menu_container_top_secondary_menu_level_1 > .nav-item > .nav-link:focus-visible { background-color: color-mix(in srgb, var(--bs-primary) 88%, var(--bs-black)); color: var(--bs-on-primary-text);}/* A fejléc jobb szélén a sorrend: … menü, NYELVVÁLASZTÓ, CTA-gomb. A DOM-ban a CTA (a kiegészítő menü ul-je) az .offcanvas-body-ban ül, a nyelvválasztó viszont az .offcanvas-footer-ben — két külön szint, ezért order-rel közvetlenül nem cserélhetők. A body display:contents-szel átadja a gyerekeit a wrapper flex-sorába: ott már mind a három egy szinten van. Csak a menü breakpointja (xl) fölött; mobilon az offcanvas oszlop-elrendezése és a footerben ülő nyelvválasztó változatlan. */@media (min-width: 1200px) { /* a .d-flex utility !important-tal jön, ezért kell ide is */ #header_navbar .offcanvas-body { display: contents !important; } #header_navbar .offcanvas_wrapper { column-gap: 1.5rem; } #header_navbar #menu_container_top_menu_level_1 { order: 1; flex-grow: 1; } #header_navbar .offcanvas-footer { order: 2; } /* a .flex-grow-1 utility !important-tal jön, ezért kell ide is */ #header_navbar #menu_container_top_secondary_menu_level_1 { order: 3; flex-grow: 0 !important; }}/* A CTA-gombbal a fejléc 1320px-en hajszalnál elfogy, és a „Mérnöki konzultáció” két sorba tört. Helyet a konténer-résekből és az utolsó menüpont jóbb paddingjából nyerünk — a betűméret marad a terv 14px-e. */@media (min-width: 1200px) { #header_navbar .container-xxl { gap: 2rem !important; } #header_navbar .navbar-nav .nav-link { white-space: nowrap; } #header_navbar .navbar-nav.container-level-1 > :last-child .nav-link { padding-right: 0; }}/* 1200–1400px között a 7 menüpont + a CTA-gomb + a nyelvválasztó túlfolyt a viewporton (a téma menüpontonként 2×24px paddingot ad). A helyet a menüpontok paddingjából nyerjük; 1400px fölött a container 1600px-re szélesedik, ott nincs rá szükség. */@media (min-width: 1200px) and (max-width: 1399.98px) { #header_navbar .navbar-nav.container-level-1 > .nav-item > .nav-link { padding-inline: 0.5rem; }}/* ========================================================================== FŐMENÜ — az első szintű menüpontok elé halvány szürke nyíl (fa-angle-right). A szín currentColor + opacity, tehát követi a menüsáv adminból állított szövegszínét (sötét fejlécen is jó), nincs beégetett szürke hex. A jobb oldali kiegészítő menü (CTA gomb) külön ul, arra szándékosan nem vonatkozik. Az offcanvas ugyanezt a listát rendereli, tehát mobilon is megjelenik. ========================================================================== */#header_navbar #menu_container_top_menu_level_1 > .nav-item > .nav-link::before { content: "\f105"; /* fa-angle-right */ font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free"; font-weight: 900; font-size: 0.75em; margin-right: 0.125rem; color: currentColor; opacity: 0.35;}/* ========================================================================== FELSŐ SÁV — az e-mail és telefon ikon primary színnel. A sáv háttere (additional_menu_bg) és a gombok adminból jönnek, itt CSAK az ikon kap kiemelést; a felirat marad a text-bg-* szövegszínén. ========================================================================== */.additional-menu .contacts_wrapper .btn > i { color: var(--bs-primary);}/* ========================================================================== FEJLÉC CONTAINEREK — a felső (elérhetőség) sáv és a logót/menüt tartó navbar container szélesebb a téma 1320px-es container-xxl méreténél. A Bootstrap fix 1320px-es szabálya (min-width: 1400px) miatt itt a max-width-et is meg kell adni; az érték egy helyen, a --bs-container-max lokális felülírásában áll. ========================================================================== */@media (min-width: 1400px) { #header_navbar > .container-xxl, .additional-menu > .container-xxl { --bs-container-max: 1600px; max-width: var(--bs-container-max); }}/* ========================================================================== RÓLUNK — a záró jegyzet a mockup szerint kiemelt, primary-subtle hátterű panel, bal oldalon ikonnal. A szöveg és az ikon a blokk „Záró szöveg” mezőjében marad (adminból szerkeszthető), itt csak a panel-chrome van. ========================================================================== */#rolunk .editorial_closing { padding: 1.375rem 1.5rem; background-color: var(--bs-primary-bg-subtle); border-radius: var(--bs-border-radius-lg);}#rolunk .editorial_closing p:last-child { margin-bottom: 0;}/* ikon + tördelő szöveg: a második sor is az ikon mellett marad */#rolunk .editorial_closing small { display: flex; gap: 0.75rem; align-items: flex-start;}#rolunk .editorial_closing small > i { color: var(--bs-primary); font-size: 1.125rem; flex: 0 0 auto;}/* ========================================================================== GYIK — a mockup kétosztatú szekciója: bal oldalon kifutó fotó, jobb oldalon a szöveg és a fehér akkordeon-kártya. A sötét kifutó szín, a fehér kártya háttere és minden szöveg adminból jön (sectionColor + editorial mezők); itt csak a mockup és a téma-alap közti valós különbség van. ========================================================================== *//* a kép a szekció bal széléig kifut (a containerType=none px-5-ét oldjuk). A .px-5 utility !important-tal jön, ezért kell ide is — a jobb oldali szöveg/akkordeon a saját padding-inline-ját lentebb kapja meg. */#gyik.section_columns > .px-5 { padding-inline: 0 !important;}/* a jobb oldali sáv belső térköze — a mockup clamp(80px,10vw,160px) / clamp(24px,4vw,56px) értékei */#gyik.section_columns .block_column,#gyik.section_columns .block_faq { padding-block: clamp(3rem, 7vw, 10rem);}#gyik.section_columns .block_column { padding-inline: clamp(1.5rem, 3.5vw, 3.5rem);}#gyik.section_columns .block_faq { padding-right: clamp(1.5rem, 3.5vw, 3.5rem);}/* Mobilon a három hasáb egymás alatt van, és a wrapper px-5-ét kinulláztuk a kép kifutatásához — az akkordeonnak ezért itt a bal térköz is kell. (A .block_column padding-inline-ja minden méreten megvan, a kép pedig széltől szélig fut, ahogy kell.) */@media (max-width: 991.98px) { #gyik.section_columns .block_faq { padding-left: clamp(1.5rem, 3.5vw, 3.5rem); }}/* a fehér akkordeon-kártya: a SZÍN a blokk sectionColor-ából (text-bg-white), itt csak a forma. A padding !important, mert a blokk px-0/pt-0/pb-0 utilityket kap. */#gyik.section_columns .block_faq > .text-bg-white { padding: clamp(0.875rem, 1.6vw, 1.375rem) !important; border-radius: var(--bs-border-radius-lg); box-shadow: var(--bs-box-shadow);}/* eyebrow pill (a mockupban a „GYIK” kiemelt címke, nem sima szöveg). A szövegszín az --bs-on-primary-text, hogy az adminból állítható maradjon. */#gyik.section_columns .editorial_eyebrow { display: inline-flex; align-items: center; padding: 0.4375rem 1rem; border-radius: var(--bs-border-radius-pill); background-color: var(--bs-primary); color: var(--bs-on-primary-text) !important; font-size: 0.71875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;}/* a fotó a mockupban élsarkú és teljes magasságú */#gyik.section_columns .kite_box,#gyik.section_columns .card_kite { height: 100%; border-radius: 0;}#gyik.section_columns .card_kite img { height: 100%; object-fit: cover;}/* A kép a HASÁB TELJES magasságát kitölti (cover kivágással), nem a doboz fix 4:3 arányát veszi fel. Az oszlopot a row align-items:stretch már teljes magasságra húzza, de a 100% lánca a belső wrappereknél megszakad: .z-1 → .z-low → .d-grid → .h-auto (ez utóbbi utility, !important-tal), végül a .card_kite .ratio-4x3 ::before padding-top-ja adja a fix arányt. Csak lg-től: mobilon a hasábok egymás alatt vannak, ott a 4:3 a helyes. */@media (min-width: 992px) { #gyik.section_columns .block_box-category > .position-relative, #gyik.section_columns .block_box-category > .position-relative > .position-relative, #gyik.section_columns .block_box-category .d-grid > .h-auto { height: 100% !important; } #gyik.section_columns .block_box-category .d-grid { height: 100%; /* egyetlen elemű rács: a sor húzza ki a teljes magasságot */ grid-template-rows: 1fr; } /* a fix képarányt adó pszeudo-elem kiiktatása */ #gyik.section_columns .card_kite.ratio::before { content: none; }}/* a mockup a címet kiegyensúlyozott sorokra tördeli */#gyik.section_columns .editorial_title { text-wrap: balance;}#gyik.section_columns .editorial_lead { text-wrap: pretty;}/* ========================================================================== IDŐPONTFOGLALÁS (#foglalas) — sötét, látványos foglalási naptár. A sötét alapot az ADMIN adja (a szekció sectionColor: dark), itt a naptár- és űrlap-chrome van. Kiemelés mindenhol a --bs-primary tokenből. FONTOS: a napgombok színét a naptár ADMIN beállítása adja (color_available / color_unavailable → btn-success / btn-danger), és a JS kiválasztáskor btn-{colorInProgress}-re CSERÉLI az osztályt. Ezért nem a btn-* osztályokra írunk, hanem a Bootstrap gomb-változóit (--bs-btn-*) állítjuk a stabil állapot-horgokon: .appointment-day-bookable, :disabled, .appointment-day-selected. A keretet viszont a .border / .border-dark UTILITY adja !important-tal, ezért a border-color-t külön, szintén !important-tal kell felülvenni. ========================================================================== *//* lg alatt a két hasáb egymás alá kerül (a téma flex-column-reverse-e miatt a naptár kerül előre) — a .row-nak nincs y-guttere, ezért a cím rátapadna */@media (max-width: 991.98px) { #foglalas .appointment-booking { row-gap: 2.5rem; }}/* --- bal hasáb: az űrlap kártya-chrome nélkül, a szekció sötét alapján --- */#foglalas .card { background-color: transparent; border: 0; /* a téma kártya-árnyéka világos háttérre van tervezve — sötéten szennyes sáv */ box-shadow: none;}#foglalas .card-body { padding: 0;}/* A címsorok színe a --bs-heading-color-ból jön, ami a VILÁGOS oldalra beállított sötétszürke (rgb(55,65,81)) — a sötét szekcióban alig látszik. A text-bg-dark csak a szövegszínt állítja, a heading-color-t nem írja felül. */#foglalas h2,#foglalas h3,#foglalas h4 { color: var(--bs-white);}#foglalas .appointment-booking-title { color: var(--bs-white); font-size: clamp(2.25rem, 3.4vw, 3.25rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 1.25rem;}#foglalas .appointment-selected-date-label-wrapper,#foglalas .appointment-booking .text-muted { color: rgba(var(--bs-white-rgb), 0.6) !important;}#foglalas .appointment-selected-date-label { color: var(--bs-primary);}#foglalas .form-label { color: rgba(var(--bs-white-rgb), 0.85); margin-bottom: 0.375rem;}#foglalas .form-control,#foglalas .form-select { background-color: rgba(var(--bs-white-rgb), 0.035); border: 1px solid rgba(var(--bs-white-rgb), 0.14); border-radius: var(--bs-border-radius); color: var(--bs-white); min-height: 3rem;}#foglalas .form-control::placeholder { color: rgba(var(--bs-white-rgb), 0.35);}#foglalas .form-control:focus,#foglalas .form-select:focus { background-color: rgba(var(--bs-white-rgb), 0.06); border-color: var(--bs-primary); box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.18); color: var(--bs-white);}/* a natív legördülő listája a rendszer színeit veszi — sötétre kell venni */#foglalas .form-select option { background-color: var(--bs-dark); color: var(--bs-white);}#foglalas .form-check-input { background-color: rgba(var(--bs-white-rgb), 0.06); border-color: rgba(var(--bs-white-rgb), 0.3);}#foglalas .form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary);}#foglalas .appointment-submit { min-height: 3.25rem; font-weight: 600;}/* --- naptár-fejléc: hónapnév, MA, léptetők --- */#foglalas .appointment-calendar-month h3 { font-size: clamp(1.125rem, 1.6vw, 1.5rem); font-weight: 500;}#foglalas .appointment-calendar-today { --bs-btn-color: rgba(var(--bs-white-rgb), 0.7); --bs-btn-border-color: rgba(var(--bs-white-rgb), 0.2); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-bg: rgba(var(--bs-white-rgb), 0.08); --bs-btn-hover-border-color: rgba(var(--bs-white-rgb), 0.35); font-family: var(--bs-font-monospace); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.6875rem;}#foglalas .appointment-calendar-prev,#foglalas .appointment-calendar-next { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: rgba(var(--bs-primary-rgb), 0.5); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-hover-color: var(--bs-on-primary-text); width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center;}/* --- a naptár rácsa --- *//* NINCS RÁCS-VONAL. A világos vonalak onnan jöttek, hogy a .table-bordered a vízszintes határt a TR-ekre teszi, a border-color-t pedig a table elemről örökli — az meg a .border/.border-3 utility-ből a világos témára szánt --bs-border-color-t (#d9d9d9) kapja. Ezért nem elég a td/th-ra írni: a teljes `> :not(caption) > *` láncot kell nullázni, a külső keretekkel (.table-responsive, table) együtt. A strukturát a napgombok adják. */#foglalas .appointment-calendar-grid .table-responsive { border-width: 0 !important; border-radius: var(--bs-border-radius-xl);}#foglalas .appointment-calendar-grid table.table,#foglalas .appointment-calendar-grid table.table > :not(caption) > *,#foglalas .appointment-calendar-grid table.table > :not(caption) > * > * { border-width: 0 !important;}#foglalas .appointment-calendar-grid table.table { --bs-table-bg: transparent; /* a .table a --bs-table-color-t használja, ami a világos oldalra szánt body-szín — sötét szekcióban ettől olvashatatlan lenne a táblázat */ --bs-table-color: var(--bs-white); margin-bottom: 0;}#foglalas .appointment-calendar-grid thead th { background-color: transparent; color: rgba(var(--bs-white-rgb), 0.45) !important; font-family: var(--bs-font-monospace); font-size: 0.6875rem; font-weight: 500 !important; letter-spacing: 0.22em; text-transform: uppercase; padding-block: 0.875rem !important;}#foglalas .appointment-calendar-grid tbody td { height: 5.25rem; padding: 0.375rem !important;}/* mobilon a cella 45px széles — a 84px-es magasság ott aránytalan lenne */@media (max-width: 575.98px) { #foglalas .appointment-calendar-grid tbody td { height: 3.5rem; padding: 0.25rem !important; } #foglalas .appointment-calendar-grid thead th { letter-spacing: 0.1em; padding-block: 0.625rem !important; } #foglalas .appointment-day-btn { font-size: 0.875rem; padding-inline: 0; }}/* --- napgombok --- */#foglalas .appointment-day-btn { height: 100%; border-radius: var(--bs-border-radius); font-size: 1rem; font-weight: 600; box-shadow: none;}#foglalas .appointment-day-btn.appointment-day-bookable { --bs-btn-bg: rgba(var(--bs-primary-rgb), 0.14); --bs-btn-color: color-mix(in srgb, var(--bs-primary) 55%, var(--bs-white)); --bs-btn-border-color: rgba(var(--bs-primary-rgb), 0.35); --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), 0.3); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-border-color: var(--bs-primary); border-color: rgba(var(--bs-primary-rgb), 0.35) !important;}/* nem foglalható nap: csak halvány szám, háttér és keret nélkül */#foglalas .appointment-day-btn:disabled { --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: transparent; --bs-btn-disabled-color: rgba(var(--bs-white-rgb), 0.28); --bs-btn-disabled-opacity: 1; border-color: transparent !important; font-weight: 400;}/* a mai nap: a sablon .border-dark-ot ad, ami sötét alapon eltűnik */#foglalas .appointment-day-btn[aria-current="date"] { border-color: rgba(var(--bs-white-rgb), 0.75) !important;}/* a kiválasztott nap (osztályt a JS adja): tömör primary */#foglalas .appointment-day-btn.appointment-day-selected,#foglalas .appointment-day-btn.selected-range { --bs-btn-bg: var(--bs-primary); --bs-btn-color: var(--bs-on-primary-text); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-color: var(--bs-on-primary-text); --bs-btn-hover-border-color: var(--bs-primary); border-color: var(--bs-primary) !important;}/* --- időpont-sávok (a nap kiválasztása után jelennek meg) --- */#foglalas .appointment-timeslot-btn { --bs-btn-bg: rgba(var(--bs-primary-rgb), 0.14); --bs-btn-color: color-mix(in srgb, var(--bs-primary) 55%, var(--bs-white)); --bs-btn-border-color: rgba(var(--bs-primary-rgb), 0.35); --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), 0.3); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-border-color: var(--bs-primary); border-color: rgba(var(--bs-primary-rgb), 0.35) !important; font-size: 0.875rem; font-weight: 500; padding-block: 0.75rem;}#foglalas .appointment-timeslot-btn:disabled { --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: rgba(var(--bs-white-rgb), 0.1); --bs-btn-disabled-color: rgba(var(--bs-white-rgb), 0.25); --bs-btn-disabled-opacity: 1; border-color: rgba(var(--bs-white-rgb), 0.1) !important;}#foglalas .appointment-timeslot-btn.appointment-timeslot-selected { --bs-btn-bg: var(--bs-primary); --bs-btn-color: var(--bs-on-primary-text); --bs-btn-border-color: var(--bs-primary); border-color: var(--bs-primary) !important;}/* ========================================================================== KAPCSOLAT (nyitólap) — a jobb hasáb két kártyája: fehér elérhetőség-panel és alatta a DARK karrier-CTA („Karrier / Csatlakozzon a csapatunkhoz”). Mindkettő simple-content doboz UGYANABBAN a BoxCategory blokkban, ezért blokk-szintű sectionColor nem tudja őket külön színezni. A karrier-dobozt az különbözteti meg, hogy CSAK neki van gombja (link + felirat mező) — ezért :has(.btn); ha egyszer az elérhetőség-doboz is kap linket, ez a szabály rá is illeszkedne (feltűnő, tehát észrevehető hiba). A `> .container-xxl` prefix a FŐOLDALI szekcióra szűkít: a kapcsolat OLDAL szekciója konténer nélküli, ott .px-5 a közvetlen gyerek. A gomb teljes szélességét NEM CSS adja: a doboz button_align=stretched mezője (adminból) — ne írd át CSS-ből. ========================================================================== */#kapcsolat > .container-xxl .simple-content-box { padding: clamp(1.5rem, 2vw, 2rem); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); background-color: var(--bs-white);}/* rovatcím: kiskapitális, ritíkott (a szín primary marad — azt a téma .text-primary utility-je adja, és a dark panelen is ez a helyes) */#kapcsolat > .container-xxl .simple-content-box_eyebrow { text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; font-size: 0.75rem !important;}/* a cím a mockupban kisebb, mint a téma fs-2-je */#kapcsolat > .container-xxl .simple-content-box_title { font-size: clamp(1.25rem, 1.6vw, 1.5rem) !important;}/* a karrier-CTA: sötét panel, fehér tipó, fehér gomb nyíllal */#kapcsolat > .container-xxl .simple-content-box:has(.btn) { border-color: var(--bs-dark); background-color: var(--bs-dark); color: var(--bs-white);}#kapcsolat > .container-xxl .simple-content-box:has(.btn) .simple-content-box_title { color: var(--bs-white);}#kapcsolat > .container-xxl .simple-content-box:has(.btn) .content { color: rgba(var(--bs-white-rgb), 0.75);}#kapcsolat > .container-xxl .simple-content-box:has(.btn) .btn-primary { background-color: var(--bs-white); border-color: var(--bs-white); color: var(--bs-dark);}#kapcsolat > .container-xxl .simple-content-box:has(.btn) .btn-primary:hover,#kapcsolat > .container-xxl .simple-content-box:has(.btn) .btn-primary:focus-visible { background-color: rgba(var(--bs-white-rgb), 0.88); border-color: rgba(var(--bs-white-rgb), 0.88); color: var(--bs-dark);}/* a mockup gombján jobbra-nyíl van; a téma x-button komponense nem ad ikont */#kapcsolat > .container-xxl .simple-content-box:has(.btn) .btn-primary::after { content: "\f061"; /* fa-arrow-right */ font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free"; font-weight: 900; font-size: 0.875rem; margin-left: 0.5rem;}/* ========================================================================== EGYÜTTMŰKÖDÉS (nyitólap alja) — halvány rács a világos alapon, a fejlécben eyebrow pill + dark CTA (mindkettő adminból), alatta EGY áttetsző fehér panel három hasábbal, közöttük hajszálvonal. A kártyák saját keretét/hátterét adminból kapcsoltuk ki (item_border=false, item_background=false), a résüket a szekció gap=0-ja adja — itt CSAK a panel-chrome, az elválasztók, a középre igazítás és az ikon-kör van. ========================================================================== *//* 72px-es rács a szekció teljes felületén. A tartalom .z-1 wrapperben ül, ezért a z-index nélküli ::before biztosan alatta marad. */#egyuttmukodes::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(var(--bs-dark-rgb), 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(var(--bs-dark-rgb), 0.05) 1px, transparent 1px); background-size: 72px 72px;}/* eyebrow pill — a téma .text-primary/.fs-6 utility-je !important, ezért a színt itt is azzal kell adni (ugyanaz a minta, mint a #gyik-nél) */#egyuttmukodes .editorial_eyebrow { display: inline-flex; align-items: center; padding: 0.4375rem 1rem; border-radius: var(--bs-border-radius-pill); background-color: var(--bs-primary); color: var(--bs-on-primary-text) !important; font-size: 0.71875rem !important; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;}/* a mockup címe nagyobb és két sorra tört — a szöveg adminból jön */#egyuttmukodes .editorial_title { font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; max-width: 32rem; text-wrap: balance;}/* A három kártya EGY panelben: a Box szekció d-grid rácsa kapja a panel-chrome-ot. A fehér áttetsző, hogy a rács átsejlik alatta. */#egyuttmukodes .container-xxl > .d-grid { background-color: rgba(var(--bs-white-rgb), 0.75); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); overflow: hidden;}/* a hasábok közötti hajszálvonal (a rács gap-je 0, tehát a border összeteszi a hasábokat); lg alatt a hasábok egymás alá kerülnek, ott vízszintes */@media (min-width: 992px) { #egyuttmukodes .container-xxl > .d-grid > :not(:first-child) { border-left: 1px solid var(--bs-border-color); }}@media (max-width: 991.98px) { /* A téma sm-től 2 hasábra tördel (grid-cols-sm-2), és ott a 2+1-es rácsban az elválasztó vonalak csak fél szélességben futnának. Egy hasáb alatta: a vonalak végig érnek. */ #egyuttmukodes .container-xxl > .d-grid { grid-template-columns: 1fr !important; } #egyuttmukodes .container-xxl > .d-grid > :not(:first-child) { border-top: 1px solid var(--bs-border-color); }}/* a kártya-tartalom középen, a belső térköz a panelen belül (a keret és a háttér kikapcsolása miatt a téma „plain” kártyát rendel: card-body p-0) */#egyuttmukodes .card_item { padding: clamp(1.75rem, 2.5vw, 2.75rem); text-align: center;}/* ikon: nagy, tömör dark kör, fehér ikonnal. A téma bg-, text- és rounded- utility-jei !important-tal jönnek, ezért kell ide is. (Vigyázat: kommentbe soha ne írj csillag-per karakterpárt — az idő előtt zárja a kommentet, és a maradék szöveg némán megöli az utána jövő szabályt. Így hivatkozz az utility-kre: "bg-" prefix, nem csillaggal.) */#egyuttmukodes .card-icon { width: 5rem; padding: 0 !important; aspect-ratio: 1; border-radius: 50% !important; background-color: var(--bs-dark) !important; color: var(--bs-white) !important; font-size: 1.75rem;}#egyuttmukodes .card-title { font-size: 1.125rem;}/* A leírás halkításához NEM használható a --bs-secondary-color: ebben a témában az értéke rgba(255,255,255,.75), tehát a fehér panelen láthatatlan lett. A szekció saját szövegszínének 75%-a viszont színváltást is követ. */#egyuttmukodes .card-text { color: rgba(var(--bs-body-color-rgb), 0.75);}/* a gomb középen (a téma a button_align mezőből justify-content-* utility-t ad, ami !important — és „középre” opció nincs benne), fehér alap + keret */#egyuttmukodes .card-footer { justify-content: center !important; padding-top: 1.5rem !important;}#egyuttmukodes .card-footer .btn-primary { background-color: var(--bs-white); border-color: var(--bs-border-color); color: var(--bs-dark);}#egyuttmukodes .card-footer .btn-primary:hover,#egyuttmukodes .card-footer .btn-primary:focus-visible { background-color: var(--bs-dark); border-color: var(--bs-dark); color: var(--bs-white);}/* ========================================================================== KAPCSOLAT OLDAL — két hasáb: balra a kifutó kép, jobbra az űrlap. FIGYELEM: a FŐOLDALNAK is van egy „kapcsolat” sectionHtmlId-jű szekciója (űrlap + adatdobozok), tehát a puszta `#kapcsolat` mindkettőre hatna (és hatott is: a főoldali űrlap 700px-re szűkült). A két szekciót a KONTÉNER választja el: a kapcsolat oldali containerType=none, tehát a közvetlen gyereke `.px-5`; a főoldalié `.container-xxl`. Ezért minden szabály `#kapcsolat > .px-5` alatt áll — ne írd át puszta `#kapcsolat`-ra. ========================================================================== *//* A kép a szekció BAL SZÉLÉIG kifut, mint a #gyik-nél. Ehhez a szekció-wrapper px-5-je (utility, ezért !important) ÉS a kép-oszlop gutter-paddingja (row gx-lg-5 → 24px) is elmarad; az űrlap-oszlop megtartja a saját paddingját, tehát a két hasáb között marad térköz. Minden méreten él: mobilon is széltől szélig fut a kép. */#kapcsolat.section_columns > .px-5 { padding-inline: 0 !important;}/* a row gx-lg-5 gutter-e negatív margin-inline-t ad (-24px): a kinullázott oszlop-paddinggal a kép ennyivel kilógna a viewportból, ezért a row marginóját is visszavesszük. Az űrlap-oszlop paddingja marad, tehát a két hasáb között megvan a térköz. */#kapcsolat > .px-5 .row { margin-inline: 0;}#kapcsolat > .px-5 .block_box-instance { padding-inline: 0 !important;}/* Mobilon a két hasáb egymás alatt van, és a wrapper px-5-je elmaradt — a kép ezért széltől szélig fut (ez a cél), de az űrlapnak vissza kell adni a térközt, különben a mezők a gx-3 félgutterére (8px) szűkülnek. */@media (max-width: 991.98px) { #kapcsolat > .px-5 .block_form { padding-inline: clamp(1rem, 4vw, 1.5rem) !important; }}/* a szélig futó képnél a lekerekítés (img-rounded + a téma clip-path-ja) félig levágott sarkokat adna — a #gyik-hez hasonlóan élsarkú *//* A sarok-lekerekítést a portal design-settings adja !IMPORTANT-tal (.card_kite { --kite-clip-radius: .5rem !important } és .img-rounded { border-radius: .5rem !important }), ezért kell ide is — e nélkül a szélig futó kép sarkai félbevágva lekerekítettek maradnak. Ugyanezért nem fogott eddig a #gyik „élsarkú” szabálya sem. */#gyik.section_columns .card_kite,#kapcsolat > .px-5 .card_kite { --kite-clip-radius: 0 !important; border-radius: 0 !important;}/* A kép a hasáb TELJES magasságát kitölti, cover kivágással. Három dolog szólna bele: (a) a doboz képarány-mezője (ma 4:3) — a fix arányt adó .ratio::before kiiktatva; (b) ratio NÉLKÜLI kite-nál a téma a médiaréteget a kép SAJÁT arányára hagyja (.card_kite:not(.ratio) .card_kite_media { height: auto !important }); (c) a kép a doboz Háttérkép (image → _media) VAGY Borítókép (thumbnail → _thumbnail) mezőjéből is jöhet, ezért mindkét réteg szerepel. Az oszlopot a szekció valign=stretch húzza teljes magasságra — a .block_box-instance-re SZÁNDÉKOSAN nem kerül height:100% (feloldás nélküli százalék lenne, és 0-ra kollabálna). Csak lg-től: mobilon a hasábok egymás alatt vannak, ott a doboz képaránya a helyes. */@media (min-width: 992px) { #kapcsolat > .px-5 .block_box-instance > div, #kapcsolat > .px-5 .kite_box, #kapcsolat > .px-5 .card_kite { height: 100%; } #kapcsolat > .px-5 .card_kite.ratio::before { content: none; } #kapcsolat > .px-5 .card_kite .card_kite_media, #kapcsolat > .px-5 .card_kite .card_kite_thumbnail { position: absolute !important; inset: 0 !important; height: 100% !important; } #kapcsolat > .px-5 .card_kite .card_kite_media img, #kapcsolat > .px-5 .card_kite .card_kite_thumbnail img { height: 100% !important; object-fit: cover; } /* az űrlap-hasáb olvasható mérete (a szekció konténer nélküli, tehát az oszlop egyébként a viewport széléig nőne) */ #kapcsolat > .px-5 .block_form > div { max-width: 700px; }}