.flugplan-section {
  min-height: 60vh;
  overflow: visible;
}
.flugplan-section-wrapper {
  display: block;
  height: auto;
}








.vertical-path {
  position: relative;
  margin: 0 auto;
  width: 350px;
  padding-left: 20px;
}

.line {
  position: absolute;
  left: 45px;
  top: 30px;
  bottom: 30px;
  width: 3px;
  background: linear-gradient(180deg, #0066cc 0%, #00cc66 100%);
  border-radius: 2px;
}

.path-point {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  position: relative;
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
  scroll-margin-top: 100px;
}

@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
  from { opacity: 0; transform: translateY(20px); }
}

.lesson-icon-wrapper {
  position: relative;
  z-index: 2;
}

.lesson-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  box-shadow: 0 6px 15px rgba(74, 144, 226, 0.3);
  transition: all 0.3s ease;
  position: relative;
  border: 2px solid white;
  flex-shrink: 0;
}

.lesson-icon:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(74, 144, 226, 0.5);
}

.lesson-icon.completed {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  box-shadow: 0 8px 20px rgba(34, 197, 94, 0.4);
}

.lesson-icon.completed:hover {
  box-shadow: 0 10px 30px rgba(34, 197, 94, 0.6);
}

.lesson-icon.just-finished {
  animation: celebrate 2s ease-in-out 5, glow 2s ease-in-out 5;
}

@keyframes celebrate {
  0%, 100% { transform: scale(1) rotate(0deg); }
  10% { transform: scale(1.3) rotate(-10deg); }
  20% { transform: scale(1.3) rotate(10deg); }
  30% { transform: scale(1.3) rotate(-10deg); }
  40% { transform: scale(1.3) rotate(10deg); }
  50% { transform: scale(1.3) rotate(0deg); }
  60% { transform: scale(1.1); }
  80% { transform: scale(1.05); }
}

@keyframes glow {
  0%, 100% { box-shadow: 0 6px 15px rgba(34, 197, 94, 0.3); }
  50% { box-shadow: 0 0 40px rgba(34, 197, 94, 1), 0 0 60px rgba(34, 197, 94, 0.8); }
}

.lesson-icon > i {
  color: white;
  font-size: 22px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.check-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  background: #22c55e;
  border: 2px solid white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(34, 197, 94, 0.4);
  animation: checkPop 0.5s ease;
}

.check-badge i {
  color: white;
  font-size: 11px;
}

@keyframes checkPop {
  0% { transform: scale(0) rotate(-180deg); }
  50% { transform: scale(1.2) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.just-finished .check-badge {
  animation: checkPop 0.5s ease, checkGlow 1.5s ease-in-out;
}

@keyframes checkGlow {
  0%, 100% { box-shadow: 0 3px 10px rgba(34, 197, 94, 0.4); }
  50% { box-shadow: 0 0 30px rgba(34, 197, 94, 1), 0 0 50px rgba(34, 197, 94, 0.8); }
}

.lesson-content {
  flex: 1;
  text-align: left;
}

.lesson-content a {
  text-decoration: none;
  transition: all 0.3s ease;
}

.lesson-content a:hover p {
  color: #667eea !important;
  transform: translateX(5px);
}

.lesson-content p {
  transition: all 0.3s ease;
  line-height: 1.3;
}

.col-lg-5.offset-lg-1 {
  min-height: 100vh;
}

.flugplan-sticky-info {
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
  padding: 30px 0;
  z-index: 10;
  align-self: flex-start;
}

@media (max-width: 991px) {
  .col-lg-5.offset-lg-1 {
    min-height: auto;
  }
  .flugplan-sticky-info {
    position: relative;
    top: 0;
  }
}

/* Consolidated FLUGPLAN styles */
.bg-image-flugplan .bg-image-inner { display:flex; align-items:flex-start; justify-content:center; width:100%; height:100%; padding-top:3rem; }
.bg-image-flugplan .bg-image { max-width:130%; height:auto; opacity:0.25; max-height:90vh; transform:scale(1.3); display:block; }

.flugplan-section { position: relative; z-index: 2; }

.page-alerts { margin-bottom: 1.25rem; }
.page-alerts .alert { background:#ecfdf5; border:1px solid #bbf7d0; color:#065f46; border-radius:8px; padding:12px; box-shadow:0 1px 2px rgba(0,0,0,0.05); text-align:center; margin-bottom:12px; }
.page-alerts .alert strong { margin-right:8px; }

.txt-block.visible { visibility: visible; animation-name: fadeInRight; }



/* Path point defaults moved out of inline attributes */
.path-point-inner { display:flex; align-items:flex-start; gap:1rem; margin-bottom:0.4rem; padding:0.35rem 0; border-bottom:1px solid #e5e7eb; }
.lesson-link { display:flex; align-items:flex-start; gap:1rem; width:100%; text-decoration:none; color:inherit; padding:4px; border-radius:8px; transition: background 180ms ease; }
.lesson-summary { flex:1; min-width:0; }
.lesson-title { color:#1f2937; font-weight:600; margin-bottom:0.1rem; font-size:0.95rem; line-height:1.4; }
.lesson-desc { color:#6b7280; font-size:0.8125rem; margin:0; line-height:1.3; }

/* Keep existing hover from CSS consistent */
.lesson-link:hover { background: rgba(14,165,233,0.06); }


.left-column {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

@media (max-width: 991px) and (orientation: landscape) {
    .left-column {
        padding-top: 30px !important;
    }
}








/* Additional styles moved from blade */
.lesson-link { text-decoration:none; color:inherit; }
.lesson-link { transition: background 180ms ease; }
.lesson-link:hover { background: rgba(14,165,233,0.06); }
.lesson-link:focus { outline: 2px solid rgba(14,165,233,0.12); outline-offset: 3px; }
.lesson-link .lesson-icon { transition: transform 160ms ease; }
.lesson-link:hover .lesson-icon { transform: translateY(-3px); }

/* Locked lesson styles */
.lesson-locked { opacity: 0.55; filter: grayscale(0.6); background: transparent; pointer-events: none; position: relative; }
.lesson-locked .lock-icon {
  position: absolute;
  right: 12px;
  top: 6px;
  font-size: 3.3rem; /* ~3x larger */
  line-height: 1;
  color: #ef4444;
  pointer-events: none;
}

@media (max-width: 768px) {
  .lesson-locked .lock-icon { font-size: 2rem; right: 10px; top: 8px; }
}

/* allow small CTA inside locked block to be clickable (compact) */
.lesson-locked .small-cta { pointer-events: auto; display:inline-block; margin-top:4px; padding:4px 8px; background:#fff; border:1px solid #e5e7eb; border-radius:6px; text-decoration:none; color:#2563eb; font-size:0.8125rem; line-height:1; }

@media (max-width:768px) { .lesson-locked .small-cta { padding:3px 6px; font-size:0.75rem; } }


.path-point-inner.just-finished-row .lesson-summary p { font-weight: 700; }
.lesson-icon.just-finished { position: relative; }




.accordion-item .accordion-content { max-height: 0 !important; overflow: hidden !important; transition: max-height 500ms ease-in-out !important; }
.accordion-item.open .accordion-content { max-height: none !important; }
.accordion-header { cursor: pointer; user-select: none; }
.accordion-item.open .accordion-header { color: #3b82f6 !important; }

.lesson-icon-wrapper { position: relative; width: 46px; height: 46px; min-width: 46px; flex-shrink: 0; }
.lesson-icon { position: relative; z-index: 3; width: 46px; height: 46px; min-width: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; transition: all 300ms ease; }

.lesson-badge { position: absolute; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: bold; border: 2px solid white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); z-index: 20; }
.badge-plus { top: -4px; right: -4px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; }
.badge-plus i { font-size: 0.6rem; }

.lesson-icon.completed { background-color: #10b981; color: white; }
.lesson-icon.pending { background-color: #d1d5db; color: #6b7280; }



/* keep collapse styles (moved from inline) */
.collapsible-content { display: none; max-height: 0; overflow: hidden; transition: max-height 260ms ease; }
.section-point.open .collapsible-content { display: block; max-height: 2000px; }
.section-header { margin-bottom: 12px; }
.section-toggle { background:none; border:0; padding:8px 56px; width:100%; text-align:left; display:flex; align-items:center; gap:12px; cursor:pointer }
.section-title { font-size:1.4rem; margin:0; font-weight:600; }

.highlight-last-lesson { animation: pulse-highlight 1.5s 2; box-shadow: 0 0 0 4px #10b98155; border-radius: 16px; }
@keyframes pulse-highlight { 0% { box-shadow: 0 0 0 0 #10b98155; } 50% { box-shadow: 0 0 0 12px #10b98122; } 100% { box-shadow: 0 0 0 0 #10b98155; } }

/* Background image container (moved from blade) */
.bg-image-flugplan { position: fixed; top: 120px; right: -10%; width: 60%; height: calc(100vh - 120px); z-index: 1; pointer-events: none; display: none; overflow: hidden; }

/* Small utility: responsive left margin for cbox-2 text column */
.cbox-2-txt--ml { margin-left: 1rem; }
@media (max-width: 768px) {
  .cbox-2-txt--ml { margin-left: 0.5rem; }
}
@media (min-width: 1200px) {
  .cbox-2-txt--ml { margin-left: 1.25rem; }
}
@media (min-width: 768px) { .bg-image-flugplan { display: block; } }