/* ============================================================
   V5 CHROME (HEADER + FOOTER) — global
   ============================================================ */

:root {
  --v5-brand: #2e6aad;
  --v5-text: #0d0d0d;
  --v5-muted: #7a7a7a;
  --v5-muted-2: #666;
  --v5-placeholder: #b0b0b0;
  --v5-border: #e8e8e8;
  --v5-surface: #fafafa;
  --v5-surface-tint: #f0f4f8;
  --v5-tint-border: #d0dae4;
  --v5-overlay: rgba(0, 0, 0, 0.38);
  --v5-placeholder-img: #d9d9de;
  --v5-dark-bg: #0d0d0d;
  --v5-dark-border: #222;
  --v5-dark-input-border: #333;
  --v5-dark-muted: #555;

  --v5-font-head: 'Inter', system-ui, -apple-system, sans-serif;
  --v5-font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --v5-font-button: 'Rubik', system-ui, -apple-system, sans-serif;
}

/* Top brand accent strip */
header::before {
  content: '';
  display: block;
  height: 3px;
  background: var(--v5-brand);
  position: relative;
  z-index: 9;
}

/* ============================================================
   HEADER — V5 (keeps all existing items, only restyles)
   ============================================================ */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 8;
  background: #fff;
  backdrop-filter: none;
  box-shadow: none;
  border-bottom: 1px solid var(--v5-border);
  height: auto;
  min-height: 64px;
  transition: transform 0.25s ease;
  will-change: transform;
}
/* Auto-hide on scroll-down, reveal on scroll-up (toggled by global.js).
   Bottom #navi-bar on mobile stays put — only the top header animates. */
header.header-hidden { transform: translateY(-100%); }
header .container.cmain {
  max-width: 1440px;
  height: 64px;
  padding: 0 48px;
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0 auto;
}

/* Logo */
header a.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--v5-font-head);
  font-weight: 600;
  font-size: 18px;
  color: var(--v5-text);
  line-height: 1;
  flex-shrink: 0;
}
header a.logo img {
  height: 40px;
  max-height: 44px;
  object-fit: contain;
  display: block;
}

/* Right-side links cluster */
header .links {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  max-width: none;
  overflow: visible;
  height: auto;
}

/* All header buttons: flat, no rounded, muted icon+label */
header .links .btn-white,
header .menu.btn-white,
header .links .btn,
header .cmain > .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: auto;
  padding: 8px 4px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--v5-font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--v5-muted-2);
  white-space: nowrap;
  line-height: 1;
  position: relative;
}
header .links .btn-white:hover,
header .links .btn:hover {
  color: var(--v5-text);
}
header .links .btn svg,
header .menu.btn svg,
header .cmain > .btn svg,
header .links .btn-white svg,
header .menu.btn-white svg {
  width: 18px;
  height: 18px;
  fill: var(--v5-muted-2);
  margin: 0;
  vertical-align: middle;
  flex-shrink: 0;
}
header .links .btn-white:hover svg,
header .menu.btn-white:hover svg {
  fill: var(--v5-text);
}

/* Counters (message/notification badges) — square brand pill */
header .links .btn .counter {
  position: absolute;
  top: 2px;
  left: 10px;
  height: 16px;
  min-width: 16px;
  line-height: 16px;
  padding: 0 4px;
  background: var(--v5-brand);
  color: #fff;
  border-radius: 0;
  box-shadow: 0 0 0 2px #fff;
  font-family: var(--v5-font-body);
  font-size: 10px;
  font-weight: 600;
}

/* Divider between primary icons and secondary links */
header .links .divider {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: var(--v5-border);
  padding: 0;
}

/* Text-only secondary links (Companies / Forums / Blog / FAQ) */
header .links .btn.noicon {
  padding: 8px 4px;
  font-weight: 400;
}

/* Account dropdown (logged-in) — flat, no outline pill */
header .account-dropdown {
  margin-left: 0;
}
header .account-dropdown > a.account {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border: none;
  background: transparent;
  color: var(--v5-text);
  font-size: 13px;
}
header .account-dropdown > a.account img {
  width: 24px;
  height: 24px;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
header .account-dropdown:hover > a.account { color: var(--v5-brand); }
header .account-dropdown:hover > a.account .arrow { fill: var(--v5-brand); }

/* Dropdown panel — square, brand accents */
.account-dropdown-menu {
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--v5-border);
}
.account-dropdown-menu a:hover { color: var(--v5-brand); }
.account-dropdown-menu a.active { color: var(--v5-brand); }
.account-dropdown-menu a.public,
.account-dropdown-menu a.public:hover {
  background: var(--v5-brand);
  border-radius: 0;
  color: #fff; /* override .a:hover { color: var(--v5-brand) } above —
                  keep white text on the brand-blue CTA */
}
.account-dropdown-menu a.public:hover { opacity: 0.9; }
/* Counter pills — normalize both .counter (theme) and .im-user-account-count
   (instant_messenger plugin) to the same dimensions so they look identical. */
.account-dropdown-menu a .counter,
.account-dropdown-menu a .im-user-account-count {
  background: var(--v5-brand);
  border-radius: 0;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  margin-left: 6px;
  display: inline-block;
  text-align: center;
  box-sizing: border-box;
}

/* Plugin-injected items are wrapped in <li class="opt_*"> inside .menu-hooks;
   ensure no inherited list margins or LI padding leak into the row height. */
.account-dropdown-menu .menu-hooks,
.account-dropdown-menu .menu-hooks li {
  list-style: none;
  padding: 0;
  margin: 0;
}
header .account-dropdown > a.account .arrow {
  width: 10px;
  height: 10px;
  fill: var(--v5-muted);
}

/* Domain switcher — flag pill, placed right after the logo via flex order.
   Logo is order 0 (default), flag is 1, links/account/publish are 2+. */
header .cmain > a.logo { order: 0; }
header a.domain-switch { order: 1; }
header .cmain > .links { order: 2; margin-left: auto; }
header .cmain > .account-dropdown { order: 3; }
header .cmain > a.publish.btn { order: 4; }

header a.domain-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--v5-border);
  background: #fff;
  color: var(--v5-text);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--v5-font-head);
}
header a.domain-switch img.ds-header-flag {
  width: 18px;
  height: 12px;
  object-fit: cover;
  border: 1px solid var(--v5-border);
  margin: 0;
}
header a.domain-switch::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%230d0d0d' d='M2 4l4 4 4-4'/></svg>") no-repeat center;
  background-size: 10px;
}

/* Primary CTA: "Anzeige aufgeben" */
header a.publish.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: auto;
  padding: 10px 24px;
  background: var(--v5-brand);
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--v5-font-button);
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1;
  margin-left: 0;
  flex-shrink: 0;
}
header a.publish.btn:hover { opacity: 0.9; }
header a.publish.btn svg {
  width: 14px;
  height: 14px;
  fill: #fff;
  margin: 0;
  vertical-align: middle;
}

/* Mobile-only shortcuts inside the header — keep hidden on desktop.
   Mobile hamburger (.menu.isMobile) is intentionally NOT in this list:
   responsive.css already hides .isMobile elements above the mobile
   breakpoint, so listing it here would suppress it on mobile too. */
header .links .maccount,
header .links .search,
header .cmain > .publish.mini { display: none; }

/* Avatar on mobile account button (if visible) */
header .links .btn.account img {
  width: 24px;
  height: 24px;
  border-radius: 100px;
  margin: 0 4px 0 0;
}

/* Push body content down for fixed header (3px strip + 64px nav) */
body { padding-top: 67px; }

/* The alt containers (mobile search / item preview) — keep hidden */
header .container.alt { display: none; }

/* ============================================================
   MOBILE BOTTOM NAV (#navi-bar) — V5 colors
   Overrides legacy style.css purples (#3b49df) with brand blue and
   squares the centre publish CTA to match the rest of the design.
   ============================================================ */
#navi-bar a.post > svg {
  background: var(--v5-brand);
  border-radius: 0;
}
#navi-bar a.active:not(.post)::after { background: var(--v5-brand); }
#navi-bar .counter { background: var(--v5-brand); }
#navi-bar a i.mark { color: var(--v5-brand); }
#navi-bar a.location.selected > svg { fill: var(--v5-brand); }
#navi-bar a.active.post > svg { background: var(--v5-text); }

/* Side-drawer (#side-menu) — same brand override for the count badges
   next to "Aktive Angebote" / "Suchaufträge" / Nachrichten / etc. */
#side-menu .section a .counter { background: var(--v5-brand); }

/* ============================================================
   FOOTER — V5 (dark, preserves all existing columns/links)
   ============================================================ */

/* Promo strip above the footer: keep but restyle flat */
section.promo {
  background: var(--v5-brand);
  background-image: none;
  color: #fff;
  font-family: var(--v5-font-body);
  font-size: 14px;
  padding: 16px 0;
  box-shadow: none;
}
section.promo .container {
  max-width: 1440px;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
section.promo .btn,
section.promo .btn-transparent {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  background: #fff;
  border: none;
  border-radius: 0;
  color: var(--v5-brand);
  font-family: var(--v5-font-button);
  font-weight: 500;
  font-size: 13px;
  margin: 0;
  line-height: 1;
}

footer {
  background: var(--v5-dark-bg);
  color: #fff;
  padding: 48px 0 32px;
  font-family: var(--v5-font-body);
  font-size: 13px;
  line-height: 1.5;
  width: 100%;
}
footer > .container {
  max-width: 1440px;
  padding: 0 48px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Columns row */
footer section.one {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 40px;
  padding: 0;
  margin: 0;
}
footer .col {
  flex: 1 1 0;
  min-width: 160px;
  padding: 0;
  margin: 0;
}
footer .col h4 {
  font-family: var(--v5-font-head);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 20px;
  padding-bottom: 12px;
  position: relative;
  letter-spacing: 0.01em;
}
footer .col h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 20px;
  height: 2px;
  background: var(--v5-brand);
}

/* Column links */
footer .col a {
  display: block;
  margin: 0 0 14px;
  font-family: var(--v5-font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--v5-muted);
  text-decoration: none;
  background: transparent;
  padding: 0;
  border: none;
  line-height: 1.4;
}
footer .col a:hover {
  color: #fff;
  text-decoration: none;
}

/* About us column — logo + company info */
footer .col.contact p {
  margin: 0 0 8px;
  color: var(--v5-muted);
  font-size: 13px;
}
footer .col.contact p.logo img {
  max-height: 32px;
  margin: 0 0 12px;
  padding: 0;
  border: none;
  border-radius: 0;
  filter: none;
  box-shadow: none;
  background: transparent;
}
footer .col.contact p.company strong { color: #fff; font-weight: 600; }

/* Quick-links chips — dark theme */
footer .quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
footer .quick-links a {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  margin: 0;
  background: transparent;
  border: 1px solid var(--v5-dark-input-border);
  border-radius: 0;
  color: var(--v5-muted);
  font-family: var(--v5-font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  float: none;
}
footer .quick-links a:hover {
  border-color: var(--v5-muted);
  color: #fff;
}

/* Social media column */
footer .col.socialx a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}
footer .col.socialx a i,
footer .col.socialx a svg {
  width: 14px;
  height: 14px;
  font-size: 14px;
  line-height: 1;
  background: transparent;
  color: var(--v5-muted);
  fill: var(--v5-muted);
  border-radius: 0;
  vertical-align: middle;
}
footer .col.socialx a:hover i,
footer .col.socialx a:hover svg {
  color: #fff;
  fill: #fff;
}

/* Language / domain switcher in footer */
footer .col.locale a.lang,
footer .col.locale a.lang-switcher,
footer .col.locale a.ds-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}
footer .col.locale a.lang img,
footer .col.locale a.lang-switcher img,
footer .col.locale a.ds-footer-btn img {
  width: 18px;
  height: 12px;
  margin: 0;
  object-fit: cover;
  border-radius: 0;
  border: 1px solid var(--v5-dark-input-border);
  vertical-align: middle;
}
footer .col.locale a.lang.active,
footer .col.locale a.lang-switcher.active {
  color: #fff;
  font-weight: 600;
}

/* Bottom row: contact/cookies + copyright */
footer section.two {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 24px 0 0;
  margin: 0;
  border-top: 1px solid var(--v5-dark-border);
  font-size: 11px;
}
footer section.two a {
  display: inline-flex;
  margin: 0;
  padding: 0;
  color: var(--v5-dark-muted);
  font-size: 11px;
  font-weight: 400;
  font-family: var(--v5-font-body);
}
footer section.two a:hover { color: #fff; }
footer section.two span {
  margin-left: auto;
  color: var(--v5-dark-muted);
  font-family: var(--v5-font-body);
  font-size: 11px;
}

footer .footer-hook,
footer .footer-widgets { width: 100%; }

/* Cookie consent popup is rendered inside the dark footer; restore its own color */
footer .ccp-pop { color: #333; }
footer .ccp-pop strong.ccp-row { color: #000; }
/* ≤1280: drop the wide-only noicon links (Unternehmen / Blog / Forums / FAQ)
   and tighten gaps. Was 1080 — bumped because at 1081–1250 the publish CTA
   was getting cut off by the right edge of the container. */
@media screen and (max-width: 1280px) {
  header .container.cmain { padding: 0 24px; gap: 16px; }
  header .links { gap: 12px; }
  header a.publish.btn { padding: 10px 16px; font-size: 12px; }
  header .links .btn.noicon { display: none; }
  header .links .divider { display: none; }
}

/* ≤1024: collapse icon-button labels (text is a direct text node next to
   the SVG, so we suppress it by zeroing font-size on the link and let the
   SVG keep its size from the width/height attrs). Without this, header
   overflows at ~770–1024px before the mobile breakpoint kicks in. */
@media screen and (max-width: 1024px) {
  header .links a.btn-white,
  header .links a.btn {
    font-size: 0;
    gap: 0;
    padding: 8px 6px;
  }
  header .links .counter { font-size: 10px; }
}

@media screen and (max-width: 767px) {
  header .container.cmain { padding: 0 12px; height: 56px; gap: 8px; }
  body { padding-top: 59px; }
  header a.logo img { height: 32px; max-height: 32px; }
  header .links { display: none; }
  header .account-dropdown { display: none; }
  header a.domain-switch { padding: 4px 6px; font-size: 11px; }
  header a.publish.btn { padding: 8px 12px; font-size: 12px; gap: 4px; margin-left: auto; }
  header a.publish.btn svg { width: 12px; height: 12px; }

  footer { padding: 32px 0 24px; font-size: 12px; }
  footer > .container { padding: 0 12px; gap: 24px; }
  footer section.one { flex-direction: column; gap: 24px; }
  footer .col { flex: 1 1 100%; min-width: 0; }
  footer section.two { flex-direction: column; align-items: flex-start; gap: 10px; }
  footer section.two span { margin-left: 0; }
}

@media screen and (max-width: 420px) {
  header a.logo img { height: 28px; max-height: 28px; }
  header a.publish.btn { padding: 6px 10px; font-size: 11px; }
  header a.publish.btn span { display: none; }
}