/*
 * Abfindungscheck
 *
 * Vollstaendig aus den Konventionen des Themes abgeleitet, nicht aus dem
 * Stylesheet der Altanwendung uebernommen. Deren Formsprache stammte von einer
 * eigenstaendigen 1200px-Seite mit dunklem Kopfbalken und zentrierten Inhalten
 * und liess sich nicht sinnvoll an ARO angleichen.
 *
 * Alle Werte sind am gerenderten Theme gemessen:
 *
 *   Raster        .erweiterung 240px rechtsbuendig, .inhalt 600px ab +240px
 *   Ueberschrift  PT Serif 22/36, #C02022        (wie h1 / .h1-style)
 *   Fliesstext    Open Sans 14/24, #404040       (wie .inhalt p)
 *   Zwischentitel Open Sans 16/22, #808080       (wie h2 im Kapitel)
 *   Marginalie    PT Serif 14/24 bold, #969696   (wie .erweiterung h4)
 *   Eingabefeld   40px hoch, #F0F0F0, randlos, 16px, 12px Innenabstand
 *                 Fokus 1px #B2B2B2               (wie das Kontaktformular)
 *   Schaltflaeche 40px hoch, #808080 auf Weiss, Hover #C02022
 *   Trennlinie    100 x 2px, #D8D8D8
 *
 * Der Check nutzt die Theme-Klassen .row_wrapper, .erweiterung, .inhalt und
 * .trennlinie direkt. Dadurch steht er automatisch buendig zu den
 * Themenbloecken darueber und darunter, auch wenn das Theme sein Raster aendert.
 */

.abfindungscheck * {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------
 * Schrittanzeige
 * Kein eigener Balken mehr. Die Kreise stehen im Inhaltsraster, der
 * aktive Schritt ist rot gefuellt und traegt als einziger seinen Text.
 * ------------------------------------------------------------------ */

.abfindungscheck .step-informer {
	margin-bottom: 35px;
}

.abfindungscheck .step-informer .steps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
}

.abfindungscheck .step-informer .step {
	display: flex;
	align-items: center;
	gap: 10px;
}

.abfindungscheck .step-informer .step .number {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border: 2px solid #d8d8d8;
	border-radius: 50%;
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	line-height: 24px;
	text-align: center;
	color: #969696;
	transition: all ease-in-out .15s;
}

.abfindungscheck .step-informer .step .description {
	display: none;
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	line-height: 24px;
	color: #404040;
}

.abfindungscheck .step-informer .step.active .number {
	background-color: #c02022;
	border-color: #c02022;
	color: #ffffff;
}

.abfindungscheck .step-informer .step.active .description {
	display: block;
}

/* ------------------------------------------------------------------
 * Schrittcontainer
 * Die Schritte liegen uebereinander, die Hoehe setzt das Skript.
 * ------------------------------------------------------------------ */

.abfindungscheck .body-content {
	position: relative;
}

.abfindungscheck .body-content .steps {
	position: relative;
	transition: height .3s ease-in-out 0s;
}

.abfindungscheck .body-content .steps .step {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease-in-out 0s, visibility 0s ease-in-out .3s;
}

.abfindungscheck .body-content .steps .step.active {
	opacity: 1;
	visibility: visible;
	transition: opacity .3s ease-in-out 0s, visibility 0s ease-in-out 0s;
}

/* ------------------------------------------------------------------
 * Textebene
 * ------------------------------------------------------------------ */

.abfindungscheck .introduction-wrapper,
.abfindungscheck .description {
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	line-height: 24px;
	color: #404040;
}

.abfindungscheck .introduction-wrapper {
	margin-bottom: 24px;
}

.abfindungscheck .description p {
	margin: 0 0 12px;
}

.abfindungscheck .description p:last-child {
	margin-bottom: 0;
}

/* Bewusst kleiner als die Seitenueberschrift, die in PT Serif 22/36 gesetzt ist.
   Bei gleicher Groesse las sich die Frage wie ein zweiter Seitentitel statt wie
   eine Ebene darunter. */
.abfindungscheck .headline-wrapper {
	font-family: "PT Serif", sans-serif;
	font-size: 18px;
	line-height: 28px;
	color: #c02022;
	margin-bottom: 24px;
}

.abfindungscheck .content {
	margin-bottom: 30px;
}

/* ------------------------------------------------------------------
 * Ja / Nein
 * Zwei Felder im Rhythmus des Kontaktformulars: calc(50% - 5px).
 * ------------------------------------------------------------------ */

.abfindungscheck .boolean-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.abfindungscheck .boolean-wrapper button {
	flex: 0 0 calc(50% - 5px);
	height: 40px;
	border: 0;
	border-radius: 0;
	background-color: #f0f0f0;
	color: #404040;
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	-webkit-appearance: none;
	transition: all ease-in-out .15s;
}

.abfindungscheck .boolean-wrapper button:hover {
	background-color: #808080;
	color: #ffffff;
}

.abfindungscheck .boolean-wrapper button.checked {
	background-color: #c02022;
	color: #ffffff;
}

.abfindungscheck .boolean-wrapper button.validation-error {
	box-shadow: inset 0 0 0 1px #c02022;
}

/* Traegt nur den Zustand von Ja/Nein, wird nie angezeigt. */
.abfindungscheck .answer input.checkbox {
	display: none;
}

/* Datumsfeld erscheint erst nach "Ja" */
.abfindungscheck .answer.boolean_date input.date-picker {
	display: none;
	margin-top: 10px;
}

/* ------------------------------------------------------------------
 * Eingabefelder, exakt die Werte des Kontaktformulars
 * ------------------------------------------------------------------ */

/* Der Rahmen ist von Anfang an da, nur zunaechst unsichtbar. Das Kontaktformular
   des Themes schaltet ihn beim Hover erst zu und gleicht die Breite ueber den
   Innenabstand aus - dabei springt der Text um ein Pixel. */
.abfindungscheck .answer input[type="text"],
.abfindungscheck .answer input[type="number"],
.abfindungscheck .answer input[type="email"] {
	width: calc(50% - 5px);
	height: 40px;
	border: 1px solid transparent;
	border-radius: 0;
	background-color: #f0f0f0;
	color: #343333;
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	padding-left: 11px;
	-webkit-appearance: none;
	transition: border-color ease-in-out .15s;
}

.abfindungscheck .answer input[type="text"]:focus,
.abfindungscheck .answer input[type="number"]:focus,
.abfindungscheck .answer input[type="email"]:focus,
.abfindungscheck .answer input[type="text"]:hover,
.abfindungscheck .answer input[type="number"]:hover,
.abfindungscheck .answer input[type="email"]:hover {
	border-color: #b2b2b2;
	outline: 0;
}

.abfindungscheck .answer input.validation-error {
	border-color: #c02022;
}

/* Jahre und Monate nebeneinander */
.abfindungscheck .answer.month_amount {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.abfindungscheck .answer.month_amount > div:empty {
	display: none;
}

.abfindungscheck .answer.month_amount .year-wrapper,
.abfindungscheck .answer.month_amount .month-wrapper {
	flex: 0 0 calc(50% - 5px);
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	line-height: 24px;
	color: #969696;
}

.abfindungscheck .answer.month_amount input {
	width: 100%;
	margin-top: 4px;
}

/* ------------------------------------------------------------------
 * Auswahlliste
 * Das Theme kennt keine Radiobuttons. Aufgebaut wie seine Eingabefelder:
 * graue Flaeche, randlos, 40px Zeilenhoehe; gewaehlt ist rot.
 * ------------------------------------------------------------------ */

.abfindungscheck .select-list {
	width: 100%;
}

.abfindungscheck .select-item {
	position: relative;
	margin-bottom: 2px;
}

.abfindungscheck .answer.select .select-group h2 {
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	line-height: 22px;
	font-weight: 400;
	color: #808080;
	margin: 24px 0 10px;
}

.abfindungscheck .select-group:first-child h2 {
	margin-top: 0;
}

.abfindungscheck .answer.select .select-value {
	position: relative;
}

.abfindungscheck .answer.select input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.abfindungscheck .answer.select label {
	display: block;
	min-height: 40px;
	padding: 8px 44px 8px 44px;
	background-color: #f0f0f0;
	color: #404040;
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	line-height: 24px;
	cursor: pointer;
	transition: all ease-in-out .15s;
}

.abfindungscheck .answer.select label:hover {
	background-color: #808080;
	color: #ffffff;
}

.abfindungscheck .answer.select .check {
	position: absolute;
	left: 14px;
	top: 12px;
	width: 16px;
	height: 16px;
	border: 2px solid #969696;
	border-radius: 50%;
	pointer-events: none;
	transition: all ease-in-out .15s;
}

.abfindungscheck .answer.select label:hover ~ .check {
	border-color: #ffffff;
}

.abfindungscheck .answer.select input[type="radio"]:checked ~ label {
	background-color: #c02022;
	color: #ffffff;
}

.abfindungscheck .answer.select input[type="radio"]:checked ~ .check {
	border-color: #ffffff;
}

.abfindungscheck .answer.select input[type="radio"]:checked ~ .check::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 3px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #ffffff;
}

.abfindungscheck .answer.select input[type="radio"].validation-error ~ .check {
	border-color: #c02022;
}

/* Fokus sichtbar halten, das Feld selbst ist ausgeblendet */
.abfindungscheck .answer.select input[type="radio"]:focus-visible ~ label {
	outline: 2px solid #c02022;
	outline-offset: -2px;
}

/* ------------------------------------------------------------------
 * Hinweiszeichen und Overlay
 * ------------------------------------------------------------------ */

.abfindungscheck .hint-overlay-open {
	position: absolute;
	right: 12px;
	top: 10px;
	text-decoration: none;
}

.abfindungscheck .headline-wrapper + .hint-overlay-open,
.abfindungscheck section > .hint-overlay-open {
	position: static;
	display: inline-block;
	margin-bottom: 10px;
}

.abfindungscheck .hint {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 2px solid #969696;
	border-radius: 50%;
	font-family: "Open Sans", sans-serif;
	font-size: 12px;
	font-weight: 700;
	color: #969696;
	transition: all ease-in-out .15s;
}

.abfindungscheck .hint-overlay-open:hover .hint {
	border-color: #c02022;
	color: #c02022;
}

.abfindungscheck .select-value input[type="radio"]:checked ~ .hint-overlay-open .hint,
.abfindungscheck .select-value label:hover ~ .hint-overlay-open .hint {
	border-color: #ffffff;
	color: #ffffff;
}

.abfindungscheck .overlay-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 150;
	background-color: rgba(30, 30, 30, .85);
	opacity: 0;
	visibility: hidden;
	transition: visibility 0s ease-in-out .3s, opacity .3s ease-in-out 0s;
}

.abfindungscheck .overlay-background.show {
	opacity: 1;
	visibility: visible;
	transition: visibility 0s ease-in-out 0s, opacity .3s ease-in-out 0s;
}

.abfindungscheck .overlay-hint {
	position: fixed;
	top: 10vh;
	left: 50%;
	transform: translateX(-50%);
	width: 700px;
	max-width: calc(100vw - 40px);
	max-height: 80vh;
	overflow-y: auto;
	z-index: 155;
	background-color: #ffffff;
	padding: 30px;
	opacity: 0;
	visibility: hidden;
	-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .15);
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .15);
	transition: visibility 0s ease-in-out .3s, opacity .3s ease-in-out 0s;
}

.abfindungscheck .overlay-hint.show {
	opacity: 1;
	visibility: visible;
	transition: visibility 0s ease-in-out 0s, opacity .3s ease-in-out 0s;
}

.abfindungscheck .overlay-hint h2 {
	font-family: "PT Serif", sans-serif;
	font-size: 22px;
	line-height: 36px;
	font-weight: 400;
	color: #c02022;
	margin-bottom: 10px;
}

.abfindungscheck .overlay-hint .text {
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	line-height: 24px;
	color: #404040;
}

/* ------------------------------------------------------------------
 * E-Mail-Schritt
 * ------------------------------------------------------------------ */

.abfindungscheck .input-wrapper input.email {
	width: calc(50% - 5px);
}

.abfindungscheck .req_gdpr_wrapper {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 20px;
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	line-height: 24px;
	color: #404040;
	cursor: pointer;
}

.abfindungscheck .req_gdpr_wrapper p {
	margin: 0;
}

.abfindungscheck input.req_gdpr {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 4px;
	accent-color: #c02022;
}

.abfindungscheck .req_gdpr_wrapper.validation-error,
.abfindungscheck .req_gdpr_wrapper.validation-error a {
	color: #c02022;
}

.abfindungscheck .e-mail-enter .description {
	margin-top: 24px;
}

/* Honigtopf: fuer Menschen unsichtbar */
.abfindungscheck .ac-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.abfindungscheck .versand-fehler {
	display: none;
	margin-top: 20px;
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	line-height: 24px;
	color: #c02022;
}

.abfindungscheck .versand-fehler a {
	color: #c02022;
	text-decoration: underline;
}

.abfindungscheck .versand-fehler.show {
	display: block;
}

/* ------------------------------------------------------------------
 * Danke-Seite
 * Die Empfehlungen sind eine gewoehnliche Prosaliste. Deren Aufzaehlungspunkte
 * und Einrueckung kommen bewusst aus dem Theme, damit sie aussehen wie jede
 * andere Liste im Inhaltsbereich.
 * ------------------------------------------------------------------ */

.abfindungscheck ul.dotted {
	margin-top: 12px;
}

/* ------------------------------------------------------------------
 * Navigation
 * ------------------------------------------------------------------ */

.abfindungscheck .navigation {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	margin-top: 30px;
}

.abfindungscheck .step-nav-button {
	display: inline-block;
	height: 40px;
	padding: 0 24px;
	background-color: #808080;
	color: #ffffff;
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	line-height: 40px;
	text-align: center;
	text-decoration: none;
	transition: all ease-in-out .15s;
}

.abfindungscheck .step-nav-button:hover,
.abfindungscheck .step-nav-button:active {
	background-color: #c02022;
	color: #ffffff;
}

.abfindungscheck .step-nav-button.step-back {
	padding: 0;
	background-color: transparent;
	color: #808080;
	order: -1;
}

.abfindungscheck .step-nav-button.step-back::before {
	content: "\2039\00a0";
}

.abfindungscheck .step-nav-button.step-back:hover {
	background-color: transparent;
	color: #c02022;
}

.abfindungscheck .step-nav-button.laeuft {
	opacity: .5;
	pointer-events: none;
}

.abfindungscheck .navigation .clearfix {
	display: none;
}

/* ------------------------------------------------------------------
 * Schmale Ansichten
 * ------------------------------------------------------------------ */

@media screen and (max-width: 759px) {

	/* Ja/Nein und Jahre/Monate bleiben nebeneinander: Bei 390px sind das noch
	   165px je Feld, gestapelt kostete es nur Hoehe und wirkte luftig. */
	.abfindungscheck .answer input[type="text"],
	.abfindungscheck .answer input[type="number"],
	.abfindungscheck .answer input[type="email"],
	.abfindungscheck .input-wrapper input.email {
		width: 100%;
	}

	.abfindungscheck .step-nav-button {
		flex: 1 1 100%;
	}

	.abfindungscheck .step-nav-button.step-back {
		text-align: left;
	}

	.abfindungscheck .overlay-hint {
		padding: 20px;
	}
}