/* ==========================================================================
   COINFLOW FINANCE – DARK UI  ·  v1.0.0
   ==========================================================================

   SCOPE
   Jede Regel hängt an body.cff-dark oder einer der Zusatzklassen
   cff-dark-lesson, cff-dark-course, cff-dark-nosidebar, cff-dark-nochrome.
   Diese Klassen setzt das Plugin nur auf LearnPress-Seiten.

   SCHUTZREGEL
   Keine Regel adressiert .cff-a0-root, .cff-a1-root oder .cff-a2-root.
   Die Lektionsinhalte bringen ihr eigenes CSS mit.
   ========================================================================== */

body.cff-dark{
  --d-bg:#050806;
  --d-l1:#0A0F0C;
  --d-l2:#0E1411;
  --d-l3:#131B16;
  --d-ln:#141C17;
  --d-ln2:#1C2721;
  --d-ln3:#26342C;
  --d-tx:#F3F5F2;
  --d-tx2:#8A968F;
  --d-tx3:#59655E;
  --d-em:#3DDC97;
  --d-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;

  background-color:#050806 !important;
  color:#F3F5F2 !important;
}

/* --------------------------------------------------------------------------
   1. Alle Flächen dunkel

   WICHTIG: :not(.cff-dark-lesson)
   Auf Lektionsseiten greifen diese Regeln bewusst NICHT. Die Lektionen
   .cff-a0-root bis .cff-a6-root bringen ihr eigenes vollständiges Design
   mit. Griffe von außen haben dort Symbole schwarz eingefärbt.
   -------------------------------------------------------------------------- */
body.cff-dark:not(.cff-dark-lesson) .wp-site-blocks,
body.cff-dark:not(.cff-dark-lesson) main,
body.cff-dark:not(.cff-dark-lesson) article,
body.cff-dark:not(.cff-dark-lesson) section,
body.cff-dark:not(.cff-dark-lesson) aside,
body.cff-dark:not(.cff-dark-lesson) header,
body.cff-dark:not(.cff-dark-lesson) footer,
body.cff-dark:not(.cff-dark-lesson) .entry-content,
body.cff-dark:not(.cff-dark-lesson) .site-content,
body.cff-dark:not(.cff-dark-lesson) .lp-content-area,
body.cff-dark:not(.cff-dark-lesson) .lp-single-course,
body.cff-dark:not(.cff-dark-lesson) .course-summary,
body.cff-dark:not(.cff-dark-lesson) .course-detail-info,
body.cff-dark:not(.cff-dark-lesson) .lp-archive-courses,
body.cff-dark:not(.cff-dark-lesson) .lp-courses-bar,
body.cff-dark:not(.cff-dark-lesson) .learn-press-checkout,
body.cff-dark:not(.cff-dark-lesson) .lp-checkout-form,
body.cff-dark:not(.cff-dark-lesson) .lp-profile-content,
body.cff-dark:not(.cff-dark-lesson) [class*="wp-block-group"],
body.cff-dark:not(.cff-dark-lesson) [class*="wp-block-columns"],
body.cff-dark:not(.cff-dark-lesson) [class*="wp-block-column"],
body.cff-dark:not(.cff-dark-lesson) [class*="learnpress"],
body.cff-dark:not(.cff-dark-lesson) [class*="course-"],
body.cff-dark:not(.cff-dark-lesson) [class*="lp-"]{
  background-color:transparent !important;
  background-image:none !important;
}

body.cff-dark:not(.cff-dark-lesson) .wp-site-blocks,
body.cff-dark:not(.cff-dark-lesson) main{ max-width:none !important; }

/* --------------------------------------------------------------------------
   2. Typografie
   -------------------------------------------------------------------------- */
body.cff-dark:not(.cff-dark-lesson) h1,
body.cff-dark:not(.cff-dark-lesson) h2,
body.cff-dark:not(.cff-dark-lesson) h3,
body.cff-dark:not(.cff-dark-lesson) h4,
body.cff-dark:not(.cff-dark-lesson) h5{
  color:var(--d-tx) !important;
  letter-spacing:-.03em;
}
body.cff-dark:not(.cff-dark-lesson) p,
body.cff-dark:not(.cff-dark-lesson) li,
body.cff-dark:not(.cff-dark-lesson) span,
body.cff-dark:not(.cff-dark-lesson) div,
body.cff-dark:not(.cff-dark-lesson) td,
body.cff-dark:not(.cff-dark-lesson) th,
body.cff-dark:not(.cff-dark-lesson) label,
body.cff-dark:not(.cff-dark-lesson) legend{ color:var(--d-tx2); }
body.cff-dark:not(.cff-dark-lesson) strong,
body.cff-dark:not(.cff-dark-lesson) b{ color:var(--d-tx) !important; }
body.cff-dark:not(.cff-dark-lesson) a{ color:var(--d-tx) !important; }
body.cff-dark:not(.cff-dark-lesson) a:hover{ color:var(--d-em) !important; }
body.cff-dark:not(.cff-dark-lesson) .wp-block-site-title a,
body.cff-dark:not(.cff-dark-lesson) .wp-block-navigation a{ color:var(--d-tx) !important; }
body.cff-dark:not(.cff-dark-lesson) .wp-block-navigation a:hover{ color:var(--d-em) !important; }

/* --------------------------------------------------------------------------
   3. Dekoration ausblenden
   -------------------------------------------------------------------------- */
body.cff-dark .breadcrumb,
body.cff-dark .breadcrumbs,
body.cff-dark .lp-breadcrumb,
body.cff-dark .learn-press-breadcrumb,
body.cff-dark .course-thumbnail,
body.cff-dark .lp-course-thumbnail,
body.cff-dark .course-author,
body.cff-dark .course-last-updated,
body.cff-dark .course-item-thumbnail{
  display:none !important;
}

/* --------------------------------------------------------------------------
   4. Kaufbox und Seitenleiste der Kursseite
   -------------------------------------------------------------------------- */
body.cff-dark .course-summary-sidebar,
body.cff-dark .lp-course-sidebar,
body.cff-dark .course-sidebar,
body.cff-dark .course-sidebar-preview{
  background-color:var(--d-l1) !important;
  border:1px solid var(--d-ln2) !important;
  border-radius:10px;
}

body.cff-dark .course-price,
body.cff-dark .course-price .price,
body.cff-dark .lp-course-price{
  color:var(--d-em) !important;
  font-family:var(--d-mono);
  font-weight:500;
  letter-spacing:-.03em;
}
body.cff-dark .origin-price,
body.cff-dark del{ color:var(--d-tx3) !important; }

body.cff-dark .course-meta li,
body.cff-dark .lp-course-meta li,
body.cff-dark .course-summary-sidebar li{
  border-bottom:1px solid var(--d-ln) !important;
  color:var(--d-tx2) !important;
}
body.cff-dark .course-meta li:last-child,
body.cff-dark .course-summary-sidebar li:last-child{ border-bottom:0 !important; }

body.cff-dark:not(.cff-dark-lesson) .course-meta i,
body.cff-dark:not(.cff-dark-lesson) .course-summary-sidebar i,
body.cff-dark:not(.cff-dark-lesson) .course-summary-sidebar svg,
body.cff-dark:not(.cff-dark-lesson) .lp-course-meta i{
  color:var(--d-em) !important;
  fill:var(--d-em) !important;
}

/* --------------------------------------------------------------------------
   5. Buttons — nur Farbe und Form
   -------------------------------------------------------------------------- */
body.cff-dark .course-summary-sidebar button,
body.cff-dark .course-summary-sidebar input[type="submit"],
body.cff-dark .course-summary-sidebar .lp-button,
body.cff-dark .course-sidebar button,
body.cff-dark .lp-course-sidebar button,
body.cff-dark button.button-purchase-course,
body.cff-dark button.button-enroll-course,
body.cff-dark button.lp-button-continue,
body.cff-dark .lp-checkout-form button[type="submit"],
body.cff-dark #checkout-order-action button,
body.cff-dark .course-item-wrapper .button{
  background-color:var(--d-em) !important;
  border:1px solid var(--d-em) !important;
  color:#050806 !important;
  border-radius:4px !important;
  font-weight:600 !important;
  text-transform:none !important;
  box-shadow:none !important;
  transition:background-color 200ms cubic-bezier(.22,.61,.28,1),
             color 200ms cubic-bezier(.22,.61,.28,1);
}
body.cff-dark .course-summary-sidebar button:hover,
body.cff-dark .course-sidebar button:hover,
body.cff-dark button.button-purchase-course:hover,
body.cff-dark button.button-enroll-course:hover,
body.cff-dark .lp-checkout-form button[type="submit"]:hover{
  background-color:transparent !important;
  color:var(--d-em) !important;
}
body.cff-dark .course-summary-sidebar button:focus-visible,
body.cff-dark .lp-checkout-form button:focus-visible{
  outline:2px solid var(--d-em);
  outline-offset:3px;
}

/* Such- und Filterknöpfe bleiben bewusst unauffällig */
body.cff-dark .lp-courses-bar button,
body.cff-dark .search-course-button,
body.cff-dark button.lp-filter-search-btn,
body.cff-dark .search-course button,
body.cff-dark [class*="search"] button,
body.cff-dark [class*="curriculum"] button{
  background-color:var(--d-l2) !important;
  border:1px solid var(--d-ln2) !important;
  color:var(--d-tx2) !important;
}

/* --------------------------------------------------------------------------
   6. Lehrplan auf der Kursseite
   -------------------------------------------------------------------------- */
body.cff-dark .curriculum-sections .section,
body.cff-dark .course-curriculum .section{
  border:1px solid var(--d-ln2) !important;
  border-radius:6px;
  margin-bottom:.75rem;
  overflow:hidden;
}
body.cff-dark .section-header{
  background-color:var(--d-l1) !important;
  border:0 !important;
}
body.cff-dark .section-header:hover{ background-color:var(--d-l2) !important; }
body.cff-dark .section-title,
body.cff-dark .section-header h5,
body.cff-dark .section-header h4{ color:var(--d-tx) !important; }
body.cff-dark .section-desc,
body.cff-dark .section-meta,
body.cff-dark .learn-press-course-results-progress{ color:var(--d-tx3) !important; }
body.cff-dark .section-content{
  background-color:var(--d-bg) !important;
  border-top:1px solid var(--d-ln) !important;
}
body.cff-dark .course-item{
  border-bottom:1px solid var(--d-ln) !important;
}
body.cff-dark .course-item:last-child{ border-bottom:0 !important; }
body.cff-dark .course-item:hover{ background-color:var(--d-l1) !important; }
body.cff-dark .course-item a,
body.cff-dark .section-item-link{ color:var(--d-tx2) !important; }
body.cff-dark .course-item a:hover{ color:var(--d-tx) !important; }
body.cff-dark .course-item.has-status-completed a,
body.cff-dark .course-item.item-preview a{ color:var(--d-em) !important; }
body.cff-dark .course-item-meta,
body.cff-dark .item-meta,
body.cff-dark .course-item .duration{
  color:var(--d-tx3) !important;
  font-family:var(--d-mono);
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
body.cff-dark:not(.cff-dark-lesson) .course-item i,
body.cff-dark:not(.cff-dark-lesson) .course-item svg{
  color:var(--d-tx3) !important;
  fill:var(--d-tx3) !important;
}
body.cff-dark .course-item.has-status-completed i{ color:var(--d-em) !important; }
body.cff-dark .course-toggle-all-sections,
body.cff-dark .lp-collapse-all{
  color:var(--d-em) !important;
  font-family:var(--d-mono);
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* --------------------------------------------------------------------------
   7. Kursübersicht und Kurskacheln
   -------------------------------------------------------------------------- */
body.cff-dark .course-item-wrapper,
body.cff-dark .lp-archive-courses .course,
body.cff-dark .learn-press-courses .course{
  background-color:var(--d-l1) !important;
  border:1px solid var(--d-ln2) !important;
  border-radius:10px;
  overflow:hidden;
}
body.cff-dark .course-title a{ color:var(--d-tx) !important; }
body.cff-dark .lp-courses-bar,
body.cff-dark .lp-form-course-filter{
  background-color:transparent !important;
  border-color:var(--d-ln2) !important;
}
body.cff-dark .lp-form-course-filter__title{ color:var(--d-tx) !important; }

/* --------------------------------------------------------------------------
   8. Checkout und Formulare
   -------------------------------------------------------------------------- */
body.cff-dark .lp-checkout-form,
body.cff-dark .learn-press-checkout,
body.cff-dark .lp-checkout-order,
body.cff-dark .lp-checkout-payment{
  background-color:transparent !important;
  border-color:var(--d-ln2) !important;
}
body.cff-dark .lp-checkout-order table,
body.cff-dark .lp-checkout-order th,
body.cff-dark .lp-checkout-order td{
  background-color:var(--d-l1) !important;
  border-color:var(--d-ln2) !important;
  color:var(--d-tx2) !important;
}
body.cff-dark input[type="text"],
body.cff-dark input[type="email"],
body.cff-dark input[type="password"],
body.cff-dark input[type="search"],
body.cff-dark input[type="number"],
body.cff-dark textarea,
body.cff-dark select{
  background-color:var(--d-l1) !important;
  border:1px solid var(--d-ln2) !important;
  color:var(--d-tx) !important;
}
body.cff-dark input::placeholder,
body.cff-dark textarea::placeholder{ color:var(--d-tx3) !important; }

/* Hinweisboxen von LearnPress */
body.cff-dark .learn-press-message,
body.cff-dark .lp-message,
body.cff-dark .learn-press-error{
  background-color:var(--d-l2) !important;
  border-left:2px solid var(--d-em) !important;
  color:var(--d-tx2) !important;
}

/* Zahlungsanbieter behalten ihre eigene Optik, sonst wird Stripe unleserlich */
body.cff-dark .lp-payment-method,
body.cff-dark .payment-methods,
body.cff-dark #stripe-card-element,
body.cff-dark .StripeElement,
body.cff-dark iframe{
  background-color:#FFFFFF !important;
}
body.cff-dark .lp-payment-method label,
body.cff-dark .payment-methods label{ color:#1a1a1a !important; }

/* --------------------------------------------------------------------------
   9. LEKTION — LearnPress-Balken
   Nur aktiv, wenn der Schalter in den Einstellungen an ist.
   -------------------------------------------------------------------------- */
body.cff-dark-nochrome #popup-header,
body.cff-dark-nochrome .popup-header,
body.cff-dark-nochrome .course-popup-header,
body.cff-dark-nochrome .lp-course-popup-header,
body.cff-dark-nochrome .course-item-popup-header,
body.cff-dark-nochrome #course-item-content-header,
body.cff-dark-nochrome .course-item-content-header,
body.cff-dark-nochrome .course-item-nav,
body.cff-dark-nochrome .content-item-nav,
body.cff-dark-nochrome .lp-course-item-nav,
body.cff-dark-nochrome .course-item-navigation,
body.cff-dark-nochrome .content-item-navigation,
body.cff-dark-nochrome .prev-next-posts{
  display:none !important;
}

/* Doppelter Lektionstitel — nur LearnPress-eigene Titelklassen */
body.cff-dark-lesson .course-item-title,
body.cff-dark-lesson .content-item-title,
body.cff-dark-lesson .lp-course-item-title,
body.cff-dark-lesson .lesson-title,
body.cff-dark-lesson .entry-header .entry-title,
body.cff-dark-lesson .wp-block-post-title{
  display:none !important;
}

body.cff-dark-lesson > header.wp-block-template-part,
body.cff-dark-lesson .site-header{
  display:none !important;
}

/* --------------------------------------------------------------------------
   10. LEKTION — Modulliste links ausblenden
   Nur aktiv, wenn der Schalter an ist. Der Inhalt rückt dann nach links
   und nutzt die volle Breite.
   -------------------------------------------------------------------------- */
body.cff-dark-nosidebar #learn-press-course-curriculum,
body.cff-dark-nosidebar #course-curriculum-popup,
body.cff-dark-nosidebar .course-curriculum-popup,
body.cff-dark-nosidebar .lp-course-curriculum-sidebar,
body.cff-dark-nosidebar .content-item-sidebar,
body.cff-dark-nosidebar .lp-sidebar-course-curriculum,
body.cff-dark-nosidebar .course-item-sidebar{
  display:none !important;
}

body.cff-dark-nosidebar #learn-press-content-item,
body.cff-dark-nosidebar .content-item-wrap,
body.cff-dark-nosidebar #popup-content,
body.cff-dark-nosidebar .content-item-scrollable{
  left:0 !important;
  margin-left:0 !important;
  padding-left:0 !important;
  width:100% !important;
  max-width:100% !important;
}

/* --------------------------------------------------------------------------
   11. LEKTION — Modulliste dunkel, falls sie sichtbar bleibt
   -------------------------------------------------------------------------- */
body.cff-dark-lesson #learn-press-course-curriculum,
body.cff-dark-lesson #course-curriculum-popup,
body.cff-dark-lesson .content-item-sidebar,
body.cff-dark-lesson .lp-course-curriculum-sidebar{
  background-color:var(--d-l1) !important;
  border-right:1px solid var(--d-ln2) !important;
}
body.cff-dark-lesson .content-item-sidebar input,
body.cff-dark-lesson #course-curriculum-popup input{
  background-color:var(--d-l2) !important;
  border:1px solid var(--d-ln2) !important;
  color:var(--d-tx) !important;
}
body.cff-dark-lesson .course-item.current,
body.cff-dark-lesson .course-item.item-current{
  background-color:var(--d-l3) !important;
  border-left:2px solid var(--d-em) !important;
}

/* Flächen der Lektionshülle */
body.cff-dark-lesson #popup-content,
body.cff-dark-lesson #learn-press-content-item,
body.cff-dark-lesson .content-item-wrap,
body.cff-dark-lesson .content-item-scrollable,
body.cff-dark-lesson .content-item-summary{
  background-color:#050806 !important;
}

/* Kommentare unter der Lektion */
body.cff-dark-lesson #comments,
body.cff-dark-lesson .comments-area,
body.cff-dark-lesson .comment-respond,
body.cff-dark-lesson #respond,
body.cff-dark-lesson .wp-block-post-comments{
  display:none !important;
}

@media (prefers-reduced-motion:reduce){
  body.cff-dark *{
    transition-duration:1ms !important;
    animation-duration:1ms !important;
  }
}


/* ==========================================================================
   LEKTIONSINHALT — gehört nicht diesem Stylesheet

   Hier steht bewusst KEINE Regel.

   Ein früherer Versuch setzte hier fill:revert und stroke:revert, um die
   Lektionen zu schützen. Das war falsch: revert verwirft sämtliche
   Autoren-Styles, also auch das Stylesheet der Lektion selbst. Die
   Grafiken fielen dadurch auf die Browser-Vorgabe zurück und wurden
   flächig schwarz.

   Der Schutz läuft stattdessen über die Einschränkung :not(.cff-dark-lesson)
   in Abschnitt 1 und 2. Auf Lektionsseiten färbt dieses Stylesheet nichts
   mehr ein — es entfernt dort nur noch die LearnPress-Hülle.
   ========================================================================== */

/* ==========================================================================
   LEKTION ABSCHLIESSEN — der LearnPress-Block am Seitenende

   Er sitzt innerhalb des Lektionsinhalts und wirkt sonst hineingeworfen.
   Hier bekommt er einen ruhigen eigenen Rahmen und sauberen Abstand.
   ========================================================================== */
body.cff-dark-lesson #complete-lesson-form,
body.cff-dark-lesson .course-item-complete,
body.cff-dark-lesson .lp-button-complete-item,
body.cff-dark-lesson [class*="complete-item"],
body.cff-dark-lesson [id*="complete-lesson"]{
  display:block !important;
  margin:3rem auto 0 !important;
  max-width:1240px !important;
  padding:1.5rem clamp(1.25rem,4vw,3.5rem) !important;
  border-top:1px solid #1C2721 !important;
  background-color:transparent !important;
  text-align:left !important;
}

body.cff-dark-lesson #complete-lesson-form button,
body.cff-dark-lesson .course-item-complete button,
body.cff-dark-lesson [class*="complete-item"] button{
  display:inline-block !important;
  width:auto !important;
  padding:.85rem 1.5rem !important;
  background-color:#3DDC97 !important;
  border:1px solid #3DDC97 !important;
  color:#050806 !important;
  border-radius:4px !important;
  font-weight:600 !important;
}
body.cff-dark-lesson #complete-lesson-form button:hover,
body.cff-dark-lesson .course-item-complete button:hover{
  background-color:transparent !important;
  color:#3DDC97 !important;
}

/* ==========================================================================
   BESTÄTIGUNGSDIALOG VON LEARNPRESS

   Der Dialog "Lektion beenden" kommt mit lila Kopfleiste und weißer
   Fußzeile. Hier wird er vollständig in die CFF-Farbwelt geholt.

   Bewusst über [class*="modal"] statt über einen einzelnen Klassennamen,
   weil LearnPress die Benennung zwischen den Versionen ändert. Auf einer
   Lektionsseite gibt es keinen anderen Dialog, der davon betroffen wäre.
   ========================================================================== */

/* Abdunkelnder Hintergrund hinter dem Dialog */
body.cff-dark-lesson [class*="modal-backdrop"],
body.cff-dark-lesson [class*="modal-overlay"],
body.cff-dark-lesson [id*="modal-overlay"]{
  background-color:rgba(5,8,6,.82) !important;
}

/* Der Dialog selbst */
body.cff-dark-lesson [class*="lp-modal"],
body.cff-dark-lesson [id*="lp-modal"],
body.cff-dark-lesson [class*="modal-dialog"],
body.cff-dark-lesson [class*="modal-content"]{
  background-color:#0A0F0C !important;
  border:1px solid #1C2721 !important;
  border-radius:8px !important;
  color:#F3F5F2 !important;
  box-shadow:0 24px 60px rgba(0,0,0,.55) !important;
  overflow:hidden !important;
}

/* Kopfleiste — vorher lila */
body.cff-dark-lesson [class*="modal-header"],
body.cff-dark-lesson [class*="modal-title"]{
  background-color:#0E1411 !important;
  border-bottom:1px solid #1C2721 !important;
  color:#F3F5F2 !important;
}
body.cff-dark-lesson [class*="modal-header"] *,
body.cff-dark-lesson [class*="modal-title"]{
  color:#F3F5F2 !important;
  font-weight:600 !important;
  letter-spacing:-.02em !important;
}

/* Textbereich */
body.cff-dark-lesson [class*="modal-body"],
body.cff-dark-lesson [class*="modal-body"] *{
  background-color:#0A0F0C !important;
  color:#8A968F !important;
}

/* Fußzeile — vorher weiß */
body.cff-dark-lesson [class*="modal-footer"],
body.cff-dark-lesson [class*="modal-action"]{
  background-color:#0E1411 !important;
  border-top:1px solid #1C2721 !important;
}

/* Bestätigen */
body.cff-dark-lesson [class*="modal-footer"] button,
body.cff-dark-lesson [class*="modal-footer"] .button,
body.cff-dark-lesson [class*="modal"] button[class*="yes"],
body.cff-dark-lesson [class*="modal"] button[class*="ok"]{
  background-color:#3DDC97 !important;
  border:1px solid #3DDC97 !important;
  color:#050806 !important;
  border-radius:4px !important;
  font-weight:600 !important;
  padding:.65rem 1.4rem !important;
}
body.cff-dark-lesson [class*="modal-footer"] button:hover{
  background-color:transparent !important;
  color:#3DDC97 !important;
}

/* Abbrechen — zurückhaltender */
body.cff-dark-lesson [class*="modal"] button[class*="no"],
body.cff-dark-lesson [class*="modal"] button[class*="cancel"],
body.cff-dark-lesson [class*="modal"] button[class*="close"]{
  background-color:transparent !important;
  border:1px solid #26342C !important;
  color:#8A968F !important;
}
body.cff-dark-lesson [class*="modal"] button[class*="no"]:hover,
body.cff-dark-lesson [class*="modal"] button[class*="cancel"]:hover{
  border-color:#8A968F !important;
  color:#F3F5F2 !important;
}

/* ==========================================================================
   RÜCKWEG AUS DER LEKTION

   Da die Modulliste ausgeblendet ist, braucht es einen sichtbaren Weg
   zurück zum Lernpfad. Die Leiste erzeugt cff-dark-ui.js.
   ========================================================================== */
body.cff-dark-lesson .cff-backbar{
  position:sticky;
  top:0;
  z-index:50;
  display:block;
  width:100%;
  padding:.85rem clamp(1.25rem,4vw,3.5rem);
  background-color:rgba(5,8,6,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid #141C17;
}
body.cff-dark-lesson .cff-backbar__in{
  display:flex;
  align-items:center;
  gap:.6rem;
  max-width:1240px;
  margin-inline:auto;
}
body.cff-dark-lesson .cff-backbar a{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:.6875rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8A968F !important;
  text-decoration:none !important;
  transition:color 200ms cubic-bezier(.22,.61,.28,1);
}
body.cff-dark-lesson .cff-backbar a:hover{ color:#3DDC97 !important; }
body.cff-dark-lesson .cff-backbar a::before{
  content:"";
  width:18px; height:1px;
  background-color:currentColor;
}

@media (max-width:640px){
  body.cff-dark-lesson .cff-backbar{ padding:.7rem 1.25rem; }
}


/* ==========================================================================
   AUFRÄUMEN AM ENDE DER KURSSEITE

   Die Kommentarbereiche sind bereits serverseitig abgeschaltet. Diese
   Regeln fangen ab, was ein Theme oder LearnPress trotzdem noch ausgibt.
   ========================================================================== */
body.cff-dark #comments,
body.cff-dark .comments-area,
body.cff-dark .comment-respond,
body.cff-dark #respond,
body.cff-dark .wp-block-post-comments,
body.cff-dark .wp-block-comments,
body.cff-dark .course-comments,
body.cff-dark [class*="comment-form"],
body.cff-dark [id*="comment-form"]{
  display:none !important;
}

/* Leerer Block "Related Course" — zeigt ohnehin nur "Keine Kurse gefunden" */
body.cff-dark .related-courses,
body.cff-dark .course-related,
body.cff-dark [class*="related-course"],
body.cff-dark [class*="course-related"]{
  display:none !important;
}


/* ==========================================================================
   PROFILSEITE

   LearnPress arbeitet dort mit gelben Akzenten und hellen Kacheln. Beides
   wird in die CFF-Farbwelt geholt. Ausschließlich Farben und Rahmen.
   ========================================================================== */

/* Statistikkacheln */
body.cff-dark [class*="lp-profile"] [class*="statistic"],
body.cff-dark [class*="profile-stat"],
body.cff-dark [class*="course-statistic"],
body.cff-dark .lp-profile-content [class*="item"]{
  background-color:#0A0F0C !important;
  border:1px solid #1C2721 !important;
  border-radius:8px !important;
  color:#8A968F !important;
}

/* Seitliches Profilmenü — gelber Balken wird Emerald */
body.cff-dark [class*="profile-nav"] a,
body.cff-dark [class*="lp-profile-nav"] a,
body.cff-dark [class*="profile-tabs"] a{
  color:#8A968F !important;
  border-color:#1C2721 !important;
}
body.cff-dark [class*="profile-nav"] .active,
body.cff-dark [class*="profile-nav"] li.active a,
body.cff-dark [class*="profile-tabs"] .active{
  background-color:#131B16 !important;
  border-left:2px solid #3DDC97 !important;
  color:#F3F5F2 !important;
}

/* Reiter über der Kursliste */
body.cff-dark [class*="profile"] [class*="tab"] a,
body.cff-dark [class*="profile"] [role="tab"]{
  color:#59655E !important;
  border-bottom-color:transparent !important;
}
body.cff-dark [class*="profile"] [class*="tab"] .active,
body.cff-dark [class*="profile"] [class*="tab"] a.active,
body.cff-dark [class*="profile"] [aria-selected="true"]{
  color:#F3F5F2 !important;
  border-bottom:2px solid #3DDC97 !important;
}

/* Kurstabelle */
body.cff-dark [class*="profile"] table,
body.cff-dark [class*="profile"] thead,
body.cff-dark [class*="profile"] tbody,
body.cff-dark [class*="profile"] tr,
body.cff-dark [class*="profile"] th,
body.cff-dark [class*="profile"] td{
  background-color:transparent !important;
  border-color:#141C17 !important;
  color:#8A968F !important;
}
body.cff-dark [class*="profile"] th{
  color:#59655E !important;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace !important;
  font-size:.6875rem !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
}
body.cff-dark [class*="profile"] tr:hover td{
  background-color:#0A0F0C !important;
}

/* Gelbe Symbole in Emerald */
body.cff-dark [class*="profile"] i,
body.cff-dark [class*="profile"] svg{
  color:#3DDC97 !important;
  fill:#3DDC97 !important;
}

/* Avatar-Platzhalter zurückhaltender */
body.cff-dark [class*="profile"] img[class*="avatar"],
body.cff-dark [class*="profile"] .avatar{
  border:1px solid #1C2721 !important;
  border-radius:50% !important;
  opacity:.55 !important;
}


/* ==========================================================================
   AKTIVER REITER AUF DER PROFILSEITE

   LearnPress zeichnet den Unterstrich je nach Version als Rahmen oder als
   Pseudo-Element. Deshalb hier beide Wege, damit das Gelb sicher weicht.
   ========================================================================== */
body.cff-dark [class*="profile"] .active,
body.cff-dark [class*="profile"] li.active,
body.cff-dark [class*="profile"] li.active a,
body.cff-dark [class*="profile"] a.active,
body.cff-dark [class*="profile"] [aria-selected="true"],
body.cff-dark [class*="tab"].active,
body.cff-dark li[class*="tab"].active a{
  border-color:#3DDC97 !important;
  border-bottom-color:#3DDC97 !important;
  color:#F3F5F2 !important;
}

body.cff-dark [class*="profile"] .active::after,
body.cff-dark [class*="profile"] .active::before,
body.cff-dark [class*="profile"] li.active a::after,
body.cff-dark [class*="profile"] [aria-selected="true"]::after{
  background-color:#3DDC97 !important;
  border-color:#3DDC97 !important;
}

/* Reiterleiste insgesamt ruhiger */
body.cff-dark [class*="profile"] [class*="tab"]{
  border-bottom-color:#1C2721 !important;
}