:root {
	--ben-kino-red: #7a1720;
	--ben-kino-gold: #e1b461;
	--ben-kino-cream: #f5ead2;
	--ben-kino-dark: #070707;
}

body.ben-kino-film-offen {
	overflow: hidden !important;
}

.ben-kino,
.ben-kino * {
	box-sizing: border-box;
}

.ben-kino .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ben-kino {
	position: relative;
	isolation: isolate;
	width: min(100%, 1500px);
	min-height: min(820px, calc(100svh - 36px));
	margin: 30px auto;
	overflow: hidden;
	border: 1px solid #d2b98d;
	border-radius: 22px;
	background:
		radial-gradient(circle at 50% 18%, rgba(255, 250, 218, .98) 0 10%, rgba(247, 224, 178, .82) 35%, rgba(126, 64, 45, .3) 75%),
		linear-gradient(180deg, #f8e9c9 0%, #c88e68 70%, #5b2e2b 100%);
	box-shadow: 0 28px 80px rgba(35, 20, 10, .22);
	color: #241916;
	font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	transition: background-color 1.5s ease, border-color 1.5s ease, box-shadow 1.5s ease;
}

.ben-kino-room {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	opacity: 1;
	transition: opacity 1.5s ease, filter 1.5s ease;
}

.ben-kino-ceiling {
	position: absolute;
	top: -35%;
	left: 10%;
	width: 80%;
	height: 62%;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(255,255,255,.75), rgba(235,199,139,.3) 55%, transparent 70%);
}

.ben-kino-lamp {
	position: absolute;
	top: 24px;
	width: 20px;
	height: 20px;
	border: 3px solid #8b6739;
	border-radius: 50%;
	background: #fff8c7;
	box-shadow: 0 0 18px 6px rgba(255, 241, 172, .88), 0 0 80px 32px rgba(255, 225, 153, .35);
}

.ben-kino-lamp::before {
	content: "";
	position: absolute;
	bottom: 17px;
	left: 6px;
	width: 2px;
	height: 38px;
	background: #80663e;
}

.ben-kino-lamp--one { left: 23%; }
.ben-kino-lamp--two { left: calc(50% - 10px); }
.ben-kino-lamp--three { right: 23%; }

.ben-kino-wall-panel {
	position: absolute;
	top: 17%;
	bottom: 20%;
	width: 13%;
	border: 1px solid rgba(111, 65, 44, .28);
	background: repeating-linear-gradient(90deg, rgba(139,73,55,.14) 0 7px, rgba(255,244,218,.16) 7px 18px);
	box-shadow: inset 0 0 40px rgba(73, 34, 25, .18);
}

.ben-kino-wall-panel--left { left: 0; border-radius: 0 22px 22px 0; }
.ben-kino-wall-panel--right { right: 0; border-radius: 22px 0 0 22px; }

.ben-kino-curtain {
	position: absolute;
	top: 0;
	bottom: 0;
	width: clamp(72px, 11vw, 180px);
	background:
		linear-gradient(90deg, rgba(24, 0, 2, .32), transparent 15% 30%, rgba(255,255,255,.09) 42%, transparent 56% 72%, rgba(22,0,2,.33)),
		repeating-linear-gradient(90deg, #5b0f17 0 15px, #8b1c26 15px 31px, #6c121b 31px 45px);
	box-shadow: 0 0 28px rgba(25,0,0,.45);
}

.ben-kino-curtain::after {
	content: "";
	position: absolute;
	top: 0;
	width: 150%;
	height: 64px;
	background: repeating-linear-gradient(90deg, #7e1722 0 20px, #a32733 20px 38px, #671019 38px 56px);
	border-bottom: 6px solid #c69847;
	box-shadow: 0 6px 16px rgba(28,0,0,.3);
}

.ben-kino-curtain--left { left: 0; }
.ben-kino-curtain--right { right: 0; transform: scaleX(-1); }
.ben-kino-curtain--left::after { left: 0; border-radius: 0 0 70% 0; }
.ben-kino-curtain--right::after { right: 0; border-radius: 0 0 70% 0; }

.ben-kino-popcorn {
	position: absolute;
	right: clamp(12px, 3.2vw, 48px);
	bottom: clamp(78px, 10vw, 126px);
	width: clamp(100px, 12vw, 168px);
	height: clamp(150px, 18vw, 236px);
	filter: drop-shadow(0 16px 15px rgba(45, 22, 11, .32));
}

.ben-kino-popcorn__roof {
	position: absolute;
	top: 0;
	left: -7%;
	width: 114%;
	height: 21%;
	border: 3px solid #f1d091;
	border-radius: 8px 8px 2px 2px;
	background: repeating-linear-gradient(90deg, #f3e4c5 0 15%, #a51e27 15% 30%);
}

.ben-kino-popcorn__sign {
	position: absolute;
	top: 21%;
	left: 0;
	width: 100%;
	background: #5d1018;
	color: #ffe4a8;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(.58rem, 1vw, .86rem);
	font-weight: 800;
	letter-spacing: .13em;
	line-height: 2.2;
	text-align: center;
}

.ben-kino-popcorn__window {
	position: absolute;
	top: 35%;
	bottom: 22%;
	left: 8%;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	width: 84%;
	border: 5px solid #77202a;
	background: linear-gradient(160deg, rgba(255,255,255,.88), rgba(255,225,170,.4));
	font-size: clamp(1.5rem, 3vw, 2.8rem);
}

.ben-kino-popcorn__counter {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 23%;
	border-top: 8px solid #efca80;
	background: repeating-linear-gradient(90deg, #7b1520 0 18px, #f0dec0 18px 36px);
}

.ben-kino-seats {
	position: absolute;
	left: 7%;
	right: 7%;
	bottom: -18px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: clamp(8px, 1.3vw, 20px);
	height: 110px;
}

.ben-kino-seats i {
	display: block;
	width: clamp(54px, 8vw, 118px);
	height: clamp(70px, 8vw, 106px);
	border-radius: 46% 46% 10px 10px;
	background: linear-gradient(90deg, #26080c, #68121b 45%, #26080c);
	box-shadow: inset 0 4px 8px rgba(255,255,255,.08), 0 -5px 15px rgba(38,0,0,.3);
}

.ben-kino-screen-shell {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	min-height: min(820px, calc(100svh - 36px));
	padding: clamp(74px, 8vw, 112px) clamp(90px, 15vw, 240px) 132px;
	transition: inset 1.5s ease, padding 1.5s ease, min-height 1.5s ease;
}

.ben-kino-welcome,
.ben-kino-title,
.ben-kino-hint {
	position: relative;
	z-index: 2;
	opacity: 1;
	transition: opacity 1.5s ease, transform 1.5s ease;
}

.ben-kino-welcome {
	margin: 0 0 6px;
	color: #7b1720;
	font-size: clamp(.65rem, 1.2vw, .82rem);
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.ben-kino-title {
	max-width: 900px;
	margin: 0 0 18px;
	font: 700 clamp(1.55rem, 3.4vw, 3.4rem)/1.03 Georgia, "Times New Roman", serif;
	letter-spacing: -.025em;
	text-align: center;
}

.ben-kino-hint {
	margin: 13px 0 0;
	color: #5e4639;
	font-size: .76rem;
}

.ben-kino-screen {
	position: relative;
	z-index: 4;
	display: grid;
	place-items: center;
	width: min(76vw, 980px);
	max-width: 100%;
	aspect-ratio: var(--ben-kino-ratio, 1.7778);
	max-height: min(58svh, 610px);
	overflow: hidden;
	border: clamp(8px, 1.1vw, 15px) solid #191919;
	background: #050505;
	box-shadow: 0 18px 48px rgba(20,8,4,.36), 0 0 0 4px #d4aa61;
	transition: width 1.5s ease, height 1.5s ease, max-height 1.5s ease, border-width 1.5s ease, box-shadow 1.5s ease, border-radius 1.5s ease;
}

.ben-kino--portrait .ben-kino-screen {
	width: min(38vw, 390px);
}

.ben-kino-video {
	display: block;
	width: 100%;
	height: 100%;
	background: #050505;
	object-fit: contain;
	opacity: 1;
}

.ben-kino-start {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	gap: 11px;
	transform: translate(-50%, -50%);
	border: 1px solid rgba(255,255,255,.7);
	border-radius: 999px;
	background: rgba(12,12,12,.82);
	box-shadow: 0 8px 28px rgba(0,0,0,.42);
	color: #fff;
	cursor: pointer;
	font: 750 .9rem/1 Inter, ui-sans-serif, sans-serif;
	padding: 13px 19px;
	transition: opacity .35s ease, transform .2s ease, background .2s ease;
}

.ben-kino-start:hover,
.ben-kino-start:focus-visible {
	background: #7a1720;
	outline: 3px solid rgba(255,255,255,.55);
	outline-offset: 3px;
	transform: translate(-50%, -50%) scale(1.04);
}

.ben-kino-start__icon {
	width: 0;
	height: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 11px solid currentColor;
}

.ben-kino-exit {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 12;
	display: none;
	border: 1px solid rgba(255,255,255,.38);
	border-radius: 999px;
	background: rgba(20,20,20,.72);
	color: #fff;
	cursor: pointer;
	font: 700 .76rem/1 Inter, ui-sans-serif, sans-serif;
	opacity: .18;
	padding: 10px 14px;
	transition: opacity .2s ease, background .2s ease;
}

.ben-kino-exit:hover,
.ben-kino-exit:focus-visible {
	background: #7a1720;
	opacity: 1;
	outline: 2px solid #fff;
}

.ben-kino.is-cinema-active {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	width: 100vw;
	height: 100svh;
	min-height: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: #000;
	box-shadow: none;
}

.ben-kino.is-cinema-active .ben-kino-room,
.ben-kino.is-cinema-active .ben-kino-welcome,
.ben-kino.is-cinema-active .ben-kino-title,
.ben-kino.is-cinema-active .ben-kino-hint {
	opacity: 0;
	filter: brightness(0);
}

.ben-kino.is-cinema-active .ben-kino-screen-shell {
	position: absolute;
	inset: 0;
	min-height: 0;
	padding: 0;
}

.ben-kino.is-cinema-active .ben-kino-screen,
.ben-kino--portrait.is-cinema-active .ben-kino-screen {
	width: 100vw;
	height: 100svh;
	max-width: none;
	max-height: none;
	aspect-ratio: auto;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.ben-kino.is-cinema-active .ben-kino-start {
	opacity: 0;
	pointer-events: none;
}

.ben-kino.is-cinema-active .ben-kino-exit {
	display: block;
}

.ben-kino.is-playing .ben-kino-video {
	cursor: default;
}

.ben-kino.needs-play .ben-kino-start {
	z-index: 10;
	opacity: 1;
	pointer-events: auto;
}

.ben-kino.is-lighting {
	background: #f4ddb1;
}

.ben-kino-notice {
	border-left: 4px solid #b32d2e;
	background: #fff;
	padding: 12px 16px;
}

@media (max-width: 900px) {
	.ben-kino {
		min-height: min(760px, calc(100svh - 20px));
		border-radius: 14px;
	}

	.ben-kino-screen-shell {
		min-height: min(760px, calc(100svh - 20px));
		padding: 90px 92px 120px;
	}

	.ben-kino-popcorn {
		right: 14px;
		bottom: 92px;
	}
}

@media (max-width: 620px) {
	.ben-kino {
		width: 100%;
		min-height: 660px;
		margin: 16px auto;
		border-radius: 10px;
	}

	.ben-kino-screen-shell {
		min-height: 660px;
		padding: 88px 52px 150px 24px;
	}

	.ben-kino-screen {
		width: 100%;
		max-height: 52svh;
		border-width: 7px;
	}

	.ben-kino--portrait .ben-kino-screen {
		width: min(68vw, 330px);
	}

	.ben-kino-popcorn {
		right: 7px;
		bottom: 82px;
		width: 86px;
		height: 132px;
	}

	.ben-kino-popcorn__window {
		font-size: 1.25rem;
	}

	.ben-kino-curtain {
		width: 42px;
	}

	.ben-kino-lamp--one { left: 18%; }
	.ben-kino-lamp--three { right: 18%; }

	.ben-kino-start {
		font-size: .8rem;
		padding: 11px 15px;
	}

	.ben-kino-exit {
		top: max(10px, env(safe-area-inset-top));
		right: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ben-kino,
	.ben-kino * {
		transition-duration: .01ms !important;
	}
}

/* =========================================================
   Version 1.1.0 – Kinosaal-Fotohintergrund und Glossar
   ========================================================= */
.ben-kino {
	aspect-ratio: 16 / 9;
	min-height: clamp(360px, 56.25vw, 844px);
	background: #050505;
	border-color: #2b2b2b;
	color: #fff;
}

.ben-kino-room {
	background: #050505 url("kino-saal.jpg") center center / cover no-repeat;
}

.ben-kino-room > * {
	display: none !important;
}

.ben-kino-screen-shell {
	position: absolute;
	inset: 0;
	display: block;
	min-height: 0;
	padding: 0;
}

.ben-kino-screen,
.ben-kino--portrait .ben-kino-screen,
.ben-kino--landscape .ben-kino-screen {
	position: absolute;
	top: 12.2%;
	left: 50%;
	width: 72.5%;
	height: 56.5%;
	max-width: none;
	max-height: none;
	aspect-ratio: auto;
	transform: translateX(-50%);
	border: 0;
	border-radius: 2px;
	background: #000;
	box-shadow: 0 0 0 4px rgba(0,0,0,.78), 0 10px 32px rgba(0,0,0,.5);
}

.ben-kino-video {
	object-fit: contain;
}

.ben-kino-welcome,
.ben-kino-title,
.ben-kino-hint {
	position: absolute;
	z-index: 5;
	color: #fff;
	text-shadow: 0 2px 8px rgba(0,0,0,.95);
}

.ben-kino-welcome {
	left: 3.5%;
	bottom: 13%;
	margin: 0;
	color: #f2c36b;
}

.ben-kino-title {
	left: 3.5%;
	bottom: 5.5%;
	max-width: 64%;
	margin: 0;
	font-size: clamp(1.15rem, 2.5vw, 2.65rem);
	line-height: 1.05;
	text-align: left;
}

.ben-kino-hint {
	right: 3.5%;
	bottom: 5.5%;
	margin: 0;
	color: rgba(255,255,255,.9);
}

.ben-kino-glossary-control {
	position: absolute;
	top: clamp(12px, 2vw, 24px);
	right: clamp(12px, 2vw, 24px);
	z-index: 9;
}

.ben-kino-glossary-button {
	appearance: none;
	border: 1px solid rgba(255,255,255,.62);
	border-radius: 999px;
	background: rgba(10,10,10,.82);
	box-shadow: 0 7px 24px rgba(0,0,0,.38);
	color: #fff;
	cursor: pointer;
	font: 750 .84rem/1 Inter, ui-sans-serif, sans-serif;
	letter-spacing: .06em;
	padding: 11px 17px;
	text-transform: uppercase;
	transition: background .2s ease, transform .2s ease, opacity 1.5s ease;
}

.ben-kino-glossary-button:hover,
.ben-kino-glossary-button:focus-visible,
.ben-kino-glossary-button[aria-expanded="true"] {
	background: #7a1720;
	outline: 3px solid rgba(255,255,255,.5);
	outline-offset: 3px;
	transform: translateY(-1px);
}

.ben-kino-glossary-panel[hidden] {
	display: none !important;
}

.ben-kino-glossary-panel {
	position: absolute;
	top: 52px;
	right: 0;
	width: min(430px, calc(100vw - 44px));
	max-height: min(68vh, 560px);
	overflow: auto;
	border: 1px solid rgba(255,255,255,.35);
	border-radius: 14px;
	background: rgba(250,246,236,.97);
	box-shadow: 0 24px 70px rgba(0,0,0,.56);
	color: #261c18;
	text-align: left;
}

.ben-kino-glossary-panel__head {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 14px 17px;
	border-bottom: 1px solid #d6c9b7;
	background: #f4ead8;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.08rem;
}

.ben-kino-glossary-close {
	appearance: none;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: #221b18;
	color: #fff;
	cursor: pointer;
	font: 400 1.45rem/1 Arial, sans-serif;
}

.ben-kino-glossary-close:hover,
.ben-kino-glossary-close:focus-visible {
	background: #7a1720;
	outline: 3px solid rgba(122,23,32,.25);
	outline-offset: 2px;
}

.ben-kino-glossary-text {
	padding: 17px 19px 20px;
	font: 400 1rem/1.62 Georgia, "Times New Roman", serif;
}

.ben-kino-glossary-text > :first-child {
	margin-top: 0;
}

.ben-kino-glossary-text > :last-child {
	margin-bottom: 0;
}

.ben-kino.is-cinema-active .ben-kino-screen,
.ben-kino--portrait.is-cinema-active .ben-kino-screen,
.ben-kino--landscape.is-cinema-active .ben-kino-screen {
	top: 0;
	left: 0;
	width: 100vw;
	height: 100svh;
	transform: none;
	border: 0;
	box-shadow: none;
}

.ben-kino.is-cinema-active .ben-kino-glossary-control {
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 620px) {
	.ben-kino {
		min-height: 430px;
		aspect-ratio: auto;
	}

	.ben-kino-screen,
	.ben-kino--portrait .ben-kino-screen,
	.ben-kino--landscape .ben-kino-screen {
		top: 16%;
		width: 78%;
		height: 43%;
	}

	.ben-kino-welcome {
		left: 18px;
		bottom: 15%;
	}

	.ben-kino-title {
		left: 18px;
		bottom: 7%;
		max-width: calc(100% - 36px);
		font-size: clamp(1.1rem, 6vw, 1.6rem);
	}

	.ben-kino-hint {
		display: none;
	}

	.ben-kino-glossary-control {
		top: 10px;
		right: 10px;
	}

	.ben-kino-glossary-panel {
		position: fixed;
		top: max(60px, calc(env(safe-area-inset-top) + 50px));
		right: 10px;
		left: 10px;
		width: auto;
		max-height: calc(100svh - 80px);
	}
}