/* Professionelle SVG-basierte Icons - Performance-optimiert */

/* Event Icons mit SVG-Grafiken */
.icon-university::before { 
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23024e9c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 10-10-4L2 10l10 4 10-4Z'/%3E%3Cpath d='M6 12c0 5.4 6 7 6 7s6-1.6 6-7'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.icon-clock::before { 
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12,6 12,12 16,14'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.icon-map::before { 
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23024e9c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.icon-users::before { 
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='m22 21-3-3 3-3'/%3E%3Cpath d='M16 3h5v5'/%3E%3Cpath d='m21 3-7.5 7.5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.icon-share::before { 
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23024e9c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 17 10-10'/%3E%3Cpath d='M17 7v10'/%3E%3Cpath d='M7 7h10'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

/* Feature Icons mit professionellen SVG-Designs */
.icon-graduation::before { 
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 10-10-4L2 10l10 4 10-4Z'/%3E%3Cpath d='M6 12c0 5.4 6 7 6 7s6-1.6 6-7'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.icon-network::before { 
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 12c0 2.76-2.24 5-5 5s-5-2.24-5-5 2.24-5 5-5 5 2.24 5 5Z'/%3E%3Cpath d='M20 4 8.12 15.88M14.47 14.48 20 20M8.12 8.12 4 4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.icon-hands::before { 
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 12h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 14'/%3E%3Cpath d='m7 18 1.6-2.4a2 2 0 0 1 1.6-.8h3.8a2 2 0 0 0 1.6-.8L21 8'/%3E%3Cpath d='m7 14-.5-3'/%3E%3Cpath d='m17 10-.5 3'/%3E%3Cpath d='m3 14 2.3 2.3c.3.3.7.4 1.1.4H10'/%3E%3Cpath d='m21 8-2.3-2.3c-.3-.3-.7-.4-1.1-.4H14'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.icon-heart::before { 
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.icon-rocket::before { 
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

/* LinkedIn Icon mit professionellem SVG */
.icon-linkedin {
  display: inline-block;
  width: 22px;
  height: 22px;
  background: #0077b5;
  border-radius: 4px;
  position: relative;
  transition: all 0.3s ease;
  text-decoration: none;
}

.icon-linkedin:hover {
  background: #005885;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 119, 181, 0.3);
}

.icon-linkedin::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Icon Circle Container mit modernem Design */
.icon-circle {
  width: 70px;
  height: 70px;
  border-radius: 20px; /* Weniger rund, moderner */
  background: linear-gradient(135deg, #024e9c, #0066cc);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  box-shadow: 0 8px 25px rgba(2, 78, 156, 0.15);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.icon-circle::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.6s ease;
}

.icon-circle:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 12px 35px rgba(2, 78, 156, 0.25);
  background: linear-gradient(135deg, #0066cc, #024e9c);
}

.icon-circle:hover::before {
  left: 100%;
}

/* Mobile optimierte Icon-Größen */
@media (max-width: 768px) {
  .icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 16px;
  }
  
  .icon-circle span {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .icon-circle {
    width: 55px;
    height: 55px;
    border-radius: 14px;
  }
}

/* Event Icons Positioning mit verbesserter Ausrichtung */
.event-title-compact .icon-university,
.event-time-visible .icon-clock,
.event-location-visible .icon-map {
  margin-right: 0.5rem;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

/* Button Icons mit besserer Integration */
.btn-event-primary .icon-users,
.btn-event-secondary .icon-share {
  margin-right: 0.4rem;
  display: inline-flex;
  align-items: center;
}

/* Social Media Icons: konsistente Dimensionen */
.footer .icon-linkedin, 
.footer-mobile .icon-linkedin {
  width: 24px;
  height: 24px;
  display: inline-block;
  margin: 0 4px;
}

/* Icon Sizing Consistency mit verbesserter Flexibilität */
[class*="icon-"]::before {
  display: inline-block;
  vertical-align: middle;
}

/* Spezielle Hover-Effekte für interaktive Icons */
.event-card-compact:hover .icon-university::before,
.event-card-compact:hover .icon-clock::before,
.event-card-compact:hover .icon-map::before {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

/* Button Icon Hover-Effekte */
.btn-event-primary:hover .icon-users::before,
.btn-event-secondary:hover .icon-share::before {
  transform: translateX(2px);
  transition: transform 0.2s ease;
}

/* Icon Accessibility - bessere Kontraste */
.event-time-visible .icon-clock::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12,6 12,12 16,14'/%3E%3C/svg%3E");
}

/* Zusätzliche Button-Icons für bessere UX */
.icon-info::before {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23024e9c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9,12 3,0 0,3'/%3E%3Cpath d='m12,9.02 0,0'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.icon-team::before {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23024e9c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='m22 21-3-3 3-3'/%3E%3Cpath d='M16 3h5v5'/%3E%3Cpath d='m21 3-7.5 7.5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.icon-book::before {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23024e9c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

/* Button-Hover-Effekte für Icons */
.btn:hover .icon-info::before,
.btn:hover .icon-team::before,
.btn:hover .icon-book::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9,12 3,0 0,3'/%3E%3Cpath d='m12,9.02 0,0'/%3E%3C/svg%3E");
  transform: translateX(2px);
  transition: all 0.2s ease;
}

.btn:hover .icon-team::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='m22 21-3-3 3-3'/%3E%3Cpath d='M16 3h5v5'/%3E%3Cpath d='m21 3-7.5 7.5'/%3E%3C/svg%3E");
}

.btn:hover .icon-book::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20'/%3E%3C/svg%3E");
}