:root {
	--teaser-width-default: 860px;
	--teaser-highlight-excess: 67px;
}

.frame-type-tuebingen_ai_teaser-highlight {
	border-top-width: calc(var(--teaser-highlight-excess) + var(--vr-spacing-3));
}

.frame-type-tuebingen_ai_teaser-highlight .frame--inner {
	margin-bottom: var(--teaser-highlight-excess);
}

.teaser__bodytext {
	position: relative;
	background: var(--color-light-gray);
	padding: var(--vr-spacing-1) var(--hr-spacing-1);
	font-size: var(--font-size-copytext-small);
	line-height: var(--line-height-copytext-small);
}

.teaser__bodytext--dark {
	background: var(--color-dark-gray-trans);
	color: var(--color-white);
}

.teaser__bodytext--highlight {
	background: var(--color-bright-yellow);
	top: var(--vr-spacing-1);
	right: auto;
	bottom: auto !important;
	left: 0;
}

.teaser__bodytext--highlight::before,
.teaser__bodytext--highlight::after {
	content: '';
	position: absolute;
	right: 0;
	display: block;
	height: var(--teaser-highlight-excess);
	width: 100%;
	background: transparent
		url('/typo3conf/ext/tuebingen_ai/Resources/Public/Images/bg-teaser-highlight.svg') 0 0 no-repeat;
	background-size: cover;
}

.teaser__bodytext--highlight::before {
	top: calc(-1 * var(--teaser-highlight-excess));
}

.teaser__bodytext--highlight::after {
	bottom: calc(-1 + var(--teaser-highlight-excess));
	background-position-y: 100%;
}

.teaser__bodytext .headline--small {
	font-size: var(--font-size-headline-small);
	line-height: var(--line-height-headline-small);
}

.teaser__image {
	position: relative;
	max-width: var(--teaser-width-default);
	overflow: hidden;
}

.teaser__image--xl {
	max-width: none;
}

.teaser__image .image {
	margin: 0;
}

.teaser__image .image-embed-item {
	transition: transform 1s var(--animation-timing-function);
}

.more-link--teaser:hover .image-embed-item {
	transform: scale(1.075);
}

.more-link--teaser {
	text-decoration: none;
	display: grid;
}

.more-link--teaser:hover {
	color: var(--color-font);
}

.more-link--teaser:hover .teaser__bodytext--highlight .btn {
	color: var(--color-bright-yellow);
	background: var(--color-dark-gray);
}

@media screen and (min-width: 600px) {
	.frame-type-tuebingen_ai_teaser-highlight .frame--inner {
		margin-bottom: 0;
	}

	.frame-type-grid-2cols .grid--2cols {
		grid-template-columns: 100%;
	}

	.teaser__bodytext {
		position: absolute;
		width: 530px;
		right: 0;
		bottom: var(--vr-spacing-2);
	}

	.teaser__bodytext--highlight {
		top: 0;
	}

	.frame-layout-11 .teaser__image {
		margin-left: max(0px, calc(100% - var(--teaser-width-default)));
	}

	.frame-layout-11 .teaser__bodytext {
		right: auto;
		left: 0;
	}

	.frame-type-tuebingen_ai_teaser-s .frame--inner {
		display: grid;
	}

	.frame-type-tuebingen_ai_teaser-s .teaser__bodytext {
		position: relative;
		justify-self: end;
		bottom: auto;
		right: auto;
		top: calc(-1 * var(--vr-spacing-3));
		width: min(80%);
	}
}

/* --teaser-width-default + --hr-spacing-2 for page padding */
@media screen and (min-width: 892px) {
	.frame-type-grid-2cols .grid--2cols {
		grid-template-columns: repeat(2, calc(50% - var(--hr-spacing-1) / 2));
	}

	.teaser__image--highlight {
		justify-self: end;
	}
}