.timeline-fischaela-section {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 2.5rem 0 2rem 0;
  background: transparent;
}
.timeline-fischaela-container {
  width: min(700px, 96vw);
  margin: 0 auto;
}
.timeline-fischaela-title {
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight: 800;
  margin-bottom: 2.2rem;
  text-align: center;
  color: #0a84ff;
  letter-spacing: .01em;
}
.timeline-fischaela {
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 0;
  padding: 0;
}
.timeline-fischaela__event {
  background: #fff;
  display: flex;
  border-radius: 16px;
  margin-bottom: 20px;
  position: relative;
  box-shadow: 0 4px 18px rgba(10,132,255,0.06);
  border: 1px solid #e5e7eb;
  align-items: stretch;
  min-height: 120px;
  transition: box-shadow .18s, border-color .18s;
}
.timeline-fischaela__event__icon {
  background: #0a84ff;
  color: #fff;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 24px 24px 24px 24px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(10,132,255,0.13);
}
.timeline-fischaela__event__date {
  font-size: .97rem;
  font-weight: 600;
  color: #0a84ff;
  margin: 24px 0 0 0;
  min-width: 90px;
  text-align: left;
  flex-shrink: 0;
}
.timeline-fischaela__event__content {
  padding: 24px 24px 24px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.timeline-fischaela__event__title {
  font-size: 1.08rem;
  font-weight: 700;
  margin-bottom: .15rem;
  color: #222;
}
.timeline-fischaela__event__description {
  font-size: .97rem;
  color: #444;
  opacity: .93;
}
@media (max-width: 700px) {
  .timeline-fischaela-container { width: 100%; }
  .timeline-fischaela__event { flex-direction: column; align-items: flex-start; }
  .timeline-fischaela__event__icon { margin: 16px 16px 0 16px; }
  .timeline-fischaela__event__date { margin: 8px 0 0 16px; }
  .timeline-fischaela__event__content { padding: 12px 16px 16px 16px; }
}
@media (max-width: 480px) {
  .timeline-fischaela__event__icon { width: 40px; height: 40px; font-size: 1.2rem; margin: 10px 10px 0 10px; }
  .timeline-fischaela__event__date { font-size: .85rem; min-width: 60px; }
  .timeline-fischaela__event__content { padding: 8px 10px 10px 10px; }
}
.timeline-fischaela__event:hover,
.timeline-fischaela__event:focus-within {
  box-shadow: 0 8px 32px rgba(10,132,255,0.13);
  border-color: #0a84ff;
}
.timeline-fischaela__event__icon i {
  font-family: "remixicon", sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: inherit;
  line-height: 1;
}

/* Timeline Farben für verschiedene Typen */
.timeline-fischaela__event--type1 .timeline-fischaela__event__icon { background: #0a84ff; }
.timeline-fischaela__event--type2 .timeline-fischaela__event__icon { background: #22c55e; }
.timeline-fischaela__event--type3 .timeline-fischaela__event__icon { background: #f59e42; }

/* Dark Mode */
:root[data-theme="dark"] .timeline-fischaela__event {
  background: #191c22;
  border: 1px solid #222b3a;
  color: #e5e7eb;
  box-shadow: 0 4px 18px rgba(10,132,255,0.09);
}
:root[data-theme="dark"] .timeline-fischaela__event__title { color: #e5e7eb; }
:root[data-theme="dark"] .timeline-fischaela__event__description { color: #bfc9d1; }
:root[data-theme="dark"] .timeline-fischaela__event__date { color: #60aaff; }

/* Timeline Animationen */
.animated { animation-duration: 1s; animation-fill-mode: both; }
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0,40px,0);} to { opacity: 1; transform: none; } }
.fadeInUp { animation-name: fadeInUp; }
.delay-1s { animation-delay: .2s; }
.delay-2s { animation-delay: .4s; }
.delay-3s { animation-delay: .6s; }

/*=============== SKILL PROGRESS LINE ===============*/
.skills-section {
  width: 100%;
  max-width: 700px;
  margin: 2.5rem auto 2rem auto;
  padding: 1.5rem 1rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(10,132,255,0.06);
  border: 1px solid #e5e7eb;
}
.skills-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
  color: #0a84ff;
}
.skills-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.skill-progress-line {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.skill-label {
  min-width: 80px;
  font-weight: 600;
  color: #222;
}
.skill-bar-line {
  flex: 1 1 120px;
  height: 12px;
  background: #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  margin-right: .5rem;
  position: relative;
}
.skill-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0a84ff 0%, #22c55e 100%);
  border-radius: 8px;
  transition: width 1.2s cubic-bezier(.4,0,.2,1);
}
.skill-percent {
  min-width: 38px;
  font-size: .97rem;
  font-weight: 600;
  color: #0a84ff;
}
@media (max-width: 600px) {
  .skills-section { padding: 1rem .5rem; }
  .skill-label { min-width: 60px; font-size: .97rem; }
  .skill-bar-line { height: 9px; }
  .skill-percent { min-width: 28px; font-size: .93rem; }
}
:root[data-theme="dark"] .skills-section {
  background: #191c22;
  border: 1px solid #222b3a;
  color: #e5e7eb;
  box-shadow: 0 4px 18px rgba(10,132,255,0.09);
}
:root[data-theme="dark"] .skills-title { color: #60aaff; }
:root[data-theme="dark"] .skill-label { color: #e5e7eb; }
:root[data-theme="dark"] .skill-bar-line { background: #222b3a; }
:root[data-theme="dark"] .skill-bar-fill { background: linear-gradient(90deg, #0a84ff 0%, #22c55e 100%); }
:root[data-theme="dark"] .skill-percent { color: #60aaff; }