/* ==========================================================================
   ZehBra Industrieauktionen – Theme (Nachbau des bisherigen YOOtheme-Designs)
   ========================================================================== */

@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/roboto-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/roboto-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/roboto-latin-700-normal.woff2") format("woff2"); }

:root {
  --zb-blue: #084375;
  --zb-blue-dark: #083b67;
  --zb-text: #666666;
  --zb-border: #d2d2d2;
  --zb-light: #f5f5f5;
  --zb-page-bg: #f0f0f0;
}

html { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.75; color: var(--zb-text); background: var(--zb-page-bg); }
body { background: var(--zb-page-bg); }
a, .uk-link { color: var(--zb-blue); }
a:hover, .uk-link:hover { color: #0b5ea4; text-decoration: none; }
h1, h2, h3, h4, h5, h6, .uk-h1, .uk-h2, .uk-h3, .uk-h4 { font-family: Roboto, "Helvetica Neue", Arial, sans-serif; color: #000; }
h1, .uk-h1 { color: var(--zb-blue); font-weight: 700; }
.uk-h2.zb-title, h1.zb-title { font-size: 32px; line-height: 1.3; color: var(--zb-blue); font-weight: 700; margin: 0 0 20px; }
h3 { font-size: 26px; font-weight: 500; }
h4 { font-size: 22px; font-weight: 400; }
strong, b { font-weight: 700; }
hr { border-top-color: #e5e5e5; }

.tm-page-container { background: var(--zb-page-bg); }
.tm-page { max-width: 1500px; margin: 0 auto; background: #fff; }

/* ---------- Header ---------- */
.tm-headerbar-top { background: #fff; padding: 20px 0; }
.zb-logo { display: inline-flex; align-items: center; min-height: 40px; color: var(--zb-blue-dark); font-size: 20px; text-decoration: none; }
.zb-logo img { max-height: 70px; width: auto; }
.zb-logo-text { font-family: Roboto, Arial, sans-serif; font-weight: 700; letter-spacing: .35em; color: var(--zb-blue-dark); font-size: 24px; }
.zb-search { position: relative; width: 240px; }
.zb-search input { width: 100%; height: 40px; border: 0; border-radius: 500px; background: #f3f3f3; padding: 0 16px 0 40px; font-size: 14px; color: #666; outline: none; }
.zb-search input:focus { background: #ececec; }
.zb-search .uk-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #999; }

.zb-navbar-wrap { position: relative; z-index: 980; }
.zb-navbar { background: var(--zb-blue); }
.zb-navbar .uk-navbar-nav { gap: 38px; padding-left: 30px; }
.zb-navbar .uk-navbar-nav > li > a {
  min-height: 80px; padding: 0; color: #fff; font-family: Roboto, Arial, sans-serif; font-size: 13px; font-weight: 400;
  text-transform: uppercase; position: relative;
}
.zb-navbar .uk-navbar-nav > li > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 24px; height: 1px; background: #fff;
  transform: scaleX(0); transition: transform .2s ease;
}
.zb-navbar .uk-navbar-nav > li > a:hover::after,
.zb-navbar .uk-navbar-nav > li.uk-active > a::after { transform: scaleX(1); }
.zb-navbar .uk-navbar-nav > li > a:hover { color: #fff; }
.uk-sticky-fixed .zb-navbar { box-shadow: 0 2px 8px rgba(0,0,0,.12); }

/* Mobile Header */
.tm-header-mobile { background: #fff; }
.tm-header-mobile .uk-navbar-container { background: #fff; }
.tm-header-mobile .uk-navbar-item, .tm-header-mobile .uk-navbar-toggle { min-height: 70px; }
.tm-header-mobile .uk-navbar-toggle { color: var(--zb-blue); }
.uk-offcanvas-bar { background: var(--zb-blue); }
.uk-offcanvas-bar .uk-nav-primary > li > a { color: #fff; font-family: Roboto, Arial, sans-serif; font-size: 18px; text-transform: uppercase; }
.uk-offcanvas-bar .zb-search { width: 100%; margin-top: 20px; }

/* ---------- Breadcrumb ---------- */
.zb-breadcrumb-bar { background: var(--zb-light); padding: 6px 15px; }
.zb-breadcrumb-bar .uk-breadcrumb > * > * { font-size: 14px; color: #999; }
.zb-breadcrumb-bar .uk-breadcrumb > :last-child > span { color: #000; }
.zb-breadcrumb-bar .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before { margin: 0 12px; color: #999; content: "\2013"; }

/* ---------- Layout ---------- */
.zb-main { padding-top: 40px; padding-bottom: 70px; }
.zb-grid-divider > :not(.uk-first-column)::before { border-left: 1px solid #e5e5e5; }

/* Sidebar */
.zb-sidebar h3.zb-side-title { font-size: 26px; font-weight: 500; color: #000; margin: 0 0 18px; line-height: 1.3; }
.zb-catlist { list-style: none; margin: 0; padding: 0; }
.zb-catlist li { margin: 0 0 9px; }
.zb-catlist a { color: var(--zb-blue); font-size: 16px; }
.zb-catlist a.zb-active { font-weight: 700; }
.zb-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 4px; box-sizing: border-box;
  border: 1px solid var(--zb-blue-dark); border-radius: 300px; background: #fff; color: var(--zb-blue-dark); font-size: 11px; line-height: 1; vertical-align: middle; margin-left: 2px;
}
.zb-sidebar h4 { font-size: 22px; font-weight: 400; color: #000; margin: 30px 0 18px; }
.zb-side-contact { font-size: 16px; line-height: 1.65; }
.zb-side-contact p { margin: 0 0 15px; }

/* ---------- Startseite: Kacheln ---------- */
.zb-tiles .el-item { border: 1px solid var(--zb-border); background: #fff; height: 100%; display: flex; flex-direction: column; }
.zb-tiles .el-item > a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.zb-tiles .el-title { background: var(--zb-blue-dark); color: #fff; height: 80px; line-height: 80px; margin: 0 0 15px; padding: 0; text-align: center; text-transform: uppercase; font-size: .9rem; font-weight: bold; font-family: Roboto, Arial, sans-serif; }
.zb-tiles .el-image { width: 100%; aspect-ratio: 300 / 223; object-fit: cover; display: block; }
.zb-tiles .el-content { font-size: 13px !important; line-height: 1.75; margin: 1.5rem 0; padding: 8px; text-align: center; flex: 1; }
.zb-tiles .el-content p { margin: 0; }
.zb-tiles .el-link { background: var(--zb-blue-dark); color: #fff; display: block; padding: 7px; text-align: center; }

/* ---------- Übersicht (Liste) ---------- */
.zb-list-item { border: 1px solid var(--zb-border); background: #fff; display: block; color: inherit; margin-bottom: 20px; }
.zb-list-item:hover { color: inherit; }
.zb-list-item .zb-list-img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block; }
.zb-list-body { padding: 15px 30px 25px; text-align: center; }
.zb-card-title { font-family: Roboto, Arial, sans-serif; color: var(--zb-blue); font-size: 13px; font-weight: 700; line-height: 1.5; margin: 0 0 15px; }
.zb-teaser { font-size: 12px; line-height: 1.7; color: #666; white-space: pre-line; margin-bottom: 15px; }
.zb-btn-bar { display: block; background: var(--zb-blue-dark); color: #fff; text-align: center; padding: 7px 10px; font-size: 14px; }
.zb-list-item:hover .zb-btn-bar, .zb-card:hover .zb-btn-bar { background: var(--zb-blue); }

/* ---------- Kategorie (Raster) ---------- */
.zb-card { border: 1px solid var(--zb-border); background: #fff; display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; padding-bottom: 20px; }
.zb-card:hover { color: inherit; }
.zb-card .zb-card-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: #f3f3f3; }
.zb-card .zb-card-title { padding: 20px 10px 0; text-align: center; margin: 0 0 15px; flex: 1; }
.zb-noimg { width: 100%; aspect-ratio: 1 / 1; background: #f3f3f3; display: flex; align-items: center; justify-content: center; color: #bbb; }

/* ---------- Artikel ---------- */
.zb-article .zb-meta { margin: 0 0 20px; }
.uk-button { font-family: Roboto, Arial, sans-serif; }
.zb-pill { border-radius: 500px; padding: 0 30px; font-size: 16px; text-transform: none; line-height: 38px; }
.uk-button-primary.zb-pill { background: var(--zb-blue-dark); color: #fff; border: 1px solid var(--zb-blue-dark); }
.uk-button-primary.zb-pill:hover { background: var(--zb-blue); }
.uk-button-default.zb-pill { border: 1px solid var(--zb-blue-dark); color: var(--zb-blue-dark); background: transparent; }
.uk-button-default.zb-pill:hover { background: var(--zb-blue-dark); color: #fff; }
.zb-gallery a { display: block; overflow: hidden; position: relative; }
.zb-gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform .3s; }
.zb-gallery a::after { content: ""; position: absolute; inset: 0; background: rgba(8,59,103,.45); opacity: 0; transition: opacity .2s; }
.zb-gallery a:hover::after { opacity: 1; }
.zb-procno { margin: 20px 0; }
.zb-body { overflow-x: auto; }
.zb-body table { border-collapse: collapse; margin-bottom: 20px; }
.zb-body td, .zb-body th { padding: 2px 10px 2px 0; vertical-align: top; }
.zb-body h1 { font-size: 32px; color: #000; font-weight: 500; }
.zb-body h2 { font-size: 26px; font-weight: 500; }
.zb-contact-line { margin: 20px 0 30px; }
.zb-contact-line span { background: var(--zb-blue-dark); color: #fff; padding: 4px 8px; line-height: 2.1; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.zb-contact-line a { color: #fff; }
.zb-section-title { font-size: 26px; font-weight: 500; color: #000; margin: 40px 0 0; }
.zb-section-title + hr { margin: 20px 0 40px; }

/* ---------- Formulare (Balbooa-Optik) ---------- */
.zb-form { max-width: 100%; }
.zb-field { margin-bottom: 25px; }
.zb-label { display: block; font-size: 13px; font-weight: 700; color: #333; margin-bottom: 10px; line-height: 1.4; }
.zb-req { color: #f65954; }
.zb-input { width: 100%; box-sizing: border-box; height: 36px; border: 1px solid #e3e3e3; background: #fff; padding: 0 10px; font-size: 13px; color: #333; font-family: inherit; border-radius: 0; }
.zb-input:focus { outline: none; border-color: var(--zb-blue); }
.zb-select { -webkit-appearance: auto; appearance: auto; }
.zb-input-short { max-width: 140px; }
.zb-textarea { height: 140px; padding: 10px; resize: vertical; }
.zb-calc { margin-bottom: 18px; }
.zb-calc-val { font-size: 13px; color: #333; padding-left: 20px; }
.zb-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.6; color: #333; cursor: pointer; }
.zb-check input { margin-top: 3px; flex: none; width: 16px; height: 16px; }
.zb-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.zb-submit { display: inline-flex; align-items: center; gap: 10px; background: var(--zb-blue); color: #fff; border: 0; padding: 12px 30px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; }
.zb-submit:hover { background: var(--zb-blue-dark); }
.zb-alert { padding: 15px 20px; margin-bottom: 25px; font-size: 14px; }
.zb-alert-success { background: #edfbf6; color: #32a467; border-left: 4px solid #32a467; }
.zb-alert-danger { background: #fef4f6; color: #c62828; border-left: 4px solid #f0506e; }

/* ---------- Formulare-Seite (Downloads) ---------- */
.zb-downloads > div { margin-bottom: 15px; }
.zb-downloads .uk-button { font-size: 13px; line-height: 30px; padding: 0 15px; }

/* ---------- Footer ---------- */
.zb-footer { border: 1px solid var(--zb-border); margin-bottom: 20px; background: #fff; padding: 20px 40px; }
@media (max-width: 639px) { .zb-footer { padding: 20px 15px; } }
.zb-footer-links a { margin-right: 26px; font-size: 16px; }
.zb-footer img { max-height: 80px; width: auto; }

/* ---------- Suche ---------- */
.zb-search-result { padding: 15px 0; border-bottom: 1px solid #eee; }
.zb-search-result h3 { font-size: 20px; margin: 0 0 6px; }

/* ---------- Responsive ---------- */
@media (max-width: 959px) {
  .zb-main { padding-top: 25px; }
  .zb-list-body { padding: 15px; }
  .zb-sidebar { margin-top: 40px; }
  .zb-grid-divider > :not(.uk-first-column)::before { display: none; }
}
@media (max-width: 639px) {
  .uk-h2.zb-title, h1.zb-title { font-size: 26px; }
  .zb-footer-links a { margin-right: 14px; font-size: 14px; }
}