@font-face {
    font-family: 'Agfa Rotis Sans Serif';
    src: url('fonts/AgfaRotisSansSerif-Bold.woff2') format('woff2'),
        url('fonts/AgfaRotisSansSerif-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Agfa Rotis Sans Serif';
    src: url('fonts/AgfaRotisSansSerifLight.woff2') format('woff2'),
        url('fonts/AgfaRotisSansSerifLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Agfa Rotis Sans Serif';
    src: url('fonts/AgfaRotisSansSerif.woff2') format('woff2'),
        url('fonts/AgfaRotisSansSerif.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


.nav-item.logout {display: none;}

.form-check, .radioDescription {padding-left: 2em;}
.btn.orange { background: var(--frame-link-color); color: #fff; text-shadow: 0 1px 0 #000; }
.btn.red { background: #e41b12; color: #fff; text-shadow: 0 1px 0 #000; }
#c1 ol,
#c3 ol,
#c4 ol,
.state-nav {
/*	background: rgba(0,92,167,0.2);*/
	padding: 3px;
	list-style: decimal;
	list-style-position: inside;
	display: flex;
}
#c1 ol li,
#c3 ol li,
#c4 ol li,
.state-nav .nav-item {
	background: var(--frame-link-color);
	margin-right: 5px;
	padding: 5px;
	border: 1px solid var(--frame-link-color);
	color: #fff;
}
#c1 ol li a,#c3 ol li a,#c4 ol li a, .state-nav .nav-item a {color: #fff;}
#c1 ol li.txtwdtp-nav-current,
#c3 ol li.txtwdtp-nav-current,
#c4 ol li.txtwdtp-nav-current,
.state-nav .nav-item.txtwdtp-nav-current {
	border: 1px solid #666;
	background: #666;
	color: #fff;
}

#c1 ol li.txtwdtp-nav-current a,
#c3 ol li.txtwdtp-nav-current a,
#c4 ol li.txtwdtp-nav-current a,
.state-nav .nav-item.txtwdtp-nav-current a {
	color: #fff;
}

#c1 .previewImage, #c3 .previewImage, #c4 .previewImage {max-width: 400px; border: 1px solid #999}
#c1 .previewImage:hover, #c3 .previewImage:hover,#c4 .previewImage:hover {border: 1px solid #e41b12}

#c1 form,#c3 form,#c4 form {overflow: hidden;}

.welcomeState { overflow: hidden;}
.welcomeState dl { max-width: 50%;float: left;}
.welcomeState dt {margin-bottom: 10px;}
.welcomeInfo { float: right; width: 50%;padding: 50px 0 0 0px;}

.contentState {font-family: 'Agfa Rotis Sans Serif', Helvetica, Arial, sans-serif; font-weight: 300;}

.contentState div.document > dl:first-child {
	background: url(../img/card-empty.jpg) no-repeat;
	width: 850px;
	height: 550px;
	background-size: 100%;
	position: relative;
	border: 1px solid #666;
	float: left;
}

.contentState div.document > dl:last-child {
	background: url(../img/card-empty.jpg) no-repeat;
	width: 850px;
	height: 550px;
	background-size: 100%;
	position: relative;
	border: 1px solid #666;
	float: left;
	margin-top: 15px;
}

.contentState input[type=submit] {margin-left: 20px;}

.contentState dl {margin: 0; padding: 0;}
.contentState dt {display: none;}
.contentState dd {margin-bottom: 0;}
.contentState input { max-width: 100%;}

dl.order {}
dl.order dt {width: 150px; display: inline-block;}
dl.order dd {display: inline;}
dl.order dd::after {
 content: "";
 display: block;
}

/*************************************** Layout Basic ******************************************/

/* Logo */
.contentState .dtpe1-0-0 {
	position: absolute;
	top: 40px;
	left: 80px;
	width: 279px;
	height: 100px;
}

/* Logo SH */
.contentState .dtpe1-0-2 {
	position: absolute;
	top: 40px;
	left: 80px;
	width: 547px;
	height: 100px;
	display: none;
}

/* Logo Stiftung Kinder */
.contentState .dtpe1-0-4 {
	position: absolute;
	top: 40px;
	left: 600px;
	width: 142px;
	height: 138px;
	display: none;
}

/* Logo Förderung */
.contentState .dtpe1-0-6 {
	position: absolute;
	top: 40px;
	left: 425px;
	width: 385px;
	height: 86px;
	display: none;
}

/* Logo SHIBB */
.contentState .dtpe1-0-8 {
	position: absolute;
	top: 45px;
	left: 610px;
	width: 199px;
	height: 101px;
	display: none;
}
/* Text SHIBB */
.contentState .dtpe1-0-9 {
	position: absolute;
	top: 190px;
	left: 608px;
	width: 200px;
	height: 91px;
	text-align: right;
	display: none;
}

.contentState .dtpe1-0-0 img,
.contentState .dtpe1-0-2 img,
.contentState .dtpe1-0-4 img,
.contentState .dtpe1-0-6 img,
.contentState .dtpe1-0-8 img {max-width: 100%; max-height: 100%;}

/* Switch Stiftung, Förderung, SHIBB */	
.dtpe1-0-1,
.dtpe1-0-3,
.dtpe1-0-5,
.dtpe1-0-7,
.dtpe1-0-10 {display: none;}
 
/* Datenspalte */
.contentState .dtpe1-0-11 {
	position: absolute;
	top: 192px;
	left: 80px;
	width: 730px;
	height: 138px;
}

.contentState .dtpe1-0-11-0 dl {display: flex; width: 470px; }
.contentState .dtpe1-0-11-0 input, 
.contentState .dtpe1-0-11-1 input,
.contentState .dtpe1-0-11-2 input {width: 100%;}
.contentState .dtpe1-0-11-1,
.contentState .dtpe1-0-11-2 {width: 470px; }

/* Name, Position*/
.contentState .dtpe1-0-11-0-0, .contentState .dtpe1-0-8-0-0 input ,
.contentState .dtpe1-0-11-0-1, .contentState .dtpe1-0-8-0-1 input ,
.contentState .dtpe1-0-11-0-2, .contentState .dtpe1-0-8-0-2 input {font-size: 20px; font-weight:bold; } /*7pt*/
.contentState .dtpe1-0-11-1 {font-size: 17.5px; } /*8pt*/
.contentState .dtpe1-0-11-2 {font-size: 17.5px; } /*6.5pt*/


/* Kontaktdaten */
.contentState .dtpe1-0-12 {
	position: absolute;
	top: 375px;
	left: 80px;
	width: 730px;
	height: 175px;
}
.contentState .dtpe1-0-12-2 dl {display: flex; gap: 10px; margin-top: 20px;}
.contentState .dtpe1-0-12-2-1 input,
.contentState .dtpe1-0-12-2-2 input,
.contentState .dtpe1-0-12-2-3 input,
.contentState .dtpe1-0-12-2-4 input,
.contentState .dtpe1-0-12-2-5 input {width: 150px;}
.contentState .dtpe1-0-12-0 {font-size: 17.5px; height: 30px;} /*7pt*/
.contentState .dtpe1-0-12-1 {font-size: 17.5px; height: 30px;} /*7pt*/
.contentState .dtpe1-0-12-2 {font-size: 17.5px; height: 30px;} /*7pt*/
.contentState .dtpe1-0-12-3 {font-size: 17.5px; height: 30px;} /*7pt*/

/* Rückseite Anker*/
.contentState .dtpe1-1-0 {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	display: none;
}

/* Rückseite Leuchtturm */
.contentState .dtpe1-1-2 {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	display: none;
}
.contentState .dtpe1-1-0 img,.contentState .dtpe1-1-2 img { width: 100%; height: auto;}

/* Rückseite Namen */
.contentState .dtpe1-1-4 {
	position: absolute;
	top: 300px;
	left: 470px;
	width: 340px;
	height: 200px;
	font-weight: 500;
	font-size: 25px;
}

.contentState .dtpe1-1-4 dl {
	display:flex;
	gap: 10px;
	color: #d1dce9;
}
/* Rückseite Hashtags */
.contentState .dtpe1-1-5 {
	position: absolute;
	top: 380px;
	left: 470px;
	width: 340px;
	height: 120px;
	font-weight: 500;
}
.contentState .dtpe1-1-5 input {
	background-color: #004987;
	color: #d1dce9;
	font-size: 17.5px;
}
.checkout dt {width: 150px;}

#zip { display: inline-block; width: 15%;}
#city { display: inline-block; width: 80%;}

.copyright {
	padding: 0;
	margin-top: 20px;
	text-align: right;
}

.copyright span, .copyright a {
	color: #aaa;
}

.welcomeState dd a img {max-width: 600px; height: auto; border: 1px solid #666;}