/* ! Layout, Colors */

:root {
	--color-sparkassenrot: #ff0000;
	--color-text: #333333;
	--color-bg: #f9f9f9;
	--color-header: #f2f2f2;
	--color-gray-0: #f5f5f5;
	--color-gray-1: #f0f0f0;
	--color-gray-2: #ccc;
	--color-gray-3: #b0b0b0;
	--color-gray-4: #999;
	--color-gray-5: #666;
	--color-progress-1: #b7892d;
	--color-progress-2: #a99b42;
	--color-progress-3: #a2ab3e;
	--color-progress-4: #719127;
	--color-progress-5: #5c8f35;
	--color-progress-6: #2d8c2d;
	--color-progress-7: #148a53;
	--color-progress-bg-1: #EFD8AB;
	--color-progress-bg-2: #EFE6AC;
	--color-progress-bg-3: #E6EBB0;
	--color-progress-bg-4: #DDF0B3;
	--color-progress-bg-5: #D3F1BC;
	--color-progress-bg-6: #C6EEC6;
	--color-progress-bg-7: #B8EBD3;
	--color-warning: #ff5770;
	--color-confirm: #21c668;
	--color-placeholder-content: #0080ff;
	--color-placeholder-content-bg: #e0efff;
	
	--disabled-opacity: 0.25;
	
	--font-size-default: 1.0rem; /* 16px  */
	--font-size-xxxl: 2.4rem; /* ca. */
	--font-size-xxl: 2.0rem; /* ca. 30px */
	--font-size-xl: 1.5rem; /* ca. 21px */
	--font-size-l: 1.2rem; /* ca. 18px */
	--font-size-s: 0.9rem; /* ca.  */
	--font-size-xs: 0.8rem; /* ca. 12px */
	--font-size-xxs: 0.75rem; /* ca. 12px */
	
	--margin-width: 24px;
	--tile-overshoot: -6px;
	--header-height: 60px; /* Muss größer sein wenn im Fullscreen-Modus (WebApp) */
}

@media screen and (max-width: 350px)
{
	:root {	--margin-width: 12px; }
}

html, body {
	width: 100%;
	height: 100%;
}

/*html { overflow: hidden; }*/

html * { box-sizing: border-box; }

body {
	position: relative;
	color: var(--color-text);
	background-color: var(--color-header); /* should be same as header bg */
	background-color: var(--color-bg);
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	/*overflow: auto;*/
}
body.modal-open { overflow: hidden; }

section.view {
	display: none;
	min-height: calc(100vh - 2rem - 8px);
	min-height: calc(100vh - 2rem - 320px);
	padding-top: calc(var(--header-height) + 20px);
	padding-bottom: 40px;
	background: var(--color-bg);
}
body.view-has-hero-image section.view{ padding-top: 0; }
section.view.is-contact { min-height: calc(100vh - 2rem - 100px); }
section.view.active { display: block; }

a { color: inherit; }
.bg-white { background: white !important; }

.view-steps .step { display: none; }
.view-steps .step.current { display: block; }

.view .content-wrapper {
	max-width: 960px;
	margin-left: auto; margin-right: auto;
	padding: 0 var(--margin-width);
}

.view iframe { margin-bottom: 5em; }

.columns-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 6px; }
.columns-3-mobile { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 24px; row-gap: 6px; }

.bottom-margin-1 { margin-bottom: 1em !important; }
.bottom-margin-2 { margin-bottom: 2em !important; }
.bottom-margin-4 { margin-bottom: 4em !important; }

.centered { text-align: center; }
.align-right { text-align: right; }
.align-right-on-mobile { text-align: right; }
.align-full { width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; }
.space-between { display: flex; justify-content: space-between; }

.hidden { display: none; }

@media screen and (min-width: 960px)
{
	.align-right-on-mobile { text-align: inherit; }
	.columns-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: var(--margin-width); margin-bottom: 1rem; }
}

/* ! Typography */

html, body {
	font-family: 'SparkasseWeb', Helvetica, Arial, sans-serif;
	font-weight: 200;
	font-size: 15px;
	line-height: 1.5;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased; /* Safari */
	-moz-osx-font-smoothing: grayscale; /* Firefox */
	font-smooth: always;
}

h1 {
	font-weight: 200;
	font-size: var(--font-size-xl);
}

h2 {
	font-weight: 200;
	font-size: var(--font-size-l);
}

h3 {
	font-weight: 400;
	font-size: var(--font-size-default);
}

h4 {
	font-weight: 700;
	font-size: var(--font-size-xs);
	color: var(--color-gray-3);
	text-transform: uppercase;
	margin-bottom: 0.5em;
}

p {
	font-size: Var(--font-size-default);
	margin-bottom: 1em;
}

p.large { font-size: var(--font-size-xxxl); }
p.small { font-size: var(--font-size-s); }
p.extrasmall { font-size: var(--font-size-xs); }


input, select, option {
	font-family: sans-serif;
	font-family: 'SparkasseWeb', Helvetica, Arial, sans-serif;
	font-weight: 200;
	font-size: var(--font-size-default);
}

button {
	font-family: 'SparkasseWeb', Helvetica, Arial, sans-serif;
	font-weight: 600;
	font-size: var(--font-size-default);
}

ul.bullets {
	list-style-type: disc;
	padding-left: 1.5em;
	line-height: 1.6;
}

@media screen and (min-width: 960px)
{
	html, body { font-size: 18px; }
}

/* ! Molecules */

.view > .content-wrapper > h1, .view .step > h1 {
	font-weight: 200;
	font-size: var(--font-size-xl);
	margin-bottom: 1.5em;
}
.view > .content-wrapper > h1:not(.has-icon), .view .step > h1:not(.has-icon) { line-height: 1.2; }
.view > .content-wrapper > h1 + p { margin-bottom: 3em; }

p.important {
	padding: 1rem;
	font-weight: 400;
	color: white;
	background: var(--color-sparkassenrot);
	border-radius: 8px;
}

p.notice {
	
	margin-top: 1em;
	margin-bottom: 1em;
	font-weight: 600;
	color: var(--color-warning);
	
}
p.notice.confirmation { color: var(--color-confirm); }
p.tile.notice {
	padding: 12px;
	background-color: transparent;
	border: 1px solid var(--color-sparkassenrot);
	border-radius: 8px;
	box-shadow: none;
}
p.tile.notice.confirmation { border-color: var(--color-confirm); }

.has-icon { position: relative; }
h1.has-icon { padding-left: 3em; line-height: 2.5em; }
p.has-icon, a.has-icon { padding-left: 1.9em; }

.has-icon:before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 1.6em;
	height: 1.6em;
	background: url(../assets/icons/icon_haus.svg) no-repeat center center;
	background-size: contain;
}
h1.has-icon:before { width: 2.2em; height: 2.2em; }

.has-icon.icon-haus:before { background-image: url(../assets/icons/icon_haus.svg); }
.has-icon.icon-dokument:before { background-image: url(../assets/icons/icon_dokument.svg); }
.has-icon.icon-berater:before { background-image: url(../assets/icons/icon_berater.svg); }
.has-icon.icon-foerderungen:before { background-image: url(../assets/icons/icon_foerderungen.svg); }
.has-icon.icon-energiesparen:before { background-image: url(../assets/icons/icon_energiesparen.svg); }
.has-icon.icon-liste:before { background-image: url(../assets/icons/icon_liste.svg); }
.has-icon.icon-ordner:before { background-image: url(../assets/icons/icon_ordner.svg); }
.has-icon.icon-geld:before { background-image: url(../assets/icons/icon_geld.svg); }
.has-icon.icon-herz:before { background-image: url(../assets/icons/icon_herz.svg); }
.has-icon.icon-werkzeug:before { background-image: url(../assets/icons/icon_werkzeug.svg); }
.has-icon.icon-frage:before { background-image: url(../assets/icons/icon_frage.svg); }
.has-icon.icon-kalender:before { background-image: url(../assets/icons/icon_kalender.svg); }
.has-icon.icon-telefon-grau:before { background-image: url(../assets/icons/icon_telefon_grau.svg); }
.has-icon.icon-telefon:before { background-image: url(../assets/icons/icon_telefon.svg); }
.has-icon.icon-mail-grau:before { background-image: url(../assets/icons/icon_mail_grau.svg); }
.has-icon.icon-mail:before { background-image: url(../assets/icons/icon_mail.svg); }
.has-icon.icon-question:before { background-image: url(../assets/icons/icon_question.svg); }
.has-icon.icon-question-full:before { background-image: url(../assets/icons/icon_question_full.svg); }
.has-icon.icon-liste-small:before { background-image: url(../assets/icons/icon_liste_24x24.svg); }
.has-icon.icon-edit:before { background-image: url(../assets/icons/icon_edit.svg); }
.has-icon.icon-plus:before { background-image: url(../assets/icons/icon_plus_grau.svg); }
.has-icon.icon-kompass:before { background-image: url(../assets/icons/icon_kompass.svg); }
.has-icon.icon-planen:before { background-image: url(../assets/icons/icon_planen.svg); }
.has-icon.icon-rakete:before { background-image: url(../assets/icons/icon_rakete.svg); }
.has-icon.icon-check:before { background-image: url(../assets/icons/icon_abgehakt.svg); }
.has-icon.icon-ziel:before { background-image: url(../assets/icons/icon_zielflagge.svg); }
.has-icon.icon-dokument:before { background-image: url(../assets/icons/icon_dokument.svg); }
.has-icon.icon-hilfe:before { background-image: url(../assets/icons/icon_hilfe.svg); }
.has-icon.icon-return:before { background-image: url(../assets/icons/icon_return.svg); }
.has-icon.icon-arrow-left:before { background-image: url(../assets/icons/icon_arrow_left.svg); }
.has-icon.icon-delete:before { background-image: url(../assets/icons/icon_delete.svg); }


.tile {
	padding: 18px var(--margin-width);
	margin: 0 var(--tile-overshoot) 0.5em;
	background: white;
	border-radius: 8px;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
}

a.button-s, a.button-l, a.button-xl, a.button-dashboard {
	display: block;
	position: relative;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-right: 0;
	font-size: 1.2rem;
	line-height: 1.35;
	text-decoration: none;
	color: var(--color-text);
}
a.button-s { padding-right: 12px; font-size: 1.08rem; }

.button-s.has-icon { padding-left: 4.2rem; }
.button-l.has-icon { padding-left: 4.5rem; }
.button-xl.has-icon { padding-left: 5.2rem; }
.button-s.has-icon:before, .button-l.has-icon:before, .button-xl.has-icon:before { width: 2.2em; height: 2.2em; left: 1rem; top: 50%; margin-top: -1.1em; }
.button-xl .kicker { display: block; margin-bottom: 0.4em; font-size: var(--font-size-xs); font-weight: 700; color: var(--color-gray-3); text-transform: uppercase; }
.button-xl p { margin-top: 0.3em; margin-bottom: 0; }
.button-l .small { display: block; margin-bottom: 0.1em; font-size: var(--font-size-s);  }
.button-s.has-icon.icon-stacked { padding-top: 3.6rem; padding-left: 12px; }
.button-s.has-icon.icon-stacked:before { left: 0.8rem; top: 12px; margin-top: 0; }
.button-dashboard { position: relative; height: 6rem; white-space: nowrap; }
.button-dashboard.has-icon { padding-left: 4.0rem; padding-top: 1.0rem; }
.button-dashboard.has-icon:before { width: 2.2em; height: 2.2em; left: 1rem; top: 0.8rem; }
.button-dashboard span.output { position: absolute; right: 1rem; bottom: 0.5rem; font-size: 1.8rem; }
.button-dashboard span.output span.small { font-size: var(--font-size-default); }
.button-dashboard.disabled { opacity: var(--disabled-opacity); pointer-events: none; }

.check:after {
	content: '';
	display: block;
	position: absolute;
	right: 12px;
	top: 12px;
	width: 24px;
	height: 24px;
	background: url('../assets/icons/icon_check.svg') no-repeat center center;
	background-size: contain;
}
.requested:after {
	content: '';
	display: block;
	position: absolute;
	right: 12px;
	top: 12px;
	width: 24px;
	height: 24px;
	background: url('../assets/icons/icon_request.svg') no-repeat center center;
	background-size: contain;
}

.accordion { padding: 0; cursor: pointer; }
.accordion .header { position: relative; padding-top: 1rem; padding-bottom: 2.2rem; }
.accordion .header:before {
	content: '';
	position: absolute;
	left: 14px;
	bottom: 10px;
	width: 16px;
	height: 16px;
	border-radius: 16px;
	background: url('../assets/icons/icon_dropdown_24x24_negativ.svg') no-repeat center center;
	background-color: var(--color-gray-3);
	background-size: 14px;
	background-position: 50% 70%;
	transform: rotate(-90deg);
	transition: transform 0.2s ease-out;
}
.accordion.expanded .header:before { transform: rotate(0); }
.accordion .header, .accordion .option { padding-left: 1rem; padding-right: 40px; }
.accordion h2 { font-size: var(--font-size-xl); margin-bottom: 1em; }
.accordion h2.has-icon { padding-left: 3.8rem; }
.accordion h2.has-icon:before { width: 2em; height: 2em; top: 50%; margin-top: -1.0em; }
.accordion h3 { font-size: 1.1rem; font-weight: 400; margin-bottom: 0em; }
.accordion p { font-size: var(--font-size-s); margin-bottom: 0; }
.accordion .options { display: none; }
.accordion .option { position: relative; padding-top: 0.8rem; padding-bottom: 1rem; border-top: 1px solid var(--color-gray-2); }
.accordion .option:before {
	content: '';
	position: absolute;
	right: 12px;
	top: calc(50% - 10px);
	width: 20px;
	height: 20px;
	background: url('../assets/icons/icon_dropdown_24x24.svg') no-repeat center center;
	background-size: contain;
	transform: rotate(-90deg);
}
.accordion .option:hover { background-color: var(--color-gray-2); }


.fragen-liste .frage { position: relative; padding: 0.5em 1em; }
.fragen-liste .frage.check:after { top: 8px; }

.add-listitem {
	display: block;
	margin: 2em var(--tile-overshoot) 0.5em;
	padding: 0.5em 12px;
	font-size: var(--font-size-default);
	font-weight: 400;
	text-align: left;
	text-decoration: none;
	color: var(--color-gray-4);
	border: 1px dashed var(--color-gray-3);
	border-radius: 8px;
}
.add-listitem:before { left: auto; right: 6px; height: 100%; }

a.help { font-weight: 400; line-height: 1.6; color: var(--color-sparkassenrot); text-decoration: none; }
a.edit, a.return, a.delete { display: inline-block; padding-left: 1.6em; font-size: var(--font-size-s); line-height: 1.4; text-decoration: none; color: var(--color-text); cursor: pointer; }
a.edit:before, a.return:before, a.delete:before { width: 1.4em; height: 1.4em; }

[data-counter] { position: relative; }
[data-counter]:after {
	content: attr(data-counter);
	display: block;
	position: absolute;
	right: -0.4em;
	top: -0.4em;
	width: 1.6em;
	height: 1.6em;
	border-radius: 1.6em;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.62;
	text-align: center;
	color: white;
	background: var(--color-sparkassenrot);
}

button {
	padding: 0.8em 4em;
	border: none;
	border-radius: 100px;
	color: white;
	background: var(--color-gray-3);
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}
button.wide { min-width: 50%; }
button.cta { padding: 0.6em 2em; }
button.red { background: var(--color-sparkassenrot); }
button.small {padding: 0.4em 1em; font-size: var(--font-size-s); }
button.large { padding: 0.8em 2em; font-size: var(--font-size-l); }
button:hover { background: var(--color-gray-4); }
button.red:hover { background: var(--color-sparkassenrot); }

button.button-outline {
	padding: 0.5em 1.5em;
	font-size: var(--font-size-xxs);
	font-weight: 700;
	color: var(--color-gray-6);
	background: transparent;
	border: 1px solid var(--color-gray-5);
}
button.button-outline.has-icon { padding-left: 3.2em; }
button.button-outline.has-icon:before {	left: 1em; height: 100%; }
button.has-badge[data-counter]:after {
	top: -0.6em;
	right: -0.8em;
	width: 1.7em;
	height: 1.7em;
	font-size: 0.85rem;
	line-height: 1.72;
}
/*
button.has-badge { opacity: var(--disabled-opacity); }
*/
button.has-badge[data-counter] { opacity: 1; }

button:disabled, button:disabled:hover { background: var(--color-gray-3); opacity: var(--disabled-opacity); }

.columns-2 button { padding: 0.8em 0; }

.placeholder-frame {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 15em;
	margin-top: 3em;
	margin-bottom: 3em;
	padding: 2em;
	font-weight: 400;
	font-size: var(--font-size-l);
	text-align: center;
	color: var(--color-placeholder-content);
	background: var(--color-placeholder-content-bg);
}

@media screen and (min-width: 960px)
{
	.button-xl.has-icon { padding-left: 20px; padding-top: 8rem; padding-bottom: 2rem; }
	.button-xl.has-icon:before { width: 4rem; height: 4rem; top: 20px; left: 16px; margin-top: 0; }
}

@media screen and (max-width: 340px)
{
	a.button-s { font-size: var(--font-size-s); }
}

/* ! Content blocks */

.hero { position: relative; margin-bottom: 1rem; }
.hero-image { height: 55vh; overflow: hidden; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-content {	min-height: 20vh; padding: 2em var(--margin-width) 2em; background: white; }
.hero-content h1 { margin: 0 0 0.5em; font-size: var(--font-size-xxl); line-height: 1.2; }
.hero-content p { max-width: 40em; }
.hero-content button { margin-top: 0.5em; }

.content-block { margin-top: 3rem; margin-bottom: 3rem; padding: 4rem var(--margin-width) 4rem; }
.content-block.hero { margin-top: 0; padding-top: 7rem; }
.content-block > * { max-width: 960px; margin: 0 auto; }
.content-style-dark { color: white; background-color: var(--color-gray-5); }
.content-block .image { margin-right: calc(-1 * var(--margin-width)); margin-bottom: 2em; text-align: right; }
.content-block img { max-width: 100%; }
.content-block h2 { margin: 0 0 1em; font-size: var(--font-size-xxl); line-height: 1.2; }
.content-block * + h2 { margin-top: 0; }

.content-block .layout-text-image,
.content-block .layout-image-text { margin-bottom: 2em; }

.image-block {
	position: relative;
	width: 100%;
	height: 200vh;
	background-size: cover;
	background-repeat: no-repeat;
}
.image-block .bg {
	position: sticky;
	width: 100vw;
	height: 100vh;
	top: 0;
	background: green;
}

.image-block .bg img { width: 100vw; height: 100vh; object-fit: cover; }

.image-block .content {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 100vh;
	width: 100vw;
	height: 100vh;
	padding: 0 var(--margin-width);
	color: white;
	background: rgba(0, 0, 0, 0.5);
}


@media screen and (max-width: 500px)
{
	.hero-content {	min-height: 0; background: none; }
}


@media screen and (min-width: 960px)
{
	.hero { margin-bottom: 6rem; }
	.hero-image { min-height: 600px; }
	.hero-content {
		position: absolute;
		left: 0;
		bottom: 3rem;
		width: 40%;
		min-width: 500px;
		max-width: 700px;
		min-height: 0;
		border-top-right-radius: 8px;
		border-bottom-right-radius: 8px;
		padding: 2em var(--margin-width) 2em 8em;
		background: rgba(255, 255, 255, 0.9);
	}
	
	.content-block { margin-top: 6rem; margin-bottom: 6rem; padding-top: 0; }
	.content-block .image { margin: 0; }
	.content-block .layout-text-image,
	.content-block .layout-image-text {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 4em;
	}
	.content-block .layout-text-image :last-child,
	.content-block .layout-image-text :last-child { margin-bottom: 0; }
	.content-block .layout-text-image .image { grid-row: 1 / span 1; grid-column: 2 / span 1; align-self: end; }
	.content-block .layout-text-image .text { grid-row: 1 / span 1; grid-column: 1 / span 1; align-self: end; }
	.content-block .layout-image-text .image { grid-row: 1 / span 1; grid-column: 1 / span 1; align-self: end; }
	.content-block .layout-image-text .text { grid-row: 1 / span 1; grid-column: 2 / span 1; align-self: end; }
}

@media screen and (min-width: 1280px)
{
	.hero-image { min-height: 850px; }
}


/* ! Forms */

input, select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	color: var(--color-text);
	background: white;
	border: none;
}
/* Remove spinners */
input[type=number] { -moz-appearance: textfield; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

input[type=file]::-webkit-file-upload-button { visibility: hidden; width: 0; } 

input { border-bottom: 1px solid var(--color-gray-3); }

/* Sparkasse Web does not seem to work in select options safari */
/*select { font-family: system-ui, Helvetica, Arial, sans-serif; }*/
/*select option { font-family: Helvetica, Arial, sans-serif !important; font-weight: 600 !important; }*/
select:focus { outline: 0; }

.select-wrapper { Position: relative; padding: 0 12px; }
.select-wrapper select { max-width: 100%; padding: 0.75em 1.5em 0.75em 0; }
.select-wrapper:after {
	content: '';
	display: block;
	position: absolute;
	width: 20px;
	height: 100%;
	right: 12px;
	top: 0;
	background-color: fuchsia;
	background: url('../assets/icons/icon_dropdown_24x24.svg') no-repeat center right;
	background-size: contain;
	pointer-events: none;
}

::placeholder {
  color: var(--color-gray-2);
  opacity: 1; /* Firefox */
}
:-ms-input-placeholder { color: var(--color-gray-2); }
::-ms-input-placeholder { color: var(--color-gray-2); }


.radio-toggle {
	display: flex;
	width: 100%;
	border-radius: 8px;
	color: var(--color-gray-5);
	/*background: var(--lightgray);*/
	overflow: hidden;
}
.radio-toggle > input[type='radio'] { display: none; }
.radio-toggle > input + label {
	display: inline-block;
	width: 100%;
	flex: 0 1 auto;
	margin-bottom: 0;
	text-align: center;
	padding: 2em 0.5em;
	font-size: var(--font-size-default);
	font-weight: 400;
	line-height: 1.4;
	background: #e6e6e6;
	cursor: pointer;
}
.radio-toggle > input + label:not(:last-of-type) { border-right: 2px solid var(--color-bg); }
.radio-toggle > input:checked + label { color: white; background: var(--color-sparkassenrot); transition: background 0.1s ease; }
.radio-toggle > input[disabled] + label { color: var(--color-gray-4); background: var(--color-gray-2); opacity: var(--disabled-opacity); }
.radio-toggle > input[disabled] + label:hover { cursor: not-allowed;}
.radio-toggle > input + label span { display: block; font-size: var(--font-size-xs); }

.input-box {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.4em;
	padding: 0 12px;
	font-size: var(--font-size-default);
	line-height: 1.2;
	overflow: hidden;
}
.input-box label, label.input-box { font-weight: 400; color: var(--color-gray-3); white-space: nowrap; }

.input-box input {
	width: 100%;
	height: 35px;
	margin-left: 1em;
	padding: 0.55em 0;
	line-height: 1.2;
	text-align: right;
	background: transparent;
	border-bottom: none;
}
.input-box select {
	width: 100%;
	padding: 0.5em 1.5em 0.5em 0;
	line-height: 1.2;
	text-align: right;
	text-align-last: right;
	background: transparent;
}
.input-box input[type=file] { padding-top: 0.6em; }
.input-box input[type=date] { display: block; line-height: 0.86em; vertical-align: bottom; }
.input-box input[type=date]::-webkit-datetime-edit { padding-top: 2px; }
.input-box .select-wrapper { width: 100%; margin-left: 1em; padding: 1px 0; }
.input-box .select-wrapper:after { right: 0; }
.input-box input.toggle-switch { margin: 6.5px 0; background-color: var(--color-gray-2); }
.input-box input.toggle-switch:checked { background-color: var(--color-confirm); }
.input-box input.toggle-switch:after { background: white !important; }

.input-box.readonly, .input-box.readonly * { color: white; background: var(--color-gray-5); }
.input-box.readonly label, label.input-box.readonly { color: var(--color-gray-2); }
.input-box.readonly.has-unit:after { color: white; }

.input-box.pending input,
.input-box.pending .select-wrapper { visibility: hidden; }
.input-box.pending:after {
	content: '';
	display: block;
	position: absolute;
	right: 12px;
	top: 20%;
	width: 30px;
	height: 60%;
	background: url(../assets/icons/3-dots-fade.svg) no-repeat center center;
	background-size: contain;
}

.input-box.confirm {  /*background-color: yellow;*/ }
.input-box.confirm.confirmation-needed,
.input-box.confirm.is-confirmed { padding-right: 40px; }
/*
.input-box.confirm:before {
	content: '';
	display: block;
	position: absolute;
	right: 8px;
	width: 20px;
	height: 20px;
	background: white;
	border: 1px solid var(--color-gray-2);
	border-radius: 50%;
	cursor: pointer;
	z-index: 10;
}
*/
.input-box.confirm.confirmation-needed { background-color: rgb(214, 234, 255); }
.input-box.confirm.is-confirmed { /*background-color: rgb(231, 255, 226);*/ }

.input-box.confirm input[name="confirmed"] {
	display: none;
	position: absolute;
	right: 8px;
	width: 20px;
	height: 20px;
	padding: 0;
	background: white;
	background: url(../assets/icons/icon_check_grau.svg) no-repeat center center;
	/*border: 1px solid var(--color-gray-2);*/
	border-radius: 50%;
	cursor: pointer;
}
.input-box.confirm.confirmation-needed input[name="confirmed"],
.input-box.confirm.is-confirmed input[name="confirmed"] {
	display: block;
}
.input-box.confirm.is-confirmed input[name="confirmed"] {
	background: url(../assets/icons/icon_check.svg) no-repeat center center;
	border: none;
}


.input-box.has-unit:after { font-weight: 200; color: var(--color-text); }
.input-box.has-unit.unit-qm:after { content: 'qm'; margin-left: 0.16em; }
.input-box.has-unit.unit-eur:after { content: '€'; margin-left: 0.16em; }
.input-box.has-unit.unit-degrees:after { content: '°'; margin-left: 0.16em; }
.input-box.has-unit.unit-kwh:after { content: 'kWh'; margin-left: 0.16em; }


@media screen and (min-width: 960px)
{
	.input-box input { height: 48px; }
	.input-box select { height: 46px; }
	.input-box input[type=date]::-webkit-datetime-edit { padding-top: 6px; }
	.input-box input.toggle-switch { margin: 13px 0; }
}


/* ! Modal Popups */

.modal-popup {
	display: none;
	justify-content: center;
	align-items: center;
	position: fixed;
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;
	z-index: 10000;
}
.modal-popup.open { display: flex; }

.modal-popup_window {
	position: relative;
	width: 90%;
	max-width: 500px;
	padding: var(--margin-width);
	background: white;
	border-radius: 8px;
}
.modal-popup_window h2 { max-width: 90%; padding-top: 1em; margin-bottom: 3em; }
.modal-popup_window input { width: 100%; font-size: var(--font-size-xl); }
.modal-popup_window .close {
	position: absolute;
	right: var(--margin-width);
	top: var(--margin-width);
	width: 16px;
	height: 16px;
	background: url(../assets/icons/icon_close.svg) no-repeat center center;
	background-size: contain;
	cursor: pointer;
}

.modal-popup_buttons { display: flex; justify-content: space-between; margin-top: 4em; }
.modal-popup_buttons button { padding: 0.75em 2em; font-size: var(--font-size-s); }
.modal-popup_buttons button.confirm { background: var(--color-sparkassenrot); }
.modal-popup_buttons button.disabled { background: var(--color-gray-3) !important; opacity: var(--disabled-opacity); cursor: default; }

.modal-popup_overlay {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
	background: rgba(0, 0, 0, 0.5);
}
.modal-popup.must-confirm .modal-popup_window .close { display: none; }

/* ! Header, Menu */

.main-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	z-index: 1000;
	top: 0;
	width: 100%;
	height: 100px;
	padding: 0 0 0 var(--margin-width);
	height: var(--header-height);
	background-color: var(--color-header);
}

body.view-has-hero-image .main-header { background-color: rgba(240, 240, 240, 0.9); }
.main-header a { line-height: 1; }
.main-header .logo { max-height: 48px; }

.menu-open {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 60px;
	height: 48px;
	padding-right: var(--margin-width);
}
.menu-open img { width: 24px; }

.main-menu {
	--menu-width: min(max(33%, 240px), 360px);
	position: fixed;
	left: 100%;
	top: 0;
	width: var(--menu-width);
	height: 100vh;
	overflow: hidden;
	padding: var(--header-height) 60px 24px var(--margin-width);
	background: var(--color-gray-5);
	transition: left 0.2s cubic-bezier(0.2, 0, 0.2, 1);
}
.main-menu.open { left: calc(100% - var(--menu-width)); }
.main-menu .menu-close {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	position: absolute;
	right: 0;
	top: calc(var(--header-height) - 54px);
	width: 60px;
	height: 48px;
	padding-right: var(--margin-width);
}
.main-menu ul { transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.3, 0, 0.3, 1); }
.main-menu.open ul { transform: translateX(0); }
.main-menu li { }
.main-menu a { display: inline-block; padding: 0.5em 0; font-size: 1.0875rem; color: white; text-decoration: none; }
.main-menu li hr { border: none; border-top: 1px solid var(--color-gray-4); margin-top: 8px;}
.main-menu h4 { margin-top: 0; margin-bottom: 0; }
.main-menu li h4 + hr { margin-top: -5px;}
.main-header .overlay { display: none; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: /*rgba(255, 0, 255, 0.3)*/none; z-index: -1; }
.main-header .main-menu.open + .overlay { display: block; }

@media screen and (max-width: 340px)
{
	.main-menu a {	padding: 0.3em 0;  }
}


/* ! Footer, Contact */

.main-footer {
	/* Footer fixed/expandable */
	/*
	position: fixed;
	left: 0;
	top: calc(100dvh - 2.8em);
	*/
	width: 100%;
	padding-bottom: 2rem;
	background: var(--color-header);
	transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1);
}
.main-footer.expanded { top: calc(100dvh - 16em); }
.main-footer.scroll { top: 100lvh; }

.main-footer .footer-top { display: flex; align-items: center; justify-content: space-between; max-width: 960px; height: 2.8em; margin: 0 auto; padding: 0 var(--margin-width); }
/*.main-footer .footer-top * { cursor: pointer; }*/
.main-footer .footer-top h4 { color: var(--color-gray-3); margin: 0; }

.footer-contact { display: flex; align-items: flex-start; /*min-height: 20em;*/ max-width: 960px; overflow: hidden; font-weight: 600; margin: 0 auto 2rem; padding: 8px var(--margin-width) 0; }

.footer-contact .contact-picture { margin-right: 1em; }
.footer-contact .contact-picture img { width: 90px; height: 90px; border-radius: 90px; object-fit: cover; }
.footer-contact .contact-name { font-size: 1.1rem; margin-bottom: 0.4em; }
.footer-contact a { display: block; max-width: calc(100vw - 90px - 2 * var(--margin-width) - 1em); text-decoration: none; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.footer-contact .contact-phone,
.footer-contact .contact-mail { padding-left: 2.4em; margin-bottom: 0.8em; font-size: var(--font-size-s); letter-spacing: -0.02em; line-height: 1.2; }
.footer-contact .contact-phone span,
.footer-contact .contact-mail span { display: block; font-size: var(--font-size-xs); font-weight: 400; color: var(--color-gray-4); }
.footer-contact .has-icon:before { width: 2em; height: 2em; }

.main-footer .footer-links { text-align: center; font-size: var(--font-size-s); overflow: hidden; padding-top: 1rem; border-top: 1px solid var(--color-gray-2);}
.main-footer .footer-links ul { display: flex; justify-content: center; }
.main-footer .footer-links a { display: inline-block; padding: 0.2rem 0.6rem; color: var(--color-gray-5); text-decoration: none; }

.main-footer.hide-contact .footer-top h4 { visibility: hidden; }
.main-footer.hide-contact .footer-contact { display: none; }

@media screen and (max-width: 340px)
{
	.main-footer .footer-links { font-size: var(--font-size-xs); }
}

/* ! View-spezifische Elemente */

#immobilie:not(.incomplete) .if-incomplete { display: none; }
#immobilie:not(.unconfirmed) .if-unconfirmed, #immobilie.invalid .if-unconfirmed { display: none; }
#immobilie:not(.invalid) .if-invalid { display: none; }
#immobilie .info { font-weight: 400; color: white; background-color: var(--color-gray-5); box-shadow: none; }
#immobilie.incomplete #immobilie-adresse-head { color: var(--color-sparkassenrot); }
#immobilie.unconfirmed #credium-request { background: var(--color-gray-3); }
#immobilie.unconfirmed #immobilie-daten-head { color: var(--color-sparkassenrot); }
#immobilie.unconfirmed #immobilie-button-done { opacity: var(--disabled-opacity); pointer-events: none; }

#vorhaben-liste { }
#vorhaben-liste .vorhaben { position: relative; }
#vorhaben-liste .vorhaben .header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
#vorhaben-liste .vorhaben h3 { font-size: var(--font-size-l); font-weight: 700; line-height: 1 }
#vorhaben-liste .vorhaben .edit,
#vorhaben-liste .vorhaben .delete { margin-bottom: 1rem; margin-right: 1rem;  }
#vorhaben-liste .vorhaben .status { margin-bottom: 0.3em; font-size: var(--font-size-s); font-weight: 400; color: var(--color-gray-3); pointer-events: none; }
#vorhaben-liste .vorhaben .status span.fragen { font-size: 4em; font-weight: 700; line-height: 0; color: var(--color-gray-4); }
#vorhaben-liste .vorhaben ul.progressbar { list-style: none; margin: none; display: flex; }
#vorhaben-liste .vorhaben ul.progressbar li {
	display: inline-block;
	width: 100%;
	height: 2.5em;
	font-size: var(--font-size-xs);
	font-weight: 400;
	text-align: center;
	line-height: 2.5em;
	background: var(--color-gray-0);
	margin-right: 2px;
	overflow: hidden;
}
#vorhaben-liste .vorhaben ul.progressbar li:first-child {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
#vorhaben-liste .vorhaben ul.progressbar li:last-child {
	margin: 0;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
/*
#vorhaben-liste .vorhaben .status.progress-1 { color: var(--color-progress-1); }
#vorhaben-liste .vorhaben .status.progress-2 { color: var(--color-progress-2); }
#vorhaben-liste .vorhaben .status.progress-3 { color: var(--color-progress-3); }
#vorhaben-liste .vorhaben .status.progress-4 { color: var(--color-progress-4); }
#vorhaben-liste .vorhaben .status.progress-5 { color: var(--color-progress-5); }
#vorhaben-liste .vorhaben .status.progress-6 { color: var(--color-progress-6); }
*/
#vorhaben-liste .vorhaben .status.progress-7 { color: var(--color-progress-7); }

#vorhaben-liste .vorhaben ul.progressbar[data-progress="1"] li.active { color: var(--color-progress-1); background: var(--color-progress-bg-1); }
#vorhaben-liste .vorhaben ul.progressbar[data-progress="2"] li.active { color: var(--color-progress-2); background: var(--color-progress-bg-2); }
#vorhaben-liste .vorhaben ul.progressbar[data-progress="3"] li.active { color: var(--color-progress-3); background: var(--color-progress-bg-3); }
#vorhaben-liste .vorhaben ul.progressbar[data-progress="4"] li.active { color: var(--color-progress-4); background: var(--color-progress-bg-4); }
#vorhaben-liste .vorhaben ul.progressbar[data-progress="5"] li.active { color: var(--color-progress-5); background: var(--color-progress-bg-5); }
#vorhaben-liste .vorhaben ul.progressbar[data-progress="6"] li.active { color: var(--color-progress-6); background: var(--color-progress-bg-6); }
#vorhaben-liste .vorhaben ul.progressbar[data-progress="7"] li.active { color: var(--color-progress-7); background: var(--color-progress-bg-7); }

#vorhaben-liste-add {
	display: block;
	margin: 2em var(--tile-overshoot) 0.5em;
	padding: 18px var(--margin-width);
	font-size: var(--font-size-l);
	font-weight: 400;
	text-align: center;
	text-decoration: none;
	color: var(--color-gray-4);
	border: 1px dashed var(--color-gray-3);
	border-radius: 8px;
}

@media screen and (max-width: 600px)
{
	#vorhaben-liste .vorhaben ul.progressbar li span { display: none; }
}

/*
#vorhaben-fragen-liste .buttons { display: none; }
#vorhaben-fragen-liste .frage { position: relative; padding-right: 36px; font-weight: 400; color: white; background: var(--color-gray-5); }
#vorhaben-fragen-liste .frage.check:after { display: none; }
#vorhaben-fragen-liste .frage .delete {
	display: block;
	position: absolute;
	right: 6px;
	top: 0;
	width: 24px;
	height: 100%;
	background: url(../assets/icons/icon_loeschen_weiss.svg) no-repeat center center;
	background-size: contain;
	color: var(--text);
}
*/
#vorhaben-fragen-liste li .list-item { padding-right: 4em; }
#vorhaben-fragen-liste li .toggle,
#vorhaben-fragen-liste li .mark {
	display: flex;
	position: absolute;
	top: 0;
	right: 12px;
	height: 100%;
	align-items: center;
}
	
#vorhaben-fragen-liste li .delete { display: none; }

#vorhaben-fragen.mode-edit #vorhaben-fragen-liste li .toggle,
#vorhaben-fragen.mode-edit #vorhaben-fragen-liste li .mark { display: none; }
#vorhaben-fragen.mode-edit #vorhaben-fragen-liste li .delete { display: block; }

#vorhaben-fragen .mode-edit { display: none; }
#vorhaben-fragen .mode-answer { display: block; }

#vorhaben-fragen.mode-edit .mode-edit { display: block; }
#vorhaben-fragen.mode-edit .mode-answer { display: none; }


#vorhaben-kosten .slider-minval, #vorhaben-kosten .slider-maxval { display: block; }

#fragen-beantworten-liste .frage { padding-right: 36px; }
#fragen-beantworten-liste .buttons { margin: 0.3em -24px 0.3em 0; text-align: right; }
#fragen-beantworten-liste .frage.check .buttons { display: none; }
#fragen-beantworten-liste button { padding: 0.3em 1em; font-size: var(--font-size-xs); }
#fragen-beantworten-liste .delete { display: none; }


#vorhaben-finanzierung .angebot-liegt-vor { display: none; }
#vorhaben-finanzierung .angebot-steht-aus { display: block; }
#vorhaben-finanzierung.angebot .angebot-liegt-vor { display: block; }
#vorhaben-finanzierung.angebot .angebot-steht-aus { display: none; }


#foerderungen-output, #vorhaben-foerderung-output { min-height: 20vh; }
#foerderungen-output.pending, #vorhaben-foerderung-output.pending { position: relative; }
#foerderungen-output.pending:after,
#vorhaben-foerderung-output.pending:after {
	content: '';
	display: block;	
	width: 100%;
	height: 30px;
	background: url(../assets/icons/3-dots-fade.svg) no-repeat center center;
	background-size: contain;
}

ul.foerderprogramme { }
ul.foerderprogramme li { padding: 0.5em 12px; cursor: pointer; }
ul.foerderprogramme li span.organisation { display: block; font-size: var(--font-size-xs); color: var(--color-sparkassenrot); margin-bottom: 0.5em;  }
ul.foerderprogramme li span.name { display: block; }
ul.foerderprogramme li span.betrag { display: block; font-size: var(--font-size-xs); color: var(--color-gray-4); }

ul.handwerker { }
ul.handwerker li { padding: 0.5em 12px; cursor: pointer; }
ul.handwerker li span.name { display: block; font-size: var(--font-size-l); font-weight: 400; }
ul.handwerker li span.strasse,
ul.handwerker li span.ort,
ul.handwerker li span.telefon,
ul.handwerker li span.email { display: block; font-size: var(--font-size-s); color: var(--color-gray-5); }


#vorhaben-angebote .angebot { position: relative; padding-right: 36px; font-weight: 400; color: white; background: var(--color-gray-5); }
#vorhaben-angebote li span { display: inline-block; }
#vorhaben-angebote li .mark {
	display: flex;
	position: absolute;
	top: 0;
	right: 40px;
	height: 100%;
	align-items: center;
}

#finanzierung-vorhaben { margin-bottom: 1.5em; }
#finanzierung-vorhaben li {
	position: relative;
	display: flex;
	justify-content: space-between;
	margin-bottom: 4px;
	padding: 0 44px 0 12px;
	height: 48px;
	line-height: 48px;
	color: white;
	background-color: var(--color-gray-5);
	color: var(--color-text);
	background-color: white;

}
#finanzierung-vorhaben li .bezeichnung { font-weight: 400; color: var(--color-gray-3); }
#finanzierung-vorhaben li > span { display: inline-block; white-space: nowrap; }
#finanzierung-vorhaben li > span.kosten { width: 100%; text-align: right; }
#finanzierung-vorhaben li .mark {
	display: flex;
	position: absolute;
	top: 0;
	right: 12px;
	height: 100%;
	align-items: center;
}
#finanzierung-vorhaben li .mark .check-mark:not(:checked) { background: white; }

#finanzierung-vorhaben li.requested:after {
	top: 50%;
	margin-top: -12px;
	background-size: 26px;
}
#finanzierung-vorhaben + label, #finanzierung-vorhaben + label + label { padding-right: 44px; }
#finanzierung-vorhaben.empty:after {
	content: 'Keine Vorhaben zur Finanzierung';
	display: block;
	margin-top: 1em;
	margin-bottom: 1.5em;
	font-size: var(--font-size-l);
	font-weight: 400;
	text-align: center;
	color: var(--color-sparkassenrot);
}
#finanzierung-gesamt-label, #finanzierung-gesamt, #finanzierung-gesamt-label:after {
	/*color: #5c8f35; background: #D3F1BC;*/
	color: white;
	background: var(--color-sparkassenrot);
	font-weight: 400;
}


.contactinfo { display: flex; align-items: flex-start; /*min-height: 20em;*/ overflow: hidden; font-weight: 600; margin-bottom: 2rem; padding: 8px var(--margin-width) 0; }

.contactinfo .contact-picture { margin-right: 1em; }
.contactinfo .contact-picture img { width: 90px; height: 90px; border-radius: 90px; object-fit: cover; }
.contactinfo .contact-name { font-size: 1.1rem; margin-bottom: 0.4em; }
.contactinfo a { display: block; max-width: calc(100vw - 90px - 2 * var(--margin-width) - 1em); text-decoration: none; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contactinfo .contact-phone,
.contactinfo .contact-mail { padding-left: 2.4em; margin-bottom: 0.8em; font-size: var(--font-size-s); letter-spacing: -0.02em; line-height: 1.2; }
.contactinfo .contact-phone span,
.contactinfo .contact-mail span { display: block; font-size: var(--font-size-xs); font-weight: 400; color: var(--color-gray-4); }
.contactinfo .has-icon:before { width: 2em; height: 2em; }