/* ============================================================
		   BERICHTE-SLIDER – eigene Styles, passen sich dem Theme an
		   ============================================================ */

		/* --- Slider-Wrapper --------------------------------------- */
		.berichte-slider-section {
			margin: 40px 0 50px;
		}

		.slider-outer {
			position: relative;
			background: #111;
			border-radius: 4px;
			overflow: hidden;
			/* Seitenverhältnis 16:9 – passt sich jeder Breite an */
			aspect-ratio: 16 / 9;
			max-height: 580px;
		}

		/* Fallback für Browser ohne aspect-ratio */
		@supports not (aspect-ratio: 16 / 9) {
			.slider-outer::before {
				content: "";
				display: block;
				padding-top: 56.25%;
			}
		}

		/* --- Einzelne Slides -------------------------------------- */
		.slide {
			position: absolute;
			inset: 0;
			opacity: 0;
			transition: opacity 0.6s ease;
			pointer-events: none;
		}
		.slide.active {
			opacity: 1;
			pointer-events: auto;
		}
		.slide img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}

		/* Beschriftung über dem Bild */
		.slide-caption {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 14px 20px;
			background: linear-gradient(transparent, rgba(0,0,0,.65));
			color: #fff;
			font-size: 0.95rem;
			line-height: 1.4;
		}
		.slide-caption strong {
			display: block;
			font-size: 1.05rem;
		}

		/* --- Pfeil-Buttons ---------------------------------------- */
		.slider-btn {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			z-index: 10;
			background: rgba(255,255,255,.18);
			border: 2px solid rgba(255,255,255,.55);
			color: #fff;
			width: 44px;
			height: 44px;
			border-radius: 50%;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: background .25s, border-color .25s;
			font-size: 1.1rem;
			line-height: 1;
		}
		.slider-btn:hover {
			background: rgba(255,255,255,.38);
			border-color: #fff;
		}
		.slider-btn.prev { left: 14px; }
		.slider-btn.next { right: 14px; }

		/* --- Fortschrittsbalken ----------------------------------- */
		.slider-progress {
			position: absolute;
			bottom: 0;
			left: 0;
			height: 3px;
			background: #fff;
			width: 0%;
			transition: width linear;
			z-index: 5;
		}

		/* --- Thumbnail-Leiste ------------------------------------- */
		.thumb-strip {
			display: flex;
			gap: 8px;
			margin-top: 10px;
			overflow-x: auto;
			padding-bottom: 4px;
			scrollbar-width: thin;
			scrollbar-color: #ccc transparent;
		}
		.thumb-strip::-webkit-scrollbar { height: 4px; }
		.thumb-strip::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }

		.thumb-item {
			flex: 0 0 auto;
			width: 90px;
			height: 60px;
			cursor: pointer;
			border-radius: 3px;
			overflow: hidden;
			border: 3px solid transparent;
			transition: border-color .2s, opacity .2s;
			opacity: .65;
			position: relative;
		}
		.thumb-item img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}
		.thumb-item.active {
			border-color: #d4551d;   /* Akzentfarbe – gleiche wie Theme-Buttons */
			opacity: 1;
		}
		.thumb-item:hover:not(.active) {
			opacity: .9;
		}

		/* --- Zähler ----------------------------------------------- */
		.slide-counter {
			position: absolute;
			top: 12px;
			right: 16px;
			background: rgba(0,0,0,.45);
			color: #fff;
			font-size: 0.78rem;
			padding: 3px 9px;
			border-radius: 20px;
			z-index: 5;
			letter-spacing: .03em;
		}

		/* --- Intro-Text über dem Slider --------------------------- */
		.berichte-intro {
			margin-bottom: 28px;
		}
		.berichte-intro h3 {
			font-size: 1.55rem;
			margin-bottom: 10px;
		}

		/* --- Responsive ------------------------------------------- */
		@media (max-width: 767px) {
			.slider-btn {
				width: 36px;
				height: 36px;
				font-size: .9rem;
			}
			.slider-btn.prev { left: 8px; }
			.slider-btn.next { right: 8px; }

			.thumb-item {
				width: 68px;
				height: 46px;
			}

			.slide-caption {
				font-size: 0.82rem;
				padding: 10px 14px;
			}
			.slide-caption strong {
				font-size: 0.9rem;
			}
		}

		@media (max-width: 480px) {
			.thumb-item {
				width: 56px;
				height: 38px;
			}
		}