/* Techboys Jetpack-Ersatz: Formular, Slideshow, Bildvergleich, Tiled Gallery, Lightbox */

/* --- Formular: Grundlayout mit :where(), damit Seiten-CSS immer gewinnt --- */
:where(.tbjp-form) .grunion-field-wrap { margin-bottom: 1.25em; }
:where(.tbjp-form) .grunion-field-label { display: block; font-weight: 600; margin-bottom: .35em; }
:where(.tbjp-form) .grunion-label-required { font-weight: 400; opacity: .6; margin-left: .4em; font-size: .85em; }
:where(.tbjp-form) :is(input.grunion-field:not([type=checkbox]):not([type=radio]), textarea, select) { width: 100%; box-sizing: border-box; }
:where(.tbjp-form) textarea { min-height: 200px; }
:where(.tbjp-form) fieldset { border: 0; margin: 0; padding: 0; }
:where(.tbjp-form) .grunion-radio-options label { display: block; font-weight: 400; }
.tbjp-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.tbjp-form-error { margin: 0 0 1em; padding: .75em 1em; border: 1px solid #e5484d; border-radius: 8px; color: #e5484d; }
.tbjp-form-error[hidden] { display: none; }
.tbjp-form.is-sending button[type=submit] { opacity: .6; pointer-events: none; }
:where(.tbjp-form) .form-message { padding: 1.25em; border: 1px solid currentColor; border-radius: 12px; }
:where(.tbjp-form) .form-message h4 { margin: 0; }

/* --- Slideshow --- */
.wp-block-jetpack-slideshow { position: relative; width: 100%; max-width: 100%; margin: 1.75em 0; }
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_container { position: relative; width: 100%; height: auto; overflow: hidden; border-radius: 12px; content-visibility: visible !important; }
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_swiper-wrapper { display: flex; width: 100%; height: auto; margin: 0; padding: 0; list-style: none; aspect-ratio: var(--aspect-ratio, 3 / 2); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; transform: none !important; }
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_swiper-wrapper::-webkit-scrollbar { display: none; }
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_slide { flex: 0 0 100%; width: 100%; height: 100%; margin: 0; padding: 0; scroll-snap-align: center; list-style: none; }
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_slide::before { content: none; }
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_slide figure { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; background: #0b0f1a; }
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_image { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; border-radius: 0; }
.wp-block-jetpack-slideshow :is(.wp-block-jetpack-slideshow_button-prev, .wp-block-jetpack-slideshow_button-next) { position: absolute; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: -20px 0 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; text-decoration: none; }
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-prev { left: 12px; right: auto; }
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-next { right: 12px; left: auto; }
.wp-block-jetpack-slideshow :is(.wp-block-jetpack-slideshow_button-prev, .wp-block-jetpack-slideshow_button-next)::after { font: 700 22px/1 system-ui, sans-serif !important; }
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-prev::after { content: "\2039" !important; }
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-next::after { content: "\203A" !important; }
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-pause { display: none !important; }
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_pagination { position: absolute; left: 0; right: 0; bottom: 10px; top: auto; z-index: 2; display: flex; justify-content: center; gap: 6px; width: 100%; pointer-events: none; }
.tbjp-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .45); cursor: pointer; pointer-events: auto; }
.tbjp-dot[aria-current=true] { background: #fff; }

/* --- Tiled Gallery --- */
.wp-block-jetpack-tiled-gallery { margin: 1.75em 0; }
.tiled-gallery__gallery { display: flex; flex-wrap: wrap; width: 100%; padding: 0; }
.tiled-gallery__row { display: flex; flex-direction: row; justify-content: center; width: 100%; margin: 0; }
.tiled-gallery__row + .tiled-gallery__row { margin-top: 4px; }
.tiled-gallery__col { display: flex; flex-direction: column; justify-content: center; margin: 0; }
.tiled-gallery__col + .tiled-gallery__col { margin-left: 4px; }
.tiled-gallery__item { position: relative; flex-grow: 1; justify-content: center; margin: 0; padding: 0; overflow: hidden; }
.tiled-gallery__item + .tiled-gallery__item { margin-top: 4px; }
.tiled-gallery__item img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: cover; cursor: zoom-in; }
.has-rounded-corners-8 .tiled-gallery__item { border-radius: 8px; }
@media (max-width: 600px) {
	.tiled-gallery__row { flex-direction: column; }
	.tiled-gallery__col { flex-basis: auto !important; }
	.tiled-gallery__col + .tiled-gallery__col { margin: 4px 0 0; }
}

/* --- Bildvergleich --- */
.wp-block-jetpack-image-compare { margin: 1.75em 0; }
.tbjp-ic { --pos: 50%; position: relative; overflow: hidden; border-radius: 12px; touch-action: pan-y; user-select: none; cursor: ew-resize; }
.tbjp-ic img { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 0; pointer-events: none; }
.tbjp-ic .image-compare__image-before { position: absolute; inset: 0; z-index: 1; height: 100%; object-fit: cover; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.tbjp-ic-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 2; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, .5); }
.tbjp-ic-handle::after { content: "\2039\00a0\203A"; position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: #fff; color: #111; font: 700 18px/1 system-ui, sans-serif; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.tbjp-ic-handle:focus-visible { outline: 2px solid #66fcf1; outline-offset: 2px; }
.tbjp-ic[data-mode=vertical] { cursor: ns-resize; touch-action: pan-x; }
.tbjp-ic[data-mode=vertical] .image-compare__image-before { clip-path: inset(0 0 calc(100% - var(--pos)) 0); }
.tbjp-ic[data-mode=vertical] .tbjp-ic-handle { top: var(--pos); bottom: auto; left: 0; right: 0; width: auto; height: 2px; margin: -1px 0 0; }
.tbjp-ic[data-mode=vertical] .tbjp-ic-handle::after { transform: rotate(90deg); }

/* --- Lightbox --- */
.tbjp-lb { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; background: rgba(5, 8, 16, .94); }
.tbjp-lb img { max-width: 94vw; max-height: 88vh; width: auto; height: auto; border-radius: 6px; }
.tbjp-lb button { position: absolute; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font: 700 24px/1 system-ui, sans-serif; cursor: pointer; }
.tbjp-lb button:hover { background: rgba(255, 255, 255, .25); }
.tbjp-lb .tbjp-lb-close { top: 16px; right: 16px; }
.tbjp-lb .tbjp-lb-prev { left: 16px; top: 50%; margin-top: -22px; }
.tbjp-lb .tbjp-lb-next { right: 16px; top: 50%; margin-top: -22px; }
.tbjp-lb .tbjp-lb-count { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .7); font: 14px/1 system-ui, sans-serif; }
.tbjp-lb-open { overflow: hidden; }