/* ==============================================
   Contrast Button Styles
   ============================================== */
.btn-contrast {
  display: inline-block;
  cursor: pointer;
  background: #333;
  padding: 5px 10px;
  border: 2px solid #fff;
  color: #fff;
  font-weight: bold;
}

.contrastBW .btn-contrast {
  border: 2px solid var(--maincolor);
  background: #1a1a1a;
  color: var(--maincolor);
}

.contrastBW .btn-contrast:hover {
  background: var(--maincolor);
  color: #1a1a1a;
}

/* ==============================================
   CSS Variables Override - Dark Mode Colors
   ============================================== */
.contrastBW :root {
  --softcolor: #2a2a2a;
  --color: #ffffff;
  /* maincolor, hcolor etc. bleiben wie im jeweiligen Theme definiert */
}

/* ==============================================
   Body and Base Styles
   ============================================== */
body.contrastBW {
  background-color: #1a1a1a;
  color: #ffffff;
}

/* ==============================================
   Typography
   ============================================== */
.contrastBW h1,
.contrastBW h2,
.contrastBW h3,
.contrastBW h4,
.contrastBW h5,
.contrastBW h6 {
  color: var(--hcolor) !important;
}

/* ==============================================
   Links
   ============================================== */
.contrastBW a {
  color: var(--maincolor);
  text-decoration: none;
}

.contrastBW a:hover,
.contrastBW a:focus {
  color: var(--maincolor);
  text-decoration: underline;
  filter: brightness(1.2);
}

.contrastBW main a,
.contrastBW .frontpage-list-inhalt a,
.contrastBW .artikel-hauptinhalt a {
  color: var(--maincolor);
  font-weight: bold;
}

/* ==============================================
   Header and Navigation
   ============================================== */
.contrastBW .region-header {
  background-color: #0a0a0a;
  color: #fff;
}

.contrastBW .region-header a {
  color: var(--maincolor);
}

.contrastBW .login.nav-link {
  background: #2a2a2a;
  color: var(--maincolor);
}

.contrastBW .login.nav-link:hover {
  background: var(--maincolor);
  color: #1a1a1a;
}

/* ==============================================
   Buttons and Interactive Elements
   ============================================== */
.contrastBW .spendenbtn {
  background: #2a2a2a;
  color: var(--maincolor);
  padding: 8px 12px;
  font-weight: bold;
}

.contrastBW .spendenbtn:hover {
  background: var(--maincolor);
  color: #1a1a1a;
}

.contrastBW .offenestelle {
  background: #2a2a2a;
  color: var(--bluecolor);
  padding: 8px 12px;
  font-weight: bold;
}

.contrastBW .offenestelle:hover {
  background: var(--bluecolor);
  color: #1a1a1a;
}

.contrastBW .freiplatz {
  background: var(--maincolor);
  color: #ffffff;
  padding: 8px 12px;
  font-weight: bold;
}

.contrastBW .freiplatz:hover {
  background: var(--maincolor);
  color: #1a1a1a;
  filter: brightness(1.2);
}

.contrastBW .mehr {
  background: #2a2a2a;
  color: var(--maincolor);
  font-weight: bold;
}

.contrastBW .mehr:after {
  color: var(--maincolor);
}

.contrastBW .mehr:hover {
  background: var(--maincolor);
  color: #1a1a1a;
}

.contrastBW .mehr:hover:after {
  color: #1a1a1a;
}

/* Angebote Block Mehr-Buttons */
.contrastBW .view-angebote .view-content .views-row .mehr {
  color: var(--maincolor);
  background: #2a2a2a;
  font-weight: bold;
}

.contrastBW .view-angebote .view-content .views-row .mehr:after {
  color: var(--maincolor);
}

.contrastBW .view-angebote .view-content .views-row .mehr:hover {
  background: var(--maincolor);
  color: #1a1a1a;
}

.contrastBW .view-angebote .view-content .views-row .mehr:hover:after {
  color: #1a1a1a;
}

.contrastBW .more-link a,
.contrastBW .mehr-erfahren a {
  background: var(--maincolor);
  color: #1a1a1a;
  font-weight: bold;
}

.contrastBW .more-link a:after,
.contrastBW .mehr-erfahren a:after {
  color: #1a1a1a;
}

.contrastBW .more-link a:hover,
.contrastBW .mehr-erfahren a:hover {
  background: var(--maincolor);
  color: #000;
  filter: brightness(1.2);
}

.contrastBW .more-link:hover a:after,
.contrastBW .mehr-erfahren:hover a:after {
  color: #000;
}

/* ==============================================
   Article Sections
   ============================================== */
.contrastBW .haupttitel {
  background: var(--maincolor);
  color: #1a1a1a;
}

.contrastBW .haupttitel:after {
  background-color: var(--maincolor);
  border-bottom-color: var(--maincolor);
}

.contrastBW .haupttitel h1 {
  color: #1a1a1a !important;
}

.contrastBW .artikel-hauptinhalt {
  background: #2a2a2a;
  color: #ffffff;
}

.contrastBW .artikel-hauptinhalt:after {
  background-color: #2a2a2a;
  border-bottom-color: #2a2a2a;
}

.contrastBW .artikel-hauptinhalt h3,
.contrastBW .artikel-inhalt h3 {
  color: var(--maincolor) !important;
}

.contrastBW .artikel-inhalt {
  background: #1a1a1a;
}

/* ==============================================
   Carousel and Slider
   ============================================== */
.contrastBW .slider-item-inhalt {
  background: var(--maincolor);
  color: #1a1a1a;
}

.contrastBW .slider-item-inhalt a {
  color: #1a1a1a;
  text-decoration: underline;
}

.contrastBW #Front-page-carousel:after {
  background-color: var(--maincolor);
  border-bottom-color: var(--maincolor);
}

.contrastBW #Front-page-carousel .carousel-control-prev,
.contrastBW #Front-page-carousel .carousel-control-next {
  background-color: var(--maincolor);
  opacity: 0.8;
}

.contrastBW #Front-page-carousel .carousel-indicators li {
  background-color: #2a2a2a;
}

.contrastBW #Front-page-carousel .carousel-indicators .active {
  background-color: var(--maincolor);
}

/* ==============================================
   Content Blocks - Angebote
   ============================================== */
.contrastBW .block-views-blockangebote-block-1 .view-content .views-row {
  background: #2a2a2a;
}

.contrastBW .block-views-blockangebote-block-1 .view-content .views-row a {
  color: #ffffff;
  text-decoration: none;
}

.contrastBW .block-views-blockangebote-block-1 .view-content .views-row a h3 {
  color: var(--maincolor) !important;
}

.contrastBW .block-views-blockangebote-block-1 .view-content .views-row:hover {
  background: #3a3a3a;
}

.contrastBW .block-views-blockangebote-block-1 .view-content .views-row:hover a h3 {
  color: var(--maincolor) !important;
  filter: brightness(1.2);
}

.contrastBW .block-views-blockaktuelles-block-1,
.contrastBW .block-views-blockaktuelles-block-2,
.contrastBW .block-views-blockaktuelles-block-3,
.contrastBW .block-views-blockaktuelles-block-4 {
  background: #2a2a2a;
}

/* ==============================================
   Contact Section (Ansprechpartner)
   ============================================== */
.contrastBW .ansprechpartner {
  background-color: var(--maincolor);
  color: #1a1a1a;
}

.contrastBW .ansprechpartner > h3,
.contrastBW .ansprechpartner h5 {
  color: #1a1a1a !important;
}

.contrastBW .ansprechpartner a {
  color: #1a1a1a;
  text-decoration: underline;
}

.contrastBW .ansprechpartner a:hover {
  color: #000;
}

/* ==============================================
   Images and Icons
   ============================================== */
.contrastBW img {
  opacity: 0.9;
}

.contrastBW img:hover {
  opacity: 1;
}

.contrastBW .field--name-field-bildungsangebot-icon .img-fluid {
  background: #2a2a2a;
  padding: 5px;
}

/* ==============================================
   Social Media
   ============================================== */
.contrastBW .folgesm p {
  background: var(--maincolor);
  color: #1a1a1a;
}

.contrastBW .folgesm p:after {
  color: #1a1a1a;
}

.contrastBW #facebook-icon,
.contrastBW #instagram-icon {
  fill: var(--maincolor);
  background: #2a2a2a;
  padding: 5px;
}

.contrastBW #facebook-icon:hover,
.contrastBW #instagram-icon:hover {
  fill: var(--maincolor);
  filter: brightness(1.2);
}

.contrastBW .social-media-block-hover:hover {
  background-color: var(--maincolor);
  opacity: 0.9;
}

.contrastBW .social-media-block-titel {
  color: #1a1a1a;
  font-weight: bold;
}

/* ==============================================
   Lists and Views
   ============================================== */
.contrastBW .view-projektgalerie .views-field-title a:before,
.contrastBW .view-spendenprojekte .views-field-title a:before,
.contrastBW .view-ausbildungsteam .views-field-field-team-vorname:before,
.contrastBW .geschaeftstelle-team-list .views-field-title:before,
.contrastBW .view-erfolgsgeschichten .views-field-title:before,
.contrastBW .view-aktuelles .views-field-title a:before {
  color: var(--maincolor);
}

/* ==============================================
   Team Section
   ============================================== */
.contrastBW .views-field-field-team-zitat {
  background: var(--maincolor);
  color: #1a1a1a;
}

.contrastBW .view-ausbildungsteam .views-row:hover {
  background: #2a2a2a;
}

/* ==============================================
   Footer
   ============================================== */
.contrastBW .footer {
  background: #0a0a0a;
  color: #ffffff;
}

.contrastBW .footer a {
  color: var(--maincolor);
  text-decoration: none;
}

.contrastBW .footer a:hover {
  color: var(--maincolor);
  text-decoration: underline;
  filter: brightness(1.2);
}

.contrastBW .region-sitemap {
  background: var(--maincolor);
  color: #1a1a1a;
}

.contrastBW .region-sitemap a {
  color: #1a1a1a;
}

.contrastBW .region-sitemap a:hover {
  color: #000;
  text-decoration: underline;
}

/* ==============================================
   Logos and Partners
   ============================================== */
.contrastBW .view-logos-und-partner .view-content .views-row .img-fluid {
  background: #2a2a2a;
  padding: 10px;
}

/* ==============================================
   Stellenportal
   ============================================== */
.contrastBW .view-stellenportal .view-content .views-row {
  background: #2a2a2a;
  border-left: 5px solid var(--maincolor);
}

/* ==============================================
   Back to Top Button
   ============================================== */
.contrastBW #backtotop {
  background: var(--maincolor);
  color: #1a1a1a;
}

.contrastBW #backtotop:hover {
  background: var(--maincolor);
  filter: brightness(1.2);
}

/* ==============================================
   Forms and Input Elements
   ============================================== */
.contrastBW input,
.contrastBW textarea,
.contrastBW select {
  background: #2a2a2a;
  color: #ffffff;
  border: 2px solid var(--maincolor);
}

.contrastBW input:focus,
.contrastBW textarea:focus,
.contrastBW select:focus {
  outline: 2px solid var(--maincolor);
  outline-offset: 2px;
  background: #3a3a3a;
}

.contrastBW input::placeholder,
.contrastBW textarea::placeholder {
  color: #999;
}

/* ==============================================
   Tables
   ============================================== */
.contrastBW table {
  background: #2a2a2a;
}

.contrastBW th {
  background: var(--maincolor);
  color: #1a1a1a;
}

.contrastBW td {
  color: #ffffff;
  border-bottom: 1px solid #3a3a3a;
}

.contrastBW tr:hover {
  background: #3a3a3a;
}

/* ==============================================
   Pagination
   ============================================== */
.contrastBW .pager a {
  background: #2a2a2a;
  color: var(--maincolor);
}

.contrastBW .pager a:hover,
.contrastBW .pager .is-active {
  background: var(--maincolor);
  color: #1a1a1a;
}

/* ==============================================
   Accessibility Focus States
   ============================================== */
.contrastBW a:focus,
.contrastBW button:focus {
  outline: 2px solid var(--maincolor);
  outline-offset: 2px;
}

/* ==============================================
   MENU STYLES
   ============================================== */

/* Menu Background */
.contrastBW #main-menu nav.bg-light {
  background-color: #0a0a0a !important;
}

.contrastBW #main-menu .navbar {
  background-color: #0a0a0a;
}

/* Hamburger Menu Toggle */
.contrastBW #main-menu .navbar-toggler-1,
.contrastBW #main-menu .navbar-toggler-2,
.contrastBW #main-menu .navbar-toggler-3 {
  background: var(--maincolor);
}

/* Mobile Navigation Drill */
.contrastBW .nav-drill {
  background-color: #1a1a1a;
}

/* Navigation Items */
.contrastBW #main-menu .nav-item {
  background: #1a1a1a;
}

.contrastBW #main-menu .nav-link {
  color: var(--maincolor) !important;
}

.contrastBW #main-menu .nav-link:hover,
.contrastBW #main-menu .nav-link:focus {
  background: #2a2a2a;
  color: var(--maincolor) !important;
  filter: brightness(1.2);
}

/* Active Menu Items */
.contrastBW #main-menu .istaktiv {
  background: var(--maincolor) !important;
}

.contrastBW #main-menu .istaktiv > a {
  color: #1a1a1a !important;
}

/* Navigation Expand Content */
.contrastBW #main-menu .nav-expand-content {
  background-color: #1a1a1a;
}

/* Navigation Back Link */
.contrastBW #main-menu .nav-expand-content .nav-back-link {
  background: var(--maincolor);
}

.contrastBW #main-menu .nav-back-item .nav-link {
  color: #1a1a1a !important;
}

/* SVG Icons in Menu */
.contrastBW #main-menu .nav-items .svg-mobile {
  background: var(--maincolor);
  color: #1a1a1a;
}

/* Menu Slogan/Tagline */
.contrastBW #main-menu .nav-level-1:after {
  color: var(--maincolor);
  opacity: 0.3;
}

/* Footer Menu */
.contrastBW .menu--footer .navbar-nav .nav-link {
  color: var(--maincolor);
}

.contrastBW .menu--footer .navbar-nav .nav-link:hover {
  color: var(--maincolor);
  text-decoration: underline;
  filter: brightness(1.2);
}

/* Sitemap */
.contrastBW #sitemap {
  background: var(--maincolor);
  color: #1a1a1a;
}

.contrastBW #sitemap a {
  color: #1a1a1a;
}

.contrastBW #sitemap a:hover {
  color: #000;
  text-decoration: underline;
}

/* Canvas Sidebar Menu */
.contrastBW .bs-canvas {
  background: #1a1a1a;
}

.contrastBW .bs-canvas-overlay {
  background-color: #000;
  opacity: 0.9;
}

.contrastBW #intern-menu .menu-title {
  background: var(--maincolor);
  color: #1a1a1a;
}

.contrastBW #intern-menu .nav-item .is-active {
  color: var(--maincolor);
  font-weight: bold;
}

/* Desktop Menu Styles (min-width: 1450px) */
@media (min-width: 1450px) {
  .contrastBW #main-menu .nav-drill {
    background: transparent;
  }

  .contrastBW #main-menu .nav-drill a {
    color: var(--maincolor);
  }

  .contrastBW #main-menu .nav-drill a:hover {
    background: #2a2a2a;
    color: var(--maincolor);
    filter: brightness(1.2);
  }

  /* Level 1 Navigation Dropdown */
  .contrastBW #main-menu .nav-level-1 > .nav-item > .nav-expand-content {
    background: #1a1a1a;
  }

  .contrastBW #main-menu .nav-level-1 > .nav-item > .nav-expand-content:before {
    color: var(--maincolor);
    opacity: 0.2;
  }

  /* Active/Open Menu States */
  .contrastBW.gut-hellberg #main-menu .gut-hellberg,
  .contrastBW.augustinusheim #main-menu .augustinusheim,
  .contrastBW.franziskusheim #main-menu .franziskusheim,
  .contrastBW.berufliche-bildung #main-menu .berufliche-bildung,
  .contrastBW #main-menu .navbar .nav-items > .istaktiv > a,
  .contrastBW #main-menu .navbar .nav-items > .istaktiv > a:focus,
  .contrastBW #main-menu .navbar .nav-items > .istaktiv > a:hover {
    background-color: var(--maincolor) !important;
    color: #1a1a1a !important;
  }

  .contrastBW #main-menu .navbar .nav-items > .show > a,
  .contrastBW #main-menu .navbar .nav-items > .show > a:focus,
  .contrastBW #main-menu .navbar .nav-items > .show > a:hover {
    background-color: var(--maincolor) !important;
    color: #1a1a1a !important;
  }

  /* Menu Overlay */
  .contrastBW #main-menu .overlay {
    background-color: var(--maincolor);
  }

  /* Menu Slogan Desktop */
  .contrastBW #main-menu .menu-slogan {
    color: var(--maincolor);
  }

  /* Submenu Hover States */
  .contrastBW #main-menu .nav-expand-content > li > a:focus,
  .contrastBW #main-menu .nav-expand-content > li > a:hover {
    background: #2a2a2a !important;
    color: var(--maincolor) !important;
    filter: brightness(1.2);
  }

  /* Level 2 Menu Items */
  .contrastBW #main-menu .nav-level-1 > .nav-expand > .nav-expand-content > .nav-item > .nav-link {
    font-weight: bold;
    color: var(--maincolor) !important;
  }
}

/* Menu Item Hover States */
.contrastBW #main-menu .nav-item:hover {
  background: #2a2a2a;
}

/* Separators - Subtle and minimal */
.contrastBW .nav-drill .nav-item:not(:last-child),
.contrastBW #main-menu .nav-expand-content .nav-item:not(:last-child) {
  border-bottom: 1px solid #3a3a3a !important;
}

/* Remove border-bottom from original styles */
.contrastBW .block-views-blockangebote-block-1 .view-content .views-row {
  border-bottom: none;
}