@charset "UTF-8";

/********** Newsletter subscribe  / unsubscribe [ö] **********/

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	/*
	scroll-behavior: smooth;
	*/
}

body {
	overflow-x: hidden;
	overflow-y: auto;
	background-color: #FFFFFF;
}

* {
	font-family: Archivo, sans-serif;
	color: rgb(var(--farbe_2));
	font-size: 16px;
	line-height: 22px;
	font-weight: 500;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	font-kerning: none;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
}

*.hidden {
	display: none;
}

*.nobr,
*.nowrap {
	white-space: nowrap;
	color: inherit;
	font-weight: inherit;
}

*:focus {
	outline: none;
}

#rahmen {
	position: relative;
	padding: 20px 20px 25px 20px;
}

#logo {
	position: relative;
	display: inline-block;
	font-size: 10px;
	line-height: 10px;
	font-weight: 400;
	margin: 0;
	padding: 0;
	color: rgb(var(--farbe_1));
	width: 129px;
	height: 68px;
	-webkit-mask-image: url("../bilder/Logo_Lichtblick_Kino_mobil.svg");
	mask-image: url("../bilder/Logo_Lichtblick_Kino_mobil.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	background-color: rgb(var(--farbe_1));
}
@media screen and (min-width: 541px) {
	#logo {
		margin: 0px 0px 0px -5px!important;
		width: 173px!important;
		height: 90px!important;
		-webkit-mask-image: url("../bilder/Logo_Lichtblick_Kino.svg")!important;
		mask-image: url("../bilder/Logo_Lichtblick_Kino.svg")!important;
	}
}
@media screen and (min-width: 720px) {
	#logo {
		margin: 0px 0px 0px -28px!important;
	}
}
#logo a {
	position: absolute;
	width: 100%;
	height: 100%;
}
#logo span {
	display: none;
}

#titel {
	font-size: 24px;
	line-height: 26px;
	font-weight: 700;
	margin: 0 0 0 -1px;
}
#logo + #titel {
	margin-top: 30px!important;
}

#feedback_confirm {
	position: relative;
	margin: 44px 0 0 0;
}
#feedback_confirm p {
	margin: 0;
}
#feedback_confirm.success p {
	/*
	color: #228822!important;
	*/
	color: rgb(var(--farbe_2))!important;
	font-weight: 600!important;
}
#feedback_confirm.fail p {
	/*
	color: #EE4444!important;
	*/
	color: rgb(var(--farbe_2))!important;
	font-weight: 600!important;
}
#feedback_confirm p + p {
	margin-top: 11px!important;
}
#feedback_confirm a,
#feedback_confirm u {
	font-size: inherit!important;
	line-height: inherit!important;
	font-weight: inherit!important;
	/*
	color: rgb(var(--farbe_1))!important;
	*/
	color: inherit!important;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: rgb(var(--farbe_1));
}

#input_block {
	position: relative;
	width: 100%;
	margin: 44px 0 0  0;
	transition: height 0.15s;
	overflow: hidden;
}

#input_block_innen {
	position: relative;
}

input {
	position: relative;
	width: calc(100% - 16px);
	border: 1px solid rgb(var(--farbe_1));
	margin: 0;
	padding: 2px 7px 2px 7px;
	font-size: 18px!important;
	line-height: 18px!important;
	text-align: left;
	vertical-align: top;
	background-color: transparent;
	background-image: none;
	-webkit-appearance: none;
	border-radius: 0!important;
}
/* Firefox-Hack: */
@-moz-document url-prefix() {
	input {
		padding: 7px 7px 6px 7px;
	}
}
input::placeholder {
	color: rgba(var(--farbe_1), 0.5);
	opacity: 1;
}
input:before,
input:after {
	display: none;
}

#buttons {
	position: relative;
	margin: 15px 0 0  0;
}

#buttons > div {
	position: relative;
	display: inline-block;
	margin: 0;
	padding: 10px 15px 10px 15px;
	font-weight: 600;
	line-height: 16px!important;
	border-radius: 10px;
	/*
	background-color: rgba(var(--farbe_1), 0.35);
	*/
	background-color: rgba(var(--farbe_1), 1);
	color: #FFF!important;
	cursor: pointer;
	user-select: none;
	text-align: center;
}
#buttons > div + div {
	margin-left: 15px;
}
#buttons > div:hover,
#buttons > div.aktiv {
	color: #FFF!important;
}
#subscribe.aktiv,
#subscribe:hover {
	/*
	background-color: #44BB44!important;
	*/
	background-color: rgba(var(--farbe_2), 1)!important;
}
#unsubscribe.aktiv,
#unsubscribe:hover {
	/*
	background-color: #EE4444!important;
	*/
	background-color: rgba(var(--farbe_2), 1)!important;
}
#buttons > div.fertig,
#buttons > div.fertig:hover {
	/*
	background-color: rgba(var(--farbe_1), 0.6)!important;
	*/
	color: rgba(var(--farbe_1), 0.7)!important;
	background-color: #FFF!important;
	border: 1px solid rgba(var(--farbe_1), 0.7)!important;
	padding: 9px 14px 9px 14px!important;
	cursor: default!important;
}

#feedback {
	position: relative;
	margin: 12px 0 0 0;
	padding: 0;
	font-weight: 600!important;
	display: none;
	/*
	color: rgb(var(--farbe_2))!important;
	*/
}
#feedback.success {
	/*
	color: #228822!important;
	color: rgb(var(--farbe_2))!important;
	*/
}
#feedback.fail {
	/*
	color: #EE4444!important;
	color: rgb(var(--farbe_2))!important;
	*/
}

#feedback p.klein {
	font-weight: 500!important;
	color: inherit!important;
	margin-top: 0!important;
	/*
	margin-top: 6px!important;
	font-size: 15px!important;
	line-height: 21px!important;
	opacity: 0.9;
	*/
}

#feedback a {
	font-weight: inherit!important;
	color: inherit!important;
	text-decoration: underline;
	text-decoration-color: rgb(var(--farbe_1));
	text-underline-offset: 4px;
}
#feedback a:hover {
	color: rgb(var(--farbe_1))!important;
	text-decoration-color: rgb(var(--farbe_2))!important;
	text-underline-offset: 4px;
}
#feedback strong {
	font-weight: 700;
	color: rgb(var(--farbe_1));
}

#info.unten {
	margin: 44px 0 0 0;
	color: rgb(var(--farbe_1))!important;
}
#info p {
	margin: 0;
	color: rgb(var(--farbe_1))!important;
}
#info p + p {
	margin-top: 11px!important;
}
#info span {
	font-weight: inherit!important;
	color: inherit!important;
}
#info a {
	font-weight: inherit!important;
	color: inherit!important;
	text-decoration: underline;
	text-decoration-color: rgb(var(--farbe_2));
	text-underline-offset: 4px;
}
#info a:hover {
	color: rgb(var(--farbe_2))!important;
	text-decoration-color: rgb(var(--farbe_1))!important;
}

#info p.klein {
	margin: 30px 0 0 0!important;
	font-size: 15px;
	line-height: 21px;
	font-weight: 400!important;
	/*
	color: rgba(var(--farbe_2), 0.9);
	color: rgb(var(--farbe_2));
	*/
}
#info p.klein + p.klein {
	margin-top: 8px!important;
}



/********** Responsiveness **********/

@media screen and (max-width: 350px) {
	#buttons > div {
		font-family: Archivo_SemiCondensed, sans-serif;
	}
}

@media screen and (min-width: 500px) and (max-width: 659px) {
	#rahmen {
		padding: 30px 30px 35px 30px;
	}
}

@media screen and (min-width: 660px) {
	#rahmen {
		padding: 30px 0 30px 0!important;
		width: 600px;
		left: 50%;
		margin-left: -300px;
	}
}

@media screen and (max-width: 500px) {
	#buttons {
		margin-top: 20px!important;
	}
	#buttons > div {
		width: calc(50% - 39px);
	}
	#buttons > div + div {
		margin-left: 0!important;
	}
	#subscribe + #unsubscribe {
		float: right;
	}
	#feedback {
		margin-top: 17px!important;
	}
}

@media (hover: none) and (pointer: coarse) {
	input {
		font-size: 20px!important;
		line-height: 20px!important;
	}
	#buttons > div {
		font-size: 18px;
		line-height: 18px!important;
		color: #FFF!important;
	}
	#subscribe {
		/*
		background-color: #44BB44!important;
		background-color: rgb(var(--farbe_1))!important;
		*/
	}
	#unsubscribe {
		/*
		background-color: #EE4444!important;
		background-color: rgb(var(--farbe_1))!important;
		*/
	}
	#feedback,
	#feedback * {
		font-size: 18px!important;
		line-height: 24px!important;
	}
	#feedback p.klein {
		font-size: 17px!important;
		line-height: 23px!important;
	}
}