/* =============================================================================
   DETACK THEME — MAIN STYLESHEET
   Exact 1:1 match of www.detack.de
   Font:    Raleway (Google Fonts — replaces self-hosted original)
   Grid:    Bootstrap 3 grid (inline, same breakpoints as original)
   Slider:  Swiper (modern replacement for BXSlider, same visual)
   Icons:   Font Awesome 4.7
   Colors:  All values from audited app.css — no custom properties
   ============================================================================= */

/* ── Fluid type scale (matches original exactly) ────────────────────────────── */
html, body { font-size: 14px; }
@media (min-width: 960px)  { html, body { font-size: 15px; } }
@media (min-width: 1560px) { html, body { font-size: 17px; } }
@media (min-width: 1920px) { html, body { font-size: 20px; } }

/* ── Reset / base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; padding: 0;
  font-family: 'Raleway', Arial, Helvetica, clean, sans-serif;
  font-weight: 400;
  background-color: #fff;
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; padding: 0; font-family: inherit; }
h1 { font-size: 1.5em; color: #1e1e1e; font-weight: 700; }
h2 { font-size: 1em;   color: #fff;    font-weight: 300; text-transform: uppercase; }
h3 { font-size: 0.925em; color: #fff;  font-weight: 400; text-transform: uppercase; }
@media (min-width: 960px) {
  h1 { font-size: 2em; }
  h2 { font-size: 1.45em; }
}
p  { font-size: 0.9em; line-height: 1.475em; color: #ffffff; margin: 0 0 1em; }
a  { color: #333; text-decoration: underline; transition: all 0.3s linear; }
a:hover { text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
* { box-sizing: border-box; }

/* ── Bootstrap 3 grid — same breakpoints as original ───────────────────────── */
.container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; }
.container::after { content: ''; display: table; clear: both; }
@media (min-width: 768px)  { .container { max-width: 750px; } }
@media (min-width: 992px)  { .container { max-width: 970px; } }
/* ≥1200px: 85% centered — matches original detack.de container */
@media (min-width: 1200px) { .container { max-width: 85%; } }
.row { margin-left: -15px; margin-right: -15px; }
.row::after { content: ''; display: table; clear: both; }
[class*="col-"] { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; float: left; width: 100%; }
.col-xs-6  { width: 50%; }
.col-xs-12 { width: 100%; }
@media (min-width: 768px) {
  .col-sm-3  { width: 25%; }
  .col-sm-4  { width: 33.333%; }
  .col-sm-6  { width: 50%; }
  .col-sm-8  { width: 66.666%; }
  .col-sm-12 { width: 100%; }
}
@media (min-width: 992px) {
  .col-md-2  { width: 16.666%; }
  .col-md-3  { width: 25%; }
  .col-md-4  { width: 33.333%; }
  .col-md-5  { width: 41.666%; }
  .col-md-6  { width: 50%; }
  .col-md-7  { width: 58.333%; }
  .col-md-8  { width: 66.666%; }
  .col-md-9  { width: 75%; }
  .col-md-10 { width: 83.333%; }
  .col-md-12 { width: 100%; }
}
@media (min-width: 1200px) {
  .col-lg-3  { width: 25%; }
  .col-lg-4  { width: 33.333%; }
  .col-lg-6  { width: 50%; }
  .col-lg-8  { width: 66.666%; }
  .col-lg-12 { width: 100%; }
}
.pull-right { float: right !important; }
.pull-left  { float: left  !important; }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.text-left   { text-align: left; }

/* ── Page loader ────────────────────────────────────────────────────────────── */
#pageLoader {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background-color: #3c3f3f; z-index: 9999;
  transition: opacity 0.5s ease;
}
#pageLoader.hidden { opacity: 0; pointer-events: none; }
#pageLoader .loader-custom {
  position: fixed;
  top: 50%; left: 50%;
  width: 10em; height: 14em;
  margin: -7em 0 0 -5em;
}
#pageLoader .loader-custom .custom-icon {
  display: block;
  animation: flip 3s linear infinite;
}
#pageLoader .loader-custom .custom-icon svg {
  width: 100%; height: 100%;
}
#pageLoader .loader-custom .custom-icon svg .custom-icon-path {
  fill: rgb(39, 134, 183);
}
@keyframes flip {
  0%   { transform: rotateY(0deg); }
  50%  { transform: rotateY(180deg); }
  100% { transform: rotateY(0deg); }
}

/* =============================================================================
   HEADER
   ============================================================================= */

header {
  position: fixed;
  width: 100%; left: 0; top: 0;
  z-index: 99;
}

.admin-bar header { top: 32px; }

#headerInner {
  background-color: #3c3f3f;
  position: relative;
  padding: 3em 0;
  transition: all 0.3s ease-out;
  z-index: 998;
}

/* Stuck (scrolled) state */
.stuck-header #headerInner { padding: 0.5em 0; }

/* Header placeholder — reserves space below fixed header */
#headerPlcHldr {
  display: block;
  position: relative;
  transition: all 0.3s ease-out;
}

/* ── Logo ── */
a.logo {
  display: flex;
  align-items: center;
  width: auto;
  text-decoration: none;
  position: relative;
  height: auto;
  box-sizing: border-box;
}
a.logo img {
  position: static;
  height: 2.5em;
  width: auto;
  max-width: 100%;
  display: block;
}
@media (min-width: 1920px) {
  a.logo img { height: 1.85em; }
}

/* Header + language bar share the same 85% centred container as the body,
   so logo, search, and page content all align on the same left/right edges. */

/* ── Desktop header: 3-column Bootstrap layout matching original detack.de ──
   col-md-3 (logo 25%) · col-md-7 text-center (nav 58.33%) · col-md-2 (search 16.67%)
   Flexbox is used only for vertical alignment; horizontal centering of the nav
   relies on text-align:center inherited through the col-md-7 column.            */

/* 1. Make the Bootstrap .row a flex container (vertical align only) */
#headerInner .container > .row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
/* 2. Cancel Bootstrap's float on all header columns */
#headerInner .container .row > [class*='col-'] { float: none; }

/* 3. Logo column: 25% (col-md-3) — auto-width at mobile, fixed at desktop */
#headerInner .container .row > .logo-col {
  flex: 0 0 auto;
  width: auto;
}
@media (min-width: 1200px) {
  /* Symmetric: logo = search = 16.67% → nav centres at exactly 50% of container */
  #headerInner .container .row > .logo-col {
    flex: 0 0 16.67%;
    max-width: 16.67%;
  }
}

/* 4. Nav column: 66.67% at desktop — symmetric flanks give exact page-centre alignment */
#headerInner .container .row > .nav-large {
  padding: 0;
}
@media (min-width: 1200px) {
  #headerInner .container .row > .nav-large {
    flex: 0 0 66.67%;
    max-width: 66.67%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* 5. Nav inside desk-menu: cancel any float */
#headerInner .desk-menu > nav { float: none; }

/* 6. Keep items on one line so max-content width is the sum of all items */
#headerInner ul.main-menu.dsk { white-space: nowrap; }

/* 7. Search column: 16.67% (symmetric with logo), flex for vertical + right alignment */
.nav-search {
  display: none;  /* hidden on mobile */
}
@media (min-width: 1200px) {
  .nav-search {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 16.67%;
    max-width: 16.67%;
    padding: 0;
  }
}

/* ── Desktop nav ── */
.nav-large { display: block; }
.nav-small  { display: none; }

.desk-menu  { display: block; }
.mob-menu   { display: none; }

/* Mobile nav hidden at all sizes by default — JS adds .is-open to show it */
ul.main-menu.mob { display: none; }

ul.main-menu {
  margin: 0; padding: 0;
  list-style-type: none;
  font-size: 1.2em;
}
/* Desktop: li must be position:static so .drop is positioned
   relative to #headerInner (position:relative), producing a
   full-width tray that drops from the bottom of the header. */
ul.main-menu.dsk        { position: static; }
ul.main-menu.dsk li     { position: static; display: inline-block; }
ul.main-menu > li > a {
  position: relative;
  display: block;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0.4em 1em;
}
ul.main-menu > li > a:hover { color: #9a9a9a; }
ul.main-menu > li > a.current-page { color: #ffffff; font-weight: 700; }

/* .drop is a hidden data container only — JS reads sub-items from it */
.drop { display: none !important; }
.drop-list { margin: 0; padding: 0; list-style: none; }

/* Active nav item (when its sub-menu is open) */
.main-menu.dsk a.nav-active { color: #9a9a9a; }

/* Triangle indicator — appears at bottom of #headerInner, pointing down into the white bar */
#navArrow {
  display: none;
  position: absolute;
  bottom: -8px;        /* protrudes below #headerInner into the white language bar */
  width: 0; height: 0;
  border-left:  8px solid transparent;
  border-right: 8px solid transparent;
  border-top:   8px solid #3c3f3f;   /* same colour as #headerInner background */
  /* translateX(-50%) = 0 on a width:0 element; use margin instead */
  margin-left: -8px;
  z-index: 200;
  pointer-events: none;
}
#navArrow.visible { display: block; }

/* Search — inline expand on same nav line (no dropdown/modal) */
.searchbox {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.searchbox form { display: flex; align-items: center; }
.searchbox .search-field {
  width: 0;
  padding: 0;
  overflow: hidden;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 0.85em;
  outline: none;
  transition: width 0.3s ease, padding 0.3s ease, border-color 0.3s ease;
}
.searchbox.open .search-field {
  width: 160px;
  padding: 0.2em 0.5em;
  border-bottom-color: rgba(255,255,255,0.5);
}
.searchbox .search-field::placeholder { color: rgba(255,255,255,0.5); }
/* Hide browser-native search decoration (magnifier, ×) — avoids double icon */
.search-field::-webkit-search-decoration,
.search-field::-webkit-search-cancel-button,
.search-field::-webkit-search-results-button,
.search-field::-webkit-search-results-decoration { display: none; }
.search-toggle {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 1.4em;
  padding: 0.2em;
  line-height: 1;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.search-toggle:hover { color: #9a9a9a; }

/* ── Burger menu (mobile ≤1200px) ── */
.burger-menu {
  position: relative;
  display: none;
  vertical-align: middle;
  cursor: pointer;
}
.burger-click-region {
  display: none;
  width: 0.5em;
  height: 2em;
  cursor: pointer;
  position: relative;
  margin: 0.5em 0 0 0;
  padding: 0 0.8125em;
  box-sizing: content-box;
}
.burger-menu-piece {
  display: block;
  position: absolute;
  width: 1.125em;
  border-top: 0.25em solid #ffffff;
  border-radius: 0.125em;
  transform-origin: 50% 50%;
  transition: transform 400ms ease-out, opacity 200ms ease;
}
.burger-menu-piece:nth-child(1) { top: 0.1875em; }
.burger-menu-piece:nth-child(2) { top: 0.6875em; }
.burger-menu-piece:nth-child(3) { top: 1.188em; }
.burger-is-open .burger-menu-piece:nth-child(1) { transform: translateY(0.5em) rotate(45deg); }
.burger-is-open .burger-menu-piece:nth-child(2) { opacity: 0; }
.burger-is-open .burger-menu-piece:nth-child(3) { transform: translateY(-0.5em) rotate(-45deg); }

/* ── Mobile nav (≤1200px) ── */
@media (max-width: 1200px) {
  /* Hide desktop nav and search columns; show burger column */
  #headerInner .container .row > .nav-large { display: none; }
  .nav-search { display: none; }
  #headerInner .container .row > .nav-small {
    display: flex;
    flex: 1;
    width: auto;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25em;
    padding-left: 0;
  }
  /* Cancel floats inside the mobile header column */
  #headerInner .nav-small .mob-menu,
  #headerInner .nav-small .searchbox { float: none !important; }
  /* Constrain expanded search width so it stays on one line */
  #headerInner .nav-small .searchbox.open .search-field { width: 90px; }

  .desk-menu { display: none; }
  .mob-menu  { display: block; }
  .burger-menu { display: inline-block; }
  .burger-click-region { display: block; }

  /* Full-viewport white overlay — JS sets padding-top to header height on open */
  ul.main-menu.mob {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #fff;
    z-index: 98;
    display: none;
  }
  ul.main-menu.mob.is-open { display: block; }
  ul.main-menu.mob > li { display: block; }

  /* Main items: large, right-aligned */
  ul.main-menu.mob > li > a {
    display: block;
    color: #3c3f3f;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.5em;
    font-weight: 300;
    letter-spacing: 0.05em;
    padding: 0.55em 1em;
    text-align: right;
    border-bottom: none;
  }
  ul.main-menu.mob > li > a:hover { color: #21619e; }
  ul.main-menu.mob > li > a.current-page { font-weight: 700; }

  /* Items with sub-menus: flex so chevron sits left of right-aligned text */
  ul.main-menu.mob > li > a.has-dropdown {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55em;
  }
  ul.main-menu.mob > li > a.has-dropdown::before {
    content: '\f107';
    font-family: FontAwesome;
    font-size: 0.6em;
    font-weight: normal;
    font-style: normal;
    flex-shrink: 0;
    -webkit-font-smoothing: antialiased;
  }

  /* Mobile sub-menus */
  [class^="dropdownmob-"] {
    display: none;
    background: transparent;
    padding: 0 1em 0.75em 0;
  }
  [class^="dropdownmob-"].is-open { display: block; }
  [class^="dropdownmob-"] ul { margin: 0; padding: 0; }
  [class^="dropdownmob-"] li { display: block; }
  [class^="dropdownmob-"] a {
    display: block;
    color: #21619e !important;
    font-size: 1.05em !important;
    padding: 0.3em 0;
    text-align: right;
    text-decoration: none;
    font-weight: 300;
    letter-spacing: 0.02em;
  }
  [class^="dropdownmob-"] a:hover { opacity: 0.7; }
}

/* =============================================================================
   LANGUAGE / DROPDOWN BAR  (matches original: EN|DE always left, sub-items right)
   ============================================================================= */

.lang-select-wrapper {
  position: relative;
  background-color: #fff;
  z-index: 97;
  overflow: hidden;
  max-height: 3.8em;
  transition: max-height 0.25s ease-out, opacity 0.25s ease-out;
}

/* Expanded state: room for sub-items below EN|DE */
.lang-select-wrapper.bar-open { max-height: 12em; }

/* Collapses when header is in stuck (scrolled) state — re-opens on nav hover */
.stuck-header .lang-select-wrapper           { max-height: 0; opacity: 0; }
.stuck-header .lang-select-wrapper.bar-open  { max-height: 12em; opacity: 1; }

/* Inner flex row: language on left, sub-items on right */
.langbar-inner {
  display: flex;
  align-items: flex-start;
  padding: 1em 0;
}
.langbar-lang { flex-shrink: 0; }

/* Sub-items container — hidden until .bar-open
   padding-left is set by JS to align content with the hovered nav item */
.langbar-sub {
  flex: 1;
  padding-left: 0;  /* overridden by JS */
  padding-top: 0.1em;
  display: none;
}
.lang-select-wrapper.bar-open .langbar-sub {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 3em;
}

/* One <ul> per column — JS creates one per group of ≤3 items */
.langbar-sub-col {
  margin: 0; padding: 0; list-style: none;
  min-width: 180px;
}
.langbar-sub-col li { display: block; }
.langbar-sub-col a {
  display: block;
  position: relative;
  color: #555;
  text-decoration: none;
  font-size: 1em;          /* matches body text — bigger & more legible than 0.82em */
  font-weight: 300;        /* Raleway Light — matches original's airy feel */
  letter-spacing: 0.01em;
  padding: 0.5em 0;        /* generous vertical spacing between items */
  white-space: nowrap;
  text-transform: none;
  transition: color 0.3s linear;
}
.langbar-sub-col a::after {
  content: '\f054';        /* fa-chevron-right */
  font: 0.75em/1em FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  left: -1em;
  top: 50%;
  height: 1em;
  margin-top: -0.4em;
  transition: 0.3s linear;
  transform: translate3d(-1.25em, 0, -1em);
  opacity: 0;
}
.langbar-sub-col a:hover { color: #21619e; }
.langbar-sub-col a:hover::after,
.langbar-sub-col a:active::after {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* Language switcher styling */
ul.lang-select {
  margin: 0; padding: 0;
  list-style-type: none;
  font-size: 1.2em;
}
ul.lang-select li { display: inline-block; }
ul.lang-select li:first-child {
  border-right: 0.085em solid #21619e;
  padding-right: 0.5em;
  line-height: 1.15em;
  margin-right: 0.5em;
}
ul.lang-select li a {
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  color: #3c3f3f;
}
ul.lang-select li a:hover       { color: #21619e; }
ul.lang-select li a.lang-active { color: #21619e; font-weight: 700; }

/* =============================================================================
   FEATURE ITEMS  (two-column: image left, accordion right — EPAS features)
   ============================================================================= */

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 2.5em;
  padding: 2.5em 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.feature-item:last-child { border-bottom: none; }

.feature-item-img {
  flex: 0 0 45%;
  max-width: 45%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-item-img img {
  width: 100%;
  height: auto;
  display: block;
}

.feature-item-text {
  flex: 1;
  min-width: 0;
}

/* .feature-item-title is an h3 inside .content-wrapper so it inherits the
   universal chevron rule above. Only override what differs from that base. */
.feature-item-title { font-size: 0.9em; margin-bottom: 0.75em; }
.feature-item-body p { font-size: 0.85em; color: rgba(255,255,255,0.85); }

/* Alternating: even-indexed items (set by PHP) flip image to right */
.feature-item--reverse { flex-direction: row-reverse; }

/* On small screens stack vertically */
@media (max-width: 767px) {
  .feature-item { flex-direction: column; gap: 1em; }
  .feature-item-img { flex: none; max-width: 100%; }
}

/* =============================================================================
   REFERENCE CUSTOMER LOGOS
   ============================================================================= */

.logo-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 2em 3em;
  padding: 1.5em 0;
}
.logo-list a {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: transform 0.25s ease;
}
.logo-list a:hover {
  transform: scale(1.07);
}
.logo-list img {
  height: auto;
  max-height: 10em;
  width: auto;
  max-width: 320px;
  object-fit: contain;
  display: block;
}
/* Logo sections always use the puzzle background regardless of overlay= in content */
.content-wrapper:has(.logo-list) .bkg-over {
  background-image: url('../images/bkg-04.jpg');
}

/* =============================================================================
   HOMEPAGE SLIDER  (Swiper, same visual as BXSlider original)
   ============================================================================= */

.homepage-slider-wrapper {
  position: relative;
  width: 100%;
  /* Body padding-bottom set for fixed footer */
}

/* Slide: polygon image is the swiper-slide background; colour band overlays it */
.swiper-slide {
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-color: #0a1e3a;
  display: flex;
  flex-direction: column;
}
/* Spacer fills remaining slide height so the polygon image shows below the colour band */
.slide-image-spacer { flex: 1; min-height: 80px; }

/* ── home-top-section: the dark colored testimonial band ── */
[class^="home-top-section-"] {
  position: relative;
  width: 100%;
  background-size: 100%;
  background-position: top center;
  padding: 0;
}

/* Solid colors + background-blend-mode:multiply (set inline) — matches detack.de exactly */
.home-top-section-1 { background-color: rgb( 20, 116, 165); }   /* blue */
.home-top-section-2 { background-color: rgb(156,  27,  39); }   /* red */
.home-top-section-3 { background-color: rgb( 20, 116, 165); }   /* blue */
.home-top-section-4 { background-color: rgb(156,  27,  39); }   /* red */
.home-top-section-5 { background-color: rgb( 20, 116, 165); }   /* blue */
.home-top-section-6 { background-color: rgb(156,  27,  39); }   /* red */
.home-top-section-7 { background-color: rgb( 20, 116, 165); }   /* blue */
.home-top-section-8 { background-color: rgb(156,  27,  39); }   /* red */

/* Mobile: override background-size so the blended image scales correctly */
@media (max-width: 767px) {
  [class^="home-top-section-"] {
    background-size: cover;
  }
}

/* Gartner / product name panel (left column on desktop) */
.slide-product-panel {
  text-align: left;
  padding-top: 1.9em;
  padding-bottom: 1.9em;
}
.slide-epas-name {
  font-size: 4em;
  font-weight: 200;
  line-height: 0.75em;
  color: #fff;
  text-decoration: none;
  display: block;
  margin-bottom: 0.5em;
}
.slide-gartner-logo { margin: 0; max-width: 180px; }

/* Testimonial text panel (middle column) */
.slide-testimonial {
  padding-top: 1.2em;
  padding-bottom: 1.2em;
}
.slide-testimonial blockquote {
  font-size: 1.1em;
  font-weight: 700;
  font-style: italic;
  color: #fff;
  border: none;
  margin: 0 0 0.75em;
  padding: 0;
  line-height: 1.4em;
}
.slide-testimonial .slide-stars {
  margin-bottom: 0.75em;
  display: flex;
  gap: 2px;
  align-items: center;
}
.slide-testimonial .slide-stars img { height: 1.4em; width: auto; }
/* Fallback star characters */
.star-char { color: #f5c518; font-size: 1.4em; }

.slide-testimonial .reviewer-info {
  font-size: 0.85em;
  font-style: italic;
  color: rgba(255,255,255,0.85);
  line-height: 1.5em;
  margin-bottom: 1em;
}
.slide-testimonial .reviewer-meta {
  display: block;
  color: rgba(255,255,255,0.65);
  font-style: normal;
  font-size: 0.95em;
}

a.home-explore {
  padding: 2.125em 0 0 0;
  color: #ffffff;
  text-decoration: none;
  display: inline-block;
  font-size: 1.2em;
}
a.home-explore:hover { color: #8ba0bf; }

/* Swiper pagination — styled like original bx-pager */
.homepage-slider-wrapper .swiper-pagination {
  bottom: 8px;
}
.homepage-slider-wrapper .swiper-pagination-bullet {
  width: 0.9em;
  height: 0.9em;
  background: rgba(255,255,255,0.4);
  opacity: 1;
  border-radius: 50%;
  transition: background 0.2s;
}
.homepage-slider-wrapper .swiper-pagination-bullet-active {
  background: #fff;
}

/* Swiper nav arrows */
.homepage-slider-wrapper .swiper-button-prev,
.homepage-slider-wrapper .swiper-button-next {
  color: rgba(255,255,255,0.8);
  top: 50%;
  font-size: 1em;
}
.homepage-slider-wrapper .swiper-button-prev::after,
.homepage-slider-wrapper .swiper-button-next::after { font-size: 1.5em; }

/* =============================================================================
   PAGE HEADING WRAPPERS  (exact originals — referenced via background-image)
   ============================================================================= */

.heading-wrapper,
.contact-heading-wrapper,
.services-heading-wrapper,
.solutions-heading-wrapper {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin-bottom: 0.3125em;
  text-align: center;
  padding: 2em 0;
}

.heading-wrapper          { background-image: url('../images/heading-bkg.jpg'); }
.contact-heading-wrapper  { background-image: url('../images/heading-bkg2.jpg'); }
.services-heading-wrapper { background-image: url('../images/heading-bkg3.jpg'); }
.solutions-heading-wrapper { background-image: url('../images/heading-bkg4.jpg'); }

/* Heading wrappers set their h1 white & centered */
.heading-wrapper h1,
.contact-heading-wrapper h1,
.services-heading-wrapper h1,
.solutions-heading-wrapper h1 {
  color: #ffffff;
  text-align: center;
  text-transform: uppercase;
  margin: 0;
}

/* =============================================================================
   CONTENT SECTIONS
   ============================================================================= */

/* Primary section container */
.content-wrapper {
  padding: 2em 0;
  border-bottom: 0.3125em solid #fff;
  position: relative;
  overflow-x: hidden;
}

/* Main blue background color */
.bk-color { background-color: #184682; }

/* h2 centred by default in content wrappers */
.content-wrapper h2 { text-align: center; }
/* Body text justified */
.content-wrapper p  { text-align: justify; }

/* ── Background image overlay ── */
.bkg-over {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  left: 0;
  z-index: 0;
  pointer-events: none;
}

/* The content inside must sit above the overlay */
.content-wrapper > .container { position: relative; z-index: 1; }
.content-wrapper > .row       { position: relative; z-index: 1; }

/* Background variants */
.over-03 { background-image: url('../images/bkg-03.jpg'); }
.over-04 { background-image: url('../images/bkg-04.jpg'); }
.over-05 { background-image: url('../images/bkg-05.jpg'); }
.over-06 { background-image: url('../images/bkg-06.jpg'); }
.over-07 { background-image: url('../images/bkg-07.jpg'); }

/* Description / body text style */
.description { font-weight: 200; padding: 0.4em 0.975em 0.4em 0; -webkit-font-smoothing: antialiased; }
.description p { line-height: 1.67em; }

/* Section icon (original diamond/rhombus icon used in service headings) */
.section-icon-wrap { display: flex; align-items: center; gap: 1em; margin-bottom: 1em; }
.section-icon-wrap img { width: 3.5em; height: auto; flex-shrink: 0; }
.section-icon-wrap h2  { text-align: left; margin: 0; }

/* ── Lists with arrows ── */
ul.list-arrowed { margin: 1em 0; padding: 0; }
ul.list-arrowed li { position: relative; padding-left: 1.4em; margin-bottom: 0.4em; }
ul.list-arrowed li::before {
  content: '\f054';
  font-family: FontAwesome;
  position: absolute; left: 0;
  color: #8ba0bf;
  font-size: 0.8em;
  top: 0.15em;
}
ul.list-arrowed li a { color: #fff; text-decoration: none; }
ul.list-arrowed li a:hover { color: #8ba0bf; }

/* ── Section sub-headings: h3 inside content areas auto-gets a › chevron ────
   Editors type plain h3 in the WP editor; CSS handles the icon & layout.
   [detack_accordion] shortcode also renders as a plain h3 for compat.      */
.content-wrapper h3 {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.925em;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 0.75em;
  line-height: 1.3;
  clear: both;
}
.content-wrapper h3::before {
  content: '\f105';          /* fa-angle-right glyph */
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  font-size: 1em;
  line-height: 1;            /* keeps glyph flush with text cap-height */
  flex-shrink: 0;
  display: inline-block;
  width: 1.286em;            /* mirrors fa-fw so text left-edge is predictable */
  text-align: center;
}

/* ── Two-column section icon headings ── */
.icon-heading { display: flex; align-items: center; gap: 1em; margin-bottom: 1.5em; }
.icon-heading img { width: 3em; height: 3em; object-fit: contain; flex-shrink: 0; }
.icon-heading h2  { margin: 0; text-align: left; }

/* ── White background modifier ── */
.white-bg h1, .white-bg h2, .white-bg h3,
.white-bg p, .white-bg .btn, .white-bg ul, .white-bg ol { color: #000; }

/* ── Generic button ── */
.btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.6);
  color: #ffffff;
  font-size: 0.925em;
  font-family: inherit;
  display: inline-block;
  cursor: pointer;
  padding: 0.5em 1.25em;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.2s;
}
.btn:hover { background: rgba(255,255,255,0.1); color: #fff; text-decoration: none; }

/* ── Inline text links on dark sections — white, bold, underline on hover ── */
/* Matches original: same colour as surrounding text but bold, no decoration  */
.content-wrapper p a:not(.btn),
.feature-item-body a {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s;
}
.content-wrapper p a:not(.btn):hover,
.feature-item-body a:hover {
  text-decoration: underline;
  opacity: 0.75;
}

/* ── Image fade border effect ── */
.img-fade { display: block; position: relative; }
.img-fade::before {
  display: block; content: '';
  position: absolute; width: 100%; height: 100%;
  box-shadow: inset 0 0 3px 3px rgba(255,255,255,1);
}

/* ── Publications grid (Resources page) ── */
.pub-filter-bar { display: flex; flex-wrap: wrap; gap: 0.5em; margin-bottom: 1.5em; }
.pub-filter-btn {
  padding: 0.35em 1em;
  border: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.7);
  font-size: 0.8em;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.2s;
}
.pub-filter-btn:hover, .pub-filter-btn.active {
  background: rgba(255,255,255,0.12);
  color: #fff;
  text-decoration: none;
  border-color: rgba(255,255,255,0.6);
}
.pub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5em; margin: 1.5em 0; }
.pub-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.pub-card-type {
  display: inline-block;
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8ba0bf;
  border: 1px solid #21619e;
  padding: 0.15em 0.5em;
  align-self: flex-start;
}
.pub-card-title { font-size: 1em; font-weight: 700; text-transform: uppercase; color: #fff; margin: 0; }
.pub-card-date { font-size: 0.78em; color: rgba(255,255,255,0.45); margin: 0; text-transform: uppercase; letter-spacing: 0.04em; }
.pub-card-excerpt { font-size: 0.85em; color: rgba(255,255,255,0.75); line-height: 1.5em; flex: 1; }
.pub-download { margin-top: auto; align-self: flex-start; }
.pub-download .fa { margin-right: 0.4em; }

/* ── Publications list (Resources page) ── */
h3.h3-arrowd {
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin-top: 2.2em;
  margin-bottom: 0.7em;
}
h3.h3-arrowd a { color: #fff; text-decoration: underline; }
h3.h3-arrowd a:hover { opacity: 0.65; text-decoration: underline; }
a.download { display: block; float: right; border: 1px outset rgba(255,255,255,0.8); color: #fff; text-transform: uppercase; font-weight: 300; padding: 0.35em 2.5em; text-decoration: none; margin-top: 0.25em; margin-bottom: 1.5em; }
a.download:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Pagination */
.detack-pagination { display: flex; justify-content: center; gap: 0.4em; margin-top: 2em; }
.detack-pagination a, .detack-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2em; height: 2em; padding: 0 0.5em;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.7); font-size: 0.85em; text-decoration: none;
  transition: background 0.2s;
}
.detack-pagination a:hover { background: rgba(255,255,255,0.1); color: #fff; }
.detack-pagination .current { background: #21619e; border-color: #21619e; color: #fff; }

/* Single post */
.post-meta { font-size: 0.8em; color: rgba(255,255,255,0.5); margin-bottom: 2em; padding-bottom: 1em; border-bottom: 1px solid rgba(255,255,255,0.1); text-transform: uppercase; letter-spacing: 0.04em; }
.entry-content ul { list-style: disc; margin: 0.5em 0 1em 1.5em; }
.entry-content ol { list-style: decimal; margin: 0.5em 0 1em 1.5em; }
.entry-content li { font-size: 0.9em; line-height: 1.5em; color: #fff; margin-bottom: 0.3em; }
.entry-content blockquote { border-left: 3px solid #21619e; padding-left: 1em; margin: 1em 0; font-style: italic; color: rgba(255,255,255,0.8); }
.entry-content a { color: #fff; font-weight: 700; text-decoration: none; }
.entry-content a:hover { text-decoration: underline; opacity: 0.75; }
.post-navigation { margin-top: 2em; padding-top: 1em; border-top: 1px solid rgba(255,255,255,0.1); }
.post-navigation .nav-links { display: flex; justify-content: space-between; }
.post-navigation a { color: #8ba0bf; font-size: 0.85em; text-decoration: none; }
.post-navigation a:hover { color: #fff; }

/* Search results — matches detack.de: dark building overlay, chevron titles */
.content-wrapper.search-results { border-bottom: none; padding: 3em 0; min-height: 70vh; }
.search-count { font-size: 0.85em; font-weight: 700; color: #fff; text-transform: uppercase; margin-bottom: 2.5em; letter-spacing: 0.02em; }
.search-result-item { margin-bottom: 2.5em; }
.content-wrapper.search-results .search-result-item h3 { font-size: 1.65em; margin-bottom: 0.35em; }
.search-result-item h3 a { color: #fff; text-decoration: none; }
.search-result-item h3 a:hover { opacity: 0.75; }
.search-result-excerpt { font-size: 0.95em; font-weight: 300; color: rgba(255,255,255,0.9); line-height: 1.6; margin-bottom: 0; }

/* 404 */
.error-404 { text-align: center; padding: 4em 0; }
.error-code { font-size: 6em; font-weight: 700; color: #21619e; line-height: 1; margin-bottom: 0.2em; opacity: 0.7; }
.error-404 h1 { text-transform: uppercase; letter-spacing: 0.1em; color: #fff; margin-bottom: 0.5em; }
.error-404 p { color: rgba(255,255,255,0.6); margin-bottom: 1.5em; }

/* =============================================================================
   FOOTER  — position: fixed on desktop, sits at bottom of viewport
   ============================================================================= */

footer {
  position: relative;
  width: 100%;
  padding: 0.625em 0;
  background-color: #3c3f3f;
  z-index: 90;
}

/* Fixed to viewport bottom at tablet and above */
@media (min-width: 768px) {
  footer { position: fixed; left: 0; bottom: 0; }
  /* Push page content up to not be hidden by the footer */
  body { padding-bottom: 2.5em; }
}

ul.footer-links {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ul.footer-links li { display: inline-block; }
ul.footer-links li a {
  display: block;
  text-decoration: none;
  color: #9a9a9a;
  font-size: 0.75em;
  transition: color 0.2s;
}
ul.footer-links li a:hover { color: #ffffff; }
ul.footer-links li:first-child {
  border-right: 0.0625em solid #9a9a9a;
  padding-right: 0.625em;
  line-height: 0.75em;
  margin-right: 0.4375em;
}

ul.footer-social {
  margin: 0.5em 0;
  padding: 0;
  list-style-type: none;
  text-align: left;
}
@media (min-width: 768px) { ul.footer-social { margin: 0; text-align: right; } }
ul.footer-social li { display: inline-block; }
ul.footer-social li a {
  display: block;
  text-decoration: none;
  line-height: 1;
  color: #ffffff;
  padding: 0 0.4em;
  font-size: 1em;
  transition: color 0.2s;
}
ul.footer-social li a:hover { color: #9a9a9a; }

/* =============================================================================
   BACK-TO-TOP
   ============================================================================= */

.backTop {
  bottom: 5.625em;
  position: fixed;
  right: 0.9375em;
  z-index: 95;
  display: none;
}
.backTop.visible { display: block; }
.backTop a {
  display: block;
  background: #fff;
  color: #000;
  width: 2em; height: 2em;
  text-align: center;
  line-height: 2em;
  text-decoration: none;
  font: 1.2em/2em FontAwesome;
}

/* =============================================================================
   ALERT / COOKIE BANNER
   ============================================================================= */

#cookiesAlert {
  position: fixed;
  bottom: 2.5em;
  left: 0; right: 0;
  background: #3c3f3f;
  color: #fff;
  padding: 0.75em 1em;
  font-size: 0.85em;
  z-index: 888;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}
#cookiesAlert a { color: #8ba0bf; }
#cookiesAlert .close-cookie {
  background: #fff;
  color: #a14a40;
  border: none;
  padding: 0.3em 0.8em;
  cursor: pointer;
  font-family: inherit;
}

/* =============================================================================
   CONTACT FORM  (plugin-agnostic — works with CF7 / WPForms / Gravity)
   ============================================================================= */

.detack-contact-form input[type="text"],
.detack-contact-form input[type="email"],
.detack-contact-form textarea {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 0;
  color: #21619e;
  font-family: inherit;
  font-size: 0.9em;
  padding: 0.5em 0.75em;
  margin-bottom: 0.75em;
  transition: border-color 0.2s;
}
.detack-contact-form input:focus,
.detack-contact-form textarea:focus { border-color: #21619e; outline: none; }
.detack-contact-form input::placeholder,
.detack-contact-form textarea::placeholder { color: #8ba0bf; }

/* CF7 override */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea { /* inherit from above via .content-wrapper .wpcf7 */ }

/* =============================================================================
   RESPONSIVE UTILITIES
   ============================================================================= */

@media (max-width: 767px) {
  .hidden-xs { display: none !important; }
}
@media (min-width: 768px) {
  .visible-xs-only { display: none !important; }
}
@media (max-width: 991px) {
  .hidden-sm { display: none !important; }
}

/* Clearfix */
.clearfix::after { content: ''; display: table; clear: both; }