@charset "utf-8";

/* =============================================================
   Dark Mode
   Aktiv nur wenn <html class="dark-mode"> gesetzt ist.
   Portierung des original Template-Dark-Themes (alle Regeln
   unter .dark-mode gescoped) + projektspezifische Anpassungen.
   ============================================================= */

.dark-mode body,
.dark-mode .main-header,
.dark-mode .loader-wrap,
.dark-mode .slider-counter_wrap,
.dark-mode .bottom-panel,
.dark-mode .search-input input,
.dark-mode .scroll-nav-wrap,
.dark-mode .fixed-bottom-content,
.dark-mode .bottom-filter-wrap,
.dark-mode .thumbnail-container,
.dark-mode .thumb-img:before {
  background: #161616;
}

.dark-mode p,
.dark-mode .nav-holder nav li a,
.dark-mode .sb-widget p a,
.dark-mode .sb-widget-wrap h3,
.dark-mode .share-btn span,
.dark-mode .scroll-down-wrap span,
.dark-mode .search-input input::-webkit-input-placeholder,
.dark-mode .search-input input,
.dark-mode .section-title h3,
.dark-mode .column-wrapper_text p,
.dark-mode .inline-facts .num,
.dark-mode .custom-skillbar-title span,
.dark-mode .skill-bar-percent,
.dark-mode .serv-item h4 a,
.dark-mode .testi-item h3,
.dark-mode .testilider .swiper-slide.swiper-slide-active .testi-item p,
.dark-mode .policy-box,
.dark-mode .post.fw-post h2,
.dark-mode .post.fw-post h2 a,
.dark-mode .pr-tags span,
.dark-mode .author-content h5 a,
.dark-mode #comments-title,
.dark-mode #reply-title,
.dark-mode .fn a,
.dark-mode .custom-form input::-webkit-input-placeholder,
.dark-mode .custom-form input,
.dark-mode .custom-form textarea,
.dark-mode .custom-form textarea::-webkit-input-placeholder,
.dark-mode .contact-details ul li a,
.dark-mode .gallery-filters a.gallery-filter-active,
.dark-mode .vis-thumb-info .thumb-info h3,
.dark-mode .vis-thumb-info .thumb-info h3 a,
.dark-mode .fixed-bottom-content .gallery-filters a.gallery-filter-active,
.dark-mode .pr-det-container h2,
.dark-mode .caption-wrap ul li span,
.dark-mode .content-nav li a,
.dark-mode .content-nav li a.ln i,
.dark-mode .content-nav li a.rn i,
.dark-mode .content-nav li a span.tooltip,
.dark-mode .closedet_style,
.dark-mode .single-carousel-control .fw-carousel-counter span,
.dark-mode .blog-title-opt li a:hover,
.dark-mode .pr-tags li a:hover,
.dark-mode .custom-form input[type="text"],
.dark-mode .custom-form input[type="email"],
.dark-mode .custom-form input[type="password"] {
  color: #fff;
}

.dark-mode .search-input:before,
.dark-mode #footer-twiit div.user a,
.dark-mode .share-btn,
.dark-mode .section-title h4,
.dark-mode .inline-facts h6,
.dark-mode .serv-item ul li a,
.dark-mode .serv-item ul li,
.dark-mode .testi-item p,
.dark-mode blockquote p,
.dark-mode .comment-meta a,
.dark-mode .comment-meta,
.dark-mode .vis-thumb-info .thumb-info p,
.dark-mode .fs-mode-title {
  color: rgba(255, 255, 255, 0.8);
}

.dark-mode blockquote:before {
  color: rgba(255, 255, 255, 0.2);
}

.dark-mode .sb-button_point:before,
.dark-mode .scroller,
.dark-mode .scroll-down-wrap span:before,
.dark-mode .gallery-filters a:before {
  background: rgba(255, 255, 255, 0.9);
}

.dark-mode .search-input input,
.dark-mode .sb-widget-wrap,
.dark-mode #footer-twiit ul li,
.dark-mode .section-title,
.dark-mode .testi-item p,
.dark-mode .testi-avatar,
.dark-mode .footer-inner,
.dark-mode blockquote,
.dark-mode #comments-title,
.dark-mode #reply-title,
.dark-mode .post-author,
.dark-mode .content-nav {
  border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .mousey,
.dark-mode .fs-mode:before,
.dark-mode .fs-mode:after,
.dark-mode .fs-mode span:before,
.dark-mode .fs-mode span:after {
  border-color: rgba(255, 255, 255, 0.2);
}

.dark-mode .hiiden-sidebar-wrap,
.dark-mode .share-wrapper,
.dark-mode .home-main_container,
.dark-mode .multi-slideshow-wrap_3,
.dark-mode .column-wrapper,
.dark-mode .column-notifer,
.dark-mode .testi-item p,
.dark-mode .author-social,
.dark-mode .fixed-bottom-content.fbc_white,
.dark-mode .fix-pr-det {
  background: #1b1b1b;
}

.dark-mode .hs_init .swiper-scrollbar-drag,
.dark-mode .double-bounce1,
.dark-mode .double-bounce2,
.dark-mode .custom-skillbar,
.dark-mode .sec-dec,
.dark-mode .single-carousel-control .fw-carousel-counter:before,
.dark-mode .single-carousel-control .fw-carousel-counter:after {
  background: rgba(255, 255, 255, 0.3);
}

.dark-mode .custom-form textarea,
.dark-mode .custom-form input[type="text"],
.dark-mode .custom-form input[type="email"],
.dark-mode .custom-form input[type="password"] {
  background: rgba(255, 255, 255, 0.1);
  border-color: transparent;
}

.dark-mode #subscribe-button,
.dark-mode .twitt_btn,
.dark-mode #footer-twiit p.interact a,
.dark-mode .slider-counter_wrap .fw-carousel-counter,
.dark-mode .slider-counter_wrap .swiper-counter,
.dark-mode .slider-counter_wrap .count-folio,
.dark-mode .hs_init:before,
.dark-mode .btn,
.dark-mode .skillbar-bg,
.dark-mode .serv-price,
.dark-mode .to-top,
.dark-mode .bottom-filter-wrap:before,
.dark-mode .single-carousel-control .fw-carousel-counter {
  background: #000;
}

.dark-mode .search-input input:focus {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.dark-mode {
  --cursor-color: #fff;
}

.dark-mode .nav-button span {
  background: #fff;
}

.dark-mode .search-button {
  color: #fff;
}

@media only screen and (max-width: 640px) {
  .dark-mode .fix-pr-det,
  .dark-mode .fix-pr-det.hid-det {
    background: #161616;
  }
  .dark-mode .search-input {
    background: #1b1b1b;
  }
}

/* =============================================================
   Projektspezifische Anpassungen
   ============================================================= */

/* Aktiver/Hover Nav-Link + Indikator wie im Light-Theme spiegeln.
   Das .dark-mode-Scoping erhoeht die Spezifitaet, daher muessen die
   aktiven Zustaende explizit nachgezogen werden, sonst wuerde der
   generische weisse Link den aktiven grauen Zustand ueberschreiben. */
.dark-mode .nav-holder nav li a.act-link,
.dark-mode .nav-holder nav li a:hover {
  color: #999;
}
.dark-mode .nav-holder nav li a:before {
  background: rgba(255, 255, 255, 0.9);
}
.dark-mode .menusb a.act-link {
  color: rgba(255, 255, 255, 0.71);
}

/* Logo einfärben (dunkles SVG waere auf dunklem Grund unsichtbar) */
.dark-mode .logo-holder img {
  filter: brightness(0) invert(1);
}

/* Teilen-Links im Drawer lesbar halten */
.dark-mode .share-container a {
  color: rgba(255, 255, 255, 0.7);
}
.dark-mode .share-container a:hover {
  color: #fff;
}

/* Social-Icons im Drawer */
.dark-mode .sidebar-social li a {
  background: #000;
}
.dark-mode .sidebar-social li a:hover {
  background: #333;
}

/* Design-Umschalter im Dark Mode */
.dark-mode .theme-toggle_label {
  color: #fff;
}
.dark-mode .theme-toggle_track {
  background: #555;
}
.dark-mode .theme-toggle_thumb {
  left: 25px;
}