/*
 * Stapla Finder — Stylesheet
 * Prefix: sf-
 * Alle Farben via CSS-Variable --sf-accent (default #E8501A)
 */

/* ============================================================
   1. CSS-Variablen & Reset
   ============================================================ */
:root {
  --sf-accent:       #E8501A;
  --sf-accent-dark:  #c43f14;
  --sf-accent-light: #fff3ed;
  --sf-white:        #ffffff;
  --sf-bg:           #f8f8f8;
  --sf-border:       #e2e4e9;
  --sf-text:         #1a1a2e;
  --sf-text-muted:   #6b7280;
  --sf-radius:       8px;
  --sf-radius-sm:    5px;
  --sf-shadow:       0 2px 8px rgba(0,0,0,.08);
  --sf-shadow-hover: 0 6px 20px rgba(0,0,0,.13);
  --sf-sidebar-w:    240px;
  --sf-transition:   .18s ease;
}

.sf-finder-wrap *,
.sf-single *,
.sf-qs *,
.sf-kw *,
.sf-showcase *,
.sf-karussell *,
.sf-katgrid * {
  box-sizing: border-box;
}

/* Shortcode-Wrapper: nie über den Viewport hinaus */
.sf-showcase,
.sf-karussell,
.sf-katgrid {
  max-width: 100%;
  width: 100%;
}

/* ============================================================
   2. Buttons (globale Varianten)
   ============================================================ */

/* Hard-Reset: ALLE Buttons im Finder/Single/QS vom Theme-Override befreien */
#sf-finder button,
.sf-finder-wrap button,
.sf-single button,
.sf-modal button,
.sf-qs button {
  appearance: none !important;
  -webkit-appearance: none !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  box-shadow: none !important;
  cursor: pointer;
  outline: none;
}
/* Spezifische .sf-btn Varianten */
.sf-single button.sf-btn,
.sf-modal button.sf-btn,
.sf-finder-wrap button.sf-btn {
  font-weight: 600;
  border-radius: var(--sf-radius-sm) !important;
}
.sf-single button.sf-btn--primary,
.sf-modal button.sf-btn--primary {
  background: var(--sf-accent) !important;
  color: var(--sf-btn-text, #fff) !important;
  border-color: var(--sf-accent) !important;
}
.sf-single button.sf-btn--primary:hover,
.sf-modal button.sf-btn--primary:hover {
  background: #fff !important;
  color: var(--sf-accent, #E8501A) !important;
  border-color: var(--sf-accent, #E8501A) !important;
}
.sf-single button.sf-btn--outline,
.sf-modal button.sf-btn--outline {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--sf-text, #1a1a2e) !important;
  border: 2px solid var(--sf-border, #e2e4e9) !important;
}
.sf-single button.sf-btn--outline:hover,
.sf-modal button.sf-btn--outline:hover {
  border-color: #9ca3af !important;
  color: var(--sf-text, #1a1a2e) !important;
  background: #f9fafb !important;
}

.sf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: var(--sf-radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--sf-transition), color var(--sf-transition), border-color var(--sf-transition);
}
.sf-btn--primary {
  background: var(--sf-accent);
  color: #fff;
}
.sf-btn--primary:hover {
  background: #fff !important;
  color: var(--sf-accent, #E8501A) !important;
  border-color: var(--sf-accent, #E8501A) !important;
}
.sf-btn--outline {
  background: transparent;
  color: var(--sf-text);
  border-color: var(--sf-border);
}
.sf-btn--outline:hover {
  border-color: #9ca3af;
  color: var(--sf-text, #1a1a2e);
  background: #f9fafb;
}
.sf-btn--lg {
  padding: 13px 28px;
  font-size: 15px;
}

/* ============================================================
   3. Schnellsuche
   Alle Farben + Größen via CSS-Variablen (Admin → Einstellungen)
   ============================================================ */

/* Wrapper: volle Breite, weißes Card-Panel */
#sf-quicksearch.sf-qs,
.sf-qs {
  background: var(--sf-qs-bg, #fff) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.10) !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ── Quicksearch Header ── */
#sf-quicksearch .sf-qs__header,
.sf-qs .sf-qs__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 28px 18px !important;
  background: var(--sf-accent, #E8501A) !important;
  gap: 12px !important;
}
#sf-quicksearch .sf-qs__header-left,
.sf-qs .sf-qs__header-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
#sf-quicksearch .sf-qs__header-icon,
.sf-qs .sf-qs__header-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  background: rgba(255,255,255,.18) !important;
  border-radius: 10px !important;
  color: #fff !important;
  flex-shrink: 0 !important;
}
#sf-quicksearch .sf-qs__header-title,
.sf-qs .sf-qs__header-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 0 2px !important;
  line-height: 1.2 !important;
}
#sf-quicksearch .sf-qs__header-sub,
.sf-qs .sf-qs__header-sub {
  font-size: 13px !important;
  color: rgba(255,255,255,.8) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* ── Schritt 1: Was suchen Sie? ── */
#sf-quicksearch .sf-qs__step-wrap,
.sf-qs .sf-qs__step-wrap {
  padding: 20px 24px 0 !important;
  border-bottom: 1.5px solid rgba(0,0,0,.07) !important;
  background: transparent !important;
}
#sf-quicksearch .sf-qs__step-label,
.sf-qs .sf-qs__step-label {
  margin: 0 0 10px !important;
  padding: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--sf-tab-inactive, #9ca3af) !important;
  line-height: 1 !important;
}
#sf-quicksearch .sf-qs__step-btns,
.sf-qs .sf-qs__step-btns {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding-bottom: 16px !important;
}
#sf-quicksearch .sf-qs__step-btn,
.sf-qs .sf-qs__step-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 9px 16px !important;
  margin: 0 !important;
  background: var(--sf-step-bg, #f3f4f6) !important;
  background-color: var(--sf-step-bg, #f3f4f6) !important;
  border: 1.5px solid transparent !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  outline: none !important;
  font-size: var(--sf-qs-tab-size, 14px) !important;
  font-weight: 600 !important;
  color: var(--sf-tab-inactive, #374151) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s !important;
  flex-shrink: 0 !important;
}
#sf-quicksearch .sf-qs__step-btn:hover,
.sf-qs .sf-qs__step-btn:hover {
  background: var(--sf-step-hover-bg, #e5e7eb) !important;
  color: var(--sf-tab-active, #111) !important;
  border-color: transparent !important;
}
#sf-quicksearch .sf-qs__step-btn--active,
.sf-qs .sf-qs__step-btn--active {
  background: var(--sf-tab-underline, #111) !important;
  background-color: var(--sf-tab-underline, #111) !important;
  color: var(--sf-step-active-color, #fff) !important;
  border-color: var(--sf-tab-underline, #111) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
}
#sf-quicksearch .sf-qs__step-btn--active:hover,
.sf-qs .sf-qs__step-btn--active:hover {
  background: var(--sf-tab-active, #222) !important;
  background-color: var(--sf-tab-active, #222) !important;
  border-color: var(--sf-tab-active, #222) !important;
}
#sf-quicksearch .sf-qs__step-icon,
.sf-qs .sf-qs__step-icon {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  opacity: .75 !important;
}
#sf-quicksearch .sf-qs__step-btn--active .sf-qs__step-icon,
.sf-qs .sf-qs__step-btn--active .sf-qs__step-icon {
  opacity: 1 !important;
}

/* ── Formular ── */
#sf-quicksearch .sf-qs__form,
.sf-qs .sf-qs__form {
  padding: 22px 28px 24px !important;
  margin: 0 !important;
  background: transparent !important;
}
#sf-quicksearch .sf-qs__row,
.sf-qs .sf-qs__row {
  display: flex !important;
  gap: 10px !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}
#sf-quicksearch .sf-qs__field,
.sf-qs .sf-qs__field {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
#sf-quicksearch .sf-qs__field--btn,
.sf-qs .sf-qs__field--btn {
  flex: 0 0 auto !important;
}

/* Selects — vollständiger Theme-Reset */
#sf-quicksearch .sf-qs__select,
.sf-qs .sf-qs__select {
  display: block !important;
  width: 100% !important;
  height: 54px !important;
  padding: 0 36px 0 16px !important;
  border: 1.5px solid var(--sf-select-border, #d1d5db) !important;
  border-radius: 10px !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23374151' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  font-size: var(--sf-qs-select-size, 14px) !important;
  font-weight: 500 !important;
  color: #111 !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color .15s !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
#sf-quicksearch .sf-qs__select:focus,
.sf-qs .sf-qs__select:focus {
  border-color: var(--sf-accent, #E8501A) !important;
  box-shadow: 0 0 0 3px rgba(232,80,26,.12) !important;
}

/* Submit-Button — vollständiger Theme-Reset */
#sf-quicksearch .sf-qs__submit,
.sf-qs .sf-qs__submit {
  display: block !important;
  width: 100% !important;
  height: 54px !important;
  padding: 0 28px !important;
  margin: 0 !important;
  background: var(--sf-accent, #E8501A) !important;
  background-color: var(--sf-accent, #E8501A) !important;
  color: var(--sf-btn-text, #fff) !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: var(--sf-qs-btn-size, 15px) !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background .15s !important;
  text-transform: none !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}
#sf-quicksearch .sf-qs__submit:hover,
.sf-qs .sf-qs__submit:hover {
  background: var(--sf-accent-dark, #c43f14) !important;
  background-color: var(--sf-accent-dark, #c43f14) !important;
  color: var(--sf-btn-text, #fff) !important;
}

/* ── Gesperrte (abhängige) Selects ── */
#sf-quicksearch .sf-qs__select--locked,
.sf-qs .sf-qs__select--locked,
#sf-quicksearch select.sf-qs__dependent:disabled,
.sf-qs select.sf-qs__dependent:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  background-color: #f3f4f6 !important;
}

/* ── Alle Geräte Link (im Toggle-Bereich) ── */
#sf-quicksearch .sf-qs__all-btn,
.sf-qs .sf-qs__all-btn {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  padding: 4px 0 !important;
  color: var(--sf-text-muted, #6b7280) !important;
  font-size: var(--sf-qs-tab-size, 13px) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: color .15s !important;
  white-space: nowrap !important;
}
#sf-quicksearch .sf-qs__all-btn:hover,
.sf-qs .sf-qs__all-btn:hover {
  color: #374151 !important;
  text-decoration: underline !important;
}

/* ── Kategorie-Bilder (AutoScout-Style) ── */
#sf-quicksearch .sf-qs__cats-wrap,
.sf-qs .sf-qs__cats-wrap {
  padding: 0 24px 22px !important;
  border-top: 1px solid rgba(0,0,0,.06) !important;
  background: transparent !important;
}
#sf-quicksearch .sf-qs__cats-label,
.sf-qs .sf-qs__cats-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin: 16px 0 14px !important;
}
#sf-quicksearch .sf-qs__cats,
.sf-qs .sf-qs__cats {
  display: flex !important;
  gap: 6px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  padding-bottom: 2px !important;
  -webkit-overflow-scrolling: touch;
  list-style: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
}
#sf-quicksearch .sf-qs__cats::-webkit-scrollbar,
.sf-qs .sf-qs__cats::-webkit-scrollbar { display: none; }

#sf-quicksearch .sf-qs__cat,
.sf-qs .sf-qs__cat {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  color: #111 !important;
  flex-shrink: 0 !important;
  width: 115px !important;
  transition: opacity .15s !important;
}
#sf-quicksearch .sf-qs__cat:hover,
.sf-qs .sf-qs__cat:hover { opacity: .78; }

#sf-quicksearch .sf-qs__cat-img-wrap,
.sf-qs .sf-qs__cat-img-wrap {
  width: 115px !important;
  height: 82px !important;
  overflow: hidden !important;
  border-radius: 6px !important;
  background: #f5f5f5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#sf-quicksearch .sf-qs__cat-img,
.sf-qs .sf-qs__cat-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}
#sf-quicksearch .sf-qs__cat-label,
.sf-qs .sf-qs__cat-label {
  font-size: var(--sf-qs-cat-size, 13px) !important;
  font-weight: 700 !important;
  color: #111 !important;
  text-align: center !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
}

/* ── Responsive Quicksearch ── */
@media (max-width: 768px) {
  #sf-quicksearch .sf-qs__step-wrap,
  .sf-qs .sf-qs__step-wrap {
    padding: 16px 16px 0 !important;
  }
  #sf-quicksearch .sf-qs__step-btn,
  .sf-qs .sf-qs__step-btn {
    padding: 8px 13px !important;
    font-size: 13px !important;
  }
  #sf-quicksearch .sf-qs__form,
  .sf-qs .sf-qs__form {
    padding: 14px 16px 16px !important;
  }
  #sf-quicksearch .sf-qs__row,
  .sf-qs .sf-qs__row {
    flex-direction: column !important;
    gap: 10px !important;
  }
  #sf-quicksearch .sf-qs__field,
  .sf-qs .sf-qs__field {
    flex: none !important;
    width: 100% !important;
  }
  #sf-quicksearch .sf-qs__submit,
  .sf-qs .sf-qs__submit {
    height: 52px !important;
    font-size: 16px !important;
  }
  #sf-quicksearch .sf-qs__cats-wrap,
  .sf-qs .sf-qs__cats-wrap {
    padding: 0 16px 18px !important;
  }
  #sf-quicksearch .sf-qs__cat,
  .sf-qs .sf-qs__cat {
    width: 95px !important;
  }
  #sf-quicksearch .sf-qs__cat-img-wrap,
  .sf-qs .sf-qs__cat-img-wrap {
    width: 95px !important;
    height: 68px !important;
  }
}

/* ============================================================
   4. Finder Layout
   ============================================================ */
/* ── Finder SEO-Heading ──────────────────────────────────────────────── */
.sf-finder-seo-head {
  margin-bottom: 20px;
}
.sf-finder-seo-head__title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  color: #111827;
  margin: 0 0 6px;
  line-height: 1.2;
}
.sf-finder-seo-head__sub {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

.sf-finder-wrap {
  position: relative;
}

.sf-finder-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* Filter-Toggle (Mobile) */
#sf-finder .sf-filter-toggle,
.sf-finder-wrap .sf-filter-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 18px !important;
  background: #fff !important;
  border: 1.5px solid var(--sf-border, #e2e4e9) !important;
  border-radius: var(--sf-radius-sm) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  cursor: pointer;
  margin-bottom: 16px;
}
.sf-filter-count {
  background: var(--sf-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}

/* ============================================================
   5. Sidebar
   ============================================================ */
.sf-sidebar {
  width: var(--sf-sidebar-w);
  flex-shrink: 0;
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--sf-border) transparent;
}

.sf-sidebar-inner {
  background: var(--sf-white);
  border: 1.5px solid var(--sf-border);
  border-radius: var(--sf-radius);
  overflow: visible;
}

.sf-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--sf-border);
  background: #fafafa;
}
.sf-sidebar-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sf-text-muted);
}
.sf-reset-filters {
  font-size: 12px;
  color: var(--sf-accent);
  text-decoration: none;
  font-weight: 600;
}
.sf-reset-filters:hover { text-decoration: underline; }

/* Filter-Gruppe */
.sf-filter-group {
  border-bottom: 1px solid var(--sf-border, #e2e4e9);
}
#sf-finder .sf-filter-heading,
.sf-finder-wrap .sf-filter-heading {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  padding: 12px 16px !important;
  background: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  cursor: pointer;
  text-align: left !important;
}
#sf-finder .sf-filter-heading:hover,
.sf-finder-wrap .sf-filter-heading:hover {
  background: #f9fafb !important;
  color: #111827 !important;
}
.sf-fg-arrow { transition: transform var(--sf-transition); color: var(--sf-text-muted); }
.sf-filter-heading[aria-expanded="false"] .sf-fg-arrow { transform: rotate(-90deg); }

.sf-filter-body {
  padding: 4px 16px 14px;
}
.sf-filter-body[hidden] { display: none; }

/* Pills */
.sf-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
#sf-finder .sf-pill,
.sf-finder-wrap .sf-pill {
  display: inline-block !important;
  padding: 5px 12px !important;
  border: 1.5px solid var(--sf-border, #e2e4e9) !important;
  border-radius: 20px !important;
  background: #fff !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  white-space: nowrap;
  line-height: 1.4 !important;
}
#sf-finder .sf-pill:hover,
.sf-finder-wrap .sf-pill:hover {
  border-color: var(--sf-accent, #E8501A) !important;
  color: var(--sf-accent, #E8501A) !important;
  background: #fff !important;
}
#sf-finder .sf-pill--active,
.sf-finder-wrap .sf-pill--active {
  background: var(--sf-accent, #E8501A) !important;
  border-color: var(--sf-accent, #E8501A) !important;
  color: #fff !important;
  font-weight: 600 !important;
}
#sf-finder .sf-pill--unavailable,
.sf-finder-wrap .sf-pill--unavailable {
  opacity: .4 !important;
  pointer-events: none;
}

/* Range-Slider */
.sf-range-display {
  display: flex;
  gap: 4px;
  font-size: 12px;
  color: var(--sf-text-muted);
  margin-bottom: 10px;
}
.sf-range-min-val,
.sf-range-max-val {
  font-weight: 600;
  color: var(--sf-text);
}
.sf-range-slider {
  position: relative;
  height: 36px;
  display: flex;
  align-items: center;
}
.sf-range-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--sf-border);
  border-radius: 4px;
}
.sf-range-fill {
  position: absolute;
  height: 100%;
  background: var(--sf-accent);
  border-radius: 4px;
}
.sf-range-thumb {
  position: absolute;
  width: 100%;
  height: 4px;
  background: none;
  border: none;
  appearance: none;
  pointer-events: none;
  cursor: pointer;
}
.sf-range-thumb::-webkit-slider-thumb {
  appearance: none;
  pointer-events: all;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sf-white);
  border: 2.5px solid var(--sf-accent);
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
  cursor: pointer;
  transition: box-shadow var(--sf-transition);
}
.sf-range-thumb::-webkit-slider-thumb:hover,
.sf-range-thumb:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(232,80,26,.2);
}
.sf-range-thumb::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sf-white);
  border: 2.5px solid var(--sf-accent);
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
  cursor: pointer;
}
.sf-range-thumb:focus { outline: none; }

/* Erweiterte Filter */
.sf-advanced-toggle {
  padding: 10px 16px;
}
#sf-finder .sf-adv-btn,
.sf-finder-wrap .sf-adv-btn {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: none !important;
  border: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--sf-text-muted, #6b7280) !important;
  cursor: pointer;
  padding: 0 !important;
}
#sf-finder .sf-adv-btn:hover,
.sf-finder-wrap .sf-adv-btn:hover { color: var(--sf-accent, #E8501A) !important; }
.sf-adv-arrow { transition: transform var(--sf-transition); }
.sf-adv-btn[aria-expanded="true"] .sf-adv-arrow { transform: rotate(180deg); }

.sf-advanced-filters { display: none; border-top: 1px solid var(--sf-border); }
.sf-advanced-filters.sf-adv--open { display: block; }

/* ============================================================
   6. Ergebnisbereich
   ============================================================ */
.sf-results {
  flex: 1;
  min-width: 0;
}

/* ── Suchfeld ─────────────────────────────────────────────────────── */
.sf-search-bar {
  margin-bottom: 14px;
}
.sf-search-bar__inner {
  position: relative;
  display: flex;
  align-items: center;
}
.sf-search-bar__icon {
  position: absolute;
  left: 14px;
  color: var(--sf-text-muted);
  pointer-events: none;
  flex-shrink: 0;
}
.sf-search-bar__input {
  width: 100% !important;
  padding: 11px 40px 11px 46px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  background: #fff !important;
  color: var(--sf-text) !important;
  outline: none !important;
  transition: border-color .18s !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}
.sf-search-bar__input::placeholder { color: #9ca3af !important; }
.sf-search-bar__input:focus { border-color: var(--sf-accent, #e8501a) !important; outline: none !important; }
.sf-search-bar__clear {
  position: absolute !important;
  right: 12px !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  color: var(--sf-text-muted) !important;
  padding: 4px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  min-height: 0 !important;
  height: auto !important;
  width: auto !important;
  border-radius: 0 !important;
}
.sf-search-bar__clear:hover { color: var(--sf-accent, #e8501a) !important; background: none !important; }

.sf-results-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}
.sf-results-count {
  font-size: 14px;
  color: var(--sf-text-muted);
}
.sf-results-count strong {
  color: var(--sf-text);
  font-size: 16px;
}
.sf-sort-label {
  font-size: 13px;
  color: var(--sf-text-muted);
  margin-right: 6px;
}
.sf-sort-select {
  padding: 7px 32px 7px 12px;
  border: 1.5px solid var(--sf-border);
  border-radius: var(--sf-radius-sm);
  background: var(--sf-white);
  font-size: 13px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.sf-sort-select:focus {
  outline: none;
  border-color: var(--sf-accent);
}

/* Lade-Overlay */
.sf-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px;
  color: var(--sf-text-muted);
  font-size: 14px;
}
.sf-loading[hidden] { display: none; }
.sf-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--sf-border);
  border-top-color: var(--sf-accent);
  border-radius: 50%;
  animation: sf-spin .7s linear infinite;
}
@keyframes sf-spin { to { transform: rotate(360deg); } }

/* Keine Ergebnisse */
.sf-no-results {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 20px;
  text-align: center;
  color: var(--sf-text-muted);
}
.sf-reset-link,
.sf-reset-filters {
  color: var(--sf-accent);
  text-decoration: none;
  font-weight: 600;
}

/* ============================================================
   7. Gerätekarten (Grid)
   ============================================================ */
.sf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.sf-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.sf-card {
  background: var(--sf-white);
  border: 1.5px solid var(--sf-border);
  border-radius: var(--sf-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--sf-transition), transform var(--sf-transition), border-color var(--sf-transition);
}
.sf-card:hover {
  box-shadow: var(--sf-shadow-hover);
  transform: translateY(-3px);
  border-color: var(--sf-accent);
}

.sf-card__img-wrap {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sf-bg);
}
.sf-card__img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  object-fit: cover !important;
  transition: transform .3s ease;
}
.sf-card:hover .sf-card__img { transform: scale(1.04); }
.sf-card__img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #f3f4f6;
}
.sf-card__img-placeholder-text {
  font-size: 12px;
  color: #9ca3af;
  font-weight: 500;
  text-align: center;
  padding: 0 12px;
}
.sf-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--sf-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: .03em;
}
.sf-card__lagernd-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: #16a34a;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: .03em;
  pointer-events: none;
}

.sf-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.sf-card__type-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sf-accent);
}
.sf-card__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}
.sf-card__title a {
  color: var(--sf-text);
  text-decoration: none;
}
.sf-card__title a:hover { color: var(--sf-accent); }
.sf-card__desc {
  font-size: 13px;
  color: var(--sf-text-muted);
  line-height: 1.5;
  margin: 0;
}

.sf-card__specs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 8px;
}
.sf-card__spec {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--sf-text-muted);
}
.sf-card__spec svg { color: var(--sf-text-muted); flex-shrink: 0; }

.sf-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}
.sf-card__tag {
  display: inline-block;
  font-size: 11px;
  padding: 3px 9px;
  background: var(--sf-bg);
  border: 1px solid var(--sf-border);
  border-radius: 20px;
  color: var(--sf-text-muted);
}

.sf-card__actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.sf-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: var(--sf-radius-sm);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--sf-transition);
}
#sf-finder .sf-card__btn--primary,
.sf-finder-wrap .sf-card__btn--primary {
  background: var(--sf-accent, #E8501A) !important;
  color: #fff !important;
  flex: 1;
  justify-content: center;
}
#sf-finder .sf-card__btn--primary:hover,
.sf-finder-wrap .sf-card__btn--primary:hover { background: #fff !important; color: var(--sf-accent, #E8501A) !important; border-color: var(--sf-accent, #E8501A) !important; }
#sf-finder .sf-card__btn--secondary,
.sf-finder-wrap .sf-card__btn--secondary {
  background: transparent !important;
  border-color: var(--sf-border, #e2e4e9) !important;
  color: var(--sf-text, #1a1a2e) !important;
}
#sf-finder .sf-card__btn--secondary:hover,
.sf-finder-wrap .sf-card__btn--secondary:hover { border-color: #9ca3af !important; color: #374151 !important; }

/* ============================================================
   8. Pagination
   ============================================================ */
.sf-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 36px;
  flex-wrap: wrap;
}
#sf-pagination-wrap { margin-top: 0; }
#sf-finder .sf-page-btn,
.sf-finder-wrap .sf-page-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px;
  height: 38px;
  padding: 0 8px !important;
  border: 1.5px solid var(--sf-border, #e2e4e9) !important;
  border-radius: var(--sf-radius-sm) !important;
  background: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  cursor: pointer;
  transition: all var(--sf-transition);
}
#sf-finder .sf-page-btn:hover,
.sf-finder-wrap .sf-page-btn:hover {
  border-color: var(--sf-accent, #E8501A) !important;
  color: var(--sf-accent, #E8501A) !important;
  background: #fff !important;
}
#sf-finder .sf-page-active,
.sf-finder-wrap .sf-page-active {
  background: var(--sf-accent, #E8501A) !important;
  border-color: var(--sf-accent, #E8501A) !important;
  color: #fff !important;
}
.sf-page-prev svg,
.sf-page-next svg { stroke: currentColor; }
.sf-page-ellipsis {
  color: var(--sf-text-muted);
  padding: 0 4px;
}

/* ============================================================
   9. Kategorie-Widget
   ============================================================ */
.sf-kw {
  background: var(--sf-white);
  border: 1.5px solid var(--sf-border);
  border-radius: var(--sf-radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sf-kw__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.sf-kw__title {
  font-size: 20px;
  font-weight: 800;
  color: var(--sf-text);
  margin: 0;
}
.sf-kw__count {
  font-size: 13px;
  font-weight: 600;
  color: var(--sf-accent);
  white-space: nowrap;
}
.sf-kw__types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sf-kw__type-pill {
  font-size: 12px;
  padding: 4px 12px;
  background: var(--sf-accent-light);
  color: var(--sf-accent);
  border-radius: 20px;
  font-weight: 600;
}
.sf-kw__images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border-radius: var(--sf-radius-sm);
  overflow: hidden;
}
.sf-kw__img-wrap { display: block; aspect-ratio: 4/3; overflow: hidden; }
.sf-kw__img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; display: block !important; transition: transform .3s; }
.sf-kw__img-wrap:hover .sf-kw__img { transform: scale(1.06); }
.sf-kw__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: var(--sf-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--sf-radius-sm);
  text-decoration: none;
  align-self: flex-start;
  transition: background var(--sf-transition);
}
.sf-kw__cta:hover { background: var(--sf-accent-dark); color: #fff; }

/* ============================================================
   10. Einzelansicht (single-geraet)
   ============================================================ */
.sf-single {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 100px 0 60px;
  box-sizing: border-box;
  scroll-margin-top: 100px;
}

/* Breadcrumb */
.sf-breadcrumb {
  margin-bottom: 20px;
}
.sf-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--sf-text-muted);
}
.sf-breadcrumb__list a {
  color: var(--sf-text-muted);
  text-decoration: none;
}
.sf-breadcrumb__list a:hover { color: var(--sf-accent); }
.sf-breadcrumb__sep { color: var(--sf-border); margin: 0 2px; }
.sf-breadcrumb__list [aria-current] { color: var(--sf-text); font-weight: 600; }

/* Badges */
.sf-single__badges {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
.sf-single__badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
}
.sf-single__badge--marke {
  background: var(--sf-accent);
  color: #fff;
}
.sf-single__badge--typ {
  background: var(--sf-bg);
  border: 1.5px solid var(--sf-border);
  color: var(--sf-text);
}

/* Hero */
.sf-single__main {
  display: grid;
  grid-template-columns: 52% 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 48px;
}

/* Galerie */
.sf-gallery {
  position: sticky;
  top: 20px;
}
.sf-gallery__main-wrap {
  position: relative;
  border-radius: var(--sf-radius);
  overflow: hidden;
  background: var(--sf-bg);
  aspect-ratio: 4/3;
}
.sf-gallery__main {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform .3s ease;
}
.sf-gallery__main:hover { transform: scale(1.02); }
.sf-gallery__placeholder {
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--sf-bg);
  border-radius: var(--sf-radius);
  color: var(--sf-text-muted);
  font-size: 15px;
  font-weight: 500;
  gap: 16px;
}
.sf-gallery__placeholder p { margin: 0; }
.sf-gallery__lightbox-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0,0,0,.5);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--sf-transition);
  display: flex;
}
.sf-gallery__main-wrap:hover .sf-gallery__lightbox-btn { opacity: 1; }

/* Thumbnail-Reihe mit Prev/Next-Pfeilen */
.sf-gallery__thumb-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.sf-gallery__thumbs-viewport {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}
.sf-gallery__thumbs {
  display: flex;
  gap: 8px;
  transition: transform 0.3s ease;
  will-change: transform;
}
.sf-gallery__thumb-nav {
  width: 32px !important;
  height: 120px !important;
  border: 1px solid var(--sf-border, #e2e4e9) !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: var(--sf-text, #1a1a2e) !important;
  box-shadow: none !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 !important;
  transition: border-color .18s, color .18s;
}
.sf-gallery__thumb-nav:hover {
  border-color: var(--sf-accent, #E8501A) !important;
  color: var(--sf-accent, #E8501A) !important;
}
.sf-gallery__thumb-nav:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.sf-gallery__thumb {
  width: 180px;
  min-width: 180px;
  height: 120px;
  border: none;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  padding: 0 !important;
  background: #f3f4f6 !important;
  position: relative;
  transition: box-shadow .18s ease, opacity .18s ease;
  box-shadow: 0 0 0 2px transparent;
}
.sf-gallery__thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  max-width: none !important;
  max-height: none !important;
  pointer-events: none;
}
.sf-gallery__thumb:hover { box-shadow: 0 0 0 3px var(--sf-accent); }
.sf-gallery__thumb--active {
  box-shadow: 0 0 0 3px var(--sf-accent);
  opacity: 1;
}
.sf-gallery__thumb:not(.sf-gallery__thumb--active) { opacity: 0.75; }
.sf-gallery__thumb:hover { opacity: 1; }

/* Info-Box */
.sf-single__info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sf-single__badge--marke { background: var(--sf-accent); color: #fff; }
.sf-single__badge--gebraucht { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; }
.sf-single__badge--lagernd { background: #10b981; color: #fff; }
.sf-single__badge--neu { background: #3b82f6; color: #fff; }
.sf-single__title,
.sf-single .sf-single__title,
body .sf-single__title,
h1.sf-single__title {
  font-size: clamp(28px, 3.5vw, 48px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: #1a1a2e !important;
  margin: 0 0 20px 0 !important;
}
.sf-single__desc {
  font-size: 15px;
  color: var(--sf-text-muted);
  line-height: 1.6;
  margin: 0;
}

.sf-single__specs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1.5px solid var(--sf-border);
  border-radius: var(--sf-radius);
  overflow: hidden;
}
.sf-single__spec {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--sf-border);
}
.sf-single__spec:last-child { border-bottom: none; }
.sf-single__spec:nth-child(even) { background: var(--sf-bg); }
.sf-single__spec-icon { color: var(--sf-accent); }
.sf-single__spec-label {
  font-size: 13px;
  color: var(--sf-text-muted);
}
.sf-single__spec-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--sf-text);
  text-align: right;
}

.sf-single__ctas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* Preis-Zeile im CTA-Bereich (volle Breite wie Buttons) */
.sf-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 18px 24px;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.sf-price-row--anfrage {
  justify-content: center;
  border-color: var(--sf-accent);
  color: var(--sf-accent);
  font-weight: 600;
  font-size: 15px;
  background: rgba(232,80,26,.06);
  box-shadow: none;
  /* An Button-Optik (Angebot-drucken-Button) angeglichen: gleiche Radius/Padding wie .sf-btn--lg */
  border-radius: var(--sf-radius-sm);
  padding: 13px 28px;
}
.sf-price-row__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
  color: var(--sf-text-muted, #6b7280);
  margin-bottom: 2px;
}
.sf-price-row__value {
  font-size: 30px;
  font-weight: 900;
  color: var(--sf-text, #1a1a2e);
  line-height: 1;
  letter-spacing: -.5px;
}
.sf-price-row__hint {
  font-size: 12px;
  color: var(--sf-text-muted, #6b7280);
  text-align: right;
}
.sf-price-row--miete {
  background: linear-gradient(135deg,rgba(16,185,129,.07) 0%,rgba(16,185,129,.03) 100%);
  border-color: #10b981;
  border-width: 2px;
}
.sf-price-row--miete .sf-price-row__label { color: #059669; font-weight: 700; }
.sf-price-row--miete .sf-price-row__value { color: #065f46; font-size: 30px; }
/* Kauf-Preis bekommt Akzentfarbe für den Wert */
.sf-price-row:not(.sf-price-row--miete):not(.sf-price-row--anfrage) .sf-price-row__value {
  color: var(--sf-accent, #e8501a);
}

/* Mietdauer-Feld (nur bei Miete sichtbar) */
.sf-mietdauer-field {
  display: none;
  flex-direction: column;
  gap: 6px;
}
.sf-mietdauer-field.sf-mietdauer-field--visible {
  display: flex;
}
.sf-mietdauer-field label {
  font-size: 13px;
  font-weight: 600;
  color: #333;
}
.sf-mietdauer-field select,
.sf-mietdauer-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
  color: #111;
  font-family: inherit;
}
.sf-mietdauer-input:focus {
  outline: none;
  border-color: var(--sf-accent);
}
.sf-mietdauer-hint {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
  margin-top: 2px;
}

/* Zurück-Link: subtil unterm Grid */
.sf-single__ctas .sf-btn--back {
  justify-content: flex-start;
  color: #6b7280;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 0;
  border: none;
  background: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sf-single__ctas .sf-btn--back:hover { color: #374151; }


/* Technische Daten */
.sf-single__techdata {
  margin-bottom: 48px;
}
.sf-single__section-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--sf-text, #1a1a2e) !important;
  margin: 0 0 20px !important;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--sf-border, #e5e7eb);
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Tabs — gleiche Breite wie Tabelle, Buttons füllen die ganze Breite */
.sf-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  background: #1a1a2e !important;
  border: 1px solid var(--sf-border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 0;
}
.sf-tabs::-webkit-scrollbar { display: none; }
.sf-tab-btn {
  padding: 13px 12px;
  background: transparent !important;
  border: none !important;
  border-right: 1px solid rgba(255,255,255,.12) !important;
  border-bottom: 3px solid transparent !important;
  margin-bottom: -1px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition: all var(--sf-transition);
  width: 100%;
  box-shadow: none !important;
}
.sf-tab-btn:last-child { border-right: none !important; }
.sf-tab-btn:hover { color: #fff !important; background: rgba(255,255,255,.08) !important; }
.sf-tab-btn--active {
  background: var(--sf-accent) !important;
  color: #fff !important;
  border-bottom-color: var(--sf-accent) !important;
}

.sf-tab-panel { display: none; }
.sf-tab-panel--active { display: block; }
.sf-tab-panel[hidden] { display: none; }

/* Spec-Tabelle */
.sf-spec-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0;
  border: 1px solid var(--sf-border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  overflow: hidden;
}
.sf-tab-panel--active .sf-spec-table { display: table; }
.sf-spec-row { border-bottom: 1px solid var(--sf-border); }
.sf-spec-row:last-child { border-bottom: none; }
.sf-spec-row:nth-child(odd) { background: #fff; }
.sf-spec-row:nth-child(even) { background: #f8f9fa; }
.sf-spec-label {
  width: 42%;
  padding: 11px 18px;
  font-size: 13px;
  color: var(--sf-text-muted);
  font-weight: 500;
  text-align: left;
  border-right: 1px solid var(--sf-border);
}
.sf-spec-value {
  padding: 11px 18px;
  font-size: 13px;
  color: var(--sf-text);
  font-weight: 600;
}

/* Freitexte */
.sf-single__texte {
  margin-bottom: 48px;
}
.sf-single__text-block {
  padding: 20px 0;
  border-bottom: 1px solid var(--sf-border);
}
.sf-single__text-block:last-child { border-bottom: none; }
.sf-single__text-block p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--sf-text);
  margin: 0;
}

/* Ähnliche Geräte */
.sf-single__similar {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 2px solid var(--sf-border);
}

/* ============================================================
   11. Lightbox
   ============================================================ */
.sf-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sf-lightbox[hidden] { display: none; }
.sf-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.88);
}
.sf-lightbox__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(90vw, 1200px);
  max-height: 90vh;
  width: 100%;
}
.sf-lightbox__img {
  max-width: 100%;
  max-height: 90vh;
  border-radius: var(--sf-radius);
  object-fit: contain;
  display: block;
}
.sf-lightbox__close {
  position: fixed !important;
  top: 20px !important;
  right: 24px !important;
  background: rgba(255,255,255,.15) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #fff !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition: background var(--sf-transition);
}
.sf-lightbox__close:hover { background: rgba(255,255,255,.3) !important; }
.sf-lightbox__close svg { display: block !important; }
.sf-lightbox__prev,
.sf-lightbox__next {
  position: fixed !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(255,255,255,.18) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 52px !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #fff !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition: background var(--sf-transition);
}
.sf-lightbox__prev:hover,
.sf-lightbox__next:hover { background: rgba(255,255,255,.35) !important; }
.sf-lightbox__prev { left: 20px !important; right: auto !important; }
.sf-lightbox__next { right: 20px !important; left: auto !important; }
.sf-lightbox__prev svg,
.sf-lightbox__next svg { display: block !important; pointer-events: none; }
.sf-lightbox__counter {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.7);
  font-size: 13px;
  font-weight: 600;
}

/* ============================================================
   12. Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .sf-single__main {
    grid-template-columns: 1fr;
  }
  .sf-single__info {
    padding: 24px 20px;
  }
  .sf-gallery {
    position: static;
    padding: 16px;
  }
  .sf-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sf-filter-toggle {
    display: inline-flex;
  }
  .sf-finder-layout {
    flex-direction: column;
  }
  .sf-sidebar {
    width: 100%;
    position: static;
    max-height: none;
    display: none;
  }
  .sf-sidebar.sf-sidebar--open {
    display: block;
  }
  /* Accordion statt Tabs auf Mobile */
  .sf-tab-btn {
    display: none;
  }
  .sf-tab-panel {
    display: block !important;
    border-bottom: 1px solid var(--sf-border);
  }
  .sf-tab-panel::before {
    content: attr(data-label);
    display: block;
    padding: 12px 16px;
    background: var(--sf-bg);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px solid var(--sf-border);
  }
  .sf-grid--3 {
    grid-template-columns: 1fr;
  }
  .sf-qs-row {
    flex-direction: column;
  }
  .sf-qs-field { min-width: 100%; }
  .sf-kw__images {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .sf-single {
    padding: 12px 12px 40px;
  }
  .sf-single__ctas {
    flex-direction: column;
  }
  .sf-card__actions {
    flex-direction: column;
  }
  .sf-card__btn--secondary {
    text-align: center;
    justify-content: center;
  }
  .sf-qs-categories {
    gap: 8px;
    padding: 12px 16px 16px;
  }
  .sf-qs-cat-btn {
    min-width: 70px;
    padding: 10px 12px;
  }
}

/* ============================================================
   Quicksearch — Labels + Erweiterte Suche
   ============================================================ */

/* Kleine Beschriftungen über den Selects */
#sf-quicksearch .sf-qs__label,
.sf-qs .sf-qs__label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--sf-tab-inactive, #6b7280) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  margin-bottom: 4px !important;
}
#sf-quicksearch .sf-qs__label--hidden,
.sf-qs .sf-qs__label--hidden {
  visibility: hidden !important;
}

/* Toggle-Button "Erweiterte Suche" */
#sf-quicksearch .sf-qs__advanced-toggle-wrap,
.sf-qs .sf-qs__advanced-toggle-wrap {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 6px 0 2px !important;
}
#sf-quicksearch .sf-qs__advanced-btn,
.sf-qs .sf-qs__advanced-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: none !important;
  border: none !important;
  padding: 4px 0 !important;
  font-size: var(--sf-qs-tab-size, 13px) !important;
  font-weight: 600 !important;
  color: var(--sf-accent, #E8501A) !important;
  cursor: pointer !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  transition: opacity .15s !important;
}
#sf-quicksearch .sf-qs__advanced-btn:hover,
.sf-qs .sf-qs__advanced-btn:hover {
  opacity: .75 !important;
}
#sf-quicksearch .sf-qs__advanced-chevron,
.sf-qs .sf-qs__advanced-chevron {
  transition: transform .2s !important;
}

/* Erweiterter Block */
#sf-quicksearch .sf-qs__advanced,
.sf-qs .sf-qs__advanced {
  border-top: 1px solid #f0f0f0 !important;
  padding-top: 12px !important;
  margin-top: 4px !important;
}
#sf-quicksearch .sf-qs__row--advanced,
.sf-qs .sf-qs__row--advanced {
  padding-top: 0 !important;
}

/* ============================================================
   Smart-Filter: nicht verfügbare Optionen (Pills + Kats)
   ============================================================ */

/* Pills ohne Treffer im aktuellen Kontext */
#sf-finder .sf-pill--unavailable,
.sf-finder-wrap .sf-pill--unavailable {
  opacity: .35 !important;
  cursor: not-allowed !important;
}

/* Kategorie-Bild-Links ohne Treffer */
#sf-quicksearch .sf-qs__cat--unavailable,
.sf-qs .sf-qs__cat--unavailable {
  opacity: .35 !important;
  pointer-events: none !important;
  filter: grayscale(60%) !important;
}

/* Disabled options in Quicksearch selects — visuelles Feedback */
#sf-quicksearch select option[data-unavailable="1"],
.sf-qs select option[data-unavailable="1"] {
  color: #bbb !important;
}

/* ============================================================
   PDF-Button
   ============================================================ */
.sf-pdf-btn,
a.sf-pdf-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 20px !important;
  background: var(--sf-accent, #E8501A) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
  box-shadow: none !important;
}
.sf-pdf-btn:hover,
a.sf-pdf-btn:hover {
  background: var(--sf-accent-dark, #c43f14) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* ============================================================
   Finder: Kontext-Switching (Stapler ↔ Anbaugeräte)
   ============================================================ */

/* Standardmäßig Anbau-Filter versteckt */
.sf-finder-wrap .sf-anbau-filter { display: none; }

/* Im Anbaugeräte-Kontext: Stapler-Filter verstecken, Anbau-Filter zeigen */
.sf-finder-wrap.sf-ctx-anbau .sf-stapler-filter { display: none; }
.sf-finder-wrap.sf-ctx-anbau .sf-anbau-filter   { display: block; }

/* ============================================================
   Einzelseite: Neu/Gebraucht-Badges
   ============================================================ */
.sf-single__badge--lagernd   { background: #16a34a; color: #fff; }
.sf-single__badge--neu       { background: #2563eb; color: #fff; }
.sf-single__badge--gebraucht { background: #6b7280; color: #fff; }

/* ============================================================
   Einzelseite: Preis-Block
   ============================================================ */
.sf-single__pricing {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 16px 0;
}
.sf-single__price {
  background: var(--sf-bg);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-sm);
  padding: 12px 16px;
  min-width: 140px;
}
.sf-single__price--miete {
  border-color: var(--sf-accent);
}
.sf-single__price-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--sf-text-muted);
  margin-bottom: 4px;
}
.sf-single__price-value {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--sf-text);
}
.sf-single__price-hint {
  display: block;
  font-size: 11px;
  color: var(--sf-text-muted);
  margin-top: 2px;
}
.sf-single__price--anfrage .sf-single__price-label {
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--sf-accent);
  font-weight: 600;
}

/* ============================================================
   Einzelseite: Bild-Text-Abschnitte
   ============================================================ */
.sf-single__content-blocks { margin: 48px 0; }

.sf-content-block {
  display: flex;
  gap: 32px;
  align-items: center;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.sf-content-block__img {
  flex: 0 0 calc(50% - 16px);
  max-width: calc(50% - 16px);
  border-radius: var(--sf-radius);
  overflow: hidden;
}
.sf-content-block__img img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}
.sf-content-block__text {
  flex: 1;
  min-width: 200px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--sf-text);
}
.sf-content-block__text--full {
  flex: 1 1 100%;
}
/* Drei-Spalten-Block: Bild–Text–Bild */
.sf-content-block--bild-text-bild .sf-content-block__img {
  flex: 0 0 calc(30% - 16px);
  max-width: calc(30% - 16px);
}
.sf-content-block--bild-text-bild .sf-content-block__text {
  flex: 0 0 calc(40% - 16px);
}

@media (max-width: 640px) {
  .sf-content-block,
  .sf-content-block--bild-text-bild { flex-direction: column; }
  .sf-content-block__img,
  .sf-content-block--bild-text-bild .sf-content-block__img { max-width: 100%; flex: 1 1 100%; }
  .sf-content-block__img img { height: 220px; }
}

/* ============================================================
   Einzelseite: Kontaktformular (Anfrage)
   ============================================================ */
.sf-single__anfrage {
  background: #f3f4f6;
  padding: 56px 24px;
  margin-top: 56px;
}
.sf-anfrage-wrap {
  max-width: 860px;
  margin: 0 auto;
}
.sf-anfrage__header {
  margin-bottom: 32px;
}
.sf-anfrage__headline {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 900;
  line-height: 1.2;
  color: #111;
  margin: 0 0 10px;
}
.sf-anfrage__headline em {
  color: var(--sf-accent);
  font-style: normal;
}
.sf-anfrage__subline {
  font-size: 18px;
  font-weight: 700;
  color: #222;
  margin: 0 0 8px;
}
.sf-anfrage__desc {
  font-size: 14px;
  color: #555;
  margin: 0;
  max-width: 620px;
}
.sf-anfrage-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(232, 80, 26, .1);
  border: 1.5px solid var(--sf-accent);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
  color: var(--sf-accent);
  font-size: 14px;
  font-weight: 600;
}
.sf-anfrage-banner__icon { flex-shrink: 0; line-height: 1; }
.sf-anfrage-banner__text { flex: 1; }
.sf-anfrage-banner__text strong { color: #111; }
.sf-anfrage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.sf-anfrage-field { display: flex; flex-direction: column; gap: 6px; }
.sf-anfrage-field label {
  font-size: 13px;
  font-weight: 600;
  color: #333;
}
.sf-anfrage-field label span { color: var(--sf-accent); }
.sf-anfrage-field input,
.sf-anfrage-field textarea {
  padding: 11px 14px;
  border: 1.5px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  color: #111;
  background: #fff;
  transition: border-color .15s;
  width: 100%;
  box-sizing: border-box;
}
.sf-anfrage-field input:focus,
.sf-anfrage-field textarea:focus {
  outline: none;
  border-color: var(--sf-accent);
}
.sf-anfrage-field--full { grid-column: 1 / -1; }
.sf-anfrage-field textarea { resize: vertical; }
.sf-anfrage-submit { margin-top: 20px; }
.sf-anfrage-btn {
  display: block;
  width: 100%;
  padding: 16px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background .15s;
}
.sf-anfrage-btn:hover { background: #333; }
.sf-anfrage-btn:disabled { opacity: .6; cursor: not-allowed; }
.sf-anfrage-feedback {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
}
.sf-anfrage-feedback--success { background: #dcfce7; color: #166534; }
.sf-anfrage-feedback--error   { background: #fee2e2; color: #991b1b; }
@media (max-width: 600px) {
  .sf-anfrage-grid { grid-template-columns: 1fr; }
  .sf-anfrage-field--full { grid-column: 1; }
}

/* ══════════════════════════════════════════════════════════════════════
   Ghost-Button (Zur Übersicht)
   ══════════════════════════════════════════════════════════════════════ */
.sf-btn--ghost {
  background: transparent;
  color: #6b7280;
  border: 1px solid #d1d5db;
}
.sf-btn--ghost:hover {
  border-color: #9ca3af;
  color: #374151;
  background: transparent;
}

/* ══════════════════════════════════════════════════════════════════════
   PDF / Anfrage-Modal
   ══════════════════════════════════════════════════════════════════════ */
.sf-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.sf-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  cursor: pointer;
}
.sf-modal__box {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 32px 36px 36px;
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  animation: sfModalIn .2s ease;
}
@keyframes sfModalIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.sf-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: #6b7280;
  border-radius: 50%;
  transition: background .15s, color .15s;
}
.sf-modal__close:hover { background: #f3f4f6; color: #111; }

.sf-modal__title {
  font-size: 20px;
  font-weight: 800;
  color: #111;
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sf-modal__title svg { color: var(--sf-accent, #E8501A); flex-shrink: 0; }

/* ── Option-Karte ── */
.sf-modal__option {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 16px;
}
.sf-modal__option--download { background: #f9fafb; }
.sf-modal__option-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: #fff3ed;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sf-accent, #E8501A);
}
.sf-modal__option-body { flex: 1; }
.sf-modal__option-body strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #111;
  margin-bottom: 4px;
}
.sf-modal__option-body p {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 14px;
  line-height: 1.5;
}
.sf-modal__option--form { flex-direction: column; }
.sf-modal__option--form .sf-modal__option-icon { margin-bottom: 0; }

/* ── Trenner ── */
.sf-modal__divider {
  text-align: center;
  position: relative;
  margin: 4px 0 8px;
  color: #9ca3af;
  font-size: 13px;
  font-weight: 600;
}
.sf-modal__divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #e5e7eb;
}
.sf-modal__divider span {
  position: relative;
  background: #fff;
  padding: 0 12px;
}

/* ── Formular im Modal ── */
.sf-modal__form { margin-top: 16px; }
.sf-modal__form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.sf-modal__form-submit { margin-top: 20px; }

/* ── Body-Lock wenn Modal offen ── */
body.sf-modal-open { overflow: hidden; }

@media (max-width: 600px) {
  .sf-modal__box { padding: 24px 20px 28px; }
  .sf-modal__form-grid { grid-template-columns: 1fr; }
  .sf-modal__option { flex-direction: column; gap: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Zubehör-Checkliste
   ══════════════════════════════════════════════════════════════════════ */
.sf-zubehoer-wrap { margin-top: 4px; }
.sf-zubehoer-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: #111;
  padding: 12px 16px;
  background: #fffbf8;
  border: 1.5px solid #fcd9c7;
  border-radius: 6px;
  transition: background .15s, border-color .15s;
}
.sf-zubehoer-toggle:hover { background: #fff3ed; border-color: var(--sf-accent, #E8501A); }
.sf-zubehoer-toggle input[type=checkbox] {
  width: 18px;
  height: 18px;
  accent-color: var(--sf-accent, #E8501A);
  cursor: pointer;
  flex-shrink: 0;
}
.sf-zubehoer-list {
  margin-top: 12px;
  padding: 16px 20px;
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  animation: sfFadeIn .2s ease;
}
@keyframes sfFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sf-zubehoer-list__hint {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 12px;
  font-weight: 600;
}
.sf-zubehoer-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px 16px;
}
.sf-zubehoer-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
}
.sf-zubehoer-option input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--sf-accent, #E8501A);
  cursor: pointer;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   Extra-Bilder Fallback-Galerie
   ══════════════════════════════════════════════════════════════════════ */
.sf-single__extra-gallery {
  margin-bottom: 48px;
}
.sf-extra-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.sf-extra-gallery__item {
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #f3f4f6;
  position: relative;
}
.sf-extra-gallery__btn {
  position: absolute;
  inset: 0;
  width: 100%;
  background: transparent !important;
  color: inherit !important;
  height: 100%;
  padding: 0;
  border: none !important;
  background: none !important;
  cursor: zoom-in;
  box-shadow: none !important;
}
.sf-extra-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
  pointer-events: none;
}
.sf-extra-gallery__btn:hover img { transform: scale(1.03); }

/* ══════════════════════════════════════════════════════════════════════
   Showcase [stapla_showcase]
   ══════════════════════════════════════════════════════════════════════ */
.sf-showcase {
  margin: 40px 0;
  max-width: 100%;
  overflow-x: hidden;
}
.sf-showcase__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.sf-showcase__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--sf-text, #111827);
  margin: 0;
  line-height: 1.2;
}
.sf-showcase__zustand-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.sf-showcase__zustand-badge--neu {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}
.sf-showcase__zustand-badge--gebraucht {
  background: #f3f4f6;
  color: #4b5563;
  border: 1px solid #d1d5db;
}
.sf-showcase__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sf-showcase__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.sf-showcase__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.sf-showcase__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.sf-showcase__footer {
  margin-top: 36px;
  text-align: center;
}
.sf-showcase__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sf-accent, #E8501A);
  color: #fff !important;
  padding: 14px 36px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background var(--sf-transition,.18s ease), gap .15s ease;
}
.sf-showcase__cta:hover {
  background: var(--sf-accent-dark, #c43f14);
  gap: 12px;
}
@media (max-width: 1100px) {
  .sf-showcase__grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .sf-showcase__grid,
  .sf-showcase__grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .sf-showcase__grid,
  .sf-showcase__grid--cols-2,
  .sf-showcase__grid--cols-3,
  .sf-showcase__grid--cols-4 { grid-template-columns: 1fr; }
  .sf-showcase__cta { width: 100%; justify-content: center; }
  .sf-showcase { margin: 24px 0; }
  .sf-showcase__header { margin-bottom: 16px; }
  .sf-showcase__title { font-size: 18px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Karussell [stapla_karussell]
   ══════════════════════════════════════════════════════════════════════ */
.sf-karussell {
  margin: 32px 0;
  max-width: 100%;
  overflow: hidden;
}
.sf-karussell__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}
.sf-karussell__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--sf-text, #1a1a2e);
  margin: 0;
  line-height: 1.2;
}
.sf-karussell__nav {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.sf-karussell__prev,
.sf-karussell__next {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--sf-border, #e2e4e9);
  background: #fff;
  color: var(--sf-text, #1a1a2e);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--sf-transition, .18s ease), color var(--sf-transition, .18s ease), background var(--sf-transition, .18s ease);
  padding: 0;
  flex-shrink: 0;
}
.sf-karussell__prev:hover,
.sf-karussell__next:hover {
  border-color: var(--sf-accent, #E8501A);
  color: var(--sf-accent, #E8501A);
}
.sf-karussell__prev:disabled,
.sf-karussell__next:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
@media (max-width: 768px) {
  .sf-karussell__nav { display: none; }
}
.sf-karussell__track-wrap {
  overflow: hidden;
}
.sf-karussell__track {
  display: flex;
  gap: 16px;
  transition: transform 0.35s ease;
  will-change: transform;
}
/* 4 items desktop */
.sf-karussell__item {
  flex: 0 0 calc(25% - 12px);
  min-width: 0;
}
@media (max-width: 1100px) {
  .sf-karussell__item { flex: 0 0 calc(33.333% - 11px); }
}
@media (max-width: 768px) {
  .sf-karussell__item { flex: 0 0 calc(50% - 8px); }
}
@media (max-width: 480px) {
  .sf-karussell__item { flex: 0 0 82%; }
}
.sf-karussell__item-link {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--sf-border, #e2e4e9);
  border-radius: var(--sf-radius, 8px);
  overflow: hidden;
  transition: box-shadow var(--sf-transition, .18s ease), transform var(--sf-transition, .18s ease);
  height: 100%;
}
.sf-karussell__item-link:hover {
  box-shadow: var(--sf-shadow-hover, 0 6px 20px rgba(0,0,0,.13));
  transform: translateY(-2px);
  color: inherit;
  text-decoration: none;
}
.sf-karussell__img-wrap {
  aspect-ratio: 4 / 3;
  background: #f3f4f6;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sf-karussell__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.sf-karussell__img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #d1d5db;
}
.sf-karussell__item-body {
  padding: 12px 14px 14px;
}
.sf-karussell__item-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sf-accent, #E8501A);
  margin-bottom: 4px;
}
.sf-karussell__item-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--sf-text, #1a1a2e);
  margin: 0 0 8px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sf-karussell__specs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.sf-karussell__spec {
  font-size: 11px;
  color: var(--sf-text-muted, #6b7280);
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 20px;
}
.sf-karussell__footer {
  text-align: center;
  margin-top: 20px;
}
.sf-karussell__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sf-accent, #E8501A);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: gap var(--sf-transition, .18s ease);
}
.sf-karussell__cta:hover {
  gap: 10px;
  color: var(--sf-accent-dark, #c43f14);
}

/* ── Autoplay-Karussell (Infinite Scroll Loop) ─────────────────────── */
@keyframes sf-karussell-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.sf-karussell--autoplay {
  overflow: hidden;
  cursor: default;
}
.sf-karussell--autoplay .sf-karussell__track-wrap {
  overflow: hidden;
}
.sf-karussell--autoplay .sf-karussell__track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: sf-karussell-scroll 40s linear infinite;
  transition: none !important;
}
.sf-karussell--autoplay:hover .sf-karussell__track {
  animation-play-state: paused;
}
.sf-karussell--autoplay .sf-karussell__item {
  flex: 0 0 280px;
  min-width: 0;
}
@media (max-width: 768px) {
  .sf-karussell--autoplay .sf-karussell__item { flex: 0 0 220px; }
}
@media (max-width: 480px) {
  .sf-karussell--autoplay .sf-karussell__item { flex: 0 0 180px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Sonstiges: Hubhöhe "mm mm" Fix — Einheit nur einmal
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   PORTAL  (.sfp-*)
   Frontend-Verwaltung: Leads · Geräte · Import
   ══════════════════════════════════════════════════════════════════════ */

/* ── Reset ──────────────────────────────────────────────────────────── */
.sfp *, .sfp-login * { box-sizing: border-box; }

/* Hard-Reset für alle <button> im Portal */
.sfp button {
  appearance: none !important;
  -webkit-appearance: none !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  box-shadow: none !important;
}

/* ── Login-Seite ────────────────────────────────────────────────────── */
.sfp-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  padding: 40px 16px;
  background: var(--sf-bg, #f8f8f8);
}
.sfp-login__card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,.10);
  padding: 40px 36px;
  width: 100%;
  max-width: 400px;
}
.sfp-login__logo {
  font-size: 22px;
  font-weight: 800;
  color: var(--sf-accent, #E8501A);
  margin-bottom: 4px;
  letter-spacing: -.01em;
}
.sfp-login__sub {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 28px;
}
.sfp-login__error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  border-radius: 7px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}
.sfp-login__field {
  margin-bottom: 16px;
}
.sfp-login__field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}
.sfp-login__field input {
  width: 100%;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  padding: 10px 13px;
  font-size: 14px;
  color: #111827;
  outline: none;
  transition: border-color .15s;
  background: #fff;
}
.sfp-login__field input:focus { border-color: var(--sf-accent, #E8501A); }
.sfp-login__btn {
  width: 100%;
  background: var(--sf-accent, #E8501A);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
  transition: background .15s;
}
.sfp-login__btn:hover { background: var(--sf-accent-dark, #c43f14); }

/* ── Portal-Wrapper ─────────────────────────────────────────────────── */
/* ── Full-Bleed-Wrapper: Portal bricht aus dem Theme-Content-Container aus ── */
.sfp-fullbleed-wrap {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 0 24px;
  box-sizing: border-box;
}

.sfp {
  background: #f9fafb;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  color: #111827;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ── Top-Bar ────────────────────────────────────────────────────────── */
.sfp__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  padding: 0 24px;
  min-height: 54px;
  flex-wrap: wrap;
  border-bottom: 2px solid #e5e7eb;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.sfp__brand {
  font-size: 15px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -.01em;
  margin-right: 24px;
  white-space: nowrap;
}
.sfp__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.sfp__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  text-decoration: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.sfp__nav-link:hover { background: #f3f4f6; color: #111827; }
.sfp__nav-link--active { background: var(--sf-accent, #E8501A) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(232,80,26,.25); }
.sfp__nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sf-accent, #E8501A);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  padding: 0 5px;
  line-height: 1;
}
.sfp__user-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #6b7280 !important;
  margin-left: auto;
  font-size: 13px;
  color: #6b7280;
  white-space: nowrap;
}
.sfp__username { color: #374151; font-weight: 600; }
.sfp__logout {
  color: #9ca3af;
  text-decoration: none;
  transition: color .15s;
}
.sfp__logout:hover { color: #374151; }

/* ── Body ───────────────────────────────────────────────────────────── */
.sfp__body { padding: 28px 28px; min-height: 400px; width: 100%; box-sizing: border-box; }

/* ── Shared Components ──────────────────────────────────────────────── */
.sfp-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 18px;
}
.sfp-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 10px;
}
.sfp-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  padding: 8px 16px;
  border: 1.5px solid #d1d5db !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: #374151 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
  box-shadow: none !important;
  line-height: 1.4 !important;
}
.sfp-btn:hover { background: #f3f4f6 !important; border-color: #9ca3af !important; color: #111827 !important; }
.sfp-btn--primary {
  background: var(--sf-accent, #E8501A) !important;
  border-color: var(--sf-accent, #E8501A) !important;
  color: #fff !important;
}
.sfp-btn--primary:hover { background: #fff !important; color: var(--sf-accent, #E8501A) !important; border-color: var(--sf-accent, #E8501A) !important; }
.sfp-btn--sm { padding: 5px 10px; font-size: 12px; }
.sfp-btn--danger { border-color: #fca5a5 !important; color: #b91c1c !important; background: #fff !important; }
.sfp-btn--danger:hover { background: #fef2f2 !important; border-color: #f87171 !important; color: #b91c1c !important; }
.sfp-input {
  width: 100%;
  border: 1.5px solid #d1d5db;
  border-radius: 7px;
  padding: 8px 12px;
  font-size: 14px;
  color: #111827;
  background: #fff;
  outline: none;
  transition: border-color .15s;
}
.sfp-input:focus { border-color: var(--sf-accent, #E8501A); }
.sfp-input-sm { padding: 5px 9px; font-size: 13px; }
select.sfp-input { cursor: pointer; }

/* ── Status Tabs ────────────────────────────────────────────────────── */
.sfp-status-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.sfp-status-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  text-decoration: none;
  background: transparent;
  transition: background .15s, color .15s;
}
.sfp-status-tab:hover { background: #f3f4f6; color: #111827; }
.sfp-status-tab--active { background: var(--sf-accent, #E8501A); color: #fff; }
.sfp-status-count {
  font-size: 11px;
  background: rgba(0,0,0,.12);
  border-radius: 999px;
  padding: 1px 7px;
}
.sfp-status-tab--active .sfp-status-count { background: rgba(255,255,255,.2); }

/* ── Table ──────────────────────────────────────────────────────────── */
.sfp-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid #e5e7eb; background: #fff; }
.sfp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.sfp-table th {
  background: #f9fafb;
  padding: 10px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6b7280;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}
.sfp-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
  color: #374151;
}
.sfp-table tr:last-child td { border-bottom: none; }
.sfp-table tr:hover td { background: #fafafa; }
.sfp-table a { color: var(--sf-accent, #E8501A); text-decoration: none; }
.sfp-table a:hover { text-decoration: underline; }

/* ── Status Badge / Select ──────────────────────────────────────────── */
.sfp-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}
.sfp-badge--neu        { background: #fef3c7; color: #92400e; }
.sfp-badge--kontaktiert{ background: #dbeafe; color: #1e40af; }
.sfp-badge--erledigt   { background: #d1fae5; color: #065f46; }
.sfp-badge--anfrage    { background: #f3f4f6; color: #374151; }
.sfp-badge--ankauf     { background: #ede9fe; color: #5b21b6; }
.sfp-badge--miete      { background: #ffedd5; color: #9a3412; }
.sfp-badge--ja         { background: #d1fae5; color: #065f46; }
.sfp-badge--nein       { background: #f3f4f6; color: #6b7280; }

select.sfp-status-sel {
  border: 1.5px solid #e5e7eb;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  outline: none;
  transition: border-color .15s;
}
select.sfp-status-sel:focus { border-color: var(--sf-accent, #E8501A); }
select.sfp-status-sel[data-val="neu"]         { border-color: #fcd34d; color: #92400e; background: #fef3c7; }
select.sfp-status-sel[data-val="kontaktiert"] { border-color: #93c5fd; color: #1e40af; background: #dbeafe; }
select.sfp-status-sel[data-val="erledigt"]    { border-color: #6ee7b7; color: #065f46; background: #d1fae5; }

/* ── Note Textarea ──────────────────────────────────────────────────── */
.sfp-note-wrap { display: flex; gap: 6px; align-items: flex-start; }
.sfp-note-ta {
  width: 180px;
  min-height: 34px;
  max-height: 80px;
  resize: vertical;
  border: 1.5px solid #e5e7eb;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.sfp-note-ta:focus { border-color: var(--sf-accent, #E8501A); }
.sfp-note-saved { font-size: 11px; color: #10b981; display: none; }

/* ── Device Thumbnail ───────────────────────────────────────────────── */
.sfp-thumb {
  width: 48px;
  height: 40px;
  object-fit: cover;
  border-radius: 5px;
  background: #f3f4f6;
  display: block;
}
.sfp-thumb-placeholder {
  width: 48px;
  height: 40px;
  background: #f3f4f6;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d1d5db;
}

/* ── Visibility Dots ────────────────────────────────────────────────── */
.sfp-vis-dots { display: flex; gap: 4px; align-items: center; }
.sfp-vis-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0;
}
.sfp-vis-dot--ja   { background: #d1fae5; color: #065f46; }
.sfp-vis-dot--nein { background: #f3f4f6; color: #d1d5db; }

/* ── Device Form ────────────────────────────────────────────────────── */
.sfp-form-wrap { max-width: 900px; }
.sfp-form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.sfp-form-success {
  padding: 12px 16px;
  background: #d1fae5;
  border: 1px solid #6ee7b7;
  border-radius: 8px;
  color: #065f46;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
  display: none;
}
.sfp-form-error {
  padding: 12px 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #b91c1c;
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}

/* Accordion */
.sfp-accordion { border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 10px; overflow: hidden; background: #fff; }
.sfp-accordion__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  background: #f9fafb;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  text-align: left;
  transition: background .15s;
}
.sfp-accordion__toggle:hover { background: #f3f4f6; }
.sfp-accordion__chevron { transition: transform .2s; flex-shrink: 0; color: #9ca3af; }
.sfp-accordion.is-open           .sfp-accordion__chevron,
.sfp-accordion.sfp-accordion--open .sfp-accordion__chevron { transform: rotate(180deg); }
.sfp-accordion__body { padding: 16px; display: none; }
.sfp-accordion.is-open             .sfp-accordion__body,
.sfp-accordion.sfp-accordion--open .sfp-accordion__body { display: block; }

/* Form Fields Grid */
.sfp-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.sfp-fields-grid--3col { grid-template-columns: 1fr 1fr 1fr; }
.sfp-fields-grid--1col { grid-template-columns: 1fr; }
.sfp-field { display: flex; flex-direction: column; gap: 5px; }
.sfp-field label { font-size: 12px; font-weight: 600; color: #6b7280; }
.sfp-field input,
.sfp-field select,
.sfp-field textarea {
  border: 1.5px solid #e5e7eb;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
  color: #111827;
  background: #fff;
  outline: none;
  transition: border-color .15s;
}
.sfp-field input:focus,
.sfp-field select:focus,
.sfp-field textarea:focus { border-color: var(--sf-accent, #E8501A); }
.sfp-field textarea { resize: vertical; min-height: 72px; }
.sfp-field select[multiple] { height: 100px; }
.sfp-field-full { grid-column: 1 / -1; }

/* ── Import View ────────────────────────────────────────────────────── */
.sfp-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 16px;
}
.sfp-card h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: #111827; }
.sfp-hint { font-size: 12px; color: #6b7280; margin: 4px 0 12px; }
.sfp-import-log {
  background: #111827;
  color: #d1fae5;
  border-radius: 8px;
  padding: 14px;
  font-size: 12px;
  font-family: monospace;
  max-height: 300px;
  overflow-y: auto;
  margin-top: 12px;
  white-space: pre-wrap;
  word-break: break-all;
}
.sfp-import-status { margin-top: 10px; font-size: 13px; font-weight: 600; }
.sfp-import-status--ok  { color: #065f46; }
.sfp-import-status--err { color: #b91c1c; }
.sfp-col-ref { display: flex; flex-wrap: wrap; gap: 6px; }
.sfp-col-tag {
  background: #f3f4f6;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-family: monospace;
  color: #374151;
}

/* ── Search Bar ─────────────────────────────────────────────────────── */
.sfp-search-bar { display: flex; gap: 8px; margin-bottom: 16px; }
.sfp-search-bar input { flex: 1; }

/* ── Empty State ────────────────────────────────────────────────────── */
.sfp-empty {
  text-align: center;
  padding: 48px 20px;
  color: #9ca3af;
}
.sfp-empty svg { margin: 0 auto 12px; display: block; }
.sfp-empty p { font-size: 15px; font-weight: 600; margin: 0 0 6px; color: #6b7280; }
.sfp-empty small { font-size: 13px; }

/* ── Pagination ─────────────────────────────────────────────────────── */
.sfp-pagination { display: flex; gap: 8px; margin-top: 16px; align-items: center; font-size: 13px; color: #6b7280; }
.sfp-pagination a { color: var(--sf-accent, #E8501A); text-decoration: none; font-weight: 600; }

/* ── Detail Row (Nachricht) ─────────────────────────────────────────── */
.sfp-detail-row { display: none; }
.sfp-detail-row td {
  background: #f9fafb;
  padding: 10px 16px;
  font-size: 12px;
  color: #6b7280;
  border-top: 1px dashed #e5e7eb;
}
.sfp-toggle-detail { cursor: pointer; color: #9ca3af; font-size: 11px; margin-left: 6px; }
.sfp-toggle-detail:hover { color: #374151; }

/* ── Import Timestamp ───────────────────────────────────────────────── */
.sfp-timestamps { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.sfp-ts { font-size: 12px; color: #6b7280; }
.sfp-ts strong { color: #374151; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sfp__bar { padding: 10px 14px; }
  .sfp__brand { font-size: 13px; margin-right: 12px; }
  .sfp__nav-link { padding: 6px 10px; font-size: 12px; }
  .sfp__body { padding: 14px 12px; }
  .sfp-fields-grid { grid-template-columns: 1fr; }
  .sfp-fields-grid--3col { grid-template-columns: 1fr 1fr; }
  .sfp-note-ta { width: 130px; }
  .sfp-table th:nth-child(n+5),
  .sfp-table td:nth-child(n+5) { display: none; }
  .sfp-header-row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .sfp-login__card { padding: 28px 20px; }
  .sfp-table th:nth-child(n+4),
  .sfp-table td:nth-child(n+4) { display: none; }
  .sfp-fields-grid--3col { grid-template-columns: 1fr; }
}

/* =========================================================================
   KATEGORIE-GRID  [stapla_kategorie_grid]
   ========================================================================= */

.sf-katgrid {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 8px 0;
}

.sf-katgrid__main-title {
  font-size: 26px;
  font-weight: 700;
  color: #111;
  margin: 0 0 8px;
  line-height: 1.25;
}

/* ── Section ──────────────────────────────────────────────────────────── */
.sf-katgrid__section {
  display: flex;
  flex-direction: column;
}

.sf-katgrid__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e5e7eb;
}

.sf-katgrid__section-title {
  font-size: 19px;
  font-weight: 700;
  color: #111;
  margin: 0;
  line-height: 1.3;
}

.sf-katgrid__section-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: var(--sf-accent, #E8501A);
  color: var(--sf-btn-text, #fff);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transition: background .18s, opacity .18s;
  white-space: nowrap;
}
.sf-katgrid__section-cta:hover {
  background: var(--sf-accent-dark, #c43f12);
  color: var(--sf-btn-text, #fff);
  text-decoration: none;
  opacity: .93;
}
.sf-katgrid__section-cta svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

/* ── Grid ─────────────────────────────────────────────────────────────── */
.sf-katgrid__grid {
  display: grid;
  gap: 20px;
}

.sf-katgrid__grid--cols-1 { grid-template-columns: 1fr; }
.sf-katgrid__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.sf-katgrid__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.sf-katgrid__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Empty state ──────────────────────────────────────────────────────── */
.sf-katgrid__empty {
  grid-column: 1 / -1;
  padding: 20px;
  text-align: center;
  color: #9ca3af;
  font-size: 14px;
  background: #f9fafb;
  border-radius: 8px;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .sf-katgrid__grid--cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .sf-katgrid { gap: 36px; }
  .sf-katgrid__main-title { font-size: 22px; }
  .sf-katgrid__section-title { font-size: 17px; }
  .sf-katgrid__grid--cols-3,
  .sf-katgrid__grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
  .sf-katgrid__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
  .sf-katgrid__section-header { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .sf-katgrid__grid--cols-2,
  .sf-katgrid__grid--cols-3,
  .sf-katgrid__grid--cols-4 { grid-template-columns: 1fr; }
  .sf-katgrid__section-cta { width: 100%; justify-content: center; }
}

/* =========================================================================
   GERÄTELISTE  [Portal-View: geraete_liste]
   ========================================================================= */

.sfp-glist {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Section-Toggle ───────────────────────────────────────────────────── */
.sfp-glist__section {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.sfp-glist__section-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px;
  background: #f9fafb;
  border: none;
  border-bottom: 1px solid #e5e7eb;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  color: #111;
  text-align: left;
  transition: background .15s;
}
.sfp-glist__section-toggle:hover { background: #f3f4f6; }
.sfp-glist__section-toggle[aria-expanded="false"] .sfp-glist__chevron {
  transform: rotate(-90deg);
}
.sfp-glist__chevron { transition: transform .2s; flex-shrink: 0; }

.sfp-glist__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: #e5e7eb;
  color: #374151;
  font-size: 12px;
  font-weight: 700;
  border-radius: 99px;
}

.sfp-glist__crm-badge {
  padding: 2px 8px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 700;
  border-radius: 99px;
  letter-spacing: .03em;
}

.sfp-glist__body { padding: 0; }

.sfp-glist__empty {
  padding: 20px 18px;
  color: #9ca3af;
  font-size: 14px;
}

/* ── Einzelnes Gerät (details/summary) ───────────────────────────────── */
.sfp-glist__item {
  border-bottom: 1px solid #f3f4f6;
}
.sfp-glist__item:last-child { border-bottom: none; }

.sfp-glist__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  cursor: pointer;
  list-style: none;
  transition: background .12s;
  min-height: 56px;
}
.sfp-glist__summary::-webkit-details-marker { display: none; }
.sfp-glist__summary::marker { display: none; }
.sfp-glist__summary:hover { background: #fafafa; }

/* Chevron via CSS when open */
.sfp-glist__item[open] > .sfp-glist__summary { background: #f0f9ff; }

/* Thumbnail */
.sfp-glist__thumb {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sfp-glist__thumb img {
  width: 44px;
  height: 44px;
  object-fit: cover;
}

/* Name */
.sfp-glist__name {
  flex: 1 1 200px;
  font-weight: 600;
  font-size: 14px;
  color: #111;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sfp-glist__xml-id {
  font-size: 11px;
  font-weight: 400;
  color: #9ca3af;
  white-space: nowrap;
}

/* Meta */
.sfp-glist__meta {
  flex: 0 1 260px;
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badges */
.sfp-glist__badges {
  flex-shrink: 0;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}

/* PDF-Button in Summary */
.sfp-glist__pdf-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  margin-left: auto;
}
.sfp-glist__pdf-btn svg { flex-shrink: 0; }

/* ── Aufgeklappter Detail-Bereich ─────────────────────────────────────── */
.sfp-glist__detail {
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}
.sfp-glist__detail-inner {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Specs-DL als Raster */
.sfp-glist__specs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px 24px;
  margin: 0;
}
.sfp-glist__specs dt {
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0;
  padding-top: 2px;
}
.sfp-glist__specs dd {
  font-size: 14px;
  color: #111;
  margin: 0 0 4px;
  font-weight: 500;
}

.sfp-glist__beschreibung {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.55;
  margin: 0;
  background: #fff;
  border-left: 3px solid #e5e7eb;
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
}

.sfp-glist__detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sfp-glist__meta { display: none; }
  .sfp-glist__name { flex-basis: auto; }
  .sfp-glist__specs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .sfp-glist__summary { padding: 10px 12px; gap: 8px; }
  .sfp-glist__thumb { width: 36px; height: 36px; }
  .sfp-glist__thumb img { width: 36px; height: 36px; }
  .sfp-glist__specs { grid-template-columns: 1fr; }
  .sfp-glist__pdf-btn span { display: none; }
}

/* =========================================================================
   PORTAL – FEHLENDE / ALIASIERTE KLASSEN
   (PHP-Ausgaben die kein CSS-Pendant hatten)
   ========================================================================= */

/* ── sfp-btn--xs (PHP nutzt --xs, CSS hatte nur --sm) ─────────────────── */
.sfp-btn--xs { padding: 4px 10px; font-size: 11px; border-radius: 5px; }

/* ── Badges (fehlende Varianten) ──────────────────────────────────────── */
.sfp-badge--verkauf { background: #dbeafe; color: #1e40af; }
.sfp-badge--hidden  { background: #f3f4f6; color: #9ca3af; }
.sfp-badge--typ     { background: #f0fdf4; color: #16a34a; }
/* inactive vis badge — grayed out, shows the label is OFF */
.sfp-badge--off     { background: #f9fafb; color: #d1d5db; border: 1px dashed #e5e7eb; text-decoration: line-through; }

/* ── Status-Select Farbe (class-basiert, nicht [data-val]) ───────────── */
select.sfp-status-sel.sfp-status-sel--neu         { border-color: #fcd34d; color: #92400e; background: #fef3c7; }
select.sfp-status-sel.sfp-status-sel--kontaktiert { border-color: #93c5fd; color: #1e40af; background: #dbeafe; }
select.sfp-status-sel.sfp-status-sel--erledigt    { border-color: #6ee7b7; color: #065f46; background: #d1fae5; }

/* ── Lead-Zeilenfärbung nach Status ──────────────────────────────────── */
.sfp-lead-status--neu          td { border-left: 3px solid #fcd34d; }
.sfp-lead-status--kontaktiert  td { border-left: 3px solid #93c5fd; }
.sfp-lead-status--erledigt     td { border-left: 3px solid #6ee7b7; opacity: .75; }

/* ── sfp__X → sfp-X Aliases (BEM-Doppelunterstrich vs. Einzelbindestrich) */
.sfp__status-tabs { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.sfp__status-tab  { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; color: #6b7280; text-decoration: none; background: transparent; transition: background .15s, color .15s; }
.sfp__status-tab:hover { background: #f3f4f6; color: #111827; }
.sfp__status-tab--active { background: #111827; color: #fff; }
.sfp__status-count { font-size: 11px; background: rgba(0,0,0,.12); border-radius: 999px; padding: 1px 7px; }
.sfp__status-tab--active .sfp__status-count { background: rgba(255,255,255,.2); }
.sfp__count-line { font-size: 13px; color: #6b7280; margin: 0 0 14px; }
.sfp__empty { padding: 24px; text-align: center; color: #9ca3af; font-size: 14px; background: #fff; border-radius: 10px; border: 1px solid #e5e7eb; }
.sfp__table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid #e5e7eb; background: #fff; width: 100%; box-sizing: border-box; }
.sfp__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sfp__table th { background: #f9fafb; padding: 10px 12px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
.sfp__table td { padding: 10px 12px; border-bottom: 1px solid #f3f4f6; vertical-align: middle; color: #374151; }
.sfp__table tr:last-child td { border-bottom: none; }
.sfp__table tr:hover td { background: #fafafa; }
.sfp__table a { color: var(--sf-accent, #E8501A); text-decoration: none; }
.sfp__table a:hover { text-decoration: underline; }
.sfp__badge { display: inline-flex; align-items: center; justify-content: center; background: var(--sf-accent, #E8501A); color: #fff; font-size: 10px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 999px; padding: 0 5px; }
.sfp__section { margin-bottom: 8px; width: 100%; }
.sfp__section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.sfp__section-title { font-size: 18px; font-weight: 700; color: #111827; margin: 0 0 18px; }
.sfp__search-form { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; align-items: center; }
.sfp-input--search { flex: 1 1 220px; }
.sfp__pagination { display: flex; align-items: center; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.sfp__pagination-info { font-size: 13px; color: #6b7280; }
.sfp__msg { padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; margin-top: 14px; display: none; }
.sfp__msg--success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.sfp__msg--error   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.sfp__card { background: #fff; border-radius: 10px; border: 1px solid #e5e7eb; padding: 18px; margin-bottom: 18px; }
.sfp__card-title { font-size: 15px; font-weight: 700; color: #111827; margin: 0 0 14px; }

/* ── Geräteliste (devices view) ───────────────────────────────────────── */
.sfp-devices__thumb { width: 60px; vertical-align: middle; }
.sfp-devices__no-img { color: #9ca3af; font-size: 13px; }
.sfp-devices__title { font-weight: 600; }
.sfp-devices__title a { color: var(--sf-accent, #E8501A); text-decoration: none; }
.sfp-devices__title a:hover { text-decoration: underline; }
.sfp-devices__status { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px; margin-left: 6px; background: #d1fae5; color: #065f46; }
.sfp-devices__status--draft { background: #f3f4f6; color: #9ca3af; }
.sfp-devices__vis { white-space: nowrap; }
.sfp-devices__actions { white-space: nowrap; }
.sfp-devices__actions .sfp-btn { margin-right: 4px; }

/* ── Geräte-Formular ──────────────────────────────────────────────────── */
.sfp-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.sfp-form__field { display: flex; flex-direction: column; gap: 5px; }
.sfp-form__field label { font-size: 12px; font-weight: 600; color: #6b7280; }
.sfp-form__field--full { grid-column: 1 / -1; }
.sfp-form__req { color: var(--sf-accent, #E8501A); }
.sfp-form__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-top: 14px; }

/* ── Import-View ──────────────────────────────────────────────────────── */
.sfp-import__cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px 20px; margin-top: 12px; font-size: 13px; }
.sfp-import__cols ul { margin: 6px 0 0 16px; padding: 0; }
.sfp-import__cols li { margin-bottom: 3px; color: #4b5563; }
.sfp-import__info { }
.sfp-import__log { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px 14px; font-size: 12px; font-family: monospace; max-height: 260px; overflow-y: auto; white-space: pre-wrap; margin-top: 14px; }
.sfp-import__last-log { font-size: 12px; color: #6b7280; margin-top: 12px; }
.sfp-import__last-log summary { cursor: pointer; font-weight: 600; color: #374151; }
.sfp-import__ref { font-size: 12px; color: #9ca3af; margin-bottom: 8px; }
.sfp-import__ftp-creds { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }

/* [geraet_daten_pro] Shortcode ─────────────────────────────────────────── */
.geraet-daten-pro__title { font-size: 28px; font-weight: 700; margin-bottom: 20px; color: #111827; }
.geraet-daten-pro__group { font-size: 16px; font-weight: 700; margin: 32px 0 12px; color: #1f2937; border-bottom: 2px solid #e5e7eb; padding-bottom: 6px; }
.geraet-daten-pro__grid { display: grid; gap: 1px; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.geraet-daten-pro__row { display: grid; grid-template-columns: 1fr 1fr; background: #fff; }
.geraet-daten-pro__row:nth-child(even) { background: #f9fafb; }
.geraet-daten-pro__label { padding: 10px 14px; font-weight: 600; font-size: 14px; color: #374151; border-right: 1px solid #e5e7eb; }
.geraet-daten-pro__value { padding: 10px 14px; font-size: 14px; color: #1f2937; }

/* ── Responsive Ergänzungen ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .sfp-form__grid { grid-template-columns: 1fr; }
  .sfp__section-head { flex-direction: column; align-items: flex-start; }
  .sfp-devices__actions { display: flex; flex-direction: column; gap: 4px; }
}
/* reCAPTCHA: Badge verstecken + Pflichthinweis sichtbar ──────────────── */
.grecaptcha-badge { visibility: hidden !important; }
.sf-anfrage__recaptcha-notice { font-size: 11px; color: #9ca3af; margin-top: 12px; line-height: 1.5; }
.sf-anfrage__recaptcha-notice a { color: #6b7280; text-decoration: underline; }
.sf-anfrage__recaptcha-notice a:hover { color: #374151; }

@media (max-width: 480px) {
  .sfp__status-tabs { gap: 2px; }
  .sfp__status-tab  { padding: 5px 10px; font-size: 12px; }
  .sfp-import__cols { grid-template-columns: 1fr 1fr; }
  .sfp-import__ftp-creds { grid-template-columns: 1fr; }
  .geraet-daten-pro__row { grid-template-columns: 1fr; }
  .geraet-daten-pro__label { border-right: none; border-bottom: 1px solid #e5e7eb; padding-bottom: 4px; }
  .geraet-daten-pro__title { font-size: 22px; }
}

/* ==========================================================================
   MOBILE FIXES — Einzelseite + Quicksearch-Drawer + Portal
   ========================================================================== */

/* ── Quicksearch Mobile Filter-Drawer ─────────────────────────────────────── */

/* Desktop default: mobile-only elements hidden */
.sf-qs__mobile-bar   { display: none; }
.sf-qs__drawer-head,
.sf-qs__drawer-foot  { display: none; }
.sf-qs__backdrop     {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.sf-qs__backdrop--open { display: block; }
.sf-qs__active-badge {
  background: var(--sf-accent, #E8501A);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border-radius: 99px;
  padding: 1px 7px;
  min-width: 18px;
  text-align: center;
}

@media (max-width: 768px) {

  /* Mobile: Filter-Bar ausblenden — Filter sind direkt sichtbar */
  .sf-qs__mobile-bar { display: none !important; }

  /* Filter-Zeile direkt anzeigen — gestapelt, kein Drawer */
  #sf-quicksearch .sf-qs__form .sf-qs__row,
  .sf-qs .sf-qs__form .sf-qs__row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    flex-direction: unset !important;
  }

  /* Gerätetyp & Marke volle Breite (erste 2 selects prominent) */
  #sf-quicksearch .sf-qs__row .sf-qs__field:nth-child(2),
  .sf-qs .sf-qs__row .sf-qs__field:nth-child(2) {
    grid-column: 1 / 3;
  }

  /* Alle Felder im Row */
  #sf-quicksearch .sf-qs__row .sf-qs__field,
  .sf-qs .sf-qs__row .sf-qs__field {
    min-width: 0 !important;
    padding: 0 !important;
  }

  /* Submit-Button: volle Breite über beide Spalten */
  #sf-quicksearch .sf-qs__row .sf-qs__field--btn,
  .sf-qs .sf-qs__row .sf-qs__field--btn {
    display: flex !important;
    grid-column: 1 / 3;
  }
  #sf-quicksearch .sf-qs__row .sf-qs__field--btn .sf-qs__submit,
  .sf-qs .sf-qs__row .sf-qs__field--btn .sf-qs__submit {
    width: 100%;
    justify-content: center;
    padding: 14px !important;
    font-size: 16px !important;
  }

  /* Drawer-spezifische Elemente weglassen */
  .sf-qs__drawer-head,
  .sf-qs__drawer-foot { display: none !important; }

  /* Erweiterte Suche auf Mobile anzeigen */
  #sf-quicksearch .sf-qs__advanced-toggle-wrap,
  .sf-qs .sf-qs__advanced-toggle-wrap {
    display: flex !important;
  }

  /* Drawer footer (wird nicht mehr gebraucht, sicherheitshalber) */
  .sf-qs__drawer-reset {
    flex: 1;
    padding: 13px !important;
    background: none !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    cursor: pointer;
  }
  .sf-qs__drawer-reset:hover { background: #f3f4f6 !important; }
  .sf-qs__drawer-search {
    flex: 2;
    padding: 13px !important;
    background: var(--sf-accent, #E8501A) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer;
  }

  /* ── Einzelseite Mobile ──────────────────────────────────────────────── */
  .sf-single {
    overflow-x: hidden !important;
    padding-top: 80px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Galerie: Überlauf verhindern, immer 100% Breite */
  .sf-gallery {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 0 !important;
  }
  .sf-gallery__main-wrap {
    max-width: 100% !important;
    width: 100% !important;
  }
  .sf-gallery__thumb-row {
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 0 0 !important;
  }
  .sf-gallery__thumb { width: 88px !important; min-width: 88px !important; height: 64px !important; }
  .sf-gallery__thumb-nav { height: 64px !important; }
  .sf-extra-gallery { grid-template-columns: repeat(2, 1fr) !important; }
  /* CTA-Buttons: volle Breite, zentriert */
  .sf-single__ctas .sf-btn {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  /* Info-Box etwas kompakter */
  .sf-single__info { padding: 16px 16px 8px !important; }
  .sf-single__title { font-size: clamp(22px, 5vw, 34px) !important; }
  /* Spec-Reihe: 2-Zeilen-Layout — Label oben, Wert darunter (immer sichtbar) */
  .sf-single__specs { overflow: visible !important; }
  .sf-single__spec {
    grid-template-columns: 26px 1fr !important;
    grid-template-rows: auto auto;
    gap: 0 8px !important;
    padding: 10px 14px !important;
    align-items: start !important;
  }
  .sf-single__spec-icon {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center !important;
    padding-top: 2px;
  }
  .sf-single__spec-label {
    grid-column: 2;
    grid-row: 1;
    font-size: 11px !important;
  }
  .sf-single__spec-value {
    grid-column: 2 !important;
    grid-row: 2;
    text-align: left !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--sf-accent) !important;
    margin-top: 2px;
  }
  /* Technische Daten Tabs: kein h-scroll */
  .sf-single__techdata { overflow-x: hidden; }
  .sf-tab-panel { overflow-x: auto; }
  /* Content-Blöcke: Bild oben, Text unten */
  .sf-content-block,
  .sf-content-block--bild-text { flex-direction: column !important; }
  .sf-content-block--bild-text .sf-content-block__img,
  .sf-content-block__img { max-width: 100% !important; flex: 1 1 100% !important; }
  /* Anfrage-Formular: kein Overflow */
  .sf-single__anfrage { overflow-x: hidden; }
  .sf-anfrage-wrap { padding: 0 16px; }
  /* Badges linksbündig mit Titel */
  .sf-single__badges {
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    margin-bottom: 14px;
    justify-content: flex-start;
  }

  /* Finder: Filter-Toggle prominenter */
  #sf-finder .sf-filter-toggle,
  .sf-finder-wrap .sf-filter-toggle {
    display: flex !important;
    width: 100%;
    justify-content: center;
    background: var(--sf-accent, #E8501A) !important;
    color: #fff !important;
    border-color: var(--sf-accent, #E8501A) !important;
    border-radius: 10px !important;
    padding: 13px 20px !important;
    font-size: 15px !important;
  }

  /* ── Portal Mobile ───────────────────────────────────────────────────── */
  .sfp__bar { flex-wrap: nowrap; padding: 8px 12px; gap: 8px; }
  .sfp__brand { font-size: 13px !important; margin-right: 8px; white-space: nowrap; }

  /* Nav: horizontal scrollbar, große Touch-Targets */
  .sfp__nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .sfp__nav::-webkit-scrollbar { display: none; }
  .sfp__nav-link {
    flex-shrink: 0;
    padding: 10px 14px !important;
    font-size: 13px !important;
    min-height: 44px;  /* iOS recommended touch target */
    white-space: nowrap;
  }
  .sfp__nav-badge { font-size: 10px !important; }

  .sfp__body { padding: 12px 10px; max-width: 100%; overflow-x: hidden; }
  .sfp__card { padding: 14px 12px; max-width: 100%; overflow-x: hidden; }
  .sfp__user-bar { display: none; } /* Nutzer-Info bei sehr kleinen Screens weglassen */

  /* Tables scroll */
  .sfp__table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sfp__table { min-width: 540px; }
  .sfp-table  { min-width: 540px; }

  /* Form grids single column */
  .sfp-form__grid { grid-template-columns: 1fr !important; }
  .sfp-fields-grid { grid-template-columns: 1fr !important; }

  /* Device list cleanup */
  .sfp-devices__thumb { display: none; }
  .sfp-devices__vis   { display: none; }  /* Badges in Tabelle weglassen, spart Platz */

  /* Section head stack */
  .sfp__section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sfp__section-head .sfp-btn { width: 100%; justify-content: center; }

  /* Pagination */
  .sfp__pagination { flex-wrap: wrap; }
}

/* ============================================================
   SERVICE FORMS  (Ersatzteile + Service/Wartung/Reparatur)
   Prefix: sf-svcform  /  sf-svc  /  sf-et
   ============================================================ */

.sf-svcform {
  width: 100%;
  font-family: inherit;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,.10);
  overflow: hidden;
}
.sf-svcform__form {
  background: #fff;
  border: 1px solid var(--sf-border, #e2e4e9);
  border-top: none;
}

/* ── Sections ──────────────────────────────────────────────── */
.sf-svcform__section {
  padding: 28px 32px;
  border-bottom: 1px solid var(--sf-border, #e2e4e9);
}
.sf-svcform__section:last-of-type { border-bottom: none; }
.sf-svcform__section-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--sf-text, #1a1a2e) !important;
  margin: 0 0 20px !important;
}
.sf-svcform__section-icon { flex-shrink: 0; color: var(--sf-accent, #E8501A); }
.sf-svcform__sub-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--sf-text, #1a1a2e);
  margin: 0 0 14px;
}
.sf-svcform__hint-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--sf-text-muted, #6b7280);
  background: #f3f4f6;
  padding: 2px 7px;
  border-radius: 20px;
}

/* ── Grid ──────────────────────────────────────────────────── */
.sf-svcform__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.sf-svcform__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sf-svcform__field--full { grid-column: 1 / -1; }
.sf-svcform__field label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
}
.sf-svcform__field label abbr {
  color: var(--sf-accent, #E8501A);
  text-decoration: none;
  margin-left: 2px;
}
.sf-svcform__field input[type="text"],
.sf-svcform__field input[type="email"],
.sf-svcform__field input[type="tel"],
.sf-svcform__field input[type="number"],
.sf-svcform__field textarea {
  width: 100% !important;
  padding: 11px 14px !important;
  border: 1.5px solid #d1d5db !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  color: var(--sf-text, #1a1a2e) !important;
  background: #fff !important;
  transition: border-color .15s, box-shadow .15s !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
}
.sf-svcform__field input:focus,
.sf-svcform__field textarea:focus {
  border-color: var(--sf-accent, #E8501A) !important;
  box-shadow: 0 0 0 3px var(--sf-accent, #E8501A)18 !important;
}
.sf-svcform__field textarea { resize: vertical; min-height: 90px; }

/* ── Ersatzteile-Tabelle ────────────────────────────────────── */
.sf-et-table-wrap { overflow-x: auto; }
.sf-et-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.sf-et-table th {
  background: #f9fafb;
  border-bottom: 2px solid var(--sf-border, #e2e4e9);
  padding: 9px 10px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.sf-et-table td { padding: 7px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
.sf-et-col--bez  { width: 45%; }
.sf-et-col--nr   { width: 30%; }
.sf-et-col--qty  { width: 12%; }
.sf-et-col--del  { width: 8%; }
.sf-et-table input[type="text"],
.sf-et-table input[type="number"] {
  width: 100% !important;
  padding: 7px 10px !important;
  border: 1.5px solid #d1d5db !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-family: inherit !important;
  background: #fff !important;
  -webkit-appearance: none !important;
}
.sf-et-table input:focus {
  border-color: var(--sf-accent, #E8501A) !important;
  outline: none !important;
}
.sf-et-remove {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: #9ca3af !important;
  padding: 4px !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color .15s, background .15s !important;
}
.sf-et-remove:hover { color: #ef4444 !important; background: #fef2f2 !important; }
.sf-et-add-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 12px !important;
  padding: 8px 16px !important;
  background: none !important;
  border: 1.5px dashed #d1d5db !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--sf-accent, #E8501A) !important;
  cursor: pointer !important;
  transition: border-color .15s, background .15s !important;
}
.sf-et-add-btn:hover { border-color: var(--sf-accent, #E8501A) !important; background: var(--sf-accent-light, #fff3ed) !important; }

/* ── Upload-Zone ────────────────────────────────────────────── */
.sf-svcform__upload-zone {
  border: 2px dashed #d1d5db;
  border-radius: 10px;
  padding: 6px;
  transition: border-color .2s, background .2s;
}
.sf-svcform__upload-zone.sf-drag-over { border-color: var(--sf-accent, #E8501A); background: var(--sf-accent-light, #fff3ed); }
.sf-svcform__upload-label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 24px 16px !important;
  cursor: pointer !important;
  color: #6b7280 !important;
}
.sf-svcform__upload-label svg { color: #9ca3af; }
.sf-svcform__upload-text { font-size: 14px; color: #374151; }
.sf-svcform__upload-text strong { color: var(--sf-accent, #E8501A); }
.sf-svcform__upload-label small { font-size: 11px; color: #9ca3af; }
.sf-svcform__file-input { display: none !important; }
.sf-svcform__preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 8px 8px;
}
.sf-svcform__preview-item {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid var(--sf-border, #e2e4e9);
  flex-shrink: 0;
}
.sf-svcform__preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sf-svcform__preview-remove {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  width: 22px !important;
  height: 22px !important;
  background: rgba(0,0,0,.6) !important;
  border: none !important;
  border-radius: 50% !important;
  color: #fff !important;
  font-size: 12px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── Footer ─────────────────────────────────────────────────── */
.sf-svcform__footer {
  padding: 20px 32px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: #fafafa;
  border-top: 1px solid var(--sf-border, #e2e4e9);
}
.sf-svcform__dsgvo {
  font-size: 11px;
  color: #9ca3af;
  margin: 0;
  max-width: 440px;
  line-height: 1.5;
}
.sf-svcform__dsgvo a { color: #6b7280; }
.sf-svcform__submit {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 14px 28px !important;
  background: var(--sf-accent, #E8501A) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background .15s, transform .1s !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.sf-svcform__submit:hover { background: var(--sf-accent-dark, #c43f14) !important; }
.sf-svcform__submit:disabled { opacity: .6 !important; cursor: not-allowed !important; }

/* ── Feedback ────────────────────────────────────────────────── */
.sf-svcform__feedback {
  margin: 0 32px 24px;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
.sf-svcform__feedback--success { background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; }
.sf-svcform__feedback--error   { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }

/* ── Einzeltyp-Header (kein Tab, nur Formular) ───────────────── */
.sf-svc-single-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 28px;
  background: var(--sf-accent, #E8501A);
  border-bottom: none;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}
.sf-svc-single-header svg { flex-shrink: 0; color: rgba(255,255,255,.85); }

/* ── Service-Tabs ────────────────────────────────────────────── */
.sf-svc-tabs {
  display: flex;
  gap: 0;
  border-bottom: none;
  background: var(--sf-accent, #E8501A);
  overflow: hidden;
}
.sf-svc-tab {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 18px 12px !important;
  background: none !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.75) !important;
  cursor: pointer !important;
  transition: color .15s, background .15s, border-color .15s !important;
  white-space: nowrap !important;
}
.sf-svc-tab:hover { color: #fff !important; background: rgba(255,255,255,.12) !important; }
.sf-svc-tab--active {
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,.9) !important;
  background: rgba(255,255,255,.15) !important;
}
.sf-svc-panel { display: none; }
.sf-svc-panel--active, .sf-svc-panel:not([hidden]) { display: block; }

/* ── Service-Art Karten ──────────────────────────────────────── */
.sf-svc-art-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.sf-svc-art-card input[type="radio"] { display: none; }
.sf-svc-art-card__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: #fff;
}
.sf-svc-art-card__inner svg { color: #9ca3af; transition: color .15s; }
.sf-svc-art-card__inner strong { font-size: 13px; color: #111827; }
.sf-svc-art-card__inner small { font-size: 11px; color: #6b7280; line-height: 1.4; }
.sf-svc-art-card:has(input:checked) .sf-svc-art-card__inner {
  border-color: var(--sf-accent, #E8501A);
  background: var(--sf-accent-light, #fff3ed);
}
.sf-svc-art-card:has(input:checked) .sf-svc-art-card__inner svg { color: var(--sf-accent, #E8501A); }
.sf-svc-art-card:has(input:checked) .sf-svc-art-card__inner strong { color: var(--sf-accent, #E8501A); }

/* ── Info-Box (Wartung) ──────────────────────────────────────── */
.sf-svc-info-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 16px 18px;
  color: #1e3a5f;
}
.sf-svc-info-box svg { flex-shrink: 0; color: #2563eb; margin-top: 2px; }
.sf-svc-info-box p { margin: 0; font-size: 14px; line-height: 1.6; }

/* ── Pflicht-Badge (Reparatur) ───────────────────────────────── */
.sf-svc-required-badge {
  font-size: 10px;
  font-weight: 700;
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fca5a5;
  padding: 2px 7px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Mobile (≤ 640px) ────────────────────────────────────────── */
@media (max-width: 640px) {
  .sf-svcform__section { padding: 20px 16px; }
  .sf-svcform__footer  { padding: 16px; flex-direction: column; align-items: stretch; }
  .sf-svcform__submit  { justify-content: center !important; width: 100% !important; }
  .sf-svcform__grid    { grid-template-columns: 1fr !important; }
  .sf-svcform__feedback { margin: 0 16px 20px; }
  .sf-svc-single-header { padding: 16px 20px; }
  .sf-svc-tab { padding: 14px 8px !important; font-size: 12px !important; gap: 4px !important; }
  .sf-svc-tab svg { display: none; }
  .sf-svc-art-grid { grid-template-columns: 1fr 1fr !important; }
  .sf-et-col--nr { display: none; }
  .sf-et-table th.sf-et-col--nr { display: none; }
}

@media (max-width: 480px) {
  /* Even smaller phones */
  .sf-single { padding-top: 70px !important; }
  .sf-gallery__thumb { width: 68px !important; min-width: 68px !important; height: 50px !important; }
  .sf-gallery__thumb-nav { height: 50px !important; }

  /* Portal bar: logo + nav only */
  .sfp__bar { padding: 6px 10px; }
  .sfp__nav-link { padding: 8px 10px !important; font-size: 12px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Blog-Artikel & Verwandte Geräte / Artikel
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Theme-Titel ausblenden (wenn Plugin-Template rendert) ──────────────── */
/* Breite Auswahl gängiger Theme-Klassen für den Beitragstitel */
.sf-has-blog-artikel .entry-title,
.sf-has-blog-artikel .post-title,
.sf-has-blog-artikel h1.wp-block-post-title,
.sf-has-blog-artikel .page-header h1,
.sf-has-blog-artikel .singular-header h1,
.sf-has-blog-artikel .post-header h1 {
  display: none !important;
}

/* ── Artikel-Wrapper ─────────────────────────────────────────────────────── */
.sf-blog-artikel {
  width: 100%;
  padding: 140px 0 72px;
  font-size: 17px;
  line-height: 1.8;
  color: #1f2937;
}

/* ── Theme-eigenen Post-Titel auf Stapla-Blogseiten verstecken ───────────── */
/* Das Theme rendert seinen eigenen H1 oberhalb the_content() – den blenden  */
/* wir aus, weil unser Template seinen eigenen Titel mitbringt.              */
body.sf-has-blog-artikel h1:not(.sf-art-h1) {
  display: none !important;
  visibility: hidden !important;
}

/* ── Eigener H1 im Template – maximale Spezifität ────────────────────────── */
body.sf-has-blog-artikel h1.sf-art-h1,
body.sf-has-blog-artikel .sf-blog-artikel h1.sf-art-h1,
body.sf-has-blog-artikel .entry-content h1.sf-art-h1,
body.sf-has-blog-artikel .post-content h1.sf-art-h1 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: clamp(26px, 4vw, 40px) !important;
  font-weight: 800 !important;
  color: #111827 !important;
  line-height: 1.2 !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: none !important;
  border-left: none !important;
  background: none !important;
  clip: auto !important;
  clip-path: none !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  text-indent: 0 !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
}

/* ── Header-Block ────────────────────────────────────────────────────────── */
.sf-art-header {
  margin-bottom: 28px;
}

/* ── Meta-Zeile (Kategorie · Datum · Lesezeit) ───────────────────────────── */
.sf-art-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: 13px;
  color: #6b7280;
}

.sf-art-kategorie {
  display: inline-block;
  background: var(--sf-accent, #E8501A);
  color: #fff !important;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none !important;
}

.sf-art-datum::before,
.sf-art-lesezeit::before {
  content: '·';
  margin-right: 6px;
  color: #d1d5db;
}

/* ── Lead / Teaser ───────────────────────────────────────────────────────── */
.sf-art-lead {
  font-size: 19px !important;
  line-height: 1.7 !important;
  color: #374151 !important;
  border: none !important;
  border-left: none !important;
  padding-left: 0 !important;
  box-shadow: none !important;
  background: none !important;
  border-left: 4px solid var(--sf-accent, #E8501A) !important;
  padding: 4px 0 4px 22px !important;
  margin: 0 0 40px !important;
}

/* ── Hero-Bild ───────────────────────────────────────────────────────────── */
.sf-art-hero {
  margin: 0 0 48px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(0,0,0,.12);
  position: relative;
}

.sf-art-hero img,
.sf-art-hero .sf-art-img {
  width: 100% !important;
  height: 520px !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.sf-art-hero--clickable { cursor: zoom-in; }

.sf-art-hero__zoom {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0,0,0,.5);
  color: #fff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.sf-art-hero--clickable:hover .sf-art-hero__zoom { opacity: 1; }

/* ── Inhalts-Sektionen: alternierend Text + Bild ─────────────────────────── */
.sf-art-section {
  margin-bottom: 48px;
}

/* Mit Bild: 2-Spalten-Grid */
.sf-art-section--with-img {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

/* Reversed: Bild zuerst (links) */
.sf-art-section--reversed .sf-art-sec-img {
  order: -1;
}

/* Text-Block */
.sf-art-sec-text h2,
.sf-blog-artikel .sf-art-section h2 {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 0 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid #f3f4f6 !important;
  line-height: 1.35 !important;
}

.sf-art-sec-text p,
.sf-blog-artikel .sf-art-section p {
  margin: 0 !important;
  color: #374151 !important;
  line-height: 1.8 !important;
  font-size: 16px !important;
}

/* Bild-Block in Section */
.sf-art-sec-img {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
  cursor: zoom-in;
  position: relative;
}

.sf-art-sec-img img,
.sf-art-sec-img .sf-art-img {
  width: 100% !important;
  height: auto !important;
  max-height: 460px !important;
  display: block !important;
  object-fit: contain !important;
  background: #f3f4f6;
  transition: transform .3s ease;
}

.sf-art-sec-img:hover img,
.sf-art-sec-img:hover .sf-art-img {
  transform: scale(1.03);
}

.sf-art-sec-img figcaption {
  font-size: 12px;
  color: #6b7280;
  padding: 8px 12px;
  line-height: 1.4;
  background: #f9fafb;
}

/* ── Zusatz-Galerie (bild_7..10) ─────────────────────────────────────────── */
.sf-art-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin: 48px 0;
}

.sf-art-gal-item {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #f3f4f6;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
  cursor: zoom-in;
}

.sf-art-gal-item img,
.sf-art-gal-item .sf-art-img {
  width: 100% !important;
  height: 160px !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .3s ease;
}

.sf-art-gal-item:hover img,
.sf-art-gal-item:hover .sf-art-img { transform: scale(1.03); }

.sf-art-gal-item figcaption {
  font-size: 12px;
  color: #6b7280;
  padding: 7px 10px;
  line-height: 1.4;
}

/* ── Fazit / CTA ─────────────────────────────────────────────────────────── */
.sf-art-fazit {
  background: linear-gradient(135deg, #fff5f2 0%, #fafafa 100%);
  border: 1px solid rgba(232,80,26,.20);
  border-left: 5px solid var(--sf-accent, #E8501A);
  border-radius: 10px;
  padding: 22px 26px;
  margin: 48px 0;
}

.sf-art-fazit p {
  margin: 0 !important;
  font-size: 16px !important;
  color: #374151 !important;
  line-height: 1.7 !important;
}

/* ── Verwandte Geräte (auf Blog-Post) ────────────────────────────────────── */
.sf-verwandte-geraete {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 2px solid #f3f4f6;
}

.sf-vg-heading {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 20px;
}

.sf-vg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.sf-vg-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .2s, transform .2s;
  background: #fff;
}

.sf-vg-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  transform: translateY(-2px);
}

.sf-vg-card__thumb img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

.sf-vg-card__body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sf-vg-card__fabrikat {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
}

.sf-vg-card__typ {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

/* ── Verwandte Artikel (auf Geräte-Seite) ────────────────────────────────── */
.sf-verwandte-artikel {
  margin-top: 48px;
  padding: 32px 0 32px;
  border-top: 2px solid #f3f4f6;
  width: 100%;
  overflow: hidden;
}

.sf-va-heading {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 20px;
}

.sf-va-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.sf-va-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #fff;
  transition: box-shadow .2s, transform .2s;
}

.sf-va-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  transform: translateY(-2px);
}

.sf-va-card__thumb img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

.sf-va-card__body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sf-va-card__kat {
  display: inline-block;
  background: var(--sf-accent, #E8501A);
  color: #fff;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  align-self: flex-start;
}

.sf-va-card__titel {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  line-height: 1.4;
}

/* ── Weitere Beiträge (unten im Blog-Artikel) ────────────────────────────── */
.sf-art-weitere {
  margin-top: 56px;
  padding-top: 36px;
  border-top: 2px solid #f3f4f6;
}

.sf-art-weitere__heading {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 24px;
}

.sf-art-weitere__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.sf-art-weitere-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #fff;
  transition: box-shadow .25s ease, transform .25s ease;
}

.sf-art-weitere-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.11);
  transform: translateY(-3px);
}

.sf-art-weitere-card__img-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f3f4f6;
}

.sf-art-weitere-card__img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .3s ease;
}

.sf-art-weitere-card:hover .sf-art-weitere-card__img {
  transform: scale(1.04);
}

.sf-art-weitere-card__no-img {
  width: 100%;
  height: 100%;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sf-art-weitere-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--sf-accent, #E8501A);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  pointer-events: none;
}

.sf-art-weitere-card__body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.sf-art-weitere-card__date {
  font-size: 11px;
  color: #9ca3af;
  margin: 0;
}

.sf-art-weitere-card__title {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  line-height: 1.4;
  display: block;
}

.sf-art-weitere-card__excerpt {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.55;
  margin: 0;
}

/* ── Geräte-Teaser im Blog-Artikel (Mitte des Beitrags) ──────────────────── */
.sf-art-geraete {
  margin: 56px 0;
  padding: 32px 32px 36px;
  background: linear-gradient(135deg, #fff5f2 0%, #fafafa 100%);
  border: 1px solid rgba(232,80,26,.18);
  border-radius: 14px;
}

.sf-art-geraete__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.sf-art-geraete__heading {
  font-size: 20px;
  font-weight: 800;
  color: #111827;
  margin: 0;
}

.sf-art-geraete__mehr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sf-accent, #E8501A);
  text-decoration: none;
  white-space: nowrap;
  transition: gap .2s ease;
}

.sf-art-geraete__mehr:hover { gap: 10px; }

.sf-art-geraete__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.sf-art-geraete-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #fff;
  transition: box-shadow .2s ease, transform .2s ease;
}

.sf-art-geraete-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  transform: translateY(-2px);
}

.sf-art-geraete-card__thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f3f4f6;
}

.sf-art-geraete-card__thumb img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .3s ease;
}

.sf-art-geraete-card:hover .sf-art-geraete-card__thumb img {
  transform: scale(1.04);
}

.sf-art-geraete-card__no-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
}

.sf-art-geraete-card__body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sf-art-geraete-card__marke {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9ca3af;
  font-weight: 600;
}

.sf-art-geraete-card__typ {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
}

.sf-art-geraete-card__cta {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sf-accent, #E8501A);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Blog-Grid: [stapla_blog_grid] — Startseiten-Shortcode
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Sektion-Wrapper ─────────────────────────────────────────────────────── */
.sf-blog-grid {
  padding: 48px 0;
}

.sf-blog-grid__heading {
  font-size: 28px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 32px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--sf-accent, #E8501A);
  display: inline-block;
}

/* ── Grid ────────────────────────────────────────────────────────────────── */
.sf-blog-grid__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ── Karte ───────────────────────────────────────────────────────────────── */
.sf-blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}

.sf-blog-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  transform: translateY(-3px);
}

/* ── Bild ────────────────────────────────────────────────────────────────── */
.sf-blog-card__img-wrap {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #f3f4f6;
  text-decoration: none;
}

.sf-blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.sf-blog-card:hover .sf-blog-card__img {
  transform: scale(1.04);
}

.sf-blog-card__img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  min-height: 180px;
}

/* ── Kategorie-Badge (wie Geräte-Karte) ─────────────────────────────────── */
.sf-blog-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--sf-accent, #E8501A);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  pointer-events: none;
}

/* ── Body ────────────────────────────────────────────────────────────────── */
.sf-blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 22px;
  gap: 8px;
}

.sf-blog-card__date {
  font-size: 12px;
  color: #9ca3af;
  margin: 0;
}

.sf-blog-card__title {
  font-size: 17px;
  font-weight: 700;
  color: #111827;
  line-height: 1.35;
  margin: 0;
}

.sf-blog-card__title a {
  color: inherit;
  text-decoration: none;
}

.sf-blog-card__title a:hover {
  color: var(--sf-accent, #E8501A);
}

.sf-blog-card__excerpt {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

/* ── Button ──────────────────────────────────────────────────────────────── */
.sf-blog-card__actions {
  margin-top: 12px;
}

.sf-blog-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sf-accent, #E8501A);
  text-decoration: none;
  transition: gap .2s ease;
}

.sf-blog-card__btn:hover {
  gap: 10px;
  color: var(--sf-accent, #E8501A);
}

/* ── Responsive Blog ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .sf-blog-grid__list { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

/* Tablet: Sektions-Bilder stacken */
@media (max-width: 860px) {
  .sf-blog-artikel { padding-top: 120px; padding-left: 16px; padding-right: 16px; }
  .sf-va-grid { grid-template-columns: repeat(2, 1fr); }
  .sf-art-section--with-img {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .sf-art-section--reversed .sf-art-sec-img { order: 0; }
  .sf-art-weitere__grid   { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .sf-art-geraete__grid   { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .sf-blog-artikel { padding: 100px 16px 48px; }
  body.sf-has-blog-artikel h1.sf-art-h1 { display: block !important; visibility: visible !important; opacity: 1 !important; font-size: 24px !important; }
  .sf-art-lead { font-size: 16px !important; }
  .sf-art-hero img, .sf-art-hero .sf-art-img { height: 260px !important; }
  .sf-art-sec-text h2,
  .sf-blog-artikel .sf-art-section h2 { font-size: 22px !important; }
  .sf-art-galerie { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sf-vg-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .sf-va-grid  { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .sf-blog-grid__list { grid-template-columns: 1fr; gap: 16px; }
  .sf-blog-grid__heading { font-size: 22px; }
  .sf-art-weitere__grid { grid-template-columns: 1fr; gap: 14px; }
  .sf-art-geraete { padding: 24px 20px 28px; }
  .sf-art-geraete__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   News-Archiv: [stapla_news_archiv]
   ═══════════════════════════════════════════════════════════════════════════ */

.sf-news-archiv {
  padding: 40px 0 60px;
}

.sf-news-archiv__heading {
  font-size: 28px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 6px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--sf-accent, #E8501A);
  display: inline-block;
}

.sf-news-archiv__count {
  font-size: 14px;
  color: #9ca3af;
  margin: 0 0 28px;
}

.sf-news-archiv__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* "Mehr laden" button */
.sf-news-archiv__mehr {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.sf-news-archiv__mehr-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 32px;
  background: #fff;
  border: 2px solid var(--sf-accent, #E8501A);
  border-radius: 8px;
  color: var(--sf-accent, #E8501A);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.sf-news-archiv__mehr-btn:hover {
  background: var(--sf-accent, #E8501A);
  color: #fff;
}

.sf-news-archiv__mehr-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Suchergebnisse: [stapla_suche]
   ═══════════════════════════════════════════════════════════════════════════ */

.sf-suche {
  padding: 40px 0 60px;
}

.sf-suche__header {
  margin-bottom: 40px;
}

.sf-suche__title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  color: #111827;
  margin: 0 0 8px;
}

.sf-suche__term {
  color: var(--sf-accent, #E8501A);
}

.sf-suche__leer-hint {
  font-size: 16px;
  color: #6b7280;
  margin: 0;
}

.sf-suche__leer-hint a {
  color: var(--sf-accent, #E8501A);
  text-decoration: underline;
}

.sf-suche__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 20px;
  color: #9ca3af;
  font-size: 18px;
  text-align: center;
}

.sf-suche__section {
  margin-bottom: 52px;
}

.sf-suche__section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f3f4f6;
}

.sf-suche__section-count {
  background: var(--sf-accent, #E8501A);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  margin-left: 4px;
}

/* Blog-Ergebnis-Grid (same as news-archiv) */
.sf-suche__blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Geräte-Ergebnis-Grid */
.sf-suche__geraete-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Geräte-Karte in Suchergebnissen */
.sf-suche-geraet-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #fff;
  transition: box-shadow .2s ease, transform .2s ease;
}

.sf-suche-geraet-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  transform: translateY(-2px);
}

.sf-suche-geraet-card__thumb img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.sf-suche-geraet-card__no-thumb {
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
}

.sf-suche-geraet-card__body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.sf-suche-geraet-card__marke {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9ca3af;
  font-weight: 600;
}

.sf-suche-geraet-card__typ {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
}

.sf-suche-geraet-card__preis {
  font-size: 14px;
  font-weight: 600;
  color: var(--sf-accent, #E8501A);
}

.sf-suche-geraet-card__cta {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sf-accent, #E8501A);
}

/* Responsive */
@media (max-width: 1024px) {
  .sf-news-archiv__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .sf-suche__blog-grid  { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .sf-suche__geraete-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .sf-news-archiv__grid { grid-template-columns: 1fr; gap: 16px; }
  .sf-suche__blog-grid  { grid-template-columns: 1fr; gap: 16px; }
  .sf-suche__geraete-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .sf-news-archiv { padding: 24px 16px 40px; }
  .sf-suche { padding: 24px 16px 40px; }
}

/* ─── Anfrage Popup Button ───────────────────────────────────────────────── */
.sf-anfrage-popup-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
}
.sf-anfrage-popup-btn:hover { opacity: .88; transform: translateY(-1px); }

/* ─── Modal Overlay ──────────────────────────────────────────────────────── */
.sf-anfrage-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.sf-anfrage-modal[hidden] { display: none; }
.sf-anfrage-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }

/* ─── Modal Box ──────────────────────────────────────────────────────────── */
.sf-anfrage-modal__box {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 36px 32px 32px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.sf-anfrage-modal__close {
  position: absolute;
  top: 14px; right: 16px;
  background: none; border: none;
  font-size: 24px; line-height: 1;
  cursor: pointer; color: #666;
  padding: 4px 8px;
}
.sf-anfrage-modal__close:hover { color: #111; }
.sf-anfrage-modal__title { font-size: 20px; font-weight: 800; margin: 0 0 20px; color: #111; }

/* ─── Form Fields ────────────────────────────────────────────────────────── */
.sf-anfrage-modal__form { display: flex; flex-direction: column; gap: 14px; }
.sf-anfrage-modal__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sf-anfrage-modal__field { display: flex; flex-direction: column; gap: 5px; }
.sf-anfrage-modal__field label { font-size: 13px; font-weight: 600; color: #444; }
.sf-anfrage-modal__field input,
.sf-anfrage-modal__field textarea {
  border: 1.5px solid #ddd;
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.sf-anfrage-modal__field input:focus,
.sf-anfrage-modal__field textarea:focus { border-color: #888; }
.sf-anfrage-modal__field textarea { resize: vertical; }

/* ─── Feedback + Submit ──────────────────────────────────────────────────── */
.sf-anfrage-modal__feedback { padding: 10px 14px; border-radius: 6px; font-size: 14px; font-weight: 600; }
.sf-anfrage-modal__feedback--success { background: #ecfdf5; color: #15803d; }
.sf-anfrage-modal__feedback--error   { background: #fef2f2; color: #dc2626; }
.sf-anfrage-modal__submit {
  padding: 12px 28px;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s;
  margin-top: 4px;
  align-self: flex-start;
}
.sf-anfrage-modal__submit:hover { opacity: .88; }
.sf-anfrage-modal__submit:disabled { opacity: .6; cursor: not-allowed; }

@media (max-width: 500px) {
  .sf-anfrage-modal__box { padding: 28px 18px 24px; }
  .sf-anfrage-modal__row { grid-template-columns: 1fr; }
}

/* === Ganze Finder-Karte klickbar (v2.0.45) === */
.sf-card { position: relative; cursor: pointer; }
.sf-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.sf-card__actions { position: relative; z-index: 3; }

/* === Geraete-Karten im Karussell einheitlich hoch (v2.0.46) ===
   Problem: .sf-karussell__track ist display:flex, die .sf-karussell__item
   werden also auf die Hoehe der hoechsten Karte gestreckt. Das Item war aber
   selbst kein Flex-Container, daher fuellte die .sf-card den gestreckten Platz
   nicht aus -> Karten in einem Track unterschiedlich hoch, Unterkante ausgefranst
   (Combilift bis 143px Unterschied, Bobcat 20px).
   Fix: Item wird Flex-Container, die Karte fuellt es komplett aus.
   .sf-card ist bereits display:flex/column, .sf-card__body flex:1 und
   .sf-card__actions margin-top:auto -> Details-Buttons fluchten unten.
   Die Grids (.sf-showcase__grid / .sf-katgrid__grid) sind display:grid und
   dehnen ihre Zeilen schon von Haus aus, brauchen daher nichts. */
.sf-karussell__item { display: flex; }
.sf-karussell__item > .sf-card { width: 100%; }