:root, html, body {color-scheme: light !important;}:root {--bs-primary: #905B00;--bs-secondary: #1E2C41;--bs-tertiary: #B3AE9E;--bs-success: #198754;--bs-info: #17A2B8;--bs-warning: #FFC107;--bs-danger: #DC3545;--bs-light: #F5F1DE;--bs-dark: #2A2724;--bs-white: #ffffff;--bs-black: #000;--bs-emphasis-color: #635F58;--bs-emphasis-color-rgb: 99, 95, 88;--bs-border-color: rgba(212, 213, 209, 1);--bs-primary-rgb: 144, 91, 0;--bs-secondary-rgb: 30, 44, 65;--bs-tertiary-rgb: 179, 174, 158;--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: 245, 241, 222;--bs-dark-rgb: 42, 39, 36;--bs-white-rgb: 255, 255, 255;--bs-black-rgb: 0, 0, 0;--bs-primary-bg: #F6EDDE;--bs-secondary-bg: #F5F1DE;--bs-tertiary-bg: #EFEDE6;--bs-primary-bg-rgb: 246, 237, 222;--bs-secondary-bg-rgb: 245, 241, 222;--bs-tertiary-bg-rgb: 239, 237, 230;--bs-primary-color: rgba(144, 91, 0, .75);--bs-secondary-color: rgba(30, 44, 65, .75);--bs-tertiary-color: rgba(179, 174, 158, .75);--bs-link-color: #905B00;--bs-link-color-rgb: 144, 91, 0;--bs-link-hover-color-rgb: 122, 77, 0;--bs-link-hover-color: rgba(122, 77, 0, 1);--bs-body-color: #635F58;--bs-body-color-rgb: 99, 95, 88;--bs-body-bg: #FAFBF6;--bs-body-bg-rgb: 250, 251, 246;--bs-primary-text-emphasis: rgba(86, 55, 0, 1);--bs-secondary-text-emphasis: rgba(18, 26, 39, 1);--bs-tertiary-text-emphasis: rgba(107, 104, 95, 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: #F6EDDE;--bs-secondary-bg-subtle: #F5F1DE;--bs-tertiary-bg-subtle: #EFEDE6;--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(197, 190, 178, 1);--bs-secondary-border-subtle: rgba(196, 193, 178, 1);--bs-tertiary-border-subtle: rgba(191, 190, 184, 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(42, 39, 36, 0.12);--bs-box-shadow-sm: 0 .125rem .25rem rgba(42, 39, 36, 0.12);--bs-box-shadow-lg: 0 1rem 3rem rgba(42, 39, 36, 0.12);--bs-box-shadow-inset: inset 0 1px 2px rgba(42, 39, 36, 0.12);--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: "Spectral", 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: 75%;--bs-on-primary-text: #FAFBF6;--bs-on-secondary-text: #FAFBF6;--bs-on-tertiary-text: #2A2724;--bs-header-additional-menu-bg: var(--bs-primary);--bs-header-main-menu-bg: var(--bs-body-bg);--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(42, 39, 36, 0.12);--bs-shadow-rgb: 42, 39, 36;}html {background-color: var(--bs-primary);}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: #905B00;}.swiper-pagination, .swiper-pagination-bullet {--swiper-pagination-color: #905B00;}.btn-close {--bs-btn-close-focus-shadow: 0 0 0 .25rem rgba(42, 39, 36, 0.12);}.btn-primary {--bs-btn-color: #FAFBF6;--bs-btn-bg: #905B00;--bs-btn-border-color: #905B00;--bs-btn-hover-color: #FAFBF6;--bs-btn-hover-bg: rgba(161, 116, 38, 1);--bs-btn-hover-border-color: #905B00;--bs-btn-focus-shadow-rgb: 42, 39, 36;--bs-btn-active-color: #FAFBF6;--bs-btn-active-bg: rgba(166, 124, 51, 1);--bs-btn-active-border-color: rgba(166, 124, 51, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(42, 39, 36, 0.12);--bs-btn-disabled-color: #FAFBF6;--bs-btn-disabled-bg: rgba(177, 140, 77, 1);--bs-btn-disabled-border-color: rgba(177, 140, 77, 1);}.btn-primary-subtle {--bs-btn-color: #FAFBF6;--bs-btn-bg: #F6EDDE;--bs-btn-border-color: #905B00;--bs-btn-hover-color: #FAFBF6;--bs-btn-hover-bg: rgba(161, 116, 38, 1);--bs-btn-hover-border-color: #905B00;--bs-btn-focus-shadow-rgb: 42, 39, 36;--bs-btn-active-color: #FAFBF6;--bs-btn-active-bg: rgba(166, 124, 51, 1);--bs-btn-active-border-color: rgba(166, 124, 51, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(42, 39, 36, 0.12);--bs-btn-disabled-color: #FAFBF6;--bs-btn-disabled-bg: rgba(177, 140, 77, 1);--bs-btn-disabled-border-color: rgba(177, 140, 77, 1);}.btn-outline-primary-subtle {--bs-btn-color: #F6EDDE;--bs-btn-border-color: #F6EDDE;--bs-btn-hover-color: #FAFBF6;--bs-btn-hover-bg: rgba(247, 240, 227, 1);--bs-btn-hover-border-color: #F6EDDE;--bs-btn-focus-shadow-rgb: 42, 39, 36;--bs-btn-active-color: #FAFBF6;--bs-btn-active-bg: rgba(166, 124, 51, 1);--bs-btn-active-border-color: rgba(166, 124, 51, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(42, 39, 36, 0.12);--bs-btn-disabled-color: #FAFBF6;--bs-btn-disabled-bg: rgba(177, 140, 77, 1);--bs-btn-disabled-border-color: rgba(177, 140, 77, 1);}.btn-secondary {--bs-btn-color: #FAFBF6;--bs-btn-bg: #1E2C41;--bs-btn-border-color: #1E2C41;--bs-btn-hover-color: #FAFBF6;--bs-btn-hover-bg: rgba(64, 76, 94, 1);--bs-btn-hover-border-color: #1E2C41;--bs-btn-focus-shadow-rgb: 42, 39, 36;--bs-btn-active-color: #FAFBF6;--bs-btn-active-bg: rgba(75, 86, 103, 1);--bs-btn-active-border-color: rgba(75, 86, 103, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(42, 39, 36, 0.12);--bs-btn-disabled-color: #FAFBF6;--bs-btn-disabled-bg: rgba(98, 107, 122, 1);--bs-btn-disabled-border-color: rgba(98, 107, 122, 1);}.btn-tertiary {--bs-btn-color: #2A2724;--bs-btn-bg: #B3AE9E;--bs-btn-border-color: #B3AE9E;--bs-btn-hover-color: #2A2724;--bs-btn-hover-bg: rgba(190, 186, 173, 1);--bs-btn-hover-border-color: #B3AE9E;--bs-btn-focus-shadow-rgb: 42, 39, 36;--bs-btn-active-color: #2A2724;--bs-btn-active-bg: rgba(194, 190, 177, 1);--bs-btn-active-border-color: rgba(194, 190, 177, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(42, 39, 36, 0.12);--bs-btn-disabled-color: #2A2724;--bs-btn-disabled-bg: rgba(202, 198, 187, 1);--bs-btn-disabled-border-color: rgba(202, 198, 187, 1);}.btn-secondary-subtle {--bs-btn-color: #FAFBF6;--bs-btn-bg: #F5F1DE;--bs-btn-border-color: #1E2C41;--bs-btn-hover-color: #FAFBF6;--bs-btn-hover-bg: rgba(64, 76, 94, 1);--bs-btn-hover-border-color: #1E2C41;--bs-btn-focus-shadow-rgb: 42, 39, 36;--bs-btn-active-color: #FAFBF6;--bs-btn-active-bg: rgba(75, 86, 103, 1);--bs-btn-active-border-color: rgba(75, 86, 103, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(42, 39, 36, 0.12);--bs-btn-disabled-color: #FAFBF6;--bs-btn-disabled-bg: rgba(98, 107, 122, 1);--bs-btn-disabled-border-color: rgba(98, 107, 122, 1);}.btn-tertiary-subtle {--bs-btn-color: #2A2724;--bs-btn-bg: #EFEDE6;--bs-btn-border-color: #B3AE9E;--bs-btn-hover-color: #2A2724;--bs-btn-hover-bg: rgba(190, 186, 173, 1);--bs-btn-hover-border-color: #B3AE9E;--bs-btn-focus-shadow-rgb: 42, 39, 36;--bs-btn-active-color: #2A2724;--bs-btn-active-bg: rgba(194, 190, 177, 1);--bs-btn-active-border-color: rgba(194, 190, 177, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(42, 39, 36, 0.12);--bs-btn-disabled-color: #2A2724;--bs-btn-disabled-bg: rgba(202, 198, 187, 1);--bs-btn-disabled-border-color: rgba(202, 198, 187, 1);}.btn-outline-secondary-subtle {--bs-btn-color: #F5F1DE;--bs-btn-border-color: #F5F1DE;--bs-btn-hover-color: #FAFBF6;--bs-btn-hover-bg: rgba(247, 243, 227, 1);--bs-btn-hover-border-color: #F5F1DE;--bs-btn-focus-shadow-rgb: 42, 39, 36;--bs-btn-active-color: #FAFBF6;--bs-btn-active-bg: rgba(75, 86, 103, 1);--bs-btn-active-border-color: rgba(75, 86, 103, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(42, 39, 36, 0.12);--bs-btn-disabled-color: #FAFBF6;--bs-btn-disabled-bg: rgba(98, 107, 122, 1);--bs-btn-disabled-border-color: rgba(98, 107, 122, 1);}.btn-outline-tertiary-subtle {--bs-btn-color: #EFEDE6;--bs-btn-border-color: #EFEDE6;--bs-btn-hover-color: #2A2724;--bs-btn-hover-bg: rgba(241, 240, 234, 1);--bs-btn-hover-border-color: #EFEDE6;--bs-btn-focus-shadow-rgb: 42, 39, 36;--bs-btn-active-color: #2A2724;--bs-btn-active-bg: rgba(194, 190, 177, 1);--bs-btn-active-border-color: rgba(194, 190, 177, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(42, 39, 36, 0.12);--bs-btn-disabled-color: #2A2724;--bs-btn-disabled-bg: rgba(202, 198, 187, 1);--bs-btn-disabled-border-color: rgba(202, 198, 187, 1);}.btn-light {--bs-btn-color: #2A2724;--bs-btn-bg: #F5F1DE;--bs-btn-border-color: #F5F1DE;--bs-btn-hover-color: rgba(74, 71, 69, 1);--bs-btn-hover-bg: rgba(233, 229, 211, 1);--bs-btn-hover-border-color: rgba(233, 229, 211, 1);--bs-btn-focus-shadow-rgb: 42, 39, 36;--bs-btn-active-color: rgba(74, 71, 69, 1);--bs-btn-active-bg: rgba(220, 217, 200, 1);--bs-btn-active-border-color: rgba(220, 217, 200, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(42, 39, 36, 0.12);--bs-btn-disabled-color: rgba(74, 71, 69, 1);--bs-btn-disabled-bg: rgba(196, 193, 178, 1);--bs-btn-disabled-border-color: rgba(196, 193, 178, 1);}.btn-dark {--bs-btn-color: #F5F1DE;--bs-btn-bg: #2A2724;--bs-btn-border-color: #2A2724;--bs-btn-hover-color: rgba(247, 243, 227, 1);--bs-btn-hover-bg: rgba(74, 71, 69, 1);--bs-btn-hover-border-color: rgba(74, 71, 69, 1);--bs-btn-focus-shadow-rgb: 42, 39, 36;--bs-btn-active-color: rgba(248, 245, 230, 1);--bs-btn-active-bg: rgba(95, 93, 91, 1);--bs-btn-active-border-color: rgba(95, 93, 91, 1);--bs-btn-active-shadow: inset 0 3px 5px rgba(42, 39, 36, 0.12);--bs-btn-disabled-color: rgba(196, 193, 178, 1);--bs-btn-disabled-bg: #2A2724;--bs-btn-disabled-border-color: #2A2724;}.text-bg-primary {color: #FAFBF6 !important;}.text-primary-subtle {color: #F6EDDE;}.text-bg-secondary {color: #FAFBF6 !important;}.text-secondary-subtle {color: #F5F1DE;}.bg-tertiary {background-color: #B3AE9E !important;}.text-bg-tertiary {background-color: #B3AE9E !important;color: #2A2724 !important;}.text-tertiary {color: #B3AE9E !important;}.text-tertiary-subtle {color: #EFEDE6;}.dropdown-menu {--bs-dropdown-bg: #FAFBF6;--bs-dropdown-link-active-color: #905B00;--bs-dropdown-link-hover-color: rgba(161, 116, 38, 1);--bs-dropdown-link-hover-bg: #F6EDDE;--bs-dropdown-link-color: #635F58;}.pagination {--bs-pagination-active-bg: #905B00;--bs-pagination-disabled-bg: inherit;--bs-pagination-disabled-color: inherit;--bs-pagination-active-border-color: #905B00;--bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(42, 39, 36, 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(161, 116, 38, 1); --bs-nav-link-font-weight: 300;}.nav-pills {--bs-nav-pills-link-active-color: #635F58;--bs-nav-pills-link-active-bg: #F5F1DE;}.progress {--bs-progress-bar-bg: #905B00;}.accordion {--bs-accordion-active-color: #905B00;}.btn-outline-primary {--bs-btn-color: #905B00;--bs-btn-border-color: #905B00;--bs-btn-hover-color: #ffffff;--bs-btn-hover-bg: #905B00;--bs-btn-hover-border-color: #905B00;--bs-btn-focus-shadow-rgb: 144, 91, 0;--bs-btn-active-color: #ffffff;--bs-btn-active-bg: #905B00;--bs-btn-active-border-color: #905B00;--bs-btn-active-shadow: inset 0 3px 5px rgba(42, 39, 36, 0.12);--bs-btn-disabled-color: #905B00;--bs-btn-disabled-border-color: #905B00;}.btn-outline-secondary {--bs-btn-color: #1E2C41;--bs-btn-border-color: #1E2C41;--bs-btn-hover-color: #ffffff;--bs-btn-hover-bg: #1E2C41;--bs-btn-hover-border-color: #1E2C41;--bs-btn-focus-shadow-rgb: 30, 44, 65;--bs-btn-active-color: #ffffff;--bs-btn-active-bg: #1E2C41;--bs-btn-active-border-color: #1E2C41;--bs-btn-active-shadow: inset 0 3px 5px rgba(42, 39, 36, 0.12);--bs-btn-disabled-color: #1E2C41;--bs-btn-disabled-border-color: #1E2C41;}.btn-outline-tertiary {--bs-btn-color: #B3AE9E;--bs-btn-border-color: #B3AE9E;--bs-btn-hover-color: #ffffff;--bs-btn-hover-bg: #B3AE9E;--bs-btn-hover-border-color: #B3AE9E;--bs-btn-focus-shadow-rgb: 179, 174, 158;--bs-btn-active-color: #ffffff;--bs-btn-active-bg: #B3AE9E;--bs-btn-active-border-color: #B3AE9E;--bs-btn-active-shadow: inset 0 3px 5px rgba(42, 39, 36, 0.12);--bs-btn-disabled-color: #B3AE9E;--bs-btn-disabled-border-color: #B3AE9E;}.table-primary {--bs-table-bg:#905B00;--bs-table-color:#FAFBF6;}.table-secondary {--bs-table-bg:#1E2C41;--bs-table-color:#FAFBF6;}.table-tertiary {--bs-table-bg:#B3AE9E;--bs-table-color:#2A2724;}.form-check-input:checked {background-color: #905B00 ;border-color: #905B00 ;}.form-control:focus, .form-select:focus {border-color: rgba(200, 173, 128, 1);}.list-group {--bs-list-group-active-bg: #905B00;--bs-list-group-active-border-color: #905B00;--bs-list-group-active-color: #FAFBF6;}.text-bg-success { color: #ffffff !important; background-color: #198754 !important;}.text-bg-warning { color: #ffffff !important; background-color: #FFC107 !important;}.text-bg-danger { color: #635F58 !important; background-color: #DC3545 !important;}.text-bg-info { color: #ffffff !important; background-color: #17A2B8 !important;}.text-bg-light { color: #635F58 !important; background-color: #F5F1DE !important;}.text-bg-dark { color: #ffffff !important; background-color: #2A2724 !important;}.text-bg-primary-subtle { background-color: #F6EDDE !important; color: #635F58 !important;}.text-bg-secondary-subtle { background-color: #F5F1DE !important; color: #635F58 }.text-bg-tertiary-subtle { background-color: #EFEDE6 !important; color: #635F58 }.text-bg-body { background-color: #FAFBF6 !important; color: #635F58 !important;}.text-bg-white { background-color: #ffffff !important; color: #000 !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(42, 39, 36, 0.12);--bs-card-title-color: #635F58;--bs-card-color: #635F58;--bs-card-border-color: rgba(212, 213, 209, 1);} .card {--bs-card-border-radius: 0rem !important;--bs-card-inner-border-radius: 0rem !important;}:root { --bs-border-radius: 0rem !important; --bs-border-radius-sm: 0rem !important; --bs-border-radius-lg: 0rem !important; --bs-border-radius-xl: 0rem !important; --bs-border-radius-xxl: 0rem !important; --bs-border-radius-2xl: 0rem !important; --bs-border-radius-pill: 0rem !important;} .btn, .btn-sm, .btn-lg { --bs-btn-border-radius: 0rem !important; } .dropdown-menu { --bs-dropdown-border-radius: 0rem !important; --bs-dropdown-inner-border-radius: 0rem !important; } .dropdown { --bs-dropdown-item-border-radius: 0rem !important; } .badge { --bs-badge-border-radius: 0rem !important; } .img-rounded, .form-check-input[type=checkbox] { border-radius: 0rem !important; } .card_kite { --kite-clip-radius: 0rem !important; --bs-card-border-radius: 0rem !important; } .form-control { border-radius: 0rem; } * { border-radius: 0rem !important; } .border-body { border-color: var(--bs-body-bg) !important; }/* ========================================================================== Krausz Balázs — nyitólap finomítások Minden szabály sectionHtmlClasses hook alá scope-olva, színek --bs-* alapon. ========================================================================== *//* --- 1. Gombforma: elcsúsztatott másodkeret -------------------------------- *//* A terv aláírás-gombja: 1px keret + 5px-kel eltolt második keret currentColor színnel; hoverre a másodkeret átlósan átfordul. *//* KANONIKUS HOOK: `u-btn-offset`. ÚJ szekciónál vagy blokknál (pl. űrlap blokk) EZT tedd a sectionHtmlClasses-be — ne toldj be újabb szelektort ide. Két indokolt kivétel van a listákban: a termék-modal (lásd lentebb) és a `.u-product-cards .card-footer .btn` — ott az osztály-hook a SZEKCIÓRA kerülne, és a lapozó / rendező gombok is .btn-ek, azokra nem kell keret. A többi u-* hook történelmi okból maradt; ha egyszer mind átáll u-btn-offset-re, ez a három lista egy-egy szelektorra rövidül. Ugyanaz a minta, mint a `u-halvany-bg`-nél (17. blokk). */.u-hero .btn,.u-kategoriak .btn,.u-cta .btn,.u-bemutatkozas .btn,.u-referenciak .btn,.u-logo-bg .btn,.u-szolgaltatasok .btn,/* A termékoldal ajánlatkérő modálja NEM a szekció DOM-jában van (a téma a végére teszi), ezért a `u-btn-offset` hook nem éri el. Ez az EGYETLEN indokolt kivétel: stabil, témából jövő id — nem kitalált szelektor. */.u-btn-offset .btn,#product-offer-modal .btn,.u-product-cards .card-footer .btn { position: relative; border-radius: var(--bs-border-radius); transition: transform .15s ease, background-color .15s ease, color .15s ease;}.u-hero .btn::after,.u-kategoriak .btn::after,.u-cta .btn::after,.u-bemutatkozas .btn::after,.u-referenciak .btn::after,.u-logo-bg .btn::after,.u-szolgaltatasok .btn::after,.u-btn-offset .btn::after,#product-offer-modal .btn::after,.u-product-cards .card-footer .btn::after { content: ""; position: absolute; inset: 0; border: 1px solid currentColor; border-radius: inherit; opacity: .5; transform: translate(5px, 5px); transition: transform .18s ease, opacity .18s ease; pointer-events: none;}.u-hero .btn:hover::after,.u-kategoriak .btn:hover::after,.u-cta .btn:hover::after,.u-bemutatkozas .btn:hover::after,.u-referenciak .btn:hover::after,.u-logo-bg .btn:hover::after,.u-szolgaltatasok .btn:hover::after,.u-btn-offset .btn:hover::after,#product-offer-modal .btn:hover::after,.u-product-cards .card-footer .btn:hover::after { transform: translate(-5px, -5px); opacity: .85;}/* Primary gombok másodkerete sötétebb brand-barnával (bemutatkozás, gyártás, űrlapok). A kért rgb(126 81 8) a primary (#905B00) sötétebb változata, ezért NEM égetjük be: color-mix-szel származtatjuk a tokenből (88% primary + 12% fekete ≈ rgb(127 80 0)). Így színváltáskor követi a sémát. Az opacity 1, máskülönben a .5 átlátszóság miatt nem a kért szín jelenne meg. */.u-bemutatkozas .btn-primary::after,.u-gyartas .btn-primary::after,.u-logo-bg .btn-primary::after,.u-szolgaltatasok .btn-primary::after,.u-btn-offset .btn-primary::after,#product-offer-modal .btn-primary::after,.u-product-cards .card-footer .btn-primary::after { border-color: color-mix(in srgb, var(--bs-primary) 88%, black); opacity: 1;}/* Secondary gombok (pl. a felosztott banner „Ajánlatot kérek” gombja, ahol a szekció buttonColor mezője secondary) ugyanezzel a formulával: a másodkeret a GOMB SAJÁT színének 88%-a + 12% fekete. Külön szabály kell, mert a keret színe nem származtatható a currentColor-ból (az a gomb SZÖVEG-színe, ami teli gombon világos). Ha egyszer tertiary gombra is kell, ide jön a harmadik pár. */.u-btn-offset .btn-secondary::after { border-color: color-mix(in srgb, var(--bs-secondary) 88%, black); opacity: 1;}/* --- 2. Hero: a fotó halk mosásként ül a világos sávon --------------------- */.u-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 650px; display: flex; flex-direction: column; justify-content: center;}/* A unique háttérkép saját rétegben ül a szekción belül, ezért fölé kerül egy ::before mosás, a szöveget pedig fölé emeljük. */.u-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(var(--bs-light-rgb), .22); pointer-events: none;}.u-hero .editorial_eyebrow_wrapper,.u-hero .editorial_title,.u-hero .editorial_lead,.u-hero .editorial_closing,.u-hero .section_navigation_button { position: relative; z-index: 2;}.u-hero .editorial_title { font-size: calc(var(--bs-h1-font-size, 2.25rem) * 1.3); line-height: 1.1;}/* „Görgessen” jelzés a hero alján */.u-hero::after { content: ""; position: absolute; left: 50%; bottom: 2.25rem; z-index: 1; width: 26px; height: 42px; margin-left: -13px; border: 1px solid rgba(var(--bs-light-rgb), .95); border-radius: 13px; /* Görgető-karika: radial-gradient csempével, mert pseudo-elemnek nincs saját pseudo-eleme — így nem kell extra DOM elem. */ background-image: radial-gradient(circle at 50% 50%, rgb(var(--bs-light-rgb)) 40%, transparent 45%); background-repeat: no-repeat; background-size: 6px 6px; background-position: 50% 7px; animation: u-scroll-pulse 2.4s ease-out infinite, u-scroll-wheel 1.8s ease-in-out infinite; pointer-events: none;}@keyframes u-scroll-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bs-light-rgb), .5); } 60% { box-shadow: 0 0 0 10px rgba(var(--bs-light-rgb), 0); }}/* A karika felül megjelenik, legördül, majd zsugorodva eltůnik. A fade-et a background-size:0 adja, nem opacity — az a keretet is halványítaná. */@keyframes u-scroll-wheel { 0%, 10% { background-position: 50% 7px; background-size: 6px 6px; } 60% { background-position: 50% 25px; background-size: 6px 6px; } 85%, 100% { background-position: 50% 25px; background-size: 0 0; }}@media (prefers-reduced-motion: reduce) { .u-hero::after { animation: none; }}/* --- 22. Hero: lassú zoom (Ken Burns) ------------------------------------ *//* A háttérkép saját rétegben ül a szekción belül; a ::before (mosás) és a ::after (görgető ikon) már foglalt, ezért magára a rétegre írunk. A .u-hero-n már van overflow: hidden, tehát a felskálázott kép nem lóg ki. 28s + alternate: szándékosan lassú, hogy észrevétlenül “élni” látsszon, ne mozgóképnek. A szelektor heurisztikus (a téma nem dokumentál hookot a háttér-rétegre) — ha egyszer no-op lesz, itt kell javítani. */.u-hero [class*="background"],.u-hero [class*="_bg"] { --bg-scale: 1.14; transform-origin: 50% 55%; transform: scale(var(--bg-scale)); will-change: transform;}/* A mozgást innentől a body_scripts-ben lővő parallax szkript adja (inline transform, ami felülírja a fentit). Ez a statikus scale a no-JS fallback: ha a szkript nem fut (reduced-motion, touch, JS-hiba), a kép zoomolva marad, csak nem mozog. NE tegyünk ide CSS transition-t — a szkript maga csillapít. *//* --- 18. u-kifuto: a simple-content doboz szövegének középre igazítása ----- *//* A simple-content stílusnak NINCS szöveg-igazítás mezője (csak button_align), ezért ez a szabály egy rendszerképesség hiányát pótolja — nem ír felül adminból állítható értéket. Ha a téma egyszer kap ilyen mezőt, ez törölhető. */.u-kifuto .simple-content-box { text-align: center;}/* A kifutó sáv címe hero-méretben. KÉT hook kell, mert a két sáv máshonnan veszi a címet: a Bemutatkozás hero a szekció `title` mezőjéből (.editorial_title), a nyitólapi banner a simple-content dobozból (.simple-content-box_title). A [class*="u-kifuto"] szándékos: a sáv hol `u-kifuto`, hol `u-kifuto-tall`, hol `u-kifuto-hero` osztályt kap, és a suffix nem stabil. Méretezés ugyanazzal a formulával, mint a .u-hero editorial címe (2. blokk): h1 * 1.3. */[class*="u-kifuto"] .editorial_title,[class*="u-kifuto"] .simple-content-box_title { font-size: calc(var(--bs-h1-font-size, 2.25rem) * 1.3); line-height: 1.1;}/* --- 19. Magas kifutó sáv (dupla levegő) ---------------------------------- *//* Az admin térköz-skála maximuma (xxxlarge) ~186px/oldal — a kért kétszeres levegőhöz nem elég. Padding felülirás helyett min-height + flex középre igazítás: így az admin térköz TOVÁBBRA IS hat, a CSS csak alsó korlátot ad a sáv magasságára. Ugyanez a minta, mint a .u-hero-nál — egy szám hangolható. Külön osztály, NEM a .u-kifuto: azt a Bemutatkozás oldal heroja is használja, és azt nem akarjuk mellékhatásként megnyújtani. */.u-kifuto-tall { min-height: 620px; display: flex; flex-direction: column; justify-content: center; overflow: hidden;}/* --- 23. u-kifuto-tall: scroll-parallax alap ------------------------------ *//* A túlskálázás adja a mozgástartalékot: scale(1.7) = 35% túlnyúlás minden oldalon, 620px magasságnál ~217px függőleges tartalék. A JS legfeljebb 200px-et mozgat, tehát nem látszik ki a kép széle; a fenti overflow: hidden zár. FIGYELEM: 70% zoom árán. Ez a sáv magasságának növelésével kiváltható lenne (tartalék = (scale-1)/2 * sávmagasság), akkor kisebb scale is elég. A --bg-scale az IGAZSÁG FORRÁSA: a szkript ezt olvassa ki, nem tartja második példányban. Ha még nagyobb mozgás kell, ezt és a szkript MAX értékét emeld úgy, hogy MAX <= (scale - 1) / 2 * sávmagasság maradjon. A mozgást a body_scripts adja (inline transform, felülírja az itteni scale-t); ez a statikus érték a no-JS fallback. */.u-kifuto-tall [class*="background"],.u-kifuto-tall [class*="_bg"] { --bg-scale: 1.7; transform-origin: 50% 50%; transform: scale(var(--bg-scale)); will-change: transform;}/* --- 20. GYIK: a triangles_1 háttérminta fehérre — PRÓBA -------------------- *//* A preset mintához nincs szín-mező a szekció beállításaiban, és a minta rétegének osztályneve nincs a téma dom-hooks katalógusában. A brightness(0) + invert(1) bármilyen alapszínt fehérre visz, az alfa csatornát meghagyva. Ha ez a szabály no-op, TÖRÖLNI kell és a valós szelektort DevToolsból megadni. *//* A parallaxhoz a szekciónak zárnia kell a túlnyúló réteget. */.u-gyik { position: relative; overflow: hidden;}.u-gyik [class*="background"],.u-gyik [class*="_bg"] { filter: brightness(0) invert(1); /* Scroll-parallax. Itt a háttér SVG minta, nem fotó — ezért a 70% zoom NEM okoz élességvesztést (vektor), és a kivágás sem probléma (ismétlődő minta). A sáv ~875px magas, tehát a tartalék (1.7-1)/2*875 ≈ 306px — a 200px-es elmozdulás bőven belefér. A mozgást a body_scripts adja. */ --bg-scale: 1.7; transform-origin: 50% 50%; transform: scale(var(--bg-scale)); will-change: transform;}/* --- 24. „Munkánk számokban”: ugyanaz a háromszög-parallax ---------------- *//* Ugyanaz a triangles_1 preset minta, mint a GYIK-en, tehát a mozgás átjön. A FEHÉR átszínezés viszont SZÁNDÉKOSAN kimarad: ez a sáv világos (sectionColor: body = #FAFBF6), és a fehér minta világos háttéren láthatatlan lenne. Itt a téma eredeti mintaszíne marad. A position: relative már megvan a 10. blokkból (szekció-elválasztó). */.u-szamokban { overflow: hidden;}.u-szamokban [class*="background"],.u-szamokban [class*="_bg"] { --bg-scale: 1.7; transform-origin: 50% 50%; transform: scale(var(--bg-scale)); will-change: transform;}/* --- 25. Szolgáltatás-kártyák: háttér nélküli, középre igazított nagy ikon -- *//* Valós DOM (nem találgatás):

Három következmény: 1) A hátteret és a paddingot Bootstrap utility adja (bg-primary-subtle, p-3), azok !important-tal írnak — ezért itt is !important kell. Ez nem hanyagság, hanem utility felülirásának egyetlen módja. 2) A .card-icon d-inline-flex, tehát a margin:auto nem középre igazít. A szülőn kell text-align: center — a szülőt :has(> .card-icon)-nal célozzuk, hogy ne a "mb-3" utility osztály legyen a hook. 3) Az ikonon ott van fa-fw (fixed width = 1.25em), tehát a 120px SZÉLESSÉGHEZ a font-size 120 / 1.25 = 96px. Ezért nem 120px van a font-size-ban. */.u-szolgaltatasok .card_item :has(> .card-icon) { text-align: center;}.u-szolgaltatasok .card_item .card-icon { background-color: transparent !important; padding: 0 !important; border-radius: 0 !important; width: 120px; max-width: 100%;}.u-szolgaltatasok .card_item .card-icon > i { font-size: 96px; line-height: 1;}/* Saját SVG ikon esetén nincs , tehát a font-size nem méretez: az SVG-t közvetlenül kell. 120px = a kért ikonszélesség. A stroke="currentColor" miatt a téma text-primary színét veszi át — nincs beégetett szín az SVG-ben. */.u-szolgaltatasok .card_item .card-icon > svg { display: block; width: 120px; height: 120px; max-width: 100%;}/* Cím és szöveg is középre. A card-footer NEM ide tartozik (külön elem), a gomb igazítása marad a services-box `button_align` admin mezőjén. */.u-szolgaltatasok .card_item .card-body { text-align: center;}/* A gomb középre. A services-box `button_align` mezője csak right / left / stretched értéket ad — CENTER NINCS benne, tehát itt a CSS egy hiányzó rendszerképességet pótol, nem ír felül adminból állítható értéket. A justify-content-end Bootstrap utility !important-tal ír, ezért kell ide is. */.u-szolgaltatasok .card_item .card-footer { justify-content: center !important;}/* Cím: nagybetűs, 1.5rem. A téma `h6` utility osztályt tesz a címre — azt felülírjuk, de a szemantikus szint (h3) változatlan marad, tehát a címsor-hierarchia nem sérül. A line-height a nagyobb méret következménye. */.u-szolgaltatasok .card_item .card-title { text-transform: uppercase; font-size: 1.5rem; line-height: 1.2;}/* Leírás: 0.75rem = 12px alap-betűméretnél. rem és nem px, hogy a böngésző betűméret-beállítását kövesse. A lazabb sorköz a kis méret miatt kell: 12px-en a téma alap sorköze túl sűrű lenne. */.u-szolgaltatasok .card_item .card-text { font-size: .75rem; line-height: 1.6;}/* --- 26. Galéria-csúszka: halvány fekete-fehér képek, hoverre színes ---------- *//* HOOKOK: `u-gallery-slider` (általános) ÉS `u-referenciak` (nyitólap, „Elkészült munkáink” csúszka). Egy szabályblokk, két hook — ha a két csúszkának egyszer KÜLÖNBÖZŐ halványság kell, akkor kell szétvágni, addig ne duplikáljuk. Két hangolható változó, hookonként külön: --u-gallery-dim (halványság, alap: .2) és --u-gallery-fade (átmenet hossza, alap: 1s). A szabályok maradnak közösek. *//* Csak a KÉPEK halványak (0.2) és szürkék — a cím, a lapozó és a gombok teljes erővel maradnak. Ezért nem a szekcióra megy az opacity, hanem az img-re. A hover szelektor szándékosan DOM-független: `*:hover > img` azt jelenti, hogy bármely hoverelt elem KÖZVETLEN img gyereke kap teljes opacitást. Így akkor is működik, ha a téma egy fólia/overlay elemet tesz a kép fölé (ilyenkor az img maga nem kapna :hover-t). Az `img:hover` a közvetlen esetre van. Animáció: 1s + cubic-bezier(.4, 0, .2, 1) — lassú indítás, lassú érkezés. Az !important szándékos: 1s-nál a váltás még mindig gyorsnak érződött, ami arra utal, hogy a téma saját (specifikusabb) transition-je nyert a képeken. Ha kiderül, hogy nem így van, ez az !important elhagyható. ezért érződik finomnak. A lineáris vagy rövid `ease` villanásnak látszik. Az opacity és a filter UGYANAZT az időzítést kapja, különben szétcsúsznának. */.u-gallery-slider img,.u-referenciak img { opacity: var(--u-gallery-dim, .2); filter: grayscale(1); transition: opacity var(--u-gallery-fade, 1s) cubic-bezier(.4, 0, .2, 1), filter var(--u-gallery-fade, 1s) cubic-bezier(.4, 0, .2, 1) !important;}/* Nyitólapi „Elkészült munkáink” csúszka: CSAK szaturáció-levétel (opacitás 1), és rövidebb, 0.4s-es átmenet. Különböző igény, de nem külön szabályblokk: csak a változók értéke tér el, a fade/hover/zoom logika közös marad. A fade SZÁNDÉKOSAN egyszerre vonatkozik az opacityra és a filterre: ha egyszer ezen a hookon is lemegy az opacitás, a kettő nem csúszhat szét. */.u-referenciak { --u-gallery-dim: 1; --u-gallery-fade: .4s;}.u-gallery-slider *:hover > img,.u-gallery-slider img:hover,.u-referenciak *:hover > img,.u-referenciak img:hover { opacity: 1; filter: grayscale(0);}/* A téma hover-zoomját kikapcsoljuk. Indok: a nagyítás elvonja a figyelmet a szín- és opacitás-átmenetről, és a lassú (1.3s) fade mellett két egyszerre futó, külön időzítésű mozgás lenne. Az !important azért kell, mert a téma transform-ja specifikusabb szelektorról jön. A leszarmazott-szelektor (nem csak > img) azért, mert a zoom a képwrapperen is lehet. */.u-gallery-slider *:hover img,.u-gallery-slider img:hover,.u-referenciak *:hover img,.u-referenciak img:hover { transform: none !important;}@media (prefers-reduced-motion: reduce) { .u-gallery-slider img, .u-referenciak img { transition: none; }}/* --- 27. Bemutatkozás kapcsolati űrlap: halvány szürke panel --------------- *//* A blokknak nincs belső padding admin mezője (csak margin), ezért CSS. Háttér: rgba(--bs-body-color-rgb, .05) — a téma palettája meleg, nincs benne igazi szürke token. A body-color 5%-a semleges, halvány szürke mögöttesét adja, és színváltáskor követi a sémát — nem beégetett hex. Padding: clamp() — kis kijelzőn 1.25rem, nagyon 2.5rem, media query nélkül. A hook a szekció/blokk sectionHtmlId-je: adminból adott, STABIL azonosító (nem a publikáláskor újraszámozódó #section-builder-component-NNN). */#bemutatkozas-kapcsolat-form { background-color: rgba(var(--bs-body-color-rgb), .05); padding: clamp(1.25rem, 4vw, 2.5rem); border-radius: var(--bs-border-radius);}/* --- 21. Banner slide cím: legfeljebb 48px ------------------------------- *//* A min() a „max 48px” pontos megfelelője: nagy kijelzőn 3rem a plafon, kis kijelzőn a 7vw lejjebb viszi — így a szabály nem NÖVELI a címet mobilon, ahol a téma mérete már eleve 48px alatt van. rem és vw, nem fix px: követi a böngésző betűméret-beállítását. Hook: dokumentált banner cím-hook. */.header_banner_title { font-size: min(3rem, 7vw); line-height: 1.15;}/* --- 3. Kifutó sáv: fix scroll háttér + sötétítés -------------------------- */.u-kifuto { position: relative; isolation: isolate;}.u-kifuto::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(var(--bs-dark-rgb), .72); pointer-events: none;}.u-kifuto .editorial_eyebrow_wrapper,.u-kifuto .editorial_title,.u-kifuto .editorial_lead,.u-kifuto .editorial_closing { position: relative; z-index: 2;}/* --- 4. CTA sáv: halvány fotó a primary sáv alatt, világos szöveg -------- */.u-cta { position: relative; isolation: isolate; overflow: hidden;}.u-cta::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(var(--bs-primary-rgb), .95); pointer-events: none;}.u-cta > *:not([class*="background"]):not([class*="_bg"]),.u-cta [class*="container"],.u-cta .editorial_eyebrow_wrapper,.u-cta .editorial_eyebrow,.u-cta .editorial_title,.u-cta .editorial_lead,.u-cta .editorial_closing,.u-cta .section_navigation_button { position: relative; z-index: 2;}/* a téma az eyebrow-ra .text-primary-t tesz, ami a primary sávon láthatatlan */.u-cta .editorial_eyebrow_wrapper .editorial_eyebrow,.u-cta .editorial_eyebrow.text-primary { color: rgba(var(--bs-light-rgb), .88) !important;}.u-cta .editorial_title,.u-cta .editorial_lead,.u-cta .section_subtitle,.u-cta .editorial_lead p,.u-cta .editorial_closing,.u-cta .editorial_closing p { color: rgb(var(--bs-light-rgb));}.u-cta .editorial_closing a { color: rgb(var(--bs-light-rgb)); text-decoration: underline; text-underline-offset: 3px;}.u-cta .section_navigation_button .btn { padding: .9rem 2rem; font-size: var(--bs-body-font-size); background-color: transparent; border-color: rgba(var(--bs-light-rgb), .75); color: rgb(var(--bs-light-rgb));}.u-cta .section_navigation_button .btn:hover { background-color: rgba(var(--bs-light-rgb), .14); border-color: rgb(var(--bs-light-rgb)); color: rgb(var(--bs-light-rgb));}/* --- 5. GYIK sáv: világos szöveg a sötétkék felületen ---------------------- */.u-gyik .editorial_eyebrow_wrapper .editorial_eyebrow,.u-gyik .editorial_eyebrow.text-primary { color: rgb(var(--bs-light-rgb)) !important;}.u-gyik .editorial_title,.u-gyik .editorial_lead,.u-gyik .editorial_lead p { color: rgb(var(--bs-light-rgb));}.u-gyik .accordion,.u-gyik .accordion-item { background-color: transparent; border-color: rgba(var(--bs-light-rgb), .22);}.u-gyik .accordion-button,.u-gyik .accordion-button.collapsed { background-color: transparent; color: rgb(var(--bs-light-rgb)); box-shadow: none; font-size: 1.2rem;}.u-gyik .accordion-button::after { filter: invert(1) grayscale(1) brightness(2);}.u-gyik .accordion-body { color: rgba(var(--bs-light-rgb), .82);}/* --- 6. Referencia csúszka: egységes fekvő kivágás ------------------------- *//* A referencia csúszka partners stílusú (logó-méretű kép), ezért itt kell fekvő kivágásra növelni. Hook: a szekció sectionHtmlId-je. *//* --- 6. Referencia csúszka: teljes szélességű sáv, elhaló szélekkel ------- */.u-referenciak .swiper,.u-referenciak [class*="swiper-container"] { mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);}/* --- 12. Social sáv: felirat balra, ikonok jobbra a sötét sávon ----------- */.u-social .editorial_title { font-size: var(--bs-body-font-size); letter-spacing: .14em; text-transform: uppercase; font-family: var(--bs-body-font-family); color: rgba(var(--bs-light-rgb), .72); margin: 0;}.u-social .editorial_header { margin-bottom: 0 !important;}.u-social .editorial_lead p,.u-social .editorial_closing p { display: flex; align-items: center; gap: .5rem; justify-content: center; margin: 0;}.u-social .editorial_lead a,.u-social .editorial_closing a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(var(--bs-light-rgb), .28); border-radius: var(--bs-border-radius); color: rgb(var(--bs-light-rgb)); text-decoration: none; transition: background-color .15s ease, border-color .15s ease;}.u-social .editorial_lead a:hover,.u-social .editorial_closing a:hover { background-color: rgba(var(--bs-light-rgb), .12); border-color: rgba(var(--bs-light-rgb), .6);}@media (min-width: 768px) { .u-social .editorial_header, .u-social .editorial_title { text-align: left; } .u-social .editorial_lead p, .u-social .editorial_closing p { justify-content: flex-end; margin-top: -2.75rem; }}/* --- 11. Lábléc: halvány faburkolat-háttér a sötét sáv felett ------------- *//* A lábléc sávszíne továbbra is a footer.menu_bg_color beállításból jön; ez csak egy textura-réteg fölé. */footer { position: relative; isolation: isolate; overflow: hidden;}footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url("/storage/krausz-balazs/editor/referenciaslider/img_20220505_151848.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: .2; mix-blend-mode: soft-light; pointer-events: none;}/* --- 10. Szekció-elválasztó: két elhaló vonal + apró rombusz --------------- *//* KANONIKUS HOOK: `u-section-divider`. ÚJ szekciónál EZT tedd a sectionHtmlClasses-be — ne toldj be újabb szelektort ide. A `u-kategoriak` és `u-szamokban` történelmi okból maradt; ha egyszer mind átáll, ez a három lista egy-egy szelektorra rövidül. Ugyanaz a minta, mint az 1. és a 17. blokknál. FIGYELEM: az elválasztó a szekció ::before + ::after párját HASZNÁLJA EL — ne tedd olyan szekcióra, ahol már overlay/mosás ül rajtuk (pl. u-halvany-bg, u-hero, u-cta, u-kifuto). Ezért maradt ki a .u-referenciak is. A `top: 2rem` a szekció felső paddingjába esik: legalább `small` (~2.5rem) padding-top kell, különben a tartalomra csuszász. */.u-kategoriak,.u-szamokban,.u-section-divider { position: relative;}.u-kategoriak::before,.u-szamokban::before,.u-section-divider::before { content: ""; position: absolute; top: 2rem; left: 50%; transform: translateX(-50%); width: 360px; height: 1px; pointer-events: none; background-image: linear-gradient(to right, transparent, rgba(var(--bs-body-color-rgb), .55)), linear-gradient(to left, transparent, rgba(var(--bs-body-color-rgb), .55)); background-size: 152px 1px, 152px 1px; background-position: left center, right center; background-repeat: no-repeat;}.u-kategoriak::after,.u-szamokban::after,.u-section-divider::after { content: ""; position: absolute; top: calc(2rem - 4px); left: 50%; margin-left: -4px; width: 7px; height: 7px; border: 1px solid rgba(var(--bs-body-color-rgb), .7); transform: rotate(45deg); pointer-events: none;}/* --- 9. Munkánk számokban: átlátszó dobozok, címső-betűs számok --------- */.u-szamokban .counter-col > *,.u-szamokban .counter-bg,.u-szamokban .counter-bg.bg-white,.u-szamokban .counter-col .card { background-color: transparent !important; border-color: transparent !important; box-shadow: none !important;}.u-szamokban .counter-number { font-family: var(--bs-heading-font-family); font-size: 3.25rem !important; line-height: 1.05;}/* --- 8. Bemutatkozó dobozok címe a címső-betűtípussal --------------------- */.u-bemutatkozas .introduction-box_title { font-family: var(--bs-heading-font-family);}/* --- 7. Kategóriakártyák: egyenlő magasság, hangsúlyos cím ----------------- */.u-kategoriak .card_item { height: 100%;}.u-kategoriak .card-title { font-size: 1.5rem; line-height: 1.15; letter-spacing: -.01em;}.u-kategoriak .card-image img { transition: transform .3s ease;}.u-kategoriak .card_item:hover .card-image img { transform: scale(1.05);}/* --- 13. Fejléc felső sáv: tartalom jobbra igazítva ---------------------- *//* Csak layout — a sáv színe marad a header.additional_menu_bg beállításból. */.additional-menu .container-xxl { justify-content: flex-end !important;}@media (min-width: 1200px) { #navbar_top_menu .justify-content-xl-center { justify-content: end !important; }}/* --- 15. Főmenü: angle-right ikon a menüpontok előtt -------------------- *//* Tisztán dekoráció, ezért pseudo-elem és nem tartalom. A --fa-font-solid a Font Awesome 6 saját változója; a fallback akkor lép be, ha a téma más FA build-et tölt. */#navbar_top_menu .nav-link::before { content: "\f105"; font: var(--fa-font-solid, normal 900 1em/1 "Font Awesome 6 Free"); font-size: .8em; margin-right: .4em; opacity: .65; -webkit-font-smoothing: antialiased;}/* --- 16. Főmenü: tipográfia és hover ------------------------------------- *//* A transform a linken van, így a ::before ikon vele mozog — nem kell külön szabály rá. Az aláhúzást is a linkről kell levenni: a text-decoration öröklődik a pseudo-elemre és ott nem lehet visszavonni. A betúvastagság NEM ide tartozik: az a general.header_nav_font_weight admin beállítás (--bs-nav-link-font-weight) — azt ne írjuk felül. */#navbar_top_menu .nav-link { text-transform: uppercase; transition: transform .18s ease;}#navbar_top_menu .nav-link:hover,#navbar_top_menu .nav-link:focus-visible { text-decoration: none; transform: translateY(-2px);}@media (prefers-reduced-motion: reduce) { #navbar_top_menu .nav-link { transition: none; } #navbar_top_menu .nav-link:hover, #navbar_top_menu .nav-link:focus-visible { transform: none; }}/* --- 17. Halvány, fekete-fehér háttérkép (KÖZÖS hook) -------------------- *//* Használat: tedd a szekcióra a `u-halvany-bg` sectionHtmlClasses-t. A `u-gyartas` történelmi okból maradt — új szekciónál a `u-halvany-bg`-t használd. *//* A háttérkép magát a sectionBgImage admin mező adja — azt nem írjuk felül, csak a MEGJELENÍTÉSÉT tompítjuk. A ::before egyszerre végzi a két munkát: fehér mosás (halványítás) + backdrop-filter grayscale (fekete-fehér). Így nem kell találgatni a téma háttér-rétegének osztálynevét, és a tartalom (a műhelyfotó, szöveg, gomb) színes marad, mert az overlay FÖLÖTT ül. */.u-gyartas,.u-halvany-bg,.u-logo-bg { position: relative; isolation: isolate; overflow: hidden;}.u-gyartas::before,.u-halvany-bg::before,.u-logo-bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(var(--bs-white-rgb), .88); -webkit-backdrop-filter: grayscale(1); backdrop-filter: grayscale(1); pointer-events: none;}.u-gyartas [class*="container"],.u-gyartas .editorial_eyebrow_wrapper,.u-gyartas .editorial_title,.u-gyartas .editorial_lead,.u-gyartas .editorial_closing,.u-gyartas .section_navigation_button,.u-halvany-bg [class*="container"],.u-halvany-bg .editorial_eyebrow_wrapper,.u-halvany-bg .editorial_title,.u-halvany-bg .editorial_lead,.u-halvany-bg .editorial_closing,.u-halvany-bg .section_navigation_button,.u-logo-bg [class*="container"],.u-logo-bg .editorial_eyebrow_wrapper,.u-logo-bg .editorial_title,.u-logo-bg .editorial_lead,.u-logo-bg .editorial_closing,.u-logo-bg .section_navigation_button { position: relative; z-index: 2;}@media(min-width: 768px){ .u-kifuto-hero h2{ text-transform: uppercase; font-size: 2.25rem !important; line-height: 1.05; }}.header_banner_title { font-size: min(2rem, 5vw) !important;}.header_banner_text{ font-size: min(1.08rem, 1vw) !important;}/* --- 28. Ajánlatkérő modál: primary fejléc -------------------------------- *//* A modál fejléc színére NINCS admin mező (a ProductDetail szekció mezői között sem), ezért custom CSS. A modál a végén ül, nem a szekció DOM-jában — ugyanaz a stabil, témából jövő `#product-offer-modal` id a hook, mint az 1. blokk gomb-szabályánál. Színek: var(--bs-primary) + var(--bs-on-primary-text). Az utóbbi a téma dedikált „szöveg primary felületen” tokenje (ma #FAFBF6) — NEM beégetett #fff, így színsémaváltáskor követi a palettát. A bezáró ikon a témában Font Awesome