/* Lektion fürs Leben Section - Neue Struktur
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#lektion {
	background: #1565c0;
	min-height: 100vh;
	display: flex;
	flex-direction: columns;
	position: relative;
	padding: 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        width: 100%;
}

/* Section Header - Fixed oben */
.section-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    gap: 1rem;
    position: relative;
    z-index: 100;
    background: #1565c0;;
    padding: 20px 0 0 0;
    text-align: center;
}

.section-header h2 {
	font-size: 3em;
	margin-top: 120px;
	margin-bottom: 20px;
	color: white;
	text-align: center;
}

/* Scrollable Lessons Container */
.lessons-container {
	flex: 1;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	display: flex;
	flex-direction: row;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	height: calc(100vh - 200px); /* Abzüglich Header-Höhe */
}

.lessons-container::-webkit-scrollbar {
	display: none;
}

.horizontal-scrolling {
	flex: 0 0 100%;
	scroll-snap-align: start;
	display: inline-block;
	white-space: normal;
	height: 100%;
	box-sizing: border-box;
	position: relative;
}

.horizontal-scrolling .content .col-inner {
	text-align: center;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 4vw;
	justify-content: center;
	align-items: center;
	max-width: 900px;
	margin: 0 auto;
}

.horizontal-scrolling .content .col-inner h3 {
	font-size: 2.5rem;
	color: white;
	margin-bottom: 2rem;
	text-align: center;
}

.horizontal-scrolling .content .col-inner p {
	display: block;
	color: white;
	font-size: 20px;
	line-height: 1.6;
	text-align: center;
	margin-bottom: 1.5rem;
	max-width: 100%;
}

/* Scroll Navigation Buttons */
.scroll-navigation {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 200;
	background-color: #005a87;	
        border: none;
	color: white;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	backdrop-filter: blur(5px);
}

.scroll-navigation:hover {
	background: rgba(0, 0, 0, 0.8);
	transform: translateY(-50%) scale(1.1);
}

.scroll-navigation:active {
	transform: translateY(-50%) scale(0.95);
}

.scroll-prev {
	left: 20px;
}

.scroll-next {
	right: 20px;
}

.scroll-navigation:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	background: rgba(0, 0, 0, 0.3);
}

.scroll-navigation:disabled:hover {
	transform: translateY(-50%);
	background: rgba(0, 0, 0, 0.3);
}

.lesson-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Lesson Counter */
.lesson-counter {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.6);
	color: white;
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 0.9em;
	backdrop-filter: blur(5px);
	z-index: 200;
}

.section-header h2,
.section-header button,
.lesson-counter {
  color: #fff; 
  background-color: #00334d; 
  font-weight: bold;
}