.badge-featured,
.featured,
.label-featured,
.badge,
span[class*="feature"] {
    display: none !important;
}

body.offcanvas-open .offcanvas-menu {
    width: 500px;
}

body.offcanvas-open .body-wrapper {
    transform: translateX(-350px);
}

.article-details,
.sp-page-builder .sppb-addon-article {
    border: none !important;
    box-shadow: none !important;
}
.article {
    border: none !important;
    box-shadow: none !important;
}
/* ============================================================
   1) EIGENE WEBFONTS – CORBEN
   Alle Schriftschnitte, die du besitzt, einbinden
   ============================================================ */

/* Regular 400 */
@font-face {
  font-family: 'Corben';
  src: url('../ownfonts/Corben-Regular.woff2') format('woff2'),
       url('../ownfonts/Corben-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Bold 700 */
@font-face {
  font-family: 'Corben';
  src: url('../ownfonts/Corben-Bold.woff2') format('woff2'),
       url('../ownfonts/Corben-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   2) HELIX TITLE POSITION STYLEN
   Nur die Titelbereiche verwenden Corben
   ============================================================ */

.sp-page-title,
.sp-page-title .sp-page-title-heading,
.page-header h1,
h1.page-title,
.title {
  font-family: 'Corben', sans-serif !important;
  font-weight: 400; /* Standard – kann geändert werden */
  letter-spacing: .3px; /* optionaler Effekt */
}

/* Falls du überall Bold in den Titles willst */
.sp-page-title .sp-page-title-heading {
  font-weight: 700 !important;
}

/* Gelber Vollbreiten-Balken für Weiterlesen */
.readmore,
p.readmore {
    margin-top: 20px;
}

.readmore a,
p.readmore a,
.readmore .btn,
p.readmore .btn,
a.btn.btn-primary.readmore {
    display: block !important;
    background-color: #f5ff00 !important;  /* Gelb */
    color: #000 !important;                /* Schwarze Schrift */
    padding: 12px 18px !important;
    text-align: center !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    width: 100% !important;
    font-family: 'Montserrat', sans-serif !important;
    letter-spacing: 0.5px;
}

/* Hover-Effekt: Hintergrund bleibt gelb, Text wird orange */
.readmore a:hover,
p.readmore a:hover,
.readmore .btn:hover,
p.readmore .btn:hover {
    background-color: #f5ff00 !important;  /* Gelb bleibt */
    color: #ff7f00 !important;             /* Orange beim Hover */
}

/* ============================================================
   JCE MEDIABOX (Theme: Light) – GELB / SCHWARZ (FINAL – CLEAN)
   Ziele:
   - Bildgröße & Layout unverändert (wie Original)
   - Overlay dunkel
   - Caption & Navigation gelb, Text schwarz (Corben)
   - Prev/Next: große Klickzone transparent (kein gelber Rand links/rechts)
     → gelbes Badge (44x44) dauerhaft sichtbar (Theme-Hover wird überstimmt)
     → Pfeil dauerhaft sichtbar, liegt über dem Badge
   ============================================================ */

/* Variablen */
:root {
  --mb-yellow: #f5ff00;
  --mb-black: #000;
}

/* ---------------- Overlay ---------------- */
.wf-mediabox.wf-mediabox-theme-light .wf-mediabox-overlay {
  background: rgba(0, 0, 0, 0.85) !important;
}

/* ---------------- Container ---------------- */
.wf-mediabox.wf-mediabox-theme-light .wf-mediabox-container {
  background-color: var(--mb-yellow) !important;
}

/* ---------------- Caption ---------------- */
.wf-mediabox.wf-mediabox-theme-light .wf-mediabox-caption {
  background-color: var(--mb-yellow) !important;
}

.wf-mediabox.wf-mediabox-theme-light .wf-mediabox-caption,
.wf-mediabox.wf-mediabox-theme-light .wf-mediabox-caption * {
  color: var(--mb-black) !important;
  font-family: 'Corben', sans-serif !important;
  text-align: center !important;
}

/* ---------------- Navigation (unten) ---------------- */
.wf-mediabox.wf-mediabox-theme-light .wf-mediabox-nav {
  background-color: var(--mb-yellow) !important;
}

.wf-mediabox.wf-mediabox-theme-light .wf-mediabox-close,
.wf-mediabox.wf-mediabox-theme-light .wf-mediabox-numbers {
  color: var(--mb-black) !important;
  font-family: 'Corben', sans-serif !important;
}

/* Close Button neutral */
.wf-mediabox.wf-mediabox-theme-light .wf-mediabox-close {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* ============================================================
   Prev / Next Buttons
   ============================================================ */

/* Klickzonen transparent (auch Hover/Focus) */
.wf-mediabox.wf-mediabox-theme-light button.wf-mediabox-prev,
.wf-mediabox.wf-mediabox-theme-light button.wf-mediabox-next,
.wf-mediabox.wf-mediabox-theme-light button.wf-mediabox-prev:hover,
.wf-mediabox.wf-mediabox-theme-light button.wf-mediabox-next:hover,
.wf-mediabox.wf-mediabox-theme-light button.wf-mediabox-prev:focus,
.wf-mediabox.wf-mediabox-theme-light button.wf-mediabox-next:focus {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Gelbes Badge (unter dem Pfeil) */
.wf-mediabox.wf-mediabox-theme-light button.wf-mediabox-prev::after,
.wf-mediabox.wf-mediabox-theme-light button.wf-mediabox-next::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;

  width: 44px !important;
  height: 44px !important;

  background-color: var(--mb-yellow) !important;
  border: 0 !important;
  box-shadow: none !important;

  z-index: 1 !important;
  pointer-events: none !important;

  /* Theme schaltet das Badge teils erst bei Hover -> erzwingen */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Badge-Position (dein aktuelles Feintuning beibehalten) */
.wf-mediabox.wf-mediabox-theme-light button.wf-mediabox-next::after {
  transform: translate(calc(-50% + 0px), calc(-50% + 30px)) !important;
}

.wf-mediabox.wf-mediabox-theme-light button.wf-mediabox-prev::after {
  transform: translate(calc(-50% - 0px), calc(-50% + 30px)) !important;
}

/* Pfeile (über dem Badge) */
.wf-mediabox.wf-mediabox-theme-light button.wf-mediabox-prev::before,
.wf-mediabox.wf-mediabox-theme-light button.wf-mediabox-next::before {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;

  color: var(--mb-black) !important;
  font-family: 'Corben', sans-serif !important;
  font-size: 34px !important;
  line-height: 1 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  z-index: 2 !important;
  pointer-events: none !important;
  opacity: 1 !important;
}

/* Zeichen */
.wf-mediabox.wf-mediabox-theme-light button.wf-mediabox-prev::before {
  content: "‹" !important;
}

.wf-mediabox.wf-mediabox-theme-light button.wf-mediabox-next::before {
  content: "›" !important;
}

/* Theme überschreibt Badge oft erst auf Hover/Focus -> konstant halten */
.wf-mediabox.wf-mediabox-theme-light button.wf-mediabox-prev:hover::after,
.wf-mediabox.wf-mediabox-theme-light button.wf-mediabox-next:hover::after,
.wf-mediabox.wf-mediabox-theme-light button.wf-mediabox-prev:focus::after,
.wf-mediabox.wf-mediabox-theme-light button.wf-mediabox-next:focus::after {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}