@keyframes typing {
	0% {
		width: 0
	}

	to {
		width: 100%
	}
}

@keyframes blink-caret {

	0%,
	to {
		border-color: transparent
	}

	50% {
		border-color: #000
	}
}

@keyframes fuellungBisProzent {
	0% {
		height: 0%;
		opacity: 0.5
	}

	to {
		height: var(--fuellung-prozent);
		opacity: 0.95
	}
}

@keyframes ausfadenBisVolleFuellung {
	0% {
		height: var(--fuellung-prozent);
		opacity: 1
	}

	to {
		height: 100%;
		opacity: 0
	}
}

@keyframes schwappeffekt {

	0%,
	to {
		border-radius: 15% 15% 50% 50%/30% 30% 70% 70%
	}

	50% {
		border-radius: 50% 50% 15% 15%/70% 70% 30% 30%
	}
}

@keyframes slideIn {
	0% {
		transform: translateY(300%)
	}

	to {
		transform: translateY(0)
	}
}

@keyframes scrollLeft {
	0% {
		transform: translateX(100%)
	}

	to {
		transform: translateX(-100%)
	}
}

@keyframes fadeInRotate {
	0% {
		opacity: 0;
		transform: rotate(60deg);
		filter: blur(35px) grayscale(100%)
	}

	to {
		opacity: 1;
		transform: rotate(0deg);
		filter: blur(0) grayscale(20%)
	}
}

@keyframes fadeOutRotate {
	0% {
		opacity: 1;
		transform: rotate(0deg);
		filter: blur(0) grayscale(20%)
	}

	to {
		opacity: 0;
		transform: rotate(-60deg);
		filter: blur(35px) grayscale(100%)
	}
}

@keyframes scaleUp {

	0%,
	to {
		transform: scale(1)
	}

	50% {
		transform: scale(2.5)
	}
}

@keyframes scaleDown {

	0%,
	to {
		transform: scale(1)
	}

	50% {
		transform: scale(.25)
	}
}

@keyframes fast-blink {

	0%,
	to {
		opacity: .5
	}

	50% {
		opacity: 1
	}
}

html {
	scroll-behavior: smooth
}

/*
 * iOS Safari: horizontaler Overflow (negative margins, 100vw) blockiert
 * oft den Ein-Finger-Vertikal-Scroll. Overflow nur im Shell abfangen —
 * nie overflow-x auf html/body setzen.
 */
.page-shell {
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	position: relative;
}

html * {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none
}

:root {
	--scrollbar-background: #d4d0d0;
	--scrollbar: #6b6868
}

.dark {
	--scrollbar-background: #6b6868;
	--scrollbar: #d4d0d0
}

.a__line,
.a__line:hover,
a {
	text-decoration: none
}

a {
	color: inherit
}

.a__line {
	display: inline-block;
	position: relative;
	font-weight: initial;
	transition: 1s;
	font-variation-settings: "wght" 400
}

.a__line:hover {
	font-variation-settings: "wght" 600 !important
}

.a__line:hover:after,
.fontweight:hover .line:after,
.line:hover:after {
	transform: scaleX(1);
	transform-origin: bottom left
}

.a__line:after,
.line:after {
	content: "";
	position: absolute;
	width: 100%;
	transform: scaleX(0);
	height: .1em;
	bottom: 0;
	left: 0;
	color: inherit;
	background-color: currentColor;
	transform-origin: bottom right;
	transition: transform .25s cubic-bezier(.25, .46, .45, .94), background-color .3s ease-out
}

.fontweight .hover-show {
	display: none
}

.fontweight .hover-hide,
.fontweight:hover .hover-show,
.line {
	display: inline-block
}

.fontweight:hover .hover-hide {
	display: none
}

.line {
	position: relative;
	font-weight: initial;
	transition: 1s;
	font-variation-settings: "wght" 400
}

.line,
.line:hover .fontweight:hover .line {
	text-decoration: none
}

.fontweight:hover .line,
.line:hover {
	font-variation-settings: "wght" 600 !important
}

#checkbox+label .switch-ball {
	margin-left: 2px;
	transform: translateX(0);
	transition: transform .3s linear
}

#checkbox:checked+label .switch-ball {
	transform: translateX(15px);
	transition: transform .3s linear
}

.fontweight {
	font-style: normal;
	font-weight: initial;
	transition: 1s;
	font-variation-settings: "wght" 400
}

.fontweight .numbers {
	font-feature-settings: "zero" 1
}

.fontweight:hover .fade {
	opacity: 0
}

.fontweight:hover .bolder {
	font-variation-settings: "wght" 900 !important
}

.fontweight:hover .lighter {
	font-variation-settings: "wght" 100 !important
}

.fontweiniceght:hover {
	font-feature-settings: "zero"
}

.fontweight .bolder,
.fontweight .fade,
.fontweight .lighter {
	transition: 1s;
	opacity: 1
}

.ticker-item {
	top: 0;
	left: 0;
	opacity: 0;
	display: none
}

.ticker-item.typing {
	overflow: hidden;
	white-space: nowrap;
	border-right: .15em solid;
	animation: typing 1s steps(20, end), blink-caret .5s step-end infinite
}

#fuellung {
	width: 100%;
	height: 0%;
	animation: fuellungBisProzent 2s ease-in-out forwards, ausfadenBisVolleFuellung 2s ease-in-out forwards;
	animation-delay: 0s, 6s
}

#fuellung::before {
	content: "";
	display: block;
	position: absolute;
	left: -20%;
	right: 20%;
	top: -15px;
	width: 140%;
	bottom: 100%;
	height: 40px;
	background-color: inherit;
	animation: schwappeffekt 4s ease-in-out infinite, slideIn 1s ease-out forwards
}

.top-bar {
	display: flex;
	gap: 16px;
	align-items: center;
	width: 100%;
	flex-direction: row
}

.top-bar h2 {
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.5rem
}

.top-bar,
.top-bar svg {
	color: var(--headline-color)
}

.action-buttons {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	gap: 8px;
	scroll-snap-align: start;
	width: 100%;
	flex-wrap: wrap
}

.action-button {
	color: #163300;
	border-radius: 16px;
	height: 32px;
	gap: 4px;
	cursor: pointer;
	display: flex;
	padding: 0 12px;
	font-weight: 600;
	transition: all .2s ease-in-out;
	white-space: nowrap;
	align-items: center;
	text-decoration: none;
	background: var(--secondary)
}

.action-button:active {
	background: var(--secondary-active)
}

.action-button--horizontal-scroll {
	border-radius: 50%;
	cursor: pointer;
	border: 0;
	outline: 0;
	width: 32px;
	height: 32px;
	background: var(--accent)
}

.action-button--horizontal-scroll:hover {
	background: var(--accent-hover)
}

.action-button--horizontal-scroll:active {
	background: var(--accent-active)
}

.action-button--horizontal-scroll:disabled {
	cursor: not-allowed;
	background: var(--secondary)
}

.action-button--horizontal-scroll:disabled:active,
.action-button--horizontal-scroll:disabled:hover {
	background: var(--secondary)
}

#action-button--previous {
	margin-left: auto;
	transform: rotate(-90deg)
}

#action-button--next {
	transform: rotate(90deg)
}

.action-button:hover {
	background: var(--secondary-hover)
}

.action-button--primary {
	background: var(--accent)
}

.action-button--primary:hover {
	background: var(--accent-hover)
}

.action-button--primary:active {
	background: var(--accent-active)
}

.scrolly-container {
	overflow: hidden;
	display: flex;
	justify-content: center;
	width: 100%
}

#scrolly {
	display: inline-flex;
	gap: 1.5rem;
	width: 100%;
	max-width: 100%;
	flex-direction: row;
	overflow: auto;
	scroll-snap-type: x mandatory
}

#scrolly::-webkit-scrollbar {
	height: 10px
}

#scrolly::-webkit-scrollbar-track {
	background: var(--scrollbar-background);
	border-radius: 999px
}

#scrolly::-webkit-scrollbar-thumb {
	background: var(--scrollbar);
	border-radius: 999px
}

.scrolly-content {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	text-decoration: none;
	position: relative;
	transition: all .2s ease-in-out;
	min-width: 320px;
	cursor: pointer;
	flex-direction: column;
	justify-content: space-between;
	scroll-snap-align: start;
	overflow: hidden;
	color: #1d203b;
	display: flex;
	animation: scrollLeft 40s linear infinite alternate;
	will-change: transform
}

.scrolly-wrapper {
	display: inline-block
}

#scrolly:hover .scrolly-wrapper {
	animation-play-state: paused
}

.scrolly-content__image {
	position: relative
}

.scrolly__indicator {
	position: absolute;
	padding: .5rem;
	min-width: 3.5rem;
	min-height: 3.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--white);
	align-items: center;
	border-radius: .5rem
}

.scrolly__date {
	top: .5rem;
	left: .5rem;
	font-size: 1.35rem
}

.scrolly__date__month {
	font-size: .6rem;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--event-headline)
}

.scrolly__type {
	top: .5rem;
	right: .5rem
}

.scrolly__type svg {
	color: var(--event-text);
	height: 2rem;
	width: 2rem
}

.scrolly-description {
	color: var(--event-text);
	padding: .5rem .75rem
}

.scrolly-content img {
	width: 100%;
	height: 250px;
	border-radius: 1rem;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: top;
	object-position: top
}

.circle {
	height: .5rem;
	width: .5rem;
	border-radius: 50%
}

.circle--green {
	background: var(--success)
}

.circle--red {
	background: var(--error)
}

#gallerie-kirche {
	perspective: 1500px
}

.gallery-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	transform-origin: right;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: opacity .5s ease-out, transform .5s ease-out;
	opacity: 0
}

.active {
	animation: fadeInRotate .5s forwards
}

.deactivating {
	animation: fadeOutRotate .5s forwards
}

#gallerie-kirche:hover img {
	filter: grayscale(0%) !important
}

:root {
	--farbe-positiv: rgb(66, 66, 72);
	--farbe-negativ: rgb(170, 170, 181)
}

.dark {
	--farbe-positiv: rgb(208, 208, 221);
	--farbe-negativ: rgb(99, 99, 107)
}

#spielbereich {
	width: 100%;
	height: 400px;
	position: relative;
	overflow: hidden;
	color: #fff;
}

.raumschiff {
	position: absolute;
	bottom: 10px;
	left: 135px;
	width: 30px;
	height: 30px
}

#counter,
.wort {
	position: absolute;
	top: 0
}

#counter {
	right: 0;
	display: inline-block;
	text-align: center;
	margin: 20px 25px 0 auto
}

.animated-score-add,
.animated-score-subtract {
	transform-origin: center
}

.animated-score-add {
	animation: scaleUp .5s ease-in-out forwards
}

.animated-score-subtract {
	animation: scaleDown .5s ease-in-out forwards
}

#year-progress {
	display: flex;
	flex-wrap: wrap;
	width: 100%
}

.sekblock {
	box-sizing: border-box;
	width: calc((100%/50) - 2px);
	height: 5px;
	margin: 1px
}

.passed {
	background-color: gray
}

.future {
	background-color: #cbcccb
}

.sekblock.passed.last-passed {
	animation: fast-blink 1s infinite
}

.video-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	-o-object-fit: cover;
	object-fit: cover;
	z-index: -1;
	/* iOS: Video sonst fängt Ein-Finger-Gesten ab */
	pointer-events: none;
}

#formwrap,
#meldung,
.st0 {
	transition: opacity .5s ease-in-out
}

#meldung,
.st0 {
	opacity: 0
}

.st0 {
	transition: opacity 1s ease-in-out;
	fill: #000
}

.dark .st0 {
	fill: #fff
}

#formwrap,
.st0vis {
	opacity: 1
}

.rotatedivs.fade-in,
.rotatedivs.fade-out {
	transition: opacity 1s ease
}

.rotatedivs.fade-out {
	opacity: 0
}

.rotatedivs.fade-in {
	opacity: 1
}

/* darkmode: formularfelder kontrastreich */
.dark #formdiv input,
.dark #formdiv textarea,
.dark #booking-modal input,
.dark #booking-modal textarea {
	color: rgb(244, 244, 245) !important;
	-webkit-text-fill-color: rgb(244, 244, 245) !important;
	caret-color: rgb(244, 244, 245);
}

.dark #formdiv input::placeholder,
.dark #formdiv textarea::placeholder,
.dark #booking-modal input::placeholder,
.dark #booking-modal textarea::placeholder {
	color: rgb(161, 161, 170) !important;
	opacity: 1;
}

.dark #formdiv input:-webkit-autofill,
.dark #formdiv textarea:-webkit-autofill,
.dark #booking-modal input:-webkit-autofill,
.dark #booking-modal textarea:-webkit-autofill {
	-webkit-text-fill-color: rgb(244, 244, 245) !important;
	box-shadow: 0 0 0 1000px rgb(39, 39, 42) inset !important;
}