/**
 * Griffig V2 Player Styles
 *
 * @package Griffig_Player
 */

/* Remove any default browser styles - Maximum specificity */
.griffig-player-wrapper button,
.griffig-player-wrapper select,
div.griffig-player-wrapper button,
div.griffig-player-wrapper select,
.griffig-player-wrapper .gp-control-bar button,
.griffig-player-wrapper .gp-control-bar select {
	outline: none !important;
	-webkit-tap-highlight-color: transparent !important;
	display: block !important;
	visibility: visible !important;
}

/* Force all buttons to be visible (except settings-btn which has its own show/hide logic) */
.griffig-player-wrapper button[type="button"]:not(.gp-settings-btn),
.griffig-player-wrapper .gp-control-bar button[type="button"]:not(.gp-settings-btn),
div.griffig-player-wrapper button[type="button"]:not(.gp-settings-btn) {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: auto !important;
	height: auto !important;
	min-width: 28px !important;
	min-height: 28px !important;
}

.griffig-player-wrapper button:focus,
.griffig-player-wrapper select:focus {
	outline: none !important;
	box-shadow: none !important;
}

/* Main Wrapper */
.griffig-player-wrapper {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	overflow-x: hidden; /* verhindert horizontalen Overflow */
}

.griffig-player-wrapper *,
.griffig-player-wrapper *::before,
.griffig-player-wrapper *::after {
	box-sizing: border-box;
}

/* Chapters Container */
.gp-chapters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 15px;
}

.gp-chapter-button,
button.gp-chapter-button,
.gp-chapters .gp-chapter-button {
	display: inline-block;
	padding: 8px 16px;
	border: none !important;
	background: #A9B29A;
	color: #fff !important;
	cursor: pointer;
	transition: all 0.3s ease;
	border-radius: 3px;
}


.gp-chapter-button:hover,
button.gp-chapter-button:hover,
.gp-chapters .gp-chapter-button:hover {
	background: #A9B29A;
	color: #fff !important;
}

.gp-chapter-button.active,
button.gp-chapter-button.active,
.gp-chapters .gp-chapter-button.active {
	background: #738D60 !important;
	color: #fff !important;
	border-color: transparent !important;
}

.gp-chapter-button.active:hover,
button.gp-chapter-button.active:hover,
.gp-chapters .gp-chapter-button.active:hover {
	background: #738D60 !important;
	color: #fff !important;
}

/* Loops Container */
.gp-loops {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
	margin-bottom: 12px;
	/* Bereich samt Abstand kann komplett einklappen */
	overflow: hidden;
	min-height: 0;
	max-height: 0; /* collapsed by default */
	opacity: 0;
	transform: translateY(-4px);
	/* etwas länger und weicher für smootheres Ein-/Ausklappen */
	transition: max-height 650ms ease-in-out, opacity 650ms ease-in-out, transform 650ms ease-in-out;
	will-change: max-height, opacity, transform;
	position: relative; /* Keep position stable */
}

/* Saved custom loops list spacing matches other button rows */
.gp-saved-loops {
    display: flex;
    flex-wrap: wrap;
    gap: 6px; /* reduced horizontal spacing */
    margin-bottom: 15px;
}

.gp-loops.open {
	max-height: 240px; /* genug Platz für mehrere Button-Zeilen */
	opacity: 1;
	transform: translateY(0);
}

.gp-loop-button,
button.gp-loop-button,
.gp-loops .gp-loop-button {
	display: inline-block;
	padding: 8px 16px;
	border: none !important;
	background: #E8C56A !important;
	color: #fff !important;
	cursor: pointer;
	transition: all 0.3s ease, opacity 400ms ease-in-out;
    border-radius: 3px;
	opacity: 1;
}

.gp-loop-button:hover,
button.gp-loop-button:hover,
.gp-loops .gp-loop-button:hover {
	background: #E8C56A !important;
	color: #fff !important;
}

.gp-loop-button.active,
button.gp-loop-button.active,
.gp-loops .gp-loop-button.active {
	background: #DCAE45 !important;
	background-color: #DCAE45 !important;
	color: #fff !important;
	border-color: transparent !important;
}

/* Saved loop button with inline X — always grey regardless of container */
.gp-saved-loop-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #A7A7A7 !important;
    color: #fff !important;
}

.gp-saved-loop-btn:hover {
    background: #A7A7A7 !important;
    color: #fff !important;
}

.gp-saved-loop-btn.active {
    background: #757575 !important;
    color: #fff !important;
}

.gp-saved-loop-btn.active:hover {
    background: #757575 !important;
    color: #fff !important;
}

.gp-saved-loop-btn .gp-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 2px;
    color: #fff;
    opacity: 0.9;
}

.gp-saved-loop-btn .gp-close:hover {
    opacity: 1;
}

/* Saved (custom) loop buttons in greys */
.gp-saved-loops .gp-loop-button,
.gp-saved-loops button.gp-loop-button {
    background: #A7A7A7 !important;
    color: #fff !important;
}

.gp-saved-loops .gp-loop-button:hover,
.gp-saved-loops button.gp-loop-button:hover {
    background: #A7A7A7 !important;
    color: #fff !important;
}

.gp-saved-loops .gp-loop-button.active,
.gp-saved-loops button.gp-loop-button.active {
    background: #757575 !important;
    color: #fff !important;
}

.gp-saved-loops .gp-loop-button.active:hover,
.gp-saved-loops button.gp-loop-button.active:hover {
    background: #757575 !important;
    color: #fff !important;
}

/* BUG 5 FIX: Custom/saved loop buttons are always grey — never yellow.
   Uses .griffig-player-wrapper scope to beat button.gp-loop-button:hover (0,2,1)
   with a higher-specificity (0,3,1) rule. Covers both inline and fullscreen contexts. */
.griffig-player-wrapper button.gp-saved-loop-btn,
.griffig-player-wrapper button.gp-saved-loop-btn:hover,
.griffig-player-wrapper button.gp-saved-loop-btn:focus,
.griffig-player-wrapper button.gp-saved-loop-btn:active {
    background: #A7A7A7 !important;
    color: #fff !important;
}

.griffig-player-wrapper button.gp-saved-loop-btn.active,
.griffig-player-wrapper button.gp-saved-loop-btn.active:hover,
.griffig-player-wrapper button.gp-saved-loop-btn.active:focus,
.griffig-player-wrapper button.gp-saved-loop-btn.active:active {
    background: #757575 !important;
    color: #fff !important;
}

/* Custom loop A/B overlay in grey */
.gp-ab-range.is-custom .gp-ab-range-fill {
    background: #A7A7A7;
    opacity: 0.6;
}

.gp-ab-range.is-custom .gp-ab-handle {
    background: #A7A7A7;
}

.gp-loop-button.active:hover,
button.gp-loop-button.active:hover,
.gp-loops .gp-loop-button.active:hover {
	background: #DCAE45 !important;
	background-color: #DCAE45 !important;
	color: #fff !important;
}

.gp-loop-button.active:focus,
button.gp-loop-button.active:focus,
.gp-loops .gp-loop-button.active:focus {
	background: #DCAE45 !important;
	background-color: #DCAE45 !important;
	color: #fff !important;
	border-color: transparent !important;
}

.gp-loop-button.active:active,
button.gp-loop-button.active:active,
.gp-loops .gp-loop-button.active:active {
	background: #DCAE45 !important;
	background-color: #DCAE45 !important;
	color: #fff !important;
	border-color: transparent !important;
}

/* Video Container - 16:9 aspect ratio, responsive to both width and height */
.gp-video-wrap {
	position: relative;
	width: min(100%, calc(100vh * 16 / 9));
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
	border-radius: 8px;
}

.gp-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* Maintain fixed height when poster image is set */
.gp-video-wrap[data-fixed-height] {
	width: 100%; /* override min() for explicit height mode */
	height: var(--gp-fixed-height, auto);
	aspect-ratio: unset;
	min-height: var(--gp-fixed-height, auto);
}

/* When fixed height is set, use cover to fill the space */
.gp-video-wrap[data-fixed-height] .gp-video {
	object-fit: cover;
}

/* Chapter Tooltip */
.gp-chapter-tooltip {
	position: absolute;
	background: rgba(128, 128, 128, 0.9); /* Grauton wie Bedienleiste */
	color: #F0E8DF;
	padding: 8px 14px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	pointer-events: none;
	z-index: 3001;
	transform: translateX(-50%);
	bottom: calc(100% + 5px); /* Oberhalb der Timeline */
	top: auto;
	display: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Progress Bar */
.gp-progress-container {
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
    width: 100%;
    height: 12px;
    box-sizing: border-box;
    padding: 3px 0;
    background: transparent;
    cursor: pointer;
    z-index: 11;
    display: block !important;
    visibility: visible !important;
    overflow: visible !important;
}
.gp-progress-bar {
    position: relative;
    height: 100%;
    width: 100%;
    background: rgba(80, 80, 80, 0.9);
    border-radius: 999px;
    overflow: hidden;
}
.gp-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: #ffffff !important;
    z-index: 3 !important;
    will-change: width;
    transition: width 0.1s linear;
}
.gp-chapter-range {
    position: absolute;
    top: 0;
    height: 100%;
    background-color: rgb(115, 141, 96) !important;
    opacity: 1 !important;
    z-index: 2 !important;
    pointer-events: none;
    border-radius: 999px;
}
.gp-ab-range {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    pointer-events: none;
    z-index: 900;
}
.gp-ab-range-fill {
    position: absolute;
    top: 0;
    height: 100%;
    background: #DCAE45;
    opacity: 0.6;
    pointer-events: none;
}
.gp-ab-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: #DCAE45;
    border: 1px solid #ffffff55;
    border-radius: 50%;
    cursor: ew-resize;
    pointer-events: auto;
    z-index: 1001;
}
.gp-loop-range {
    position: absolute;
    top: 3px;
    bottom: 3px;
    height: auto;
    background: #64C864;
    opacity: 0 !important;
    pointer-events: none;
    z-index: 2;
}
.gp-active-loop-range {
    position: absolute;
    top: 3px;
    bottom: 3px;
    height: auto;
    background: #DCAE45;
    opacity: 0.7;
    pointer-events: none;
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.gp-active-loop-range.is-custom {
    background: #A7A7A7;
}
/* Loop-Markierungen auf Progress-Bar-Höhe (6px) zentrieren */
.gp-ab-range,
.gp-ab-range-fill,
.gp-loop-range,
.gp-active-loop-range,
.gp-loop-range-fill,
.gp-saved-loop-range,
.gp-saved-loop-fill {
    height: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
.gp-loop-handles {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2001;
}
.gp-loop-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: #DCAE45;
    border: 2px solid #ffffff;
    border-radius: 50%;
    cursor: ew-resize;
    pointer-events: auto;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    z-index: 2002;
}
.gp-loop-handle.is-custom {
    background: #A7A7A7;
}
.gp-progress-scrubber {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #F0E8DF !important;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(240, 232, 223, 0.8) !important;
    z-index: 3000 !important;
    cursor: pointer;
    pointer-events: auto;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.gp-progress-marker {
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    height: 6px;
    width: 2px;
    background: rgba(255, 255, 255, 0.8) !important;
    z-index: 5;
    cursor: pointer;
    pointer-events: auto;
}
.gp-progress-marker.active {
    background: rgba(255, 255, 255, 0.8) !important;
}

/* Play/Pause Overlay Icon (YouTube style) */
.gp-play-pause-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 200;
	pointer-events: none;
	display: none;
}

.gp-play-pause-icon {
	width: 80px;
	height: 80px;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(4px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.gp-play-pause-icon svg {
	width: 40px;
	height: 40px;
	fill: white;
}

.gp-play-pause-icon .gp-pause-icon {
	display: none;
}

.gp-play-pause-icon .gp-play-icon {
	display: block;
	margin-left: 4px; /* Slight offset for visual centering */
}

/* Loading Spinner */
.gp-loading-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	background: rgba(0, 0, 0, 0.7);
	border-radius: 50%;
}

.gp-spinner-icon {
	width: 40px;
	height: 40px;
	color: #fff;
	animation: gp-spin 1s linear infinite;
}

.gp-spinner-path {
	stroke-dasharray: 90, 150;
	stroke-dashoffset: 0;
	animation: gp-spinner-dash 1.5s ease-in-out infinite;
}

@keyframes gp-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes gp-spinner-dash {
	0% {
		stroke-dasharray: 1, 150;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -35;
	}
	100% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -124;
	}
}

/* Control Bar - Overlay über dem Video */
.griffig-player-wrapper .gp-control-bar,
div.griffig-player-wrapper .gp-control-bar {
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 12px 20px !important;
	background: transparent !important;
	z-index: 20 !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: 100% !important;
	height: auto !important;
	min-height: 60px !important;
	box-sizing: border-box !important;
}

/* ── Mobile/Desktop Sichtbarkeit ────────────────────────────────────────── */

/* Desktop-only: auf Mobile ausgeblendet */
.griffig-desktop-only {
	display: block;
}

/* Mobile-only: auf Desktop ausgeblendet */
.griffig-mobile-only {
	display: none !important;
}

/* Dropdown-Buttons: Breite auto, Höhe/Schrift wie Control-Bar (übersteuert gp-control-btn 32px-Regel) */
div.griffig-player-wrapper .gp-mobile-chapters-btn,
div.griffig-player-wrapper .gp-mobile-loops-btn {
	width: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 4px 12px !important;
	font-size: 14px !important;
	white-space: nowrap;
	height: auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	align-self: center !important;
}

.gp-mobile-btn-arrow {
	display: inline-block;
	transition: transform 0.2s ease;
}

/* Panels: absolut innerhalb gp-video-wrap, über Control Bar, kein eigener Hintergrund */
.gp-mobile-chapters-panel,
.gp-mobile-loops-panel {
	position: absolute;
	bottom: 70px;
	left: 0;
	right: 0;
	background: none;
	padding: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-height: 45vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	z-index: 1600;
}

/* ── Fake Fullscreen (Mobile/iOS) ────────────────────────────────────────── */
.griffig-fake-fullscreen {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100dvh !important;
	z-index: 99999 !important;
	background: #000 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

/* gp-video-wrap aus dem normalen Fluss nehmen → füllt den gesamten Container */
.griffig-fake-fullscreen .gp-video-wrap {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: unset !important;
}

/* Video zentriert, Seitenverhältnis erhalten, kein Beschnitt */
.griffig-fake-fullscreen .gp-video {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
}

/* Mobile: Fake Fullscreen mit dvh für Adressleiste, contain ohne Beschnitt */
@media (max-width: 767px) {
	.griffig-fake-fullscreen {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: 100vw !important;
		height: 100vh !important; /* Fallback */
		height: 100svh !important; /* small viewport height: berücksichtigt Browser-UI */
		z-index: 99999 !important;
		background: #000 !important;
	}

	.griffig-fake-fullscreen .gp-video-wrap {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100vw !important;
		height: calc(100vh - 60px) !important; /* Fallback */
		height: calc(100svh - 60px) !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.griffig-fake-fullscreen .gp-video {
		width: 100% !important;
		height: 100% !important;
		object-fit: contain !important;
	}
}

/* Mobile Querformat: Video nutzt volle Bildschirmhöhe, Control Bar schwebt als Overlay */
@media (max-width: 767px) and (orientation: landscape) {
	.griffig-fake-fullscreen .gp-video-wrap {
		height: 100svh !important;
		width: 100vw !important;
	}

	.griffig-fake-fullscreen .gp-control-bar {
		position: absolute !important;
		bottom: 0 !important;
		left: 0 !important;
		width: 100% !important;
		background: rgba(0,0,0,0.6) !important;
		z-index: 100 !important;
	}

	.griffig-fake-fullscreen .gp-progress-container {
		position: absolute !important;
		bottom: 60px !important;
		left: 0 !important;
		width: 100% !important;
		z-index: 100 !important;
	}
}

/* ── Fullscreen Layout ───────────────────────────────────────────────────── */
/* Use both :fullscreen pseudo-class AND JS-toggled class for max reliability */

/* Höhere Spezifität (0,2,1) durch body-Prefix – gewinnt über Mobile-Query-Regel
   (.griffig-player-wrapper:not(.griffig-fake-fullscreen) { display:block }) die
   ebenfalls 0,2,0 hat aber später im File steht. */
body .griffig-player-wrapper:fullscreen,
body .griffig-player-wrapper:-webkit-full-screen,
body .griffig-player-wrapper.gp-is-fullscreen {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: stretch !important;
	width: 100% !important;
	height: 100% !important;
	background: #000 !important;
}

.griffig-player-wrapper:fullscreen,
.griffig-player-wrapper:-webkit-full-screen,
.griffig-player-wrapper:-moz-full-screen,
.griffig-player-wrapper:-ms-fullscreen,
.griffig-player-wrapper.gp-is-fullscreen {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	height: 100% !important;
	background: #000 !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden !important;
}

/* Video-wrap füllt den gesamten Fullscreen — Control Bar und Timeline sind Overlays darin */
.griffig-player-wrapper:fullscreen .gp-video-wrap,
.griffig-player-wrapper:-webkit-full-screen .gp-video-wrap,
.griffig-player-wrapper:-moz-full-screen .gp-video-wrap,
.griffig-player-wrapper:-ms-fullscreen .gp-video-wrap,
.griffig-player-wrapper.gp-is-fullscreen .gp-video-wrap {
	flex: 1 1 0 !important;
	min-height: 0 !important;
	height: 100% !important;
	padding-bottom: 0 !important;
	border-radius: 0 !important;
	overflow: hidden !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.griffig-player-wrapper:fullscreen .gp-video,
.griffig-player-wrapper:-webkit-full-screen .gp-video,
.griffig-player-wrapper:-moz-full-screen .gp-video,
.griffig-player-wrapper:-ms-fullscreen .gp-video,
.griffig-player-wrapper.gp-is-fullscreen .gp-video {
	object-fit: contain !important;
	width: 100% !important;
	height: 100% !important;
	max-height: 100% !important;
}

/* Progress bar im Fullscreen: bleibt Overlay innerhalb video-wrap */
.griffig-player-wrapper:fullscreen .gp-progress-container,
.griffig-player-wrapper:-webkit-full-screen .gp-progress-container,
.griffig-player-wrapper:-moz-full-screen .gp-progress-container,
.griffig-player-wrapper:-ms-fullscreen .gp-progress-container,
.griffig-player-wrapper.gp-is-fullscreen .gp-progress-container {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	z-index: 100 !important;
	height: 12px !important;
}

/* Control bar im Fullscreen: bleibt Overlay innerhalb video-wrap */
/* z-index: 101 (> progress-container z-index:100) damit das settings-popup nicht überlagert wird */
.griffig-player-wrapper:fullscreen .gp-control-bar,
.griffig-player-wrapper:-webkit-full-screen .gp-control-bar,
.griffig-player-wrapper:-moz-full-screen .gp-control-bar,
.griffig-player-wrapper:-ms-fullscreen .gp-control-bar,
.griffig-player-wrapper.gp-is-fullscreen .gp-control-bar,
.griffig-fake-fullscreen .gp-control-bar {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: 100% !important;
	height: auto !important;
	min-height: 60px !important;
	background: rgba(0, 0, 0, 0.6) !important;
	z-index: 101 !important;
}

/* Hide chapter row, predefined loops, saved-loops rows in fullscreen */
/* (chapters/loops shown via the overlay inside gp-video-wrap instead) */
.griffig-player-wrapper:fullscreen .gp-chapters,
.griffig-player-wrapper:-webkit-full-screen .gp-chapters,
.griffig-player-wrapper:-moz-full-screen .gp-chapters,
.griffig-player-wrapper:-ms-fullscreen .gp-chapters,
.griffig-player-wrapper.gp-is-fullscreen .gp-chapters,
.griffig-player-wrapper:fullscreen .gp-loops,
.griffig-player-wrapper:-webkit-full-screen .gp-loops,
.griffig-player-wrapper:-moz-full-screen .gp-loops,
.griffig-player-wrapper:-ms-fullscreen .gp-loops,
.griffig-player-wrapper.gp-is-fullscreen .gp-loops,
.griffig-player-wrapper:fullscreen .gp-saved-loops,
.griffig-player-wrapper:-webkit-full-screen .gp-saved-loops,
.griffig-player-wrapper:-moz-full-screen .gp-saved-loops,
.griffig-player-wrapper:-ms-fullscreen .gp-saved-loops,
.griffig-player-wrapper.gp-is-fullscreen .gp-saved-loops {
	display: none !important;
}

/* Control Left - Maximum specificity */
.griffig-player-wrapper .gp-control-left,
.griffig-player-wrapper .gp-control-bar .gp-control-left,
div.griffig-player-wrapper .gp-control-left {
	display: flex !important;
	align-items: center !important;
	gap: 15px !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: auto !important;
	height: auto !important;
	flex: 1 1 auto !important;
}

.gp-abloop-controls {
    display: flex !important;
    align-items: center;
    gap: 8px;
    visibility: visible !important;
    background: rgba(80, 80, 80, 0.6);
    border-radius: 8px;
    height: 32px;
    padding: 0 8px;
    box-sizing: border-box;
}

/* Buttons innerhalb A/B-Loop Controls: kein eigener Hintergrund */
.gp-abloop-controls button,
.gp-abloop-controls .gp-control-btn,
.gp-abloop-controls .gp-ab-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.gp-abloop-controls button:hover,
.gp-abloop-controls button:focus,
.gp-abloop-controls button:active,
.gp-abloop-controls .gp-control-btn:hover,
.gp-abloop-controls .gp-control-btn:focus,
.gp-abloop-controls .gp-control-btn:active {
    background: transparent !important;
    box-shadow: none !important;
}

.gp-ab-btn {
    width: 28px;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    box-sizing: border-box !important;
    line-height: 32px;
    border-radius: 3px;
    padding: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    visibility: visible !important;
    opacity: 1 !important;
    color: #F0E8DF !important;
}

/* A/B buttons show grey background when their point is set */
.gp-ab-btn.active,
.gp-ab-btn:active {
	background: #888 !important;
	color: #fff !important;
	height: 32px !important;
	min-height: 32px !important;
	max-height: 32px !important;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
}

/* BUG 4 FIX: high-specificity override so .gp-control-bar .gp-control-btn transparent rule
   (specificity 0,3,0) does not cancel the active state (specificity 0,2,0) */
.griffig-player-wrapper .gp-control-bar .gp-ab-btn {
	height: 32px !important;
	min-height: 32px !important;
	max-height: 32px !important;
	box-sizing: border-box !important;
}
.griffig-player-wrapper .gp-control-bar .gp-ab-btn.active,
.griffig-player-wrapper .gp-control-bar .gp-ab-btn.active:hover,
.griffig-player-wrapper .gp-control-bar .gp-ab-btn.active:focus,
.griffig-player-wrapper .gp-control-bar .gp-ab-btn.active:active {
	background: #888 !important;
	color: #fff !important;
	height: 32px !important;
	min-height: 32px !important;
	max-height: 32px !important;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
}

.gp-abloop-times {
    color: #F0E8DF;
    font-size: 12px;
}

/* Control Right - Maximum specificity */
.griffig-player-wrapper .gp-control-right,
.griffig-player-wrapper .gp-control-bar .gp-control-right,
div.griffig-player-wrapper .gp-control-right {
	display: flex !important;
	align-items: center !important;
	gap: 15px !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: auto !important;
	height: auto !important;
	flex: 0 0 auto !important;
	position: relative !important;
}

/* Control Buttons - Maximum specificity */
.griffig-player-wrapper .gp-control-btn,
.griffig-player-wrapper .gp-control-bar .gp-control-btn,
.griffig-player-wrapper button.gp-control-btn,
div.griffig-player-wrapper .gp-control-btn {
	background: rgba(80, 80, 80, 0.6) !important;
	border: none !important;
	color: #F0E8DF !important;
	cursor: pointer !important;
	padding: 5px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	min-height: 32px !important;
	transition: background-color 0.2s ease, opacity 0.2s ease;
	position: relative !important;
	border-radius: 8px !important;
	outline: none !important;
	-webkit-tap-highlight-color: transparent !important;
	box-shadow: none !important;
	visibility: visible !important;
	opacity: 1 !important;
	margin: 0 !important;
}

/* Ausnahme: Buttons in Gruppen-Containern haben keinen eigenen Hintergrund */
.griffig-player-wrapper .gp-volume-container .gp-control-btn,
.griffig-player-wrapper .gp-volume-container button,
.griffig-player-wrapper .gp-abloop-controls .gp-control-btn,
.griffig-player-wrapper .gp-abloop-controls button,
.griffig-player-wrapper .gp-abloop-controls .gp-ab-btn {
	background: transparent !important;
	border-radius: 0 !important;
}

.gp-control-btn * {
	pointer-events: none;
}

.gp-control-btn:focus,
.gp-control-btn:focus-visible,
.gp-control-btn:active {
	outline: none !important;
	box-shadow: none !important;
	background: rgba(80, 80, 80, 0.6) !important;
	border: none !important;
}

/* SVG Icons in Buttons - Maximum specificity */
.griffig-player-wrapper .gp-control-btn svg,
.griffig-player-wrapper button.gp-control-btn svg,
div.griffig-player-wrapper .gp-control-btn svg {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	color: #F0E8DF !important;
	fill: #F0E8DF !important;
	stroke: #F0E8DF !important;
	width: 24px !important;
	height: 24px !important;
	min-width: 24px !important;
	min-height: 24px !important;
}

.gp-control-btn:hover {
	background-color: rgba(80, 80, 80, 0.85) !important;
	opacity: 1 !important;
	color: #F0E8DF !important;
}

.gp-control-btn:hover svg {
	color: #F0E8DF !important;
	fill: #F0E8DF !important;
	stroke: #F0E8DF !important;
}

.gp-control-btn:active {
	background-color: rgba(80, 80, 80, 1) !important;
}

.gp-play-btn {
	background-color: rgba(80, 80, 80, 0.6) !important;
	background: rgba(80, 80, 80, 0.6) !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.gp-play-btn:hover {
	background-color: rgba(80, 80, 80, 0.85) !important;
	background: rgba(80, 80, 80, 0.85) !important;
}

.gp-play-btn:active,
.gp-play-btn:focus,
.gp-play-btn:focus-visible {
	background-color: rgba(80, 80, 80, 1) !important;
	background: rgba(80, 80, 80, 1) !important;
	outline: none !important;
	box-shadow: none !important;
}

.gp-control-btn svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
	stroke: currentColor;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.gp-control-btn svg[stroke] {
	fill: none;
	stroke: #F0E8DF !important;
}

.gp-play-btn {
	font-size: 24px;
}

/* Play- und Fullscreen-Button: Icon größer als andere Control-Buttons */
div.griffig-player-wrapper .gp-play-btn svg {
	width: 28px !important;
	height: 28px !important;
}

div.griffig-player-wrapper .gp-control-btn[title="Fullscreen"] svg {
	width: 28px !important;
	height: 28px !important;
}

/* Play- und Fullscreen-Button: Container auf 32px angleichen.
   Force-visible-Regel Selector 2: .griffig-player-wrapper .gp-control-bar button[type="button"]:not() = (0,4,1)
   Selector 3: div.griffig-player-wrapper button[type="button"]:not() = (0,3,2)
   Fullscreen: button.gp-control-btn[title="Fullscreen"][type="button"] = (0,4,2) → schlägt beide ✓
   Play (alt): div.griffig-player-wrapper button.gp-play-btn[type="button"] = (0,3,2) → verliert gegen Selector 2 (0,4,1) ✗ */
div.griffig-player-wrapper button.gp-control-btn[title="Fullscreen"][type="button"] {
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	min-height: 32px !important;
}

/* Play-Button: (0,4,2) – schlägt force-visible Selector 2 (0,4,1) eindeutig */
div.griffig-player-wrapper .gp-control-bar button.gp-play-btn[type="button"] {
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	min-height: 32px !important;
	max-height: 32px !important;
	box-sizing: border-box !important;
}

/* Volume Container */
.gp-volume-container {
	display: flex !important;
	align-items: center;
	gap: 8px;
	visibility: visible !important;
	background: rgba(80, 80, 80, 0.6) !important;
	border-radius: 8px;
	padding: 4px 8px;
	height: 32px;
	box-sizing: border-box;
}

/* Lautsprecher-Button innerhalb des Volume-Containers: kein eigener Hintergrund */
.gp-volume-container button,
.gp-volume-container .gp-control-btn {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}
.gp-volume-container button:hover,
.gp-volume-container button:focus,
.gp-volume-container button:active,
.gp-volume-container .gp-control-btn:hover,
.gp-volume-container .gp-control-btn:focus,
.gp-volume-container .gp-control-btn:active {
	background: transparent !important;
	box-shadow: none !important;
}

.gp-volume-slider {
	width: 60px;
	height: 4px;
	background: rgba(255, 255, 255, 0.3);
	position: relative;
	cursor: pointer;
	border-radius: 2px;
	transition: height 0.15s ease, border-radius 0.15s ease;
}

.gp-volume-level {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 70%;
	background: #F0E8DF;
	border-radius: 2px;
}

/* Time Display */
.gp-time-display {
	color: #F0E8DF !important;
	font-size: 14px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	white-space: nowrap;
	display: inline-flex !important;
	align-items: center !important;
	height: 100%;
	visibility: visible !important;
	background: rgba(80, 80, 80, 0.6);
	border-radius: 8px;
	padding: 4px 8px;
	height: 32px;
	box-sizing: border-box;
}

/* Speed Select - Maximum specificity */
.griffig-player-wrapper .gp-speed-container,
.griffig-player-wrapper .gp-control-bar .gp-speed-container,
div.griffig-player-wrapper .gp-speed-container {
	position: relative !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: auto !important;
	height: auto !important;
	background: rgba(80, 80, 80, 0.6) !important;
	border-radius: 8px;
	padding: 4px 8px;
	height: 32px;
	box-sizing: border-box;
}

.griffig-player-wrapper .gp-speed-select,
.griffig-player-wrapper select.gp-speed-select,
.griffig-player-wrapper .gp-mood-select,
div.griffig-player-wrapper .gp-speed-select {
	background: rgba(255, 255, 255, 0.1) !important;
	border: none !important;
	border-radius: 4px !important;
	color: #F0E8DF !important;
	padding: 6px 30px 6px 12px !important;
	font-size: 14px !important;
	cursor: pointer !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23F0E8DF' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 8px center !important;
	background-size: 12px !important;
	transition: background-color 0.2s;
	outline: none !important;
	-webkit-tap-highlight-color: transparent !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: auto !important;
	min-width: 80px !important;
	height: auto !important;
	min-height: 32px !important;
}

.gp-speed-select:hover {
	background-color: rgba(200, 200, 200, 0.3) !important;
}

.gp-speed-select:focus,
.gp-speed-select:active {
	outline: none !important;
	box-shadow: none !important;
	background-color: rgba(200, 200, 200, 0.3) !important;
}

.gp-speed-select option {
	background: #333;
	color: #F0E8DF;
}

/* Quality Select - Maximum specificity */
.griffig-player-wrapper .gp-quality-container,
.griffig-player-wrapper .gp-control-bar .gp-quality-container,
div.griffig-player-wrapper .gp-quality-container {
	position: relative !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: auto !important;
	height: 32px;
	box-sizing: border-box;
	background: rgba(80, 80, 80, 0.6) !important;
	border-radius: 8px;
	padding: 4px 8px;
}

.griffig-player-wrapper .gp-quality-button,
.griffig-player-wrapper select.gp-quality-button,
div.griffig-player-wrapper .gp-quality-button {
	background: rgba(255, 255, 255, 0.1) !important;
	border: none !important;
	border-radius: 4px !important;
	color: #F0E8DF !important;
	padding: 6px 30px 6px 12px !important;
	font-size: 14px !important;
	cursor: pointer !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23F0E8DF' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 8px center !important;
	background-size: 12px !important;
	transition: background-color 0.2s;
	outline: none !important;
	-webkit-tap-highlight-color: transparent !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: auto !important;
	min-width: 80px !important;
	height: auto !important;
	min-height: 32px !important;
}

.gp-quality-button:hover {
	background-color: rgba(200, 200, 200, 0.3) !important;
}

.gp-quality-button:focus,
.gp-quality-button:active {
	outline: none !important;
	box-shadow: none !important;
	background-color: rgba(200, 200, 200, 0.3) !important;
}

.gp-quality-button option {
	background: #333;
	color: #F0E8DF;
}

/* Settings Popup (Speed/Mood/Quality dropdowns) — immer als Popup */
.griffig-player-wrapper .gp-settings-popup {
	display: none !important;
	flex-direction: column !important;
	position: absolute !important;
	bottom: 100% !important;
	right: 0 !important;
	background: rgba(30, 30, 30, 0.9) !important;
	border-radius: 8px !important;
	padding: 8px !important;
	gap: 8px !important;
	min-width: 140px !important;
	z-index: 100000 !important;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.5) !important;
}

/* Dropdown-Container im Popup: kein eigener Hintergrund */
.griffig-player-wrapper .gp-settings-popup .gp-speed-container,
.griffig-player-wrapper .gp-settings-popup .gp-quality-container {
	background: transparent !important;
	border-radius: 0 !important;
	padding: 0 !important;
	height: auto !important;
	box-sizing: border-box;
}

/* Select-Elemente im Popup: transparent, menüartig */
.griffig-player-wrapper .gp-settings-popup .gp-speed-select,
.griffig-player-wrapper .gp-settings-popup .gp-mood-select,
.griffig-player-wrapper .gp-settings-popup .gp-quality-button {
	background-color: transparent !important;
	border: none !important;
	color: #F0E8DF !important;
	width: 100% !important;
	min-width: 0 !important;
	padding: 4px 28px 4px 4px !important;
}

.griffig-player-wrapper .gp-settings-popup.open {
	display: flex !important;
	max-height: calc(100vh - 80px) !important;
	overflow-y: auto !important;
}

/* Fullscreen: Popup über allen anderen Elementen (fullscreen-controls z-index:2000, control-bar z-index:100) */
.griffig-player-wrapper:fullscreen .gp-settings-popup,
.griffig-player-wrapper:-webkit-full-screen .gp-settings-popup,
.griffig-player-wrapper.gp-is-fullscreen .gp-settings-popup,
.griffig-fake-fullscreen .gp-settings-popup {
	z-index: 100000 !important;
}

/* Querformat mit wenig Höhe (z.B. iPhone landscape): Popup fixed positionieren damit es sichtbar bleibt */
@media (orientation: landscape) and (max-height: 500px) {
	.griffig-fake-fullscreen .gp-settings-popup.open,
	.griffig-player-wrapper.gp-is-fullscreen .gp-settings-popup.open {
		position: fixed !important;
		bottom: 70px !important;
		right: 10px !important;
		top: auto !important;
		max-height: calc(100vh - 90px) !important;
	}
}

/* Settings Button - auf allen Bildschirmgrössen sichtbar */
.gp-settings-btn {
	display: flex !important;
}

/* Mood Select Widget */
.griffig-mood-select-wrapper {
	display: flex;
	align-items: center;
	gap: 10px;
}

.gp-mood-select-label {
	display: block;
	margin: 0;
	font-weight: normal;
}

.gp-mood-select {
	padding: 8px 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	font-size: 14px;
}

.gp-mood-select:hover {
	border-color: #0073aa;
}

/* Hide any old elements */
.griffig-player-wrapper .gp-rewind-btn,
.griffig-player-wrapper .gp-10s-back,
.griffig-player-wrapper .gp-phrases,
.griffig-player-wrapper .gp-phrase-section,
.griffig-player-wrapper .gp-loops-section {
	display: none !important;
}

/* Fullscreen Controls Container (Chapters and Loops) */
.gp-fullscreen-controls {
	position: absolute !important;
	top: 20px;
	left: 50% !important;
	transform: translateX(-50%) !important;
	max-width: 90% !important;
	width: max-content !important;
	display: none;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	z-index: 2000;
	pointer-events: none;
	opacity: 1;
	transition: opacity 300ms ease-in-out;
	gap: 15px;
	visibility: visible;
	background: transparent;
	padding: 0;
}

.gp-fullscreen-chapters,
.gp-fullscreen-loops-inner,
.gp-fullscreen-custom-loop {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	justify-content: center !important;
	max-width: 100% !important;
	margin-bottom: 6px !important;
	pointer-events: auto;
}

/* Container background removed - transparent */

.gp-fullscreen-controls .gp-chapter-button {
	pointer-events: auto;
	font-size: 14px;
	padding: 10px 18px;
	min-height: 40px;
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.gp-fullscreen-controls .gp-loop-button {
	pointer-events: auto;
	font-size: 14px;
	padding: 10px 18px;
	min-height: 40px;
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Normal loop buttons in fullscreen: yellow (same as outside fullscreen) */
.gp-fullscreen-controls .gp-loop-button:not(.gp-saved-loop-btn) {
	background: #E8C56A !important;
	color: #fff !important;
}

.gp-fullscreen-controls .gp-loop-button:not(.gp-saved-loop-btn).active {
	background: #DCAE45 !important;
	color: #fff !important;
}


/* Saved (custom) loop buttons in fullscreen: grey */
.gp-fullscreen-controls .gp-saved-loop-btn {
	font-size: 14px;
	padding: 10px 18px;
	min-height: 40px;
	display: inline-flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	background: #A7A7A7 !important;
	color: #fff !important;
}

.gp-fullscreen-controls .gp-saved-loop-btn.active {
	background: #757575 !important;
	color: #fff !important;
}

/* Custom loop buttons in fullscreen: gray, no color change on hover, dark gray when active */
.gp-fullscreen-custom-loop .gp-loop-button {
	background: #A7A7A7 !important;
	border-color: #A7A7A7 !important;
	color: #fff !important;
}
.gp-fullscreen-custom-loop .gp-loop-button:hover {
	background: #A7A7A7 !important; /* same as normal - no change */
	border-color: #A7A7A7 !important;
	color: #fff !important;
}
.gp-fullscreen-custom-loop .gp-loop-button.active,
.gp-fullscreen-custom-loop .gp-loop-button.active:hover {
	background: #555555 !important;
	border-color: #555555 !important;
	color: white !important;
}

/* Fullscreen mode - show fullscreen controls overlay */
.griffig-player-wrapper:fullscreen .gp-fullscreen-controls,
.griffig-player-wrapper:-webkit-full-screen .gp-fullscreen-controls,
.griffig-player-wrapper:-moz-full-screen .gp-fullscreen-controls,
.griffig-player-wrapper:-ms-fullscreen .gp-fullscreen-controls,
.griffig-player-wrapper.gp-is-fullscreen .gp-fullscreen-controls {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

/* Schmales Fenster (≤ 600px): Control Bar umbrechen wenn nötig */
@media (max-width: 600px) {
	.griffig-player-wrapper .gp-control-bar,
	div.griffig-player-wrapper .gp-control-bar {
		flex-wrap: wrap !important;
		padding: 8px 12px !important;
		min-height: auto !important;
		row-gap: 4px;
	}

	.gp-time-display {
		font-size: 12px;
	}

	.gp-speed-select,
	.gp-quality-button,
	.gp-mood-select {
		font-size: 12px;
		padding: 4px 8px;
	}

	/* Timeline: über kürzerer Mobile-Control-Bar */
	.griffig-player-wrapper .gp-progress-container {
		bottom: 52px !important;
	}

	/* Settings button und Popup: bereits in Basis-CSS definiert */
}

/* Tablet (769px – 1024px): kompakter, alle Elemente sichtbar */
@media (min-width: 769px) and (max-width: 1024px) {
	.gp-control-bar {
		padding: 10px 16px !important;
		min-height: 55px !important;
	}

	.gp-control-left,
	.gp-control-right {
		gap: 10px !important;
	}

	.gp-time-display {
		font-size: 12px;
	}

	.gp-volume-slider {
		width: 50px;
	}

	.gp-speed-select,
	.gp-quality-button {
		font-size: 12px;
		padding: 4px 8px;
		min-width: 55px;
	}

	.gp-abloop-controls {
		gap: 6px;
	}

	.gp-ab-btn {
		width: 26px;
		height: 26px;
		font-size: 12px;
	}

	.gp-abloop-times {
		font-size: 11px;
	}

	.gp-chapters {
		gap: 8px;
		margin-bottom: 12px;
	}

	.gp-chapter-button,
	button.gp-chapter-button {
		padding: 7px 14px;
		font-size: 14px;
	}

	.gp-loops {
		gap: 8px;
		margin-top: 6px;
		margin-bottom: 10px;
	}

	.gp-loop-button,
	button.gp-loop-button {
		padding: 7px 14px;
		font-size: 14px;
	}

	.gp-saved-loops .gp-loop-button {
		padding: 7px 14px;
		font-size: 14px;
	}

	/* Fullscreen Tablet */
	.gp-fullscreen-controls {
		top: 20px;
		gap: 12px;
	}

	.gp-fullscreen-controls::before {
		padding: 16px 22px;
		max-width: 92%;
	}

	.gp-fullscreen-controls .gp-chapter-button {
		font-size: 13px;
		padding: 9px 16px;
		min-height: 38px;
	}

	.gp-fullscreen-controls .gp-loop-button {
		font-size: 13px;
		padding: 9px 16px;
		min-height: 38px;
	}

	.gp-fullscreen-controls .gp-saved-loop-btn {
		font-size: 13px;
		padding: 9px 16px;
		min-height: 38px;
	}
}

/* Mobile (≤ 767px): touch-freundlich, min. 44px Touch-Target – iPad (≥ 768px) bewusst ausgeschlossen */
@media (max-width: 767px) {
	/* FIX: Player-Container auf Mobile explizite Mindesthöhe geben.
	   Ursache: .gp-video-wrap hat overflow:hidden und alle Kinder sind position:absolute –
	   wenn aspect-ratio:16/9 nicht greift (ältere iOS Safari), kollabiert der Container auf 0.
	   56.25vw = 9/16 * 100vw = 16:9-Verhältnis bei voller Breite.
	   Guard :not(.griffig-fake-fullscreen) verhindert Konflikt mit Fake-Fullscreen-Regeln. */
	.griffig-player-wrapper:not(.griffig-fake-fullscreen) {
		min-height: calc(56.25vw + 56px) !important; /* Video (56.25vw) + Control Bar (~56px) */
		height: auto !important;
		position: relative !important;
		display: block !important;
	}

	.griffig-player-wrapper:not(.griffig-fake-fullscreen) .gp-video-wrap {
		min-height: 56.25vw !important; /* 16:9 Fallback falls aspect-ratio nicht greift */
		height: auto !important;
		position: relative !important;
		display: block !important;
	}

	/* Sicherheitsregel: Control Bar auf Mobile IMMER position:absolute außerhalb Fake-Fullscreen.
	   Verhindert dass body.style.position:fixed (aus enterFakeFullscreen) die Control Bar fixed macht. */
	.griffig-player-wrapper:not(.griffig-fake-fullscreen) .gp-control-bar {
		position: absolute !important;
	}

	/* Spezifität + !important nötig um Basis-Regel (padding: 12px 20px !important) zu überschreiben */
	.griffig-player-wrapper .gp-control-bar,
	div.griffig-player-wrapper .gp-control-bar {
		padding: 8px 14px !important; /* 14px links/rechts: genug Abstand von border-radius */
		min-height: 56px !important;
	}

	.gp-control-left,
	.gp-control-right {
		gap: 6px !important;
	}

	.gp-time-display {
		font-size: 11px;
	}

	.gp-volume-slider {
		width: 35px;
	}

	.gp-speed-select,
	.gp-quality-button {
		font-size: 11px;
		padding: 4px 6px;
		min-width: 52px;
		min-height: 44px;
	}

	/* Touch-Target: 44px minimum */
	.gp-control-btn {
		width: 44px !important;
		height: 44px !important;
		min-width: 44px !important;
		min-height: 44px !important;
	}

	.gp-control-btn svg {
		width: 20px !important;
		height: 20px !important;
	}

	.gp-abloop-controls {
		gap: 2px;
	}

	/* A/B Buttons: visuell klein, Touch-Target 44px */
	.gp-ab-btn {
		width: 44px !important;
		height: 44px !important;
		min-width: 44px !important;
		min-height: 44px !important;
		font-size: 12px;
	}

	.gp-abloop-times {
		font-size: 10px;
	}

	.gp-chapters {
		gap: 6px;
		margin-bottom: 10px;
		flex-wrap: wrap;
	}

	.gp-chapter-button,
	button.gp-chapter-button {
		padding: 6px 12px;
		font-size: 13px;
		min-height: 44px;
	}

	.gp-loops {
		gap: 6px;
		margin-top: 6px;
		margin-bottom: 10px;
	}

	.gp-loops.open {
		max-height: 300px; /* mehr Platz für mehrere Zeilen auf Mobile */
	}

	.gp-loop-button,
	button.gp-loop-button {
		padding: 6px 12px;
		font-size: 13px;
		min-height: 44px;
	}

	.gp-saved-loops {
		gap: 4px;
		margin-bottom: 10px;
	}

	.gp-saved-loops .gp-loop-button {
		padding: 6px 12px;
		font-size: 13px;
		min-height: 44px;
	}

	/* Fullscreen Mobile */
	.gp-fullscreen-controls {
		top: 10px;
		gap: 10px;
	}

	.gp-fullscreen-controls::before {
		padding: 15px 20px;
		max-width: 95%;
	}

	.gp-fullscreen-controls .gp-chapter-button {
		font-size: 12px;
		padding: 10px 14px;
		min-height: 44px;
	}

	.gp-fullscreen-controls .gp-loop-button {
		font-size: 12px;
		padding: 10px 14px;
		min-height: 44px;
	}

	.gp-fullscreen-controls .gp-saved-loop-btn {
		font-size: 12px;
		padding: 10px 14px;
		min-height: 44px;
	}

	.gp-progress-container {
		height: 12px;
		bottom: 56px; /* über ~56px Mobile-Control-Bar */
	}

	.gp-progress-scrubber {
		width: 18px;
		height: 18px;
	}

	.gp-progress-marker {
		width: 2px;
	}

	/* Mobile: Lautstärke-Slider ausblenden (iOS: video.volume ist read-only, kein Sinn) */
	.gp-volume-slider,
	.gp-volume-container input[type="range"] {
		display: none !important;
	}

	/* Mobile: Desktop-Elemente ausblenden */
	.griffig-desktop-only {
		display: none !important;
	}

	/* Mobile: Mobile-Only-Elemente einblenden */
	.griffig-mobile-only {
		display: flex !important;
		gap: 6px;
		align-items: center;
	}

	/* Issue 1: Fullscreen-Kapitel/Loop-Overlay auf Mobile ausblenden */
	/* Auf Mobile ersetzen Teil▼/Phrasen▼-Dropdowns diese Overlays.
	   Die schwache Regel (0,1,0) unten würde von .griffig-player-wrapper.gp-is-fullscreen .gp-fullscreen-controls
	   (0,3,0) übersteuert werden. Gleiche Spezifität aber später im File → diese Regel gewinnt. */
	.gp-fullscreen-controls {
		display: none !important;
		visibility: hidden !important;
	}
	.griffig-player-wrapper .gp-fullscreen-controls,
	.griffig-player-wrapper.gp-is-fullscreen .gp-fullscreen-controls,
	.griffig-player-wrapper.griffig-fake-fullscreen .gp-fullscreen-controls {
		display: none !important;
		visibility: hidden !important;
	}

	/* Issue 2: Control Bar vereinheitlichen */
	/* Zeitanzeige vertikal zentrieren, Schrift angleichen */
	.gp-time-display {
		display: inline-flex !important;
		align-items: center !important;
		font-size: 13px;
	}

	/* Dropdown-Buttons Schriftgröße */
	div.griffig-player-wrapper .gp-mobile-chapters-btn,
	div.griffig-player-wrapper .gp-mobile-loops-btn {
		font-size: 14px !important;
	}

	/* Pfeil: kleiner und eleganter */
	.gp-mobile-btn-arrow {
		font-size: 9px;
		margin-left: 3px;
		opacity: 0.8;
	}
}

/* Mobile Hochformat (≤ 767px, portrait): Zeitanzeige ausblenden, Control Bar einzeilig halten */
@media (max-width: 767px) and (orientation: portrait) {
	/* Zeitanzeige ausblenden – spart Platz damit alle Buttons in eine Zeile passen.
	   Höhere Spezifität (0,2,1) nötig: @media (max-width:768px) .gp-time-display { display:inline-flex }
	   und @media (max-width:480px) .gp-time-display { display:inline-block } übersteuern sonst display:none. */
	div.griffig-player-wrapper .gp-control-bar .gp-time-display {
		display: none !important;
		visibility: hidden !important;
		width: 0 !important;
		overflow: hidden !important;
	}

	/* Control Bar: kein Umbrechen, minimaler Abstand damit alles in eine Zeile passt */
	.gp-control-bar {
		flex-wrap: nowrap !important;
		gap: 2px !important;
		overflow: hidden !important;
	}

	.gp-control-left {
		flex-wrap: nowrap !important;
		gap: 2px !important;
	}

	.gp-control-right {
		flex-wrap: nowrap !important;
		gap: 2px !important;
	}

	.griffig-mobile-only {
		gap: 2px !important;
	}
}

/* Kleines Handy (≤ 480px): A/B-Controls ausblenden, Control Bar einzeilig halten */
@media (max-width: 480px) {
	/* Control Bar: sehr kompakt, einzeilig */
	.griffig-player-wrapper .gp-control-bar,
	div.griffig-player-wrapper .gp-control-bar {
		padding: 6px 8px !important;
		min-height: 48px !important;
		gap: 4px;
	}

	.griffig-player-wrapper .gp-control-left,
	div.griffig-player-wrapper .gp-control-left {
		gap: 4px !important;
		flex-shrink: 1;
		min-width: 0;
	}

	.griffig-player-wrapper .gp-control-right,
	div.griffig-player-wrapper .gp-control-right {
		gap: 4px !important;
		flex-shrink: 0;
	}

	/* A/B-Loop Controls ausblenden: zu breit für kleine Screens */
	.gp-abloop-controls {
		display: none !important;
	}

	/* Volume: nur Button, kein Slider */
	.gp-volume-slider {
		display: none !important;
	}

	/* Zeit: sichtbar aber kompakter */
	.gp-time-display {
		font-size: 11px;
		display: inline-block !important;
		white-space: nowrap;
	}

	/* Dropdowns kompakter */
	.gp-speed-select,
	.gp-quality-button,
	.gp-mood-select {
		font-size: 10px !important;
		padding: 4px 20px 4px 6px !important;
		min-width: 40px !important;
		min-height: 44px;
	}

	/* Control Buttons (Play, Volume, Fullscreen) */
	.gp-control-btn {
		width: 36px !important;
		height: 36px !important;
		min-width: 36px !important;
		min-height: 36px !important;
	}

	.gp-control-btn svg {
		width: 18px !important;
		height: 18px !important;
	}

	/* Kapitel/Loop Buttons */
	.gp-chapter-button,
	button.gp-chapter-button {
		padding: 5px 10px;
		font-size: 12px;
		min-height: 44px;
	}

	.gp-loop-button,
	button.gp-loop-button {
		padding: 5px 10px;
		font-size: 12px;
		min-height: 44px;
	}

	.gp-saved-loops .gp-loop-button {
		padding: 5px 10px;
		font-size: 12px;
		min-height: 44px;
	}

	/* Fullscreen sehr kleines Gerät */
	.gp-fullscreen-controls::before {
		padding: 12px 15px;
	}

	.gp-fullscreen-controls .gp-chapter-button {
		font-size: 11px;
		padding: 8px 12px;
		min-height: 44px;
	}

	.gp-fullscreen-controls .gp-loop-button {
		font-size: 11px;
		padding: 8px 12px;
		min-height: 44px;
	}

	.gp-fullscreen-controls .gp-saved-loop-btn {
		font-size: 11px;
		padding: 8px 12px;
		min-height: 44px;
	}
}

/* ── Save-Loop Modal ─────────────────────────────────────────────────────── */
/* position: absolute + z-index hoch → erscheint über allem innerhalb von
   .gp-video-wrap, funktioniert daher auch im HTML5-Fullscreen.              */
.gp-save-modal {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    z-index: 9000;
}

.gp-save-modal-inner {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 24px 28px;
    min-width: 280px;
    max-width: 400px;
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.gp-save-modal-label {
    margin: 0;
    font-size: 13px;
    color: rgba(240, 232, 223, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.gp-save-modal-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #F0E8DF;
    font-size: 15px;
    padding: 8px 12px;
    outline: none;
}

.gp-save-modal-input:focus {
    border-color: #DCAE45;
}

.gp-save-modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 4px;
}

.gp-save-modal-ok,
.gp-save-modal-cancel {
    padding: 8px 20px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    cursor: pointer !important;
    border: none !important;
    min-width: 90px !important;
    height: auto !important;
}

.gp-save-modal-ok {
    background: #555555 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.gp-save-modal-ok:hover {
    background: #444444 !important;
}

.gp-save-modal-cancel {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #F0E8DF !important;
}

.gp-save-modal-cancel:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}

/* ── Mobile Fixes ─────────────────────────────────────────────────────────── */

/* Fix 1: Settings-Popup auf Mobile – Eltern-Container auf overflow:visible setzen, damit das Popup
   nicht von .gp-video-wrap (overflow:hidden) oder .gp-control-bar (overflow:hidden im Portrait-Query) abgeschnitten wird.
   Das Popup öffnet sich bereits global nach oben (bottom:100%), z-index 99999 sichert die Schichtung. */
@media (max-width: 767px) {
	.griffig-player-wrapper {
		overflow: visible !important;
	}
	.griffig-player-wrapper .gp-video-wrap {
		overflow: visible !important;
	}
	.griffig-player-wrapper .gp-control-bar {
		overflow: visible !important;
	}
	.griffig-player-wrapper .gp-settings-popup {
		bottom: 100% !important;
		top: auto !important;
		z-index: 100000 !important;
	}
}

/* Fix 2: Teil/Phrasen-Buttons – feiner CSS-Pfeil via ::after statt plumpem ▼ Unicode-Zeichen */
@media (max-width: 767px) {
	/* Alten Unicode-Pfeil-Span ausblenden */
	.gp-mobile-btn-arrow {
		display: none !important;
	}

	/* Feiner CSS-Pfeil */
	div.griffig-player-wrapper .gp-mobile-chapters-btn::after,
	div.griffig-player-wrapper .gp-mobile-loops-btn::after {
		content: '';
		display: inline-block;
		margin-left: 5px;
		width: 6px;
		height: 6px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
		vertical-align: middle;
		position: relative;
		top: -2px;
		transition: transform 0.2s ease, top 0.2s ease;
	}

	/* Geöffnet: Pfeil zeigt nach oben */
	div.griffig-player-wrapper .gp-mobile-chapters-btn.is-open::after,
	div.griffig-player-wrapper .gp-mobile-loops-btn.is-open::after {
		transform: rotate(-135deg);
		top: 2px;
	}
}

/* Mobile: Fullscreen-Button auf exakt 32px – Spezifität (0,0,4,2) schlägt
   "force buttons visible"-Regel (width:auto !important bei 0,0,4,1) und 44px-Touch-Target (0,0,1,0) */
@media (max-width: 767px) {
	div.griffig-player-wrapper .gp-control-bar button[type="button"].gp-fullscreen-btn {
		width: 32px !important;
		height: 32px !important;
		min-width: 32px !important;
		min-height: 32px !important;
		max-width: 32px !important;
		max-height: 32px !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}
	div.griffig-player-wrapper .gp-control-bar button[type="button"].gp-fullscreen-btn svg {
		width: 18px !important;
		height: 18px !important;
	}
}

/* Desktop: Volume-Slider Hover – sanft dicker werden */
@media (min-width: 769px) {
	.gp-volume-container:hover .gp-volume-slider,
	.gp-volume-slider:hover {
		height: 7px;
		border-radius: 3px;
	}

	/* Fill-Bar mitwachsen (ist 100% height des Sliders → automatisch) */
	.gp-volume-container:hover .gp-volume-level,
	.gp-volume-slider:hover .gp-volume-level {
		border-radius: 3px;
		transition: border-radius 0.15s ease;
	}
}

/* Desktop: Control-Bar-Buttons – subtile Hover-Animation
   Basis-Regel hat opacity:1 !important (0,0,3,0) → dieser Block kommt später im File → gewinnt */
@media (min-width: 769px) {
	/* Normaler Zustand: leicht gedimmt (Buttons + Zeitanzeige einheitlich) */
	.griffig-player-wrapper .gp-control-bar .gp-control-btn,
	.griffig-player-wrapper .gp-control-bar .gp-ab-btn,
	.griffig-player-wrapper .gp-control-bar .gp-time-display {
		opacity: 0.82 !important;
	}

	/* A/B-Button aktiv: immer voll sichtbar (gesetzter Marker soll nicht dimmen) */
	.griffig-player-wrapper .gp-control-bar .gp-ab-btn.active {
		opacity: 1 !important;
	}

	/* Hover für Buttons MIT Hintergrund (Play, Fullscreen, Settings, AirPlay…): hellerer Hintergrund */
	.griffig-player-wrapper .gp-control-bar .gp-control-btn:hover {
		opacity: 1 !important;
		background-color: rgba(110, 110, 110, 0.75) !important;
	}

	/* Hover für transparenten Mute-Button: nur opacity, kein Hintergrund */
	.griffig-player-wrapper .gp-volume-container .gp-control-btn:hover {
		background-color: transparent !important;
	}

	/* A/B-Buttons Hover: Spezifität (0,0,4,1) schlägt globales ".gp-abloop-controls button:hover { transparent }" */
	.griffig-player-wrapper .gp-control-bar .gp-abloop-controls .gp-ab-btn:hover {
		opacity: 1 !important;
		background-color: rgba(255, 255, 255, 0.15) !important;
		border-radius: 4px !important;
	}

	/* Zeitanzeige Hover: Hintergrund aus globaler Regel (rgba(80,80,80,0.6)) bleibt erhalten,
	   Hover macht ihn heller – cursor bleibt default (kein pointer, da kein Button) */
	.griffig-player-wrapper .gp-control-bar .gp-time-display:hover {
		opacity: 1 !important;
		background-color: rgba(110, 110, 110, 0.75) !important;
		cursor: default !important;
	}
}



/* Gespeicherte Loop-Buttons: aktiver Zustand dunkelgrau
   Schlägt .gp-loops .gp-loop-button.active (Spez. 0,0,3,0 + Gelb) durch spätere Position im File */
.griffig-player-wrapper .gp-saved-loop-btn.active,
.griffig-player-wrapper .gp-saved-loop-btn.active:hover {
	background: #757575 !important;
	background-color: #757575 !important;
	color: #fff !important;
	opacity: 1 !important;
}

/* Fullscreen: gespeicherte Loop-Buttons – aktiver Zustand mit hoher Spezifität
   Behebt: .griffig-player-wrapper button.gp-saved-loop-btn:hover (0,3,1) schlägt
   .gp-fullscreen-controls .gp-saved-loop-btn.active (0,3,0) beim Hover im Fullscreen.
   Fix mit (0,4,0)–(0,5,0) deckt alle Fullscreen-Varianten und Hover ab. */
.griffig-player-wrapper:fullscreen .gp-fullscreen-controls .gp-saved-loop-btn.active,
.griffig-player-wrapper:-webkit-full-screen .gp-fullscreen-controls .gp-saved-loop-btn.active,
.griffig-player-wrapper:-moz-full-screen .gp-fullscreen-controls .gp-saved-loop-btn.active,
.griffig-player-wrapper:-ms-fullscreen .gp-fullscreen-controls .gp-saved-loop-btn.active,
.griffig-player-wrapper.gp-is-fullscreen .gp-fullscreen-controls .gp-saved-loop-btn.active,
.griffig-fake-fullscreen .gp-fullscreen-controls .gp-saved-loop-btn.active,
.griffig-player-wrapper:fullscreen .gp-fullscreen-controls .gp-saved-loop-btn.active:hover,
.griffig-player-wrapper:-webkit-full-screen .gp-fullscreen-controls .gp-saved-loop-btn.active:hover,
.griffig-player-wrapper:-moz-full-screen .gp-fullscreen-controls .gp-saved-loop-btn.active:hover,
.griffig-player-wrapper:-ms-fullscreen .gp-fullscreen-controls .gp-saved-loop-btn.active:hover,
.griffig-player-wrapper.gp-is-fullscreen .gp-fullscreen-controls .gp-saved-loop-btn.active:hover,
.griffig-fake-fullscreen .gp-fullscreen-controls .gp-saved-loop-btn.active:hover {
	background: #757575 !important;
	background-color: #757575 !important;
	color: #fff !important;
	opacity: 1 !important;
}

/* =========================================================
   Intro-Video: Überspringen-Button
   ========================================================= */
.gp-video-wrap .gp-intro-skip {
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
	z-index: 50 !important;
	display: flex !important;
	align-items: center !important;
	padding: 6px 14px !important;
	background: rgba(0, 0, 0, 0.55) !important;
	color: #fff !important;
	font-size: 13px !important;
	font-family: inherit !important;
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
	border-radius: 4px !important;
	cursor: pointer !important;
	opacity: 0.85 !important;
	transition: opacity 0.2s ease, background 0.2s ease !important;
	min-width: auto !important;
	min-height: auto !important;
	width: auto !important;
	height: auto !important;
}

.gp-video-wrap .gp-intro-skip:hover {
	opacity: 1 !important;
	background: rgba(0, 0, 0, 0.75) !important;
}

/* Intro aktiv: gesamte Progress Bar ausblenden.
   Weiße Fortschrittsanzeige und grüne Kapitel-Hinterlegung
   bleiben nach dem Intro vollständig unverändert. */
.griffig-intro-active .gp-progress-container {
	display: none !important;
}