/*
@import url('./customer_style_v6.css');
*/
:root {
	/*
	--bgColor: hsla(0,0%,94%,1);
	--textColor: hsla(0,0%,30%,1);
	--cardBgColor: hsla(0,0%,70%,1);
	--mainBorderColor: hsla(0,0%,80%,1);
	--cardLinkColor: hsla(0,0%,70%,1);
	--cardTextColor: color: hsla(0,0%,96%,1);

	Anwendung: color: var(--textColor); 
	-> klappt leider nicht beim IE, deshalb nicht verwendet
	*/
}


*, *::before, *::after {
	box-sizing: border-box;
}

html {
	font-size: 12px;
}

body {
	color: hsla(0,0%,30%,1);
	font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0;
	padding: 1rem;
	margin: 0;
}

header, main, footer {
	margin: .25rem;
	padding: .5rem;
	border: .0625rem solid hsla(0,0%,80%,1);
	border-radius: .5rem;
	background-color: hsla(0,0%,94%,1);
}

input {
	font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
	
a, a:visited {
	color: hsla(0,0%,30%,1);
}

/*
.jump {
	display: none;
}
*/
.jump {
	display: inline-block;
	margin-bottom: .5rem;
	margin-left: .5rem;
}
.jump:not(:focus) {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  white-space: nowrap;
}

/*************************
		Flexboxen
**************************/
.flex_container {
	display: flex;
}
.flex_vertical {
	flex-direction: column;
}
.flex_wrap {
	flex-wrap: wrap;
}
.flex_sizing {
	flex: 1 1 auto;
}

/*************************
		Header
**************************/
header {
	overflow: hidden;
}

.head {
	display: flex;
	position: relative;  /* fuer Sprachbox */
}
.head a {
	display: flex;
}
.head a img {
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
}

/* Sprachauswahl-Kombobox */
aside {
	flex: 1 2 auto;
	overflow: auto;
}
.language {
	float: right;
	margin: 1rem 0 1rem 1rem;
	letter-spacing: .07rem;
}
#lang_select {
	background-color: hsla(200,25%,20%,1);
	color: hsla(0,0%,96%,1);
	padding: .2rem;
	font-size: 1rem;
	cursor: pointer;
	border-width: thin;
	margin: 0 .25rem 0 .5rem;
}

/*************************
		Main
**************************/
/* Container fuer article */
main {
	display: flex;
}

/* Container fuer Tabelle und Cards-Container */
article {
	flex: 1 2 auto;
	overflow: auto;
}
article h1 {
	margin: 2rem;
	display: inline-block;
	text-shadow: .1rem .1rem .1rem hsla(0,0%,70%,1);
	letter-spacing: .1rem;
}

/* Pfeil nach oben */
.to_top {
	position: relative;
}
.link_to_top, .link_to_top_sepa {
	/* opacity: .4; */
	position: absolute;
	right: .45rem;
	bottom: .45rem;
}
.link_to_top img, .link_to_top_sepa img {
	width: 3.125rem;
	height: auto;
}

/* allgem. Infos */
.transaction_info {
	margin: 1rem 1rem 0 1rem;
}
.transaction_info_text {
	margin: 1rem 2rem;
}

/* Zeilen fuer die einzelne Buchung in der Transaktion-Info-Tabelle */
.transaction_info_buchung {
	display: none;
}

/* Zelle mit Buchungstext und Geldbetrag fuer die einzelne Buchung in der Transaktion-Info-Tabelle */
.transaction_info_buchung_text {
	display: none;
}

/* Tabelle */
table {
	width: 100%;
}
caption {
	padding: .2rem .5rem;
	text-align: left;
	font-weight: bold;
	font-size: 1.2rem;
	border-width: 1px 1px 0 1px;
	border-color: white;
	border-style: solid;
}
table, th, td {
	border: .0625rem solid hsla(0,0%,96%,1);
	border-collapse: collapse;
	word-break: break-word;
}
th, td {
	padding: .3rem .5rem;
	line-height: 1.4;
	min-width: 10rem;
}
th {
	text-align: left;
}
table td:first-child  {
	/* width: 40%; */
}
table td + td  {
	/* width: 60%; */
}
table td input[type="text"] {
	width: 100%;
	text-align: left;
}

.table_div {
	display: inline-block;
	margin: 0 1rem 1.25rem .925rem;
	background-color: hsla(200,25%,20%,1);
	color: hsla(0,0%,96%,1);
	border: .125rem solid hsla(200,25%,20%,1);
}

.input_div {
	display: inline-block;
	margin: 0 1rem 1.25rem .925rem;
	background-color: hsla(200, 25%, 20%, 1);
	color: hsla(0, 0%, 96%, 1);
	border: .125rem solid hsla(200, 25%, 20%, 1);
	width: 20%
}
.table_div p {
    margin: 0;
    padding: .3rem .5rem;
    font-weight: bold;
    line-height: 1.4;
    border: .0625rem solid hsla(0,0%,96%,1);
    border-bottom-width: 0;
}

.input_div p {
	margin: 0;
	padding: .3rem .5rem;
	font-weight: bold;
	line-height: 1.4;
	border: .0625rem solid hsla(0, 0%, 96%, 1);
	border-bottom-width: 0;
}
.table_div .radio_wrapper {
	margin: .3rem .6rem .3rem 0;
}

.input_div .radio_wrapper {
	margin: .3rem .6rem .3rem 0;
}
.table_div .radio_wrapper input[type=checkbox] {
    margin-right: .5rem;
    background-color: hsla(200,25%,20%,1);
	color: hsla(0,0%,96%,1);
}

.input_div .radio_wrapper input[type=checkbox] {
	margin-right: .5rem;
	background-color: hsla(200, 25%, 20%, 1);
	color: hsla(0, 0%, 96%, 1);
}

/* Customer-Bereich */
#customer_area, #main_abort_area {
	margin: 0 2rem 2rem 2rem;
}
.customer_text {
	hyphens: auto;
}

/*************************
		Zahlverfahren
**************************/
#pay_methods {
	margin: 1rem 2.5rem 4.5rem 1rem;
}

/* Container fuer cards_item */
.cards {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Container fuer card */
.cards_item {

}
/* Container fuer card_content */
.card {
	background-color: hsla(0,0%,96%,1);
	border-radius: .5rem;
	box-shadow: 1rem 1.5rem 2rem -1rem rgba(0, 0, 0, .3);
	overflow: hidden;
	/* alle Cards immer in gleicher Breite (auch wenn zusammengeschoben), Orientierung sind Laenge dr Ueberschrift bzw.Breite des Logos */
	width: 20rem;
}
/* Container fuer card_box */
.card_content {
}
/* Container fuer inner_content und inner_footer */
.card_box {
	padding: 1rem;
	transition: all .2s ease;
	background-repeat: no-repeat;
	background-position: center 1rem;
	background-size: 16rem auto;
	background-color: hsla(200,75%,92%,1);
}
.inner_content {
	display: contents;
}
/* feste Hoehe, weil der IE 'display:contents' nicht versteht (wird unten per Feature-Query ueberschrieben) */
.inner_fixed_height {
	height: 15rem;
}
.card_box h2 {
	font: bold 1.5rem Sans-Serif !important;
	text-transform: uppercase;
	letter-spacing: .125rem;
	box-shadow: 0 .5rem 1em -.5rem;
	text-indent: .5rem;
	/* text-shadow: .1rem .1rem .1rem hsla(0,0%,40%,1); */
}
.card_box p, .card_box span {
	font-size: .875rem;
	line-height: 1.5;
	letter-spacing: .07rem;
	font-weight: bolder;
}
.card_box .inner_content table {
	font-size: .75rem;
	letter-spacing: .05rem;
}
.card_box .inner_content .table_div {
	margin: 0 0 1.25rem 0;
	overflow: auto;
	width: 18rem;
}

.card_box .inner_content .input_div {
	margin: 0 0 1.25rem 0;
	overflow: auto;
	width: 36rem;
}

.table_div + .card_text {
	margin-top: -.25rem;
}

.input_div + .card_text {
	margin-top: -.25rem;
}
.card_box .inner_footer {
	margin-top: .5rem;
	padding: .5rem;
	background-color: hsla(200,25%,20%,1);
	/* opacity: .7; */
}
/* Button anstatt Link, damit disabled werden kann */
.pay_btn {
	border-style: none;
	background-color: transparent;
	color: hsla(0,0%,96%,1);
	/* text-shadow: .1rem .1rem .1rem hsla(0,0%,40%,1); */
	font-weight: bold;
	letter-spacing: .05rem;
	font-size: 1rem;
	cursor: pointer;
	width: 17rem;
	text-align: left;
	padding: 0;
}
.pay_btn:focus {
	/* font-weight: bold; */
	font-size: 1.1rem;
	/* outline-width: 0; */
}
.pay_btn:disabled {
	cursor: not-allowed;
	opacity: .25;
}
/* Sonderlocke fuer Giropay */
#giropay_bic {
	margin: .5rem 0;
	display: block;
	background-color: hsla(0,0%,70%,1);
	color: hsla(0,0%,96%,1);
	border-color: hsla(0,0%,70%,1);
	
}
#card-GIROPAY .card_text span {
	letter-spacing: .1875rem;
}
ul.ui-giropay_widget {
    width: 17.5rem !important;
}
.ui-giropay_widget .ui-menu-item a {
    font-size: .875rem !important;
    overflow: auto !important;
}

/* Sonderlocke fuer SEPA */
#show_sepa_btn {
	text-decoration: none;
	background-color: hsla(200,25%,20%,1);
	padding: .2rem .4rem;
	margin: .5rem 0 1rem 0;
	display: inline-block;
	border: .1875rem outset hsla(0,0%,96%,1);
	width: 18rem;
	/* opacity: .7; */
}
#show_sepa_btn a, #show_sepa_btn a:visited {
	text-decoration: none;
	color: hsla(0,0%,96%,1);
}

/********************************************************************************/
/* SEPA-Mandat */

/* allgem. Infos */
.sepa_info {
	margin: 1rem 1rem 0 1rem;
}
.sepa_info_text {
	margin: 1rem 2rem;
	color: hsla(0, 0%, 30%, 1);
}

#sepa_mandat {
	margin: 0 2.5rem 4.5rem 1rem;
}
#sepa_mandat .card {
	width: calc(24rem + 4 * .0625rem); /* damit es zu den Tabellen obendrueber passt */
}
.card-sepa .inner_footer {
}
.card-sepa input[type="checkbox"],
.card-sepa input[type="radio"] {
	margin-right: .5rem;
}
.card-sepa input[type="checkbox"] + input[type="hidden"] + label,
.card-sepa input[type="radio"] + label {
	font-weight: 500;
	font-size: .875rem;
	letter-spacing: .03rem;
}

.card-sepa input[type="checkbox"]:disabled + input[type="hidden"] + label,
.card-sepa input[type="radio"]:disabled + label {
	opacity: 0.5;
}
#cancel_sepa {
	padding: .25rem;
	box-shadow: 1rem 1.5rem 4rem -1rem rgba(0, 0, 0, .3);
	/* background-color: hsla(0,0%,85%,1); */
	color: hsla(0,0%,96%,1);
	position: absolute;
	top: 2rem;
	right: 2rem;
}

/* wrapper */
.wrapper {
	color: hsla(0,0%,30%,1);
	border: .125rem solid hsla(0,0%,60%,1);
	flex: 1 1 auto;
}
.wrapper div {
	background-color: hsla(200,75%,92%,1);
	/* border: .0625rem solid hsla(0,0%,86%,1); */
	padding: .6rem 1.2rem;
}
.wrapper ul {
	list-style: none;
	padding-left: 2rem;
	margin-bottom: .5rem;
}
.wrapper ul li {
	padding: .35rem 0;
}
.wrapper div + div {
	border-top-width: 0;
}
.wrapper .button_div {
	display: flex;
	justify-content: flex-end;
	padding: 1rem 1.2rem;
}
.wrapper .button_div input[type="button"] {
	margin-left: .5rem;
}
.wrapper  + .wrapper {
	margin-top: .5rem;
}
.wrapper fieldset {
	border-width: 0;
}
div.radio_wrapper {
	border-width: 0;
}

#sepa_mandat_text .card  p {
	font-size: 1rem;
	letter-spacing: .05rem;
	font-weight: normal;
}

#cancel_sepa_btn,
.card-sepa .button_div input[type="button"],
.card-sepa .button_div button[type="submit"]  {
	padding: .3rem .5rem;
	font-weight: bolder;
	/* opacity: .7; */
	background-color: hsla(200,25%,20%,1);
	color: hsla(0,0%,96%,1);
}
#cancel_sepa_btn:disabled,
.card-sepa .button_div input[type="button"]:disabled,
.card-sepa .button_div button[type="submit"]:disabled {
	background-color: hsla(0,0%,70%,1);
	color: hsla(0,0%,80%,1);
}

/* Cursor fuer alle Buttons, Checkboxen und Radiobuttons (incl. Label) */
#cancel_sepa_btn,
.card-sepa button[type="submit"],
.card-sepa input[type="button"],
.card-sepa input[type="checkbox"],
.card-sepa input[type="checkbox"] + input[type="hidden"] + label,
.card-sepa input[type="radio"],
.card-sepa input[type="radio"] + label {
	cursor: pointer;
}
#cancel_sepa_btn:disabled,
.card-sepa button[type="submit"]:disabled,
.card-sepa input[type="button"]:disabled,
.card-sepa input[type="checkbox"]:disabled,
.card-sepa input[type="checkbox"]:disabled + input[type="hidden"] + label,
.card-sepa input[type="radio"]:disabled,
.card-sepa input[type="radio"]:disabled + label {
	cursor: not-allowed;
}

/*************************
		Overlay
**************************/
#overlay, #sepa_overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	background-color: white;
    z-index: 1000;
	overflow: auto;
}
#sepa_overlay h3 {
	margin-left: 2rem;
	color: hsla(0, 0%, 30%, 1);
	font-size: 2rem;
	margin-top: 6rem;
}
#sepa_overlay h4 {
	font-size: 1.2rem;
}
#konto {
    position: absolute;
    top: 50%;
    left: 40%;
    color: hsla(0,0%,96%,1);
    transform: translate(-40%,-50%);
	font-size: 1rem;
	width: 24rem;
}
#konto .table_div {
	margin: 5rem 5rem 1.25rem 5rem;
	display: block;
}
#overlay .button_div {
	display: flex;
	justify-content: flex-end;
}
#overlay .button_div input[type="button"] {
	padding: .3rem .5rem;
	font-weight: bolder;
	opacity: .7;
	background-color: hsla(200,25%,20%,1);
	color: hsla(0,0%,96%,1);
	cursor: pointer;
	margin-left: .5rem;
}

.sepa_info {
	display: flex;
	align-items: start;
	flex-wrap: wrap;
}
.sepa_info .table_div {
	width: calc(24rem + 4 * .0625rem);
}
.sepa_info .zahler_caption {
	padding: .2rem .5rem;
	font-weight: bold;
	font-size: 1.2rem;
	border: 1px solid white;
}
.sepa_info .zahler_header, .sepa_info .zahler_item {
	border-top-width: 0;
}
.sepa_info .zahler_header_name {
	display: inline-block;
	padding: .3rem .5rem;
	line-height: 1.4;
	width: 40%;
	font-weight: bold;
}
.sepa_info .zahler_header_value {
	display: inline-block;
	border-left: 1px solid white;
	padding: .3rem .5rem;
	line-height: 1.4;
	font-weight: bold;
}

.zahler_item_label {
	color: hsla(0, 0%, 96%, 1);
}

.sepa_info .zahler_item_label {
	display: inline-block;
	width: 100%;
	padding: .3rem .5rem;
}

.sepa_info .zahler_item_input {
	display: block;
	padding: .3rem .5rem;
	width: 100%;
}

.sepa_info .zahler_item_input > input {
	width: 100%;
}

.zahler_item_readonly > input {
	background-color: hsl(199.4, 75.6%, 92%);
}


#sepa_auswahl fieldset {
	margin: 1rem 0;
	padding: 1rem 0;
}

#sepa_auswahl fieldset legend {
	font-size: .875rem;
	line-height: 1.5;
	letter-spacing: .07rem;
	font-weight: bolder;
	padding-left: 0;
}

#sepa_overlay .link_to_top_sepa {
	background-color: hsla(0, 0%, 92%, 1);
	opacity: 1;
}

/*************************
        Footer
**************************/
/* Container fuer footer_box */
.footer_items {
	font-size: smaller;
	margin-bottom: 2rem;
}

.footer_box {
	margin: 2rem;
	overflow: hidden;
}

.footer_items h2 {
	border-bottom: .125rem solid hsla(0, 0%, 30%, 1);
	font-size: 1.17rem;
}

.footer_items a {
	text-decoration: none;
}

.footer_items ul {
	margin: .6875rem .6875rem .375rem .6875rem;
	padding: 0;
}

.footer_items li {
	list-style-type: none;
	list-style-image: none;
	padding: .5rem 0;
}

#versionInfo {
	margin-left: 45%;
	font-size: x-small;
	color: hsla(0, 0%, 30%, 1);
}

.zusammenarbeit {
	padding-bottom: .25rem;
}

#navi_3_link, .zusammenarbeit a {
	margin-left: .6875rem;
}

/********************************************************************************/
/* Landing-Page */
/********************************************************************************/

.landing_outer {
	margin: 2rem;
}

.landing_box {
	background-color: hsla(0, 0%, 96%, 1);
	border-radius: .5rem;
	box-shadow: 1rem 1.5rem 2rem -1rem rgba(0, 0, 0, .3);
	overflow: hidden;
	padding: 1rem;
	display: inline-block;
}

.landing_box h1 {
	margin: 0;
}

#zv_id_pattern span {
	font-weight: bolder;
	letter-spacing: .1rem;
	font-size: 1.1rem;
}

.landing_input label, .landing_input input {
	margin-right: 1rem;
	margin-bottom: 1rem;
}

.landing_input input {
	margin-top: 1rem;
}

.landing_input .button_div {
	padding: .5rem;
	background-color: hsla(200, 25%, 20%, 1);
	display: inline-block;
	margin-top: 1rem;
}

.landing_btn {
    border-style: none;
    background-color: transparent;
    color: hsla(0, 0%, 96%, 1);
    text-shadow: .1rem .1rem .1rem hsla(0, 0%, 40%, 1);
    font-weight: bold;
    letter-spacing: .05rem;
    font-size: 1rem;
    cursor: pointer;
    width: 17rem;
    text-align: left;
    padding: 0;
}

/* ZV_AM-1481 / EP4LS3-1447: Landing-Page */
.landing_ZV_AM_1481 {
    display: none !important;
}

.Error {
    font-weight: lighter;
    color: hsla(0, 100%, 30%, 1);
    font-size: smaller;
}

#zahler .Error {
	color: hsla(45, 100%, 54%, 0.97);
	font-weight: normal;
}

#kunde .Error {
	color: hsla(45, 100%, 54%, 0.97);
	font-weight: normal;
	display: block;
	margin-top: 0.5rem;
}

.globalErrors {
	margin: 1rem 2rem 1.5rem 2rem;
}

.globalErrors .Error {
	font-weight: normal;
}

.custom_link {
	display: inline-flex; /* damit der Hover-/Focus-Rahmen das Image einschliesst */
}

/************************************************************************
    Hover / Focus (Barrierefreiheit!)
************************************************************************/
button:hover, button:focus,
input[type=text]:hover, input[type=text]:focus,
input[type=radio]:hover, input[type=radio]:focus,
input[type=checkbox]:hover, input[type=checkbox]:focus,
input[type=button]:hover, input[type=button]:focus,
#lang_select:hover, #lang_select:focus,
#main_abort:hover, #main_abort:focus,
#show_sepa_btn > a:hover, #show_sepa_btn > a:focus,
a.custom_link:hover, a.custom_link:focus,
a.link_to_top:hover, a.link_to_top:focus,
a.link_to_top_sepa:hover, a.link_to_top_sepa:focus,
#cancel_sepa_btn:hover, #cancel_sepa_btn:focus,
.jump:hover, .jump:focus {
	/*
    .radio_wrapper>label:hover::before, .radio_wrapper>label:focus::before {
    */
	/* andere Variante */
	/* outline: 2px solid hsla(225,100%,53%,.75); orange */
	outline: .2rem solid hsla(20, 70%, 50%, 1);
	z-index: 2;
	outline-offset: .25rem;
	/* box-shadow: inset 0px 0px 140px 0px hsla(225,100%,53%,.25); */

	/*
    outline: 0;
    z-index: 2;
    border-color: hsla(225,100%,33%,1);
    box-shadow: inset 0 .0625rem .0625rem hsla(0,0%,0%,.075), 0 0 .5rem hsla(225,100%,33%,1);
    */
}

#inhalt, #sepa {
	outline: 0;
}

/**************************************/

@supports (display: contents) {
	.inner_fixed_height {
		display: contents;
	}
}

@media screen and (min-width: 500px) {
	html {
		font-size: 12px;
	}

	#sepa_overlay h3 {
		margin-top: 2rem;
	}
}

@media screen and (min-width: 800px) {
	html {
		font-size: 13px;
	}

	.language {
		margin: 4rem;
		position: absolute;
		top: 0;
		right: 0;
	}

	#konto {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}

@media screen and (min-width: 1100px) {
	html {
		font-size: 14px;
	}

	.footer_box {
		margin: 2rem 4rem;
	}

	.landing_outer {
		margin: 2rem 4rem;
	}
}

@media screen and (min-width: 1450px) {
	html {
		font-size: 15px;
	}
}

@media screen and (min-width: 1700px) {
	html {
		font-size: 16px;
	}
}

/*******************************/

/* roboto-300 - latin */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 300;
	src: local('Roboto Light'), local('Roboto-Light'),
	url('../fonts/roboto-v18-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/roboto-v18-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-regular - latin */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto'), local('Roboto-Regular'),
	url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/roboto-v18-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-500 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: local('Roboto Medium'), local('Roboto-Medium'),
    url('../fonts/roboto-v18-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/roboto-v18-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

.dispnone {
    display: none;
}