/* ==========================================================================
   Schlepperfreunde Schwitten – 2.14.4
   Einheitliches UI-System – KEINE neuen Funktionen
   ========================================================================== */

.sf-ui-2144 {
  --sf-ui-green: #153a2c;
  --sf-ui-green-dark: #0f2f24;
  --sf-ui-gold: #c99a30;
  --sf-ui-gold-hover: #ddb34f;
  --sf-ui-paper: #fffdf8;
  --sf-ui-cream: #f6f0df;
  --sf-ui-line: #ddd2bd;
  --sf-ui-ink: #233d32;
  --sf-ui-muted: #68756d;
  --sf-ui-danger: #a8463e;
  --sf-ui-warning: #a97516;
  --sf-ui-success: #477f57;
  --sf-ui-radius: 3px;
  --sf-ui-control-h: 54px;
  --sf-ui-card-pad: clamp(20px, 2.5vw, 30px);
  --sf-ui-page-x: clamp(20px, 6vw, 110px);
  --sf-ui-section-y: clamp(52px, 7vw, 92px);
  --sf-ui-gap: clamp(14px, 2vw, 22px);
}

/* --------------------------------------------------------------------------
   1. BUTTONS – one height, typography and interaction model
   -------------------------------------------------------------------------- */
.sf-ui-2144 .button,
.sf-ui-2144 a.button,
.sf-ui-2144 button.button,
.sf-ui-2144 input[type="submit"].button,
.sf-ui-2144 .sf2120-submit-row button[type="submit"],
.sf-ui-2144 .sf-community-submit-row-2116 .button,
.sf-ui-2144 .sf-community-composer-card-2116 .comment-form input[type="submit"],
.sf-ui-2144 .fleet-filter-actions .button,
.sf-ui-2144 .sf-comparison-actions .button {
  min-height: var(--sf-ui-control-h) !important;
  padding: 0 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  border-radius: var(--sf-ui-radius) !important;
  box-sizing: border-box;
  font-family: Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  letter-spacing: .09em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

.sf-ui-2144 .button-primary {
  border: 1px solid var(--sf-ui-gold) !important;
  background: var(--sf-ui-gold) !important;
  color: #172117 !important;
}
.sf-ui-2144 .button-primary:hover,
.sf-ui-2144 .button-primary:focus-visible {
  border-color: var(--sf-ui-gold-hover) !important;
  background: var(--sf-ui-gold-hover) !important;
  color: #172117 !important;
  transform: translateY(-1px) !important;
}
.sf-ui-2144 .button-dark {
  border: 1px solid var(--sf-ui-green) !important;
  background: var(--sf-ui-green) !important;
  color: #fff !important;
}
.sf-ui-2144 .button-light,
.sf-ui-2144 .button-outline,
.sf-ui-2144 .button:not(.button-primary):not(.button-dark) {
  border: 1px solid rgba(21,58,44,.28) !important;
}
.sf-ui-2144 .button:focus-visible,
.sf-ui-2144 button:focus-visible,
.sf-ui-2144 a:focus-visible {
  outline: 3px solid rgba(201,154,48,.30);
  outline-offset: 2px;
}

/* Existing text-only action links stay text links, but use one interaction rhythm. */
.sf-ui-2144 .text-button,
.sf-ui-2144 .sf2120-partner-actions a,
.sf-ui-2144 .archive-card-link {
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .10em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   2. FORMS – same controls, labels, validation and notices
   -------------------------------------------------------------------------- */
.sf-ui-2144 :is(
  .sf2120-contact-form,
  .sf2120-forum-form,
  .sf2120-forum-reply-form,
  .sf-guest-submission-form,
  .event-registration-form,
  .sf-community-form-2116,
  .sf-community-composer-card-2116 .comment-form
) label {
  color: #59685f !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}

.sf-ui-2144 :is(
  .sf2120-contact-form,
  .sf2120-forum-form,
  .sf2120-forum-reply-form,
  .sf-guest-submission-form,
  .event-registration-form,
  .sf-community-form-2116,
  .sf-community-composer-card-2116 .comment-form,
  .fleet-filter,
  .fleet-filter-advanced,
  .sf2120-news-filter,
  .sf2120-partner-filter,
  .site-search-form,
  .search-page-form
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select) {
  width: 100%;
  min-height: var(--sf-ui-control-h) !important;
  padding: 0 15px !important;
  border: 1px solid var(--sf-ui-line) !important;
  border-radius: var(--sf-ui-radius) !important;
  background: var(--sf-ui-paper) !important;
  color: var(--sf-ui-ink) !important;
  box-sizing: border-box;
  font-family: Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
}

.sf-ui-2144 :is(
  .sf2120-contact-form,
  .sf2120-forum-form,
  .sf2120-forum-reply-form,
  .sf-guest-submission-form,
  .event-registration-form,
  .sf-community-form-2116,
  .sf-community-composer-card-2116 .comment-form
) textarea {
  width: 100%;
  min-height: 150px;
  padding: 14px 15px !important;
  border: 1px solid var(--sf-ui-line) !important;
  border-radius: var(--sf-ui-radius) !important;
  background: var(--sf-ui-paper) !important;
  color: var(--sf-ui-ink) !important;
  box-sizing: border-box;
  font-family: Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  resize: vertical;
  box-shadow: none !important;
}

.sf-ui-2144 :is(input,select,textarea):focus {
  border-color: var(--sf-ui-gold) !important;
  outline: 3px solid rgba(201,154,48,.13) !important;
  outline-offset: 0;
}
.sf-ui-2144 :is(input,select,textarea)[aria-invalid="true"] {
  border-color: var(--sf-ui-danger) !important;
  outline-color: rgba(168,70,62,.13) !important;
}
.sf-ui-2144 form p {
  min-width: 0;
}
.sf-ui-2144 .sf2120-form-row,
.sf-ui-2144 .form-grid {
  gap: 14px !important;
}

.sf-ui-2144 :is(.form-notice,.sf2120-public-notice,.sf2121-forum-safety-note) {
  margin: 0 0 18px;
  padding: 15px 17px !important;
  border: 1px solid var(--sf-ui-line);
  border-left-width: 4px !important;
  border-radius: var(--sf-ui-radius);
  background: #fffdf8;
  font-size: 13px;
  line-height: 1.6;
}
.sf-ui-2144 :is(.form-notice-success,.sf2120-public-notice.is-ok) {
  border-left-color: var(--sf-ui-success) !important;
  background: #edf6ef !important;
}
.sf-ui-2144 :is(.form-notice-error,.sf2120-public-notice.is-warning) {
  border-left-color: var(--sf-ui-danger) !important;
  background: #fbefec !important;
}

/* --------------------------------------------------------------------------
   3. MOBILE/TABLET SPACING – same page gutters/card rhythm/touch targets
   -------------------------------------------------------------------------- */
@media (max-width: 1150px) {
  .sf-ui-2144 :is(
    .subpage-section,
    .sf2120-news-magazine,
    .sf2120-forum-shell,
    .sf2120-contact-layout,
    .sf2120-partner-shell,
    .vehicle-details,
    .vehicle-story,
    .gallery-section,
    .event-detail,
    .event-registration,
    .search-page
  ) {
    padding-left: clamp(18px, 4vw, 34px) !important;
    padding-right: clamp(18px, 4vw, 34px) !important;
  }

  .sf-ui-2144 :is(
    .tractor-grid,
    .full-tractor-grid,
    .sf2120-news-grid,
    .sf2120-partner-grid,
    .search-results-grid,
    .sf2120-forum-list
  ) {
    gap: 14px !important;
  }

  .sf-ui-2144 :is(.button,button,input[type="submit"],select,.site-search-form input) {
    min-height: 54px;
  }
}

@media (max-width: 700px) {
  .sf-ui-2144 {
    --sf-ui-page-x: 14px;
    --sf-ui-section-y: 44px;
    --sf-ui-card-pad: 18px;
  }

  .sf-ui-2144 :is(
    .subpage-section,
    .sf2120-news-magazine,
    .sf2120-forum-shell,
    .sf2120-contact-layout,
    .sf2120-partner-shell,
    .vehicle-details,
    .vehicle-story,
    .gallery-section,
    .event-detail,
    .event-registration,
    .search-page
  ) {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .sf-ui-2144 .button {
    width: 100%;
    min-height: 56px !important;
  }
}

/* --------------------------------------------------------------------------
   4. HEADING HIERARCHY
   -------------------------------------------------------------------------- */
.sf-ui-2144 :is(.page-hero,.vehicle-hero,.article-page) h1 {
  font-size: clamp(44px, 6vw, 78px);
  line-height: .98;
  letter-spacing: -.025em;
}
.sf-ui-2144 :is(
  .section-heading,
  .sf2120-news-magazine > header,
  .sf2120-forum-replies > header,
  .sf2120-partner-shell > header
) h2 {
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.02;
  letter-spacing: -.018em;
}
.sf-ui-2144 :is(
  .sf2120-news-card,
  .sf2120-partner-card,
  .archive-card,
  .search-result-card,
  .sf2120-forum-topic
) h2 {
  line-height: 1.08;
}
.sf-ui-2144 :is(.section-kicker,.eyebrow,.sf2120-kicker) {
  margin-bottom: 18px !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}
.sf-ui-2144 :is(.page-hero,.section-heading,.sf2120-news-magazine > header) > p:last-child {
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   5. CARDS – same structure and spacing without erasing page identity
   -------------------------------------------------------------------------- */
.sf-ui-2144 :is(
  .sf2120-news-card,
  .sf2120-partner-card,
  .search-result-card,
  .archive-card,
  .sf2120-forum-topic,
  .sf-community-comment-2116
) {
  min-width: 0;
  border: 1px solid var(--sf-ui-line) !important;
  border-radius: var(--sf-ui-radius) !important;
  box-shadow: 0 5px 18px rgba(35,47,39,.05);
}

.sf-ui-2144 :is(
  .sf2120-news-copy,
  .sf2120-partner-main > div:last-child,
  .search-result-body
) {
  padding: var(--sf-ui-card-pad) !important;
}

.sf-ui-2144 :is(.sf2120-news-image,.search-result-card img) {
  height: clamp(205px, 22vw, 260px);
  object-fit: cover;
}

.sf-ui-2144 :is(
  .sf2120-news-card,
  .sf2120-partner-card,
  .search-result-card,
  .archive-card,
  .sf2120-forum-topic
):hover {
  box-shadow: 0 14px 34px rgba(19,41,31,.10);
}

/* Vehicle cards deliberately keep their photo-overlay design, but borders/tool
   buttons follow the common sizing rhythm. */
.sf-ui-2144 .tractor-card {
  border-radius: var(--sf-ui-radius);
}
.sf-ui-2144 :is(.vehicle-favorite-button,.vehicle-compare-button) {
  min-width: 44px;
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   6. FILTERS / SEARCH
   -------------------------------------------------------------------------- */
.sf-ui-2144 :is(
  .fleet-filter,
  .fleet-filter-advanced,
  .sf2120-news-filter,
  .sf2120-partner-filter,
  .search-page-form
) {
  border: 1px solid var(--sf-ui-line) !important;
  border-radius: var(--sf-ui-radius);
  background: var(--sf-ui-cream) !important;
  box-sizing: border-box;
}

.sf-ui-2144 :is(
  .fleet-filter label span,
  .sf2120-news-filter label,
  .sf2120-partner-filter label
) {
  color: #68756d !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}

.sf-ui-2144 .site-search-form {
  align-items: stretch;
  gap: 8px;
}
.sf-ui-2144 .site-search-form button {
  min-height: var(--sf-ui-control-h) !important;
  border-radius: var(--sf-ui-radius);
}
.sf-ui-2144 :is(.fleet-filter-actions,.sf-comparison-actions) {
  gap: 10px !important;
}

/* --------------------------------------------------------------------------
   7. BADGES / STATUSES – same typography, height and radius
   -------------------------------------------------------------------------- */
.sf-ui-2144 :is(
  .status-badge,
  .vehicle-group-badge,
  .sf2120-news-type,
  .sf2120-team-badge,
  .sf2120-accepted-badge,
  .sf-community-reference-badge-2116,
  .sf-community-team-badge-2116
) {
  min-height: 28px;
  padding: 6px 9px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 2px !important;
  box-sizing: border-box;
  font-family: Arial, sans-serif !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
}
.sf-ui-2144 .sf2120-accepted-badge {
  background: #e9f3eb !important;
  color: #356d46 !important;
}
.sf-ui-2144 .sf2120-team-badge {
  background: #f2e6c7 !important;
  color: #765714 !important;
}

/* --------------------------------------------------------------------------
   8. EMPTY / ERROR STATES
   -------------------------------------------------------------------------- */
.sf-ui-2144 :is(
  .sf2120-empty,
  .search-empty,
  .fleet-filter-empty,
  .empty-event,
  .sf-event-admin-no-results
) {
  width: 100%;
  min-height: 190px;
  padding: clamp(28px, 5vw, 54px) !important;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  box-sizing: border-box;
  border: 1px dashed #cfc3ac !important;
  border-radius: var(--sf-ui-radius);
  background: var(--sf-ui-cream) !important;
  color: var(--sf-ui-ink);
  text-align: center;
}
.sf-ui-2144 :is(.sf2120-empty,.search-empty,.fleet-filter-empty,.empty-event) strong,
.sf-ui-2144 :is(.sf2120-empty,.search-empty,.fleet-filter-empty,.empty-event) h2 {
  margin: 0 !important;
  font-family: Georgia, serif;
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1.08;
}
.sf-ui-2144 :is(.sf2120-empty,.search-empty,.fleet-filter-empty,.empty-event) p {
  max-width: 620px;
  margin: 4px auto 0 !important;
  color: var(--sf-ui-muted) !important;
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   10. SINGLE MOBILE/TABLET NAVIGATION – supersedes 2.14.2/2.14.3 layers
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1150px) {
  .sf-ui-2144 .site-header .mobile-menu {
    display: block;
    position: relative;
    z-index: 1200;
    justify-self: end;
  }
  .sf-ui-2144 .site-header .mobile-menu > summary {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px;
    min-height: 52px;
    margin: 0;
    padding: 0 !important;
    display: grid !important;
    place-content: center !important;
    justify-items: center !important;
    gap: 6px !important;
    list-style: none;
    cursor: pointer;
    border: 0;
    background: transparent;
    touch-action: manipulation;
  }
  .sf-ui-2144 .site-header .mobile-menu > summary::-webkit-details-marker { display:none; }
  .sf-ui-2144 .site-header .mobile-menu > summary span {
    width: 29px !important;
    height: 2px !important;
    margin: 0 !important;
    background: var(--sf-ui-green) !important;
  }
  .sf-ui-2144 .site-header .mobile-menu > nav {
    position: absolute !important;
    right: 0 !important;
    top: 64px !important;
    width: min(440px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
    max-height: min(760px, calc(100dvh - 112px)) !important;
    margin: 0 !important;
    padding: 16px !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 9px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: var(--sf-ui-cream) !important;
    border: 1px solid rgba(22,54,42,.18) !important;
    border-radius: var(--sf-ui-radius);
    box-shadow: 0 18px 55px rgba(0,0,0,.22) !important;
    box-sizing: border-box;
  }
  .sf-ui-2144 .site-header .mobile-menu > nav .site-search-form {
    width: 100% !important;
    margin: 0 0 6px !important;
    padding: 0 0 13px !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    border-bottom: 1px solid rgba(22,54,42,.16);
  }
  .sf-ui-2144 .site-header .mobile-menu > nav :is(ul,.menu) {
    display: contents !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  .sf-ui-2144 .site-header .mobile-menu > nav li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  .sf-ui-2144 .site-header .mobile-menu > nav a {
    width: 100% !important;
    min-height: 60px !important;
    margin: 0 !important;
    padding: 11px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(21,54,41,.14) !important;
    border-radius: var(--sf-ui-radius) !important;
    background: rgba(255,253,247,.78) !important;
    color: var(--sf-ui-green) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: normal !important;
    word-break: normal !important;
    touch-action: manipulation;
  }
  .sf-ui-2144 .site-header .mobile-menu > nav :is(.current-menu-item,.current_page_item) > a,
  .sf-ui-2144 .site-header .mobile-menu > nav a[aria-current="page"] {
    background: var(--sf-ui-green) !important;
    border-color: var(--sf-ui-green) !important;
    color: #fff !important;
  }
}

@media screen and (max-width:700px) {
  .sf-ui-2144 .site-header .mobile-menu > nav {
    right: -5px !important;
    top: 60px !important;
    width: min(94vw,390px) !important;
    max-width: calc(100vw - 18px) !important;
    max-height: calc(100dvh - 96px) !important;
    padding: 12px !important;
    gap: 8px !important;
  }
  .sf-ui-2144 .site-header .mobile-menu > nav a {
    min-height: 58px !important;
    padding: 10px 13px !important;
    font-size: 15px !important;
  }
}