/* Koken Slideshow – v1.2.0 */
.ks-slideshow {
	--ks-bg: transparent;
	--ks-ui: #fff;
	--ks-ui-bg: rgba(0, 0, 0, .35);
	--ks-ui-bg-hover: rgba(0, 0, 0, .6);
	--ks-dot: rgba(128, 128, 128, .45);
	--ks-dot-active: currentColor;
	--ks-thumb-h: 64px;
	--ks-speed: 600ms;
	position: relative;
	width: 100%;
	margin: 0 auto;
	user-select: none;
	-webkit-user-select: none;
}

.ks-stage {
	position: relative;
	width: 100%;
	aspect-ratio: var(--ks-aspect, 3 / 2);
	overflow: hidden;
	background: var(--ks-bg);
	touch-action: pan-y;
}

.ks-slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
}
.ks-slide.is-active { opacity: 1; visibility: visible; z-index: 2; }
.ks-slide.is-leaving { visibility: visible; z-index: 1; }

.ks-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	opacity: 0;
	transition: opacity .3s ease;
}
.ks-slide img.is-loaded { opacity: 1; }
.ks-fit-cover .ks-slide img { object-fit: cover; }

/* Fade */
.ks-fx-fade .ks-slide { transition: opacity var(--ks-speed) ease, visibility 0s linear var(--ks-speed); }
.ks-fx-fade .ks-slide.is-active { transition: opacity var(--ks-speed) ease, visibility 0s; }

/* Slide */
.ks-fx-slide .ks-slide { opacity: 1; }
.ks-fx-slide .ks-slide.is-animating { transition: transform var(--ks-speed) cubic-bezier(.4, 0, .2, 1); }

/* Ladeindikator */
.ks-slide::before {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 28px; height: 28px;
	margin: -14px 0 0 -14px;
	border: 2px solid var(--ks-dot);
	border-top-color: transparent;
	border-radius: 50%;
	animation: ks-spin .8s linear infinite;
}
.ks-slide.is-loaded::before { display: none; }
@keyframes ks-spin { to { transform: rotate(360deg); } }

/* Titel / Caption */
.ks-caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 4;
	padding: 2.4em 20px .9em;
	color: #fff;
	font-size: .9em;
	line-height: 1.4;
	background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .55));
	pointer-events: none;
}
.ks-caption:empty { display: none; }
.ks-caption-title, .ks-caption-text { display: block; }
.ks-caption-text { color: rgba(255, 255, 255, .8); }
.ks-caption-title + .ks-caption-text { margin-top: .2em; font-size: .92em; }

/* Buttons – Stil wie im Grid-Embed-Plugin (Theme-Button-Stile werden neutralisiert) */
.ks-slideshow .ks-btn {
	position: absolute;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 4px !important;
	background: rgba(0, 0, 0, .32) !important;
	box-shadow: none !important;
	color: #fff;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: background-color .15s ease, opacity .3s ease;
	-webkit-appearance: none;
	appearance: none;
}
/* nur bei Mausbewegung sichtbar (blendet nach kurzer Ruhe aus); auf Touch-Geräten immer */
.ks-slideshow.ks-ui-on .ks-btn,
.ks-slideshow.ks-touch .ks-btn,
.ks-slideshow .ks-btn:focus-visible { opacity: 1; pointer-events: auto; }
.ks-slideshow.ks-ui-on .ks-stage { cursor: default; }
.ks-slideshow.is-fullscreen:not(.ks-ui-on) .ks-stage { cursor: none; }
.ks-slideshow .ks-btn:focus { outline: none; }
.ks-slideshow .ks-btn:active, .ks-slideshow .ks-btn:focus-visible { background: rgba(0, 0, 0, .7) !important; }
.ks-slideshow .ks-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
@media (hover: hover) { .ks-slideshow .ks-btn:hover { background: rgba(0, 0, 0, .7) !important; } }
.ks-btn svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ks-btn svg.ks-chevron { width: 25px; height: auto; fill: #fff; stroke: none; }

.ks-slideshow .ks-prev, .ks-slideshow .ks-next { top: 50%; width: 40px; height: 50px; margin-top: -25px; }
.ks-slideshow .ks-prev { left: 20px; }
.ks-slideshow .ks-next { right: 20px; }
.ks-slideshow.is-fullscreen .ks-prev { left: 30px; }
.ks-slideshow.is-fullscreen .ks-next { right: 30px; }

.ks-toolbar {
	position: absolute;
	z-index: 5;
	top: 15px; right: 20px;
	display: flex;
	gap: 8px;
}
.ks-slideshow .ks-toolbar .ks-btn { position: static; width: 35px; height: 35px; }
.ks-play .ks-i-pause, .is-playing .ks-play .ks-i-play { display: none; }
.is-playing .ks-play .ks-i-pause { display: block; }
.ks-fs .ks-i-exit, .is-fullscreen .ks-fs .ks-i-enter { display: none; }
.is-fullscreen .ks-fs .ks-i-exit { display: block; }

@media (max-width: 768px) {
	.ks-slideshow .ks-btn { background: rgba(0, 0, 0, .75) !important; }
	.ks-slideshow .ks-prev, .ks-slideshow.is-fullscreen .ks-prev { left: 8px; }
	.ks-slideshow .ks-next, .ks-slideshow.is-fullscreen .ks-next { right: 8px; }
	.ks-toolbar { top: 8px; right: 8px; }
}

/* Dots – immer eine Zeile; bei sehr vielen Bildern wandert die Reihe mit */
.ks-dots {
	--ks-dot: #c4c4c4;
	--ks-dot-active: #000;
	position: relative;
	display: flex;
	justify-content: center;
	padding: 10px 0 0;
	overflow: hidden;
}
.ks-dots-track {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	transition: transform .35s ease;
}
.ks-dots.is-overflowing { justify-content: flex-start; }
.ks-dots.is-overflowing:not(.at-start):not(.at-end) {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.ks-dots.is-overflowing.at-start:not(.at-end) {
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
	mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
.ks-dots.is-overflowing.at-end:not(.at-start) {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 40px);
	mask-image: linear-gradient(90deg, transparent, #000 40px);
}
.ks-slideshow .ks-dots button {
	flex: 0 0 auto;
	display: block;
	width: 14px !important;
	min-width: 0 !important;
	height: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	cursor: pointer;
}
.ks-dots button::before {
	content: "";
	display: block;
	width: 7px; height: 7px;
	margin: auto;
	border-radius: 50%;
	background: var(--ks-dot);
	transition: background-color .2s, transform .2s;
}
@media (hover: hover) { .ks-dots button:hover::before { background: #888; } }
.ks-dots button.is-active::before { background: var(--ks-dot-active); transform: scale(1.15); }
.ks-dots button:focus { outline: none; }
.ks-dots button:focus-visible::before { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #000; }
.ks-slideshow.is-fullscreen .ks-dots { --ks-dot: rgba(255, 255, 255, .35); --ks-dot-active: #fff; }

/* Thumbnails */
.ks-thumbs {
	display: flex;
	gap: 6px;
	padding: 10px 0 2px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: thin;
}
.ks-slideshow .ks-thumbs button {
	flex: 0 0 auto;
	height: var(--ks-thumb-h);
	min-width: 0;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: var(--ks-dot);
	cursor: pointer;
	opacity: .5;
	transition: opacity .2s;
	outline-offset: -2px;
}
.ks-thumbs button:hover { opacity: .85; }
.ks-thumbs button.is-active { opacity: 1; }
.ks-thumbs img { display: block; height: 100%; width: auto; }

/* Vollbild */
.ks-slideshow.is-fullscreen {
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	padding: 0;
	background: #000;
	color: #fff;
}
.ks-slideshow.is-fullscreen .ks-stage { flex: 1 1 auto; aspect-ratio: auto; height: auto; min-height: 0; }
.ks-slideshow.is-fullscreen .ks-slide img { object-fit: contain; }
.ks-slideshow.is-fullscreen .ks-thumbs { padding: 8px; justify-content: safe center; }
.ks-slideshow.is-fullscreen .ks-dots { padding-bottom: 8px; }
/* Fallback für iOS (keine Fullscreen-API für Elemente) */
.ks-slideshow.is-pseudo-fullscreen { position: fixed; inset: 0; z-index: 99999; }

/* Template-Quellelemente ausblenden */
.ks-slideshow > .ks-source { display: none; }

@media (prefers-reduced-motion: reduce) {
	.ks-slideshow { --ks-speed: 1ms; }
}

/* Copyright-Hinweis bei Rechtsklick (Stil wie Grid-Embed) */
.ks-slide img { -webkit-touch-callout: none; }
.ks-note { position: fixed; z-index: 2147483600; box-sizing: border-box; max-width: 280px; margin: 0; padding: 9px 16px 10px; border-radius: 4px; background: rgba(228, 228, 228, .88); color: #6f6f6f; font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: center; pointer-events: none; animation: ks-note-in .15s ease both; }
.ks-note span { display: block; }
.ks-note::before { content: ""; position: absolute; top: -6px; left: var(--ks-note-arrow, 50%); margin-left: -6px; border: 6px solid transparent; border-top: 0; border-bottom-color: rgba(228, 228, 228, .88); }
.ks-note.ks-note--above::before { top: auto; bottom: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: rgba(228, 228, 228, .88); }
.koken_image_protect_context_menu { z-index: 2147483600 !important; }
@keyframes ks-note-in { from { opacity: 0; } to { opacity: 1; } }