/* worklights.css — pixel-exact rebuild of worklights.de, all values measured on the live site (Puppeteer, 03.11.2026) */

@import url('../fonts/fonts.css');

:root {
  --wl-body-text: #8d8d8d;
  --wl-heading: #000;
  --wl-link: #dd9933;
  --wl-accent-gold: #e2ca67;
  --wl-button-gold: #e8cf64;
  --wl-title-bar: #e6ae48;
  --wl-dark: #1a1a1a;
  --wl-dark-text: #393939;
  --wl-bold: #444;
  --wl-topbar-link: #9d9d9d;
  --wl-dropdown-item: #a6a6a6;
  --wl-footer-link: #a2a2a2;
  --wl-footer-border: #444;
  --wl-mobile-border: #eaeaea;
  --wl-arrow: #efe0c6;
  --wl-font: 'Raleway', sans-serif;
  --wl-font-crete: 'Crete Round', serif;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; }
.logo img, .logo-footer { display: block; }
a { text-decoration: none; color: var(--wl-link); font-weight: 600; }
a:hover { color: var(--wl-title-bar); }
ul, ol { list-style: none; }
button { font: inherit; }

/* ── Base Typography ── */
body {
  font-family: var(--wl-font);
  font-size: 16px;
  line-height: 23px;
  color: var(--wl-body-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
p { font-size: 16px; line-height: 25px; margin-top: 20px; }
h1, h2, h3, h4, h5, h6 { color: var(--wl-heading); margin-top: 30px; margin-bottom: 15px; }
h1 { font-size: 34px; line-height: 1.3125; font-weight: 700; letter-spacing: 3px; text-transform: lowercase; }
h2 { font-size: 22px; line-height: 26.4px; font-weight: 700; text-transform: lowercase; }
h3 { font-size: 22px; font-weight: 700; text-transform: lowercase; }
h4 { font-size: 15px; line-height: 1.538; font-weight: 600; }
h5 { font-size: 18px; font-weight: 700; }
h6 { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
b, strong { color: inherit; font-weight: 700; }
.ico { display: inline-block; width: 1em; height: 1em; vertical-align: middle; fill: currentColor; }

/* ── Container: 1100 / 950 / 768 / 600 / 420 / 300 / 95% ── */
.container { max-width: 1100px; margin: 0 auto; width: 100%; }

/* ── Top Bar (33px, #1a1a1a, links right) ── */
.topbar { height: 33px; background: var(--wl-dark); overflow: hidden; }
.topbar .container { display: flex; align-items: center; justify-content: flex-end; height: 100%; max-width: none; padding-right: 15px; }
.topbar-links { display: flex; align-items: center; }
.topbar-links a { font-size: 13px; font-weight: 600; color: var(--wl-topbar-link); padding-left: 15px; line-height: 33px; }
.topbar-links a:hover { color: #fff; }

/* ── Header (100px, white, padding 0 45) ── */
.header { height: 100px; background: #fff; padding: 0 45px; position: relative; z-index: 100; }
.header .container { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: none; }
.logo { display: block; flex-shrink: 0; }
.logo img { width: 230px; height: 100px; }

/* ── Main Navigation (13px 700, 3px spacing, lowercase, line-height 100) ── */
.main-nav { display: flex; align-items: center; }
.main-nav > ul { display: flex; align-items: center; }
.main-nav > ul > li { position: relative; }
.main-nav > ul > li > a {
  font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: lowercase;
  color: var(--wl-heading); padding: 0 24px; line-height: 100px; display: block; white-space: nowrap;
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li.active > a { color: var(--wl-accent-gold); }
.mobile-arrow { display: none; }

/* Dropdown: 235px, #1a1a1a, 5px gold top border, items 12px 500 #a6a6a6 lh 34 */
.main-nav .submenu {
  position: absolute; top: 100%; left: 0; width: 235px; background: var(--wl-dark);
  border-top: 5px solid var(--wl-accent-gold); padding: 14px 0 22px;
  opacity: 0; visibility: hidden; transform: translateY(5px);
  transition: opacity 0.25s, visibility 0.25s, transform 0.25s; z-index: 200;
}
.main-nav > ul > li:hover > .submenu,
.main-nav > ul > li.submenu-visible > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu li a { font-size: 12px; font-weight: 500; color: var(--wl-dropdown-item); line-height: 34px; display: block; margin: 0 24px; white-space: nowrap; }
.submenu li a:hover { color: var(--wl-accent-gold); }

/* ── Language Select (native, 102×19) ── */
.lang-select { display: flex; align-items: center; }
.lang-select select { width: 102px; height: 19px; font-family: Arial, sans-serif; font-size: 13.33px; color: #000; border: 1px solid #767676; border-radius: 3px; background: #fff; cursor: pointer; }

/* ── Mobile Burger (hidden on desktop) ── */
.burger { display: none; background: none; border: none; cursor: pointer; font-size: 14px; color: #5d5d5d; }

/* ── Footer (#1a1a1a, padding 82/76, 3 columns, border-left on 2+3) ── */
.footer { background: var(--wl-dark); padding: 82px 0 76px; color: var(--wl-footer-link); }
.footer .container { display: flex; }
.footer-col { width: 33.333%; padding: 0 30px; }
.footer-col:first-child { padding-left: 0; }
.footer-col:nth-child(2), .footer-col:nth-child(3) { border-left: 1px solid var(--wl-footer-border); }
.footer-col h4 { font-size: 15px; font-weight: 600; letter-spacing: 3px; text-transform: lowercase; color: #fff; margin: 30px 0 15px; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col a { font-size: 12px; font-weight: 600; color: var(--wl-footer-link); line-height: 22px; }
.footer-col a:hover { color: #fff; }
.footer-sep { height: 1px; margin: 22px 0 10px; }
.footer .lang-select { display: flex; }
body.home .footer { display: none; }

/* ── Standard page content: container_inner padding-top 44, WPBakery rows/columns (paddings come inline) ── */
.page-content { overflow-x: hidden; }
.page-inner { padding-top: 44px; }
.row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.row > div:not(.col), .row > div:not(.col) > div:not(.col) { display: contents; }
.col { padding: 0 15px; }
.col-2 { width: 16.666%; }
.col-3 { width: 25%; }
.col-4 { width: 33.333%; }
.col-6 { width: 50%; }
.col-8 { width: 66.666%; }
.col-12 { width: 100%; }
.sep { height: 2px; }
.separator-small { width: 118px; height: 3px; background: #000; margin: 10px 0 20px; }
.separator-small.right { margin-left: auto; }
.separator-small.center { margin-left: auto; margin-right: auto; }
.page-content ul, .page-content ol { padding-left: 17px; margin: 0; }
.page-content ul { list-style: disc; }
.page-content ol { list-style: decimal; }
.page-content li { line-height: 23px; }
.page-content img { display: inline-block; vertical-align: baseline; }
.page-content img.aligncenter { display: block; margin: 10px auto 0; }
.page-content img.alignleft { float: left; margin: 0 20px 20px 0; }
.page-content img.alignright { float: right; margin: 0 0 20px 20px; }
.page-content table { border-collapse: collapse; }
.page-content td { padding: 5px 10px 5px 0; vertical-align: top; }
.page-content p:empty { margin-top: 20px; }

/* ── Fullscreen Homepage ── */
.fs-holder { margin-top: -100px; position: relative; z-index: 50; overflow: hidden; }
.fs-section { height: 100vh; display: flex; align-items: center; position: relative; }
.fs-grid { width: 100%; padding: 100px 0; }
.fs-gold { background: var(--wl-button-gold); color: #fff; }
.fs-gold .fs-grid { padding: 50px 0 0; }
.fs-dark { background: var(--wl-dark-text); }
.fs-dark .fs-grid { padding: 100px 0 0; }
.fs-row { display: flex; margin: 0 -15px; }
.fs-col { padding: 0 15px; }
.fs-col-6 { width: 50%; }
.fs-col-4 { width: 33.333%; }
.fs-col-3 { width: 25%; }
.fs-col-2 { width: 16.666%; }
.fs-col-8 { width: 66.666%; }
.fs-col-a { text-align: right; }
.fs-col-b p { text-align: left; }
.fs-col-b-empty { height: 307px; }
.fs-gold h1, .fs-gold p, .fs-gold a { color: #fff; }
.fs-section strong { color: inherit; }
.fs-section .gold { color: var(--wl-accent-gold); }
.fs-dark p { text-align: center; }
.sp { height: 2px; }
.sp-20 { height: 2px; margin-top: 20px; }
.sp-30 { height: 2px; margin-top: 30px; }
.sp-35 { height: 2px; margin-top: 35px; }
.sp-150 { height: 2px; margin-top: 150px; }
.separator-small { width: 118px; height: 3px; background: #000; margin: 10px 0 20px auto; }
.fs-gold .separator-small { background: #fff; }

/* Buttons: 10px 700 2px uppercase, 40 + 2px border, padding 0 30 */
.qbutton {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  height: 40px; line-height: 40px; padding: 0 30px; box-sizing: content-box; border: 2px solid #fff;
  background: var(--wl-button-gold); color: #fff; cursor: pointer; transition: background 0.3s, color 0.3s, border-color 0.3s;
  font-family: var(--wl-font);
}
.qbutton:hover { background: #fff; color: var(--wl-button-gold); border-color: var(--wl-button-gold); }
.fs-gold .qbutton { background: transparent; border-color: #fff; color: #fff; }
.fs-gold .qbutton:hover { background: #fff; color: var(--wl-button-gold); }

/* Fullscreen arrows: 50px ElegantIcons carrot, #efe0c6, centered */
.fs-arrow { position: fixed; left: 50%; margin-left: -17px; z-index: 150; cursor: pointer; background: none; border: none; width: 34px; height: 18px; padding: 0; transition: opacity 0.2s; color: var(--wl-arrow); opacity: 0; pointer-events: none; }
.fs-arrow svg { display: block; width: 34px; height: 18px; }
.fs-arrow:hover { color: var(--wl-accent-gold); }
.fs-arrow-up { top: 228px; }
.fs-arrow-down { bottom: 63px; }
body.fs-active { overflow: hidden; height: 100vh; }

/* ── Title Bar (posts / categories): 95px #e6ae48, breadcrumb 21px 700 white ── */
.title-bar { height: 95px; line-height: 95px; background: var(--wl-title-bar); overflow: hidden; }
.title-bar .container { display: flex; align-items: center; height: 100%; }
.breadcrumb { font-size: 21px; font-weight: 700; color: #fff; text-transform: capitalize; line-height: 25px; }
.breadcrumb a { color: #fff; font-weight: 700; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }

/* ── News masonry: items 31.2% (≤1000 47%, ≤768 46.5%, ≤600 100%), margin-bottom 20 ── */
.masonry-grid { display: flex; flex-wrap: wrap; position: relative; }
.masonry-item { width: 31.2%; margin: 0 2.13% 20px 0; }
.masonry-grid.js-masonry { display: block; }
.js-masonry .masonry-item { position: absolute; margin: 0; }
.masonry-item img { width: 100%; display: block; }
.post-text-inner { padding: 25px 0 5px; }
.post-date { display: block; font-size: 15px; font-weight: 600; color: var(--wl-accent-gold); line-height: 22.5px; margin-bottom: 7px; }
.post-title { font-size: 16px; font-weight: 800; color: var(--wl-dark-text); line-height: 24.6px; margin: 30px 0 15px; }
.post-title a { color: inherit; font-weight: inherit; }
.post-title a:hover { color: var(--wl-accent-gold); }

/* ── Pagination: Crete Round italic 22px, arrows 30px at the edges ── */
.pagination { position: relative; display: flex; align-items: center; justify-content: center; padding: 30px 0 50px; line-height: 33px; height: 113px; }
.pagination a, .pagination span { font-family: var(--wl-font-crete); font-style: italic; font-size: 22px; color: var(--wl-dropdown-item); display: inline-block; width: 33px; height: 33px; text-align: center; line-height: 33px; }
.pagination .current { color: var(--wl-dark-text); }
.pagination .prev, .pagination .next { position: absolute; top: 30px; width: 33px; height: 30px; font-size: 30px; font-style: normal; line-height: 30px; }
.pagination .prev { left: 0; }
.pagination .next { right: 0; }
.pagination .prev .ico, .pagination .next .ico { vertical-align: top; }

/* ── Single Post: post_text_inner padding-top 45, h2 22px lowercase, 23px after the article ── */
.single-post .post-text-inner { padding: 45px 0 0; }
.single-post h2 { text-transform: lowercase; }
.single-post p { margin-bottom: 15px; }
.single-post::after { content: ''; display: block; height: 23px; }

/* ── Contact page: 65px gold icon circle, text block padding-left 100 ── */
.contact-item { position: relative; padding-left: 100px; min-height: 65px; }
.contact-icon { position: absolute; left: 0; top: 0; width: 65px; height: 65px; border-radius: 50%; background: var(--wl-accent-gold); display: flex; align-items: center; justify-content: center; }
.contact-icon .ico { font-size: 25px; color: #fff; }
.contact-text h5 { font-size: 18px; font-weight: 700; line-height: 26px; color: var(--wl-dark-text); margin: 0 0 19.8px; }
.contact-text p { margin-top: 0; padding-top: 18px; }

/* ── Utility ── */
.text-right { text-align: right; }
.text-center { text-align: center; }
.hidden { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

/* ── ≤1400: arrows closer to the edges ── */
@media (max-width: 1400px) {
  .fs-arrow-up { top: 160px; }
  .fs-arrow-down { bottom: 28px; }
}

/* ── ≤1200 ── */
@media (max-width: 1200px) {
  .container { max-width: 950px; }
  .main-nav > ul > li > a { padding: 0 16px; }
}

/* ── ≤1000: mobile header + menu ── */
@media (max-width: 1000px) {
  .container { max-width: 768px; }

  .topbar { height: auto; }
  .topbar .container { justify-content: center; padding: 0; }
  .topbar-links a { line-height: 28px; }

  .header { height: auto; }
  .header .container { flex-wrap: wrap; justify-content: center; position: relative; }
  .logo { margin: 0 auto; }
  .burger { display: block; position: absolute; left: 0; top: 0; height: 100px; line-height: 100px; padding: 0; }
  .burger .ico { vertical-align: middle; }

  .main-nav { display: none; width: 100%; }
  .main-nav.mobile-menu-open { display: block; }
  .main-nav > ul { display: block; }
  .main-nav > ul > li { border-bottom: 1px solid var(--wl-mobile-border); position: relative; }
  .main-nav > ul > li:last-child { border-bottom: none; }
  .main-nav > ul > li > a { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--wl-body-text); padding: 9px 0; line-height: 17px; }
  .main-nav > ul > li > a:hover, .main-nav > ul > li.active > a { color: var(--wl-accent-gold); }
  .mobile-arrow { display: block; position: absolute; right: 0; top: 0; width: 60px; height: 35px; background: none; border: none; color: var(--wl-body-text); cursor: pointer; font-size: 12px; }
  .mobile-arrow .ico { transition: transform 0.2s; }
  .has-submenu.submenu-open > .mobile-arrow .ico { transform: rotate(180deg); }
  .main-nav .submenu { display: none; position: static; width: auto; background: none; border: none; padding: 0 0 9px; opacity: 1; visibility: visible; transform: none; transition: none; }
  .has-submenu.submenu-open > .submenu { display: block; }
  .main-nav .submenu li a { font-size: 13px; font-weight: 600; color: var(--wl-body-text); line-height: 17px; padding: 9px 0 9px 20px; margin: 0; white-space: normal; }
  .main-nav .lang-select { padding: 9px 0; }

  .masonry-item { width: 47%; margin-right: 3%; }
}

/* ── ≤768 ── */
@media (max-width: 768px) {
  .container { max-width: 600px; }
  .main-nav .lang-select { display: none; }
  .col-2, .col-3, .col-4, .col-6, .col-8 { width: 100%; }
  .masonry-item { width: 46.5%; margin-right: 3.5%; }
}

/* ── ≤600: footer stacks, masonry single column, homepage becomes a normal page ── */
@media (max-width: 600px) {
  .container { max-width: 420px; }
  .footer .container { flex-direction: column; }
  .footer-col { width: 100%; border-left: none !important; padding: 0; margin-bottom: 25px; }
  .footer-col:last-child { margin-bottom: 0; }
  .masonry-item { width: 100%; margin-right: 0; }
  .fs-section { height: auto; padding: 30px 0; }
  .fs-row { flex-direction: column; }
  .fs-col-6, .fs-col-4, .fs-col-3, .fs-col-2, .fs-col-8 { width: 100%; }
  .fs-arrow { display: none; }
}

/* ── ≤480 ── */
@media (max-width: 480px) {
  .container { max-width: 300px; }
  .header { padding: 0 25px; }
  .footer { padding-left: 25px; padding-right: 25px; }
  .footer .container { max-width: none; }
}

/* ── ≤420 ── */
@media (max-width: 420px) {
  .header { padding: 0 15px; }
  .footer { padding-left: 15px; padding-right: 15px; }
}

/* ── ≤350 ── */
@media (max-width: 350px) {
  .container { max-width: 95%; }
}

/* ── Print ── */
@media print {
  .topbar, .fs-arrow, .burger { display: none; }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  .footer { background: #fff; color: #000; border-top: 1px solid #ccc; }
  .footer-col a { color: #000; }
  .fs-section { height: auto; page-break-inside: avoid; }
}