/* Training Service Cards - Accordion Layout */
/* Container: alle Karten untereinander mit Abstand */
.wp-block-group.training-services-grid,
.training-services-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

/* Einzelne Trainings-Karte */
.training-service-card.collapsible {
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e1e5e9;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  width: 100%;
}

.training-service-card.collapsible + .training-service-card.collapsible {
  margin-top: 1.5rem;
}

.training-service-card.collapsible:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  transform: translateY(-1px);
}

/* Header: Icon, Überschrift, Pfeil nebeneinander */
.wp-block-group.training-service-header,
.training-service-header {
  display: block;
  background: #fff;
  border-bottom: 1px solid transparent;
}

/* Gutenberg-Inner-Container im Header auf Flex setzen */
.training-service-header > .wp-block-group__inner-container {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  width: 100%;
  cursor: pointer;
}

.training-service-card.collapsible.active .training-service-header { 
  background: #f8f9fa; 
  border-bottom-color: #e1e5e9; 
}

/* Icon links, feste Breite */
.training-service-header .training-service-icon { 
  margin: 0; 
  font-size: 1.5rem; 
  color: var(--primary-color); 
  flex: 0 0 40px; 
  text-align: center; 
}

.training-service-header .training-service-icon i { 
  font-size: 1.5rem; 
  color: var(--primary-color); 
}

/* Überschrift nimmt Restbreite */
.training-service-header h3 { 
  margin: 0; 
  font-size: 1.1rem; 
  font-weight: 700; 
  color: var(--text-color); 
  flex: 1 1 auto; 
}

/* Pfeil ganz rechts */
.training-service-header .training-service-arrow { 
  margin: 0 0 0 auto; 
  font-size: 1rem; 
  color: var(--primary-color); 
  transition: transform 0.3s ease; 
  flex: 0 0 auto; 
  line-height: 1; 
}

.training-service-card.collapsible.active .training-service-arrow { 
  transform: rotate(180deg); 
}

/* Inhalt ein-/ausklappen */
.training-service-content { 
  max-height: 0; 
  overflow: hidden; 
  transition: max-height 0.3s ease, padding 0.3s ease; 
  padding: 0 1rem; 
  background: #fff; 
}

.training-service-card.collapsible.active .training-service-content { 
  max-height: 1000px; 
  padding: 1rem; 
}

.training-service-content p { 
  margin-bottom: 0.75rem; 
  line-height: 1.5; 
  color: var(--text-color); 
}

.training-service-content ul { 
  margin-bottom: 0.75rem; 
  padding-left: 1.25rem; 
}

.training-service-content li { 
  margin-bottom: 0.25rem; 
  line-height: 1.4; 
  color: var(--text-color); 
}

.training-service-content p:last-child { 
  margin-bottom: 0; 
  font-weight: 600; 
  color: var(--primary-color); 
}

/* Training Service Features Liste */
.training-service-features {
  list-style: none;
  padding: 0;
  text-align: left;
}

.training-service-features li {
  padding: 0.3rem 0;
  color: #555;
  position: relative;
  padding-left: 1.2rem;
  list-style-type: none;
}

.training-service-features li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--primary-color);
  font-weight: bold;
}

/* Focus-Styles für Barrierefreiheit */
.training-service-header:focus { 
  outline: 2px solid var(--primary-color); 
  outline-offset: 2px; 
  box-shadow: 0 0 0 4px rgba(213,43,65,0.1); 
}

/* Responsive */
@media (max-width: 768px) {
  .wp-block-group.training-services-grid, 
  .training-services-grid { 
    gap: 1rem; 
  }
  
  .training-service-header > .wp-block-group__inner-container { 
    padding: 0.875rem; 
    gap: 0.5rem; 
  }
  
  .training-service-header .training-service-icon { 
    flex-basis: 32px; 
  }
  
  .training-service-header .training-service-icon i { 
    font-size: 1.25rem; 
  }
  
  .training-service-header h3 { 
    font-size: 1rem; 
  }
  
  .training-service-header .training-service-arrow { 
    font-size: 0.875rem; 
  }
  
  .training-service-content { 
    padding: 0 0.875rem; 
  }
  
  .training-service-card.collapsible.active .training-service-content { 
    padding: 0.875rem; 
  }
}