* {
  box-sizing: border-box;
	margin:0;
	padding:0;
	
}

a,
a:visited,
a:hover,
a:active,
a:focus {
    /*all: unset;  */      
    display: inline;   
    cursor: pointer;
	text-decoration:none;
	color: inherit;
	cursor:pointer;
	
}

html {
  min-height: 100vh;
  margin: 0;
  height: 100%;
}

body {
	min-height: 100vh;
	width:100%;
	line-height: 1.5;
	font-family: "Noto Sans", sans-serif;
	font-weight: 400;
	word-break:normal;
	line-break:normal;
	color: #3e3e3e;
	background-color: #fff;
	padding:0;
	margin:0;
	
	display: flex;
    flex-direction: column;
   
}

#form_field {
    margin-bottom:0.5rem;
}


/* header */

#site_header {
	border:0px solid lightgray;
  	width: 100%;
	flex: 0 0 auto;
	font-size:1.2rem;
	padding: 2rem 3rem 2rem 3rem;
	color:#003149;
	
	display:flex;
	align-items:center;
	justify-content:space-between;
	box-sizing: border-box;
}

#logo_div{
    border:0px solid lime;
	flex: 0 0 50%;
	height:100%;
	
	padding:0 0rem 0rem 0rem;
	color:#003149;
	background-color:#fff;
	display:flex;
	flex-direction:column;
	align-items:left;
	justify-content:center;	
	box-sizing: border-box;
}

#logo_a {
	border:0px solid pink;
	width:100%;
	font-size:2.2rem;
	font-weight: 800;
	letter-spacing: 0.4rem;
	line-height: 1;
	display:flex;
	align-items:center;
	justify-content:left;  
}

#slogan_div {
	border:0px solid lime;
	height:2rem;
	flex: 1;
	display:flex;
	align-items:center;
	justify-content:left;

}

#slogan_p {
  border: 0px solid pink;
  font-weight: 600;
  letter-spacing: 0.1rem;
  line-height: 1;
}



#menu_div {
	border:0px solid lime;
	height:100%;
	flex: 0 0 25%;
	display:flex;
	align-items:center;
	justify-content:right;

}

#today{
	letter-spacing: 0.1rem;
	line-height: 1;	
}

#backend_div{
    margin-left:2rem;
}

#header_myaccount {
    display:flex;
	align-items:center;
	justify-content:center;
	margin-left: 2rem;
}

/* footer */

#footer {
	background-color:#F7F6F6;
	padding: 3rem 3rem 3rem 3rem;
	width: 100%;
	bottom:0; 
	display:flex;
	flex-direction:column;
	align-items:left;
	justify-content:center;
	flex: 0 0 auto;
}

#contact_button_link {

}

#brandname{
    display:fixed;
	bottom:0;
	background-color:#F7F6F6;
	font-size: 0.8rem;
}

/*********************** index */

#main {
	border:0px solid pink;
	flex: 1;
	padding:3rem 6rem 3rem 6rem;
	display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; /* oder mehrere Spalten je nach Layout */
    grid-auto-rows: minmax(100px, 120px); /* Zeilenhöhe flexibel */
    gap: 3rem; 
	
}

#tagcard {
	
	border:0px solid lime;	
	height:100%;
	border-radius: 2.4rem; 
	padding: 0rem 3rem 0rem 3rem;
	color:#003149;
	font-weight: 600;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	
	box-shadow: 0 6px 15px rgba(0,0,0,0.15);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	cursor: pointer;
}

.blue {
	background-color: #F3FBFF;

}

.pink {
	background-color: #FFF3F3;

}

.lila {
	background-color: #F3F5FF;
}

.green {
	background-color: #F3FFF4;

}




/*tag.php */

#container {
   border: 0px solid lime;
   flex:1;
   padding:2rem 0rem 3rem 0rem;
}

#wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr 1fr; /* oder mehrere Spalten je nach Layout */
    grid-auto-rows: minmax(50px, auto); /* Zeilenhöhe flexibel */
    gap: 0rem; 
}

#next, #back {

  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 5rem;
}

#wrapper {
	border:0px solid gray;
	width: 100%;
	border-radius: 2.4rem; 
	padding: 1rem 3rem 0rem 3rem;
	margin-top:0rem;
	margin-bottom: 0rem;
	/*background-color: #FFFCED;*/
	display:flex;
	align-items: stretch;
	justify-content:center;
	
}

.aufgabe_text {
	flex:1;
	text-align:justify;
	display:flex;
	flex-direction:column;
}

#text_footer {
	border:0px solid lime;
	margin-top: auto;
	height:2rem;
	font-weight:800;
	cursor: pointer;
	color: #8FD700;
	display:flex;

}

#back_div {
	border:0px solid red;
	font-size:1.2rem;
	display:flex;
	align-items:center;

}

#back_i {
	display:flex;
	align-items:center;
	
}

.darkblue {
	color:#96DCFF;
	
}

.darkpink{
    color:#FFC5C5;
}

.darklila {
	color:#C5CFFF;
	/*color:#96A7FF;*/ 
}

.darkgreen {
	color:#96FF9F;

}

.aufgabe_gaps {
	flex:1;
	background-color:#fbfff3;
}

.aufgabe {
	padding:2rem;
	border:0px solid peru;
	display:flex;
	flex-direction:column;
}

.aufgabe_header {
	border-bottom: 0px solid #3e3e3e;
	font-size:1rem;
	display:flex;
	align-items: center;
	justify-content: space-between;	
	color: #003149;
	margin-bottom:2rem;
	font-weight:800;
	line-height: 1.5;
}



#aufgabe_footer {
	border:0px solid lime;
	margin-top: 2rem;
	height:2rem;
	font-weight:800;
	cursor: pointer;
	display:flex;
	/*color: #BCFF37;*/
	color:green;
	
	
}

#repeat_div {
	border:0px solid red;
	font-size:1.2rem;
	display:flex;
	align-items:center;
	/*color: #BCFF37;*/
}

#repeat_i {
	display:flex;
	align-items:center;	
}

#punkte_div{
	border:0px solid blue;
	font-size:1.2rem;
	display:flex;
	align-items:center;
}

.punkte {
	border:0px solid blue;
	/*display:none;*/
	font-weight: 800;
	opacity: 0;
    transition: opacity 0.5s ease;
	width: 100%;
}

.punkte.visible {
    display: flex;
    opacity: 1;
	justify-content:center;
	font-size:1.2rem;
	
}

#success_count_div{
	border:0px solid blue;
	font-size:1.2rem;
	display:flex;
	align-items:center;
}

#success_count_div i {
	display:flex;
	align-items:center;	
	margin-right:1rem;
}

#text_body {
	line-height: 1.6;
}

.satz {
	border:0px solid lime;
}

.clause {
	border:0px solid red;
	/*margin-left:0.5rem;*/
	line-height: 2;
}

.clause_0 {
	border:0px solid red;
	margin-left:0rem;
	line-height: 2;
}

.gap {	
	border:1px solid lightgray;
	font-family: "Noto Sans", sans-serif;
	font-weight: 400;
	font-size:1rem;
	text-align:center;
	align-items:center;
	background-color: #ecffc5;
	color: #3e3e3e;
	margin: 0 0.25rem 0 0.25rem;
	border-radius: 2.4rem; 
	text-transform: lowercase;
}

.gap:focus {
	border:1px solid lightgray;
	outline: none;
}

/*register*/

#register_page {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	padding:0rem 1.5rem 3rem 1.5rem;	
	flex:1;
}

#register_page_header {
    
	text-align:center;
	height: 6rem;
	font-size:1rem;
	font-weight:800;
	display:flex;
	align-items:center;
	justify-content:center;
	color: #003149;		
}

#register_form {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:space-between;	
	margin:0;	
	background-color: #fff;
	color: #003149;
	min-height: 25rem;
	width:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:space-between;
	margin:0;
	border: 0px solid #003149;
}

#register_form_header {
	margin-bottom:1rem;	
}

#name_label {
	font-size: 1rem;
}

#input_field_wrapper {
	width: 100%;	
}

#input_field_wrapper input {
	width: 100%;
	border:1px solid #003149;
	font-size:1.25rem;
	height: 3rem;
	border-radius: 4px;
	padding: 0.5rem 1rem;
	background-color:#fff;
	color: #003149;	
}

#input_field_wrapper input:focus {
	outline: none;
	border:1px solid #003149;
	background-color:#fff;
}

#register_button {
	border-radius: 3rem;
	padding: 0.8em 1.6em;
	font-size:1rem;
	line-height: 1.5;
	font-family: "Noto Sans", sans-serif;
	font-weight:600;
	background-color:#003149;
	color: #fff;
	border:none;
	box-shadow:none;
	cursor:pointer;
	margin-top:1.5rem;
}


/*register_after.php*/

#register_after_page{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:0rem 1.5rem 3rem 1.5rem;	
	flex:1;
}

#register_after_page_header {
	text-align:center;
	height: 6rem;
	font-size:1rem;
	font-weight:800;
	display:flex;
	align-items:center;
	justify-content:center;
	color: #003149;	
}

#info_block {
    border: 0px solid green; 
    display:flex;
    flex-direction:column;
    align-items:center;
	justify-content:space-around;
	font-size:1rem;
	color: #003149;	
}

#after_reg_info {
    border: 0px solid red;  
    text-align:center;	
	margin-bottom:1rem;
}

#after_reg_login_button {
	border-radius: 3rem;
	padding: 0.8em 1.6em;
	font-size:1rem;
	line-height: 1.5;
	font-family: "Noto Sans", sans-serif;
	font-weight:600;
	color:#003149;
	background-color: #fff;
	border:1px solid #003149;
	box-shadow:none;
	margin-top: 2rem;
	cursor:pointer;	
}

/*login*/

#login_page {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	padding:0rem 1.5rem 3rem 1.5rem;	
	flex:1;
	width:100%;
}

#login_page_header {
    
	text-align:center;
	height: 6rem;
	font-size:1rem;
	font-weight:800;
	display:flex;
	align-items:center;
	justify-content:center;
	color: #003149;		
}


#login_reg_button {
	border-radius: 3rem;
	padding: 0.8em 1.6em;
	font-size:1rem;
	line-height: 1.5;
	font-family: "Noto Sans", sans-serif;
	font-weight:600;
	background-color:#fff;
	color: #003149;
	border:none;
	box-shadow:none;
	cursor:pointer;
}

#login_form {
	display:flex;
	flex-direction:column;
	align-items:center;
	margin:0;	
	background-color: #fff;
	color: #003149;
	min-height: 20rem;
	width:100%;
	border: 0px solid #003149;
}

#login_form_header {
	font-size: 1rem;
	margin-bottom:2rem;
}

#login_form_field {
	margin-bottom:2rem;
}

#login_forgot {
	margin-top:0.5rem;
}

#login_forgot_link {
    text-decoration:underline;
	font-weight:600; 
}

#login_weiter_button {
	
	border-radius: 3rem;
	padding: 0.8em 1.6em;
	font-size:1rem;
	line-height: 1.5;
	font-family: "Noto Sans", sans-serif;
	font-weight:600;
	background-color:#003149;
	color: #fff;
	border:none;
	box-shadow:none;
	cursor:pointer;
	margin-top:2rem;
	margin-bottom:none;	
}

#no_account_div{
	border:0px solid lime;
	width:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
}

#no_account_p {
	font-size: 1rem;
	font-weight:600;
	color:#003149;

}

#no_account_link {
	border-radius: 3rem;
	padding: 0.8em 1.6em;
	font-size:1rem;
	line-height: 1.5;
	font-family: "Noto Sans", sans-serif;
	font-weight:600;
	background-color:#fff;
	color: #003149;
	border: 1px solid #003149;
	box-shadow:none;
	cursor:pointer;
	margin-top:2rem;
	margin-bottom:none;	
	

}

/*******************reset*/

#reset_page {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:0rem 1.5rem 3rem 1.5rem;	
	flex:1;
	color: #003149;	
}

#reset_page_header {
	padding:1.5rem;
	text-align:center;
	font-size:1rem;
	font-weight:800;
	display:flex;
	align-items:center;
	justify-content:center;
	color: #003149;	   
}

#reset_form {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	margin:0;	
	background-color: #fff;
	color: #003149;
	width:100%;
	margin:0;
	border: 0px solid #003149;
}

#reset_form_header {
	font-size: 1rem;
	margin-bottom:2rem;
}

#reset_info{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
	margin-bottom:0.5rem;

}

#reset_button {
	border-radius: 3rem;
	padding: 0.8em 1.6em;
	font-size:1rem;
	line-height: 1.5;
	font-family: "Noto Sans", sans-serif;
	font-weight:600;
	background-color:#003149;
	color: #fff;
	border:none;
	box-shadow:none;
	cursor:pointer;
	margin-bottom:none;
	margin-top:2rem;
}

/*abo*/

#abo_page {
    margin:6rem 0rem;
	width:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	gap: 3rem;	
	color:#003149;
	flex: 1;
}

#abo_card {
	min-height: 25rem;
	width:20%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:space-between;
	background-color: transparent;
	color:#003149;
	border: 1px solid #003149;
	border-radius: 0.2rem; 
	padding: 2rem;
}

#abo_card_header {
    font-size: 1.25rem;
}

#abo_card_body {
    font-size: 2.25rem;
}

#abo_card_button_div{
   border:0px solid red;
	
}

#abo_card_button {
    border-radius: 3rem;
	padding: 0.6em 1.2em;
	font-size:1rem;
	line-height: 1.5;
	font-family: "Noto Sans", sans-serif;
	font-weight:600;
	/*color: #003149;
	background-color: #fff;
	border:1px solid #003149;*/
	border:none;
	color:#fff;
	background-color: #003149; 
	box-shadow:none;
	cursor:pointer;
}

/*checkout.php*/


#checkout_logo_div{
    height:6rem;
	width:100%;
	letter-spacing: 0.4rem;
	display:flex;
	align-items:center;
	justify-content:flex-start;
	margin:0 6rem 0rem 6rem;
	color:#fff;
}

#checkout_logo_a {
	font-size: 2rem;
	font-weight: 800;	
}

#checkout_page {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	padding:0rem 1.5rem 3rem 1.5rem;
}

#checkout_page_header {
    
	text-align:center;
	height: 6rem;
	font-size:1rem;
	font-weight:800;
	display:flex;
	align-items:center;
	justify-content:center;
	color: #003149;	
	padding: 0rem 1.5rem;
}

#checkout_form {
	
	background-color: #fff;
	color: #003149;
	min-height: 25rem;
	width:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:space-between;
	margin:0;
	border: 0px solid #003149;
}

#checkout_form_header {
	margin-bottom:1rem;
}

#checkbox_div {
    display:flex;
	padding: 2rem 0rem 2rem 0rem;
}

#checkbox_input {

   margin-right: 2rem;
}

#info{
	width:100%;
	border:0px solid red;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	justify-content:center;
	margin-bottom:2rem;
}

#info_header{
	width:100%;
    margin-bottom: 2rem;
	text-align:left;
}

#payment {
	width:100%;
    border: 0px solid green;
	display:flex;
	align-items:center;
	justify-content:space-between;
}


#person, #line1, #line2, #line3 {
	width:100%;
    border:0px solid red;
	display:flex;
	justify-content:flex-start;
}

#payment_field{
	margin-top:1rem;
	margin-bottom:1rem;
	width: 50%;
	display:flex;
	align-content:center;
	justify-content:space-between;
	font-weight: 800;
}

#summe_field {
    margin-bottom:2rem;
    width: 50%;
	display:flex;
	align-content:center;
	justify-content:space-between;
	font-weight: 800;

}

#payment_info {
    width: 30%;
}
#payment_action{
    width: 70%;
	text-align:center;
}

#checkout_button {
	border-radius: 3rem;
	padding: 0.8em 1.6em;
	font-size:1rem;
	line-height: 1.5;
	font-family: "Noto Sans", sans-serif;
	font-weight:600;
	color: #fff;
	background-color: #003149;
	border:none;
	box-shadow:none;
}

/*********** success.php*/

#success_page {
	color: #003149;
    display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:0rem 1.5rem 3rem 1.5rem;
	flex:1;
}

#success_page *{
	margin-bottom:2rem;
	
	
}

#success_start_button{
	border-radius: 3rem;
	padding: 0.8em 1.6em;
	font-size:1rem;
	line-height: 1.5;
	font-family: "Noto Sans", sans-serif;
	font-weight:600;
	color: #fff;
	background-color: #003149;
	border:none;
	box-shadow:none;

}







/************************myaccount */
#myaccount_page {
	
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:0rem 1.5rem 3rem 1.5rem;	
	flex:1;
	color: #003149;	
}

#myaccount_page_header {
    font-family: "Noto Sans", sans-serif;
	color:#003149;
	font-size:1.5rem;
	text-align:center;
}

#myaccount_page div {

   margin-bottom: 2rem;
}

#hello_div{
	font-size: 1.2rem;
}

#delete_myaccount {
	font-family: "Noto Sans", sans-serif;
	color:#003149;
	font-size:1rem;
	text-align:center;
}

#access_myaccount {
    font-weight: 800;
}

#myaccount_start_button{
	border-radius: 3rem;
	padding: 0.8em 1.6em;
	font-size:1rem;
	line-height: 1.5;
	font-family: "Noto Sans", sans-serif;
	font-weight:600;
	color: #fff;
	background-color: #003149;
	border:none;
	box-shadow:none;

}


/***********************delete_account */

#delete_page {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	
	font-family: "Noto Sans", sans-serif;
	color:#003149;
	font-size:1rem;
}


#delete_page_header {
	font-family: "Noto Sans", sans-serif;
	color:#003149;
	font-size:1.5rem;
	text-align:center;
	padding:2rem;
    
}

#delete_frage {
	font-family: "Noto Sans", sans-serif;
	color:#003149;
	font-size:1rem;
	text-align:center;
	padding:2rem;

}

#delete_page_footer {
	padding:2rem;
}

#delete_button {
	border-radius: 3rem;
	padding: 0.8em 1.6em;
	font-size:1rem;
	line-height: 1.5;
	font-family: "Noto Sans", sans-serif;
	font-weight:600;
	color: #fff;
	background-color: #990000;
	border:none;
	box-shadow:none;
	margin-right: 2rem;
	width: 10rem;
	
}

#delete_start_button{
	border-radius: 3rem;
	padding: 0.8em 1.6em;
	font-size:1rem;
	line-height: 1.5;
	font-family: "Noto Sans", sans-serif;
	font-weight:600;
	color: #fff;
	background-color: #003149;
	border:none;
	box-shadow:none;
	width: 10rem;
}

/************************contact */

#contact_page {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:0rem 1.5rem 3rem 1.5rem;	
	flex:1;
	width:100%;  
	color: #003149;
}

#contact_page div{
    margin-bottom:2rem;
}

#contact_page_header {
    
	text-align:center;
	font-size:1rem;
	font-weight:800;
	display:flex;
	align-items:center;
	justify-content:center;
	color: #003149;		
}

#contact_page_info {
   display:flex;
   justify-content:center;
   align-items:center;
   width:100%;
	text-align:center;

}

#contact_start_button {
	border-radius: 3rem;
	padding: 0.8em 1.6em;
	font-size:1rem;
	line-height: 1.5;
	font-family: "Noto Sans", sans-serif;
	font-weight:600;
	color: #fff;
	background-color: #003149;
	border:none;
	box-shadow:none;
}

/***********************impressum */

#impressum_page {
	width:100%;
	display:flex;
	flex-direction:column;
	padding: 2rem 9rem;
	color:#003149;
}

#impressum_page_header {
    width:100%;
	border: 0px solid red;
	text-align:center;
	margin-bottom: 2rem;
}

#impressum_page div{
	margin-bottom: 2rem;
}

#impressum_page h3 {
	margin-bottom: 1rem;
}

#impressum_page_footer {
   text-align:center;
}

#start_button {
	border-radius: 3rem;
	padding: 0.8em 1.6em;
	font-size:1rem;
	line-height: 1.5;
	font-family: "Noto Sans", sans-serif;
	font-weight:600;
	color: #fff;
	background-color: #003149;
	border:none;
	box-shadow:none;
	width:20%;
}

/***********************datenschutz*/

#datenschutz_page {
	width:100%;
	display:flex;
	flex-direction:column;
	padding: 2rem 9rem;
	color:#003149;
}

#datenschutz_page_header {
    width:100%;
	border: 0px solid red;
	text-align:center;
	margin-bottom: 2rem;
}


#datenschutz_p_0 {
    margin-top: 2rem;
	margin-bottom: 2rem;
}

#datenschutz_page div {
	margin-bottom: 2rem;
}

#datenschutz_page h3 {
	margin-bottom: 1rem;
}

#datenschutz_page_footer {
   text-align:center;
}

/***********************AGB*/

#agb_page {
	width:100%;
	display:flex;
	flex-direction:column;
	padding: 2rem 9rem;
	color:#003149;
}

#agb_page_header {
    width:100%;
	border: 0px solid red;
	text-align:center;
	margin-bottom: 2rem;
}


#agb_p_0 {
    margin-top: 2rem;
	margin-bottom: 2rem;
}

#agb_page div {
	margin-bottom: 2rem;
}

#agb_page h3 {
	margin-bottom: 1rem;
}

#agb_page_footer {
   text-align:center;
}



/*backend*/

#backend_page {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	padding:0rem 1.5rem 3rem 1.5rem;	
	flex:1;
}

#backend_page_header {
    
	text-align:center;
	height: 6rem;
	font-size:1rem;
	font-weight:800;
	display:flex;
	align-items:center;
	justify-content:center;
	color: #003149;		
}



#text_div {
   display:flex;
}

#backend_text_form {
   border: 0px solid red;
   padding: 3rem;
   display:flex;
   flex-direction:column;
   width:50%;	
}

#form_header_text {
   text-align:left;
}

#backend_text_form label {  
}

#backend_text_form > * {
    margin-bottom: 2rem;
}

#backend_text_form input {
    width:100%;
	height: 3rem;
	padding: 0.5rem 1rem;
	font-size:1rem;
	font-family: "Noto Sans", sans-serif;
}

#backend_text_form textarea {
    width:100%;
	height: 15rem;
	padding: 0.5rem 1rem;
	font-size:1rem;
	font-family: "Noto Sans", sans-serif;
}

#submit_text_button {
	border-radius: 3rem;
	padding: 0.8em 1.6em;
	font-size:1rem;
	line-height: 1.5;
	font-family: "Noto Sans", sans-serif;
	font-weight:600;
	color:#fff;
	background-color: #003149;
	border:none;
	box-shadow:none;	
}

#text_show_div {
    border: 1px solid skyblue;
	padding: 1rem;
    display:flex;
	flex-direction:column;
	width:50%;
}

#text_show_div > div {
	border:0px solid red;
	display:flex;
	flex-direction:column;
	align-items:space-around;
    margin-bottom: 2rem;
}

#satz_form {
   border:1px solid lightgray;
   padding: 1rem 1rem 1rem 1rem;
   display:flex;
   flex-direction:column;
   width:50%;
}

#clause_form {
   border:1px solid lightgray;
   padding: 0rem 0.5rem 0rem 0.5rem;
   display:flex;
   flex-direction:column;	
}

#gap_form{
   border:1px solid lightgray;
   padding: 0rem 0.5rem 0rem 0.5rem;
   display:flex;
   flex-direction:column;	
}

#satz_form > * {
    margin-bottom: 2rem;
}

#clause_form > * {
    margin-bottom: 2rem;
}


#satz_form input {
    width:100%;
	height: 3rem;
	padding: 0.5rem 1rem;
	font-size:1rem;
	font-family: "Noto Sans", sans-serif;
}

#submit_satz_button, #submit_clause_button, #submit_gap_button, #submit_teil_button {
	border-radius: 3rem;
	padding: 0.8em 1.6em;
	font-size:1rem;
	line-height: 1.5;
	font-family: "Noto Sans", sans-serif;
	font-weight:600;
	box-shadow:none;
	width:100%;
}

#submit_satz_button {
	background-color: #C5ECFF;
    color: #003149;
	border:2px solid #003149;

}

#submit_clause_button {
	background-color: #F5C5FF;
    color: #3D0049;
	border:2px solid #3D0049;

}

#submit_gap_button {
    background-color: #CFFFC5;
	color:#0C4900;
	border:2px solid #0C4900;
}

#submit_teil_button {
	background-color: #FFB996;
    color: #491800;
	border:2px solid #491800;

}

#show_div {
    border:0px solid peru;
	display:flex;
	flex-direction:column;
	width:100%;
}

#satz_form{
    background-color: #F3FBFF;
}

#clause_form {
    background-color: #FDF3FF;
	margin:0rem 0rem 0rem 0rem;
	width:50%;
}

#gap_form {
    background-color: #F5FFF3;
	margin:0rem 0rem 0rem 0rem;
}

#teil_form {
	background-color: #FFF7F3;
	margin:0rem 0rem 0rem 0rem;

}

.satz_show_div {
    border: 1px solid navy;
	padding: 1rem;
    display:flex;
	flex-direction:column;
}

.satz_clause_div {
	display:flex;
}

.satz_subdiv {
	border:0px solid red;
	display:flex;
	flex-direction:column;
	width:50%;
	padding:0rem 0rem 0rem 5rem;
}

.satz_info{
	padding:0.5rem 0.5rem 1rem 0.5rem;
	font-size:0.9rem;	
}

.satz_body {
	padding:0.5rem 0.5rem 1rem 0.5rem;
	margin-bottom:2rem;
}

.clause_form > * {
    margin-bottom: 2rem;
	
}

.clause_form input {
    width:100%;
	height: 3rem;
	padding: 0.5rem 1rem;
	font-size:1rem;
	font-family: "Noto Sans", sans-serif;
}

.clause_show_div {	
	display:flex;
	padding:3rem 0rem;
}

.clause_subdiv {
    width:50%;
	padding:0rem 0rem 0rem 10rem;
}

.clause_info{
	margin:0rem 0rem 0rem 0rem;
	padding:0.5rem 0.5rem 1rem 0.5rem;
	font-size:0.9rem;
}

.clause_text {
	margin:0rem 0rem 0rem 0rem;
	padding:0.5rem 0.5rem 1rem 0.5rem;
}

.teil_gap_div {
    display:flex;
	justify-content:space-between;
	width:50%;
}

.teil_div {
    display:flex;
	flex-direction:column;
}

.teil_form > * {
    margin-bottom: 2rem;
}

.teil_form input {
    width:100%;
	height: 3rem;
	padding: 0.5rem 1rem;
	font-size:1rem;
	font-family: "Noto Sans", sans-serif;
}

.teil_show_div {
    border: 0px solid navy;
	padding: 1rem;
    display:flex;
	flex-direction:column;		
}

.teil_show_div > div {
	border:0px solid red;
	display:flex;
	flex-direction:column;
	align-items:space-around;
}

.teil_info{
	background-color: #FFF7F3;
	margin:0rem 0rem 0rem 0rem;
	padding:0.5rem 0.5rem 1rem 0.5rem;
	font-size:0.9rem;
}

.teil_text {
	background-color: #FFF7F3;
	margin:0rem 0rem 0rem 0rem;
	padding:0.5rem 0.5rem 1rem 0.5rem;
}


.gap_div {
    display:flex;
	flex-direction:column;		
}

.gap_form > * {
    margin-bottom: 2rem;
	
}

.gap_form input {
    width:100%;
	height: 3rem;
	padding: 0.5rem 1rem;
	font-size:1rem;
	font-family: "Noto Sans", sans-serif;
}

.gap_show_div {
    border: 0px solid navy;
	padding: 1rem;
    display:flex;
	flex-direction:column;		
}

.gap_show_div > div {
	border:0px solid red;
	display:flex;
	flex-direction:column;
	align-items:space-around;
}

.gap_info{
	background-color: #F5FFF3;
	margin:0rem 0rem 0rem 0rem;
	padding:0.5rem 0.5rem 1rem 0.5rem;
	font-size:0.9rem;
}

.gap_text {
	background-color: #F5FFF3;
	margin:0rem 0rem 0rem 0rem;
	padding:0.5rem 0.5rem 1rem 0.5rem;
}


/***************************************************************** Tablet */
@media (max-width: 1024px) {
	
	/*header*/
	#logo,
    #header-menu {
        margin: 0 0rem;
    }   
}

/********************************************************************************************************* Mobile */
@media (max-width: 768px) {
	
	body {
	min-height: 100vh;
	width:100%;
	line-height: 1.5;
	font-family: "Noto Sans", sans-serif;
	font-weight: 400;
	word-break:normal;
	line-break:normal;
	color: #3e3e3e;
	background-color: #fff;
	padding:0;
	margin:0;
	display: flex;
    flex-direction: column;
	align-items:center;
	justify-content:center;
    
}

/*header*/
	
    #site_header {
		border:0px solid lime;
		flex-direction:column;
		justify-content:left;
		padding:1rem 1rem 2rem 1rem;
		flex: 0 0 auto;
        
    }

    #logo_div {
		border:0px solid lime;
		width:100%;
       
        margin: 0;
		display:flex;
		justify-content:left;
        
        letter-spacing: 0.2rem;       
    }
	
	#logo_a {
	    font-size: 1.5rem;
		margin-bottom:1rem;
	   /* font-weight: 800;	*/
}

	#menu_div {
		border:0px solid lime;
		width:100%;
		justify-content:space-between;
		margin-top:1rem;
		margin-bottom:2rem;
		
	
	}
	
	#header_access {
	    text-align:center;
		
	}

    
/*index.php*/
	
	#main {
        padding: 0 1.2rem 2rem 1.2rem;
		grid-template-columns: 1fr; 
		gap: 1.5rem;
    }
	
    #hero {
        padding: 1.5rem;
    }

    #hero_header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    #hero_headline {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    #hero_stats {
        width: 100%;              
        justify-content: flex-start;
        gap: 1rem;
    }
	
	#abo_div {
		flex-direction:column;
	}
	
	#reg_button,
    #abo_button {
        width: 100%;           
        margin-right: 0;       
        margin-bottom: 0.8rem; 
    }
	
    #card {
		padding: 0rem 1.5rem;
	
	}
	
    #card_title {
		display: flex;
        justify-content: flex-start; 
        align-items: flex-start;    
        text-align: left;            
        width: 100%; 
	}
    
	#card_subheader {
		display: flex;
        justify-content: flex-start; 
        align-items: flex-start;    
        text-align: left;            
        width: 100%; 
		margin-top:1rem;
	}

    .section {
        padding: 1.5rem;
        border-radius: 1.5rem;
    }

    #section_header {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    #section_footer {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
	
 #footer {
	background-color:#F7F6F6;
	width: 100%;
	bottom:0;
	display:flex;
	flex-direction:column;
	align-items:left;
	justify-content:center;
	padding:3rem;
}   
	
#brandname_footer {
	margin-top:2rem;
	}
	
#repeat_button {
	margin-left:0;
	}	
	
/*tag.php*/
	
#text_footer {
	margin-top:2rem;
	}
	
/*start.php*/
	
#container {
	padding: 1rem;
	}
	
#wrapper {
        grid-template-columns: 1fr; 
		padding: 0rem 0rem;
		flex-direction:column;
}
	
#wrapper_footer {
	flex-direction:column;
	gap:1.5rem;     
}

#back {
	display:none;
}
	
#next {
	margin-top:2rem;
	}

#container_footer {
	flex-direction:column;
}
	
#footer_back {
	margin-bottom:2rem;
	}

/*abo.php*/
	
    
    #abo_page {
	    flex-direction:column;
		padding: 1.5rem;
		margin:0;
	}
	
    #page_header {
	   padding: 3rem;
	}
	
    #abo_header {
        font-size: 1rem;
        height: 25vw;
        padding: 1rem;
    }

    #abo_main {
        flex-direction: column;
        gap: 2rem;
        padding: 1rem;
		
    }

    #abo_card {
        width: 90%;
        min-height: 15rem;
        padding: 1.5rem;
    }

    #abo_card_body {
        font-size: 1.75rem;
    }

    #abo_card_header {
        font-size: 1rem;
		font-weight: 800;
    }

    #abo_card_button {
        padding: 0.6em 1.2em;
        font-size: 1rem;
    }

    #abo_logo_div {
        margin: 0 1rem;
        font-size: 1.5rem;
		justify-content:center;
    }

    #abo_logo_a {
        font-size: 1.5rem;
    }
	
/***** register.php */
	
    #register_main {
        flex-direction: column;
        height: auto;
    }

    #reg_leftside, #reg_rightside {
        width: 100%;
        height: auto;
        padding: 1rem 0;
    }

    #reg_leftside_header, #reg_rightside_header {
        height: auto;
        padding: 2rem 0;
    }

    #reg_leftside_main, #reg_rightside_main {
        flex-direction: column;
        align-items: center;
        height: auto;
        gap: 1.5rem;
    }

    #register_form {
        width: 90%;
        gap: 1rem;
    }

    #form_field {
        width: 100%;
		margin-bottom:0.5rem;
    }

    #input_field_wrapper input {
        font-size: 1rem;
        height: 2.5rem;
    }

    #register_form_header {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }

    #register_button, #reg_back_button {
        width: 80%;
        font-size: 0.9rem;
        padding: 0.6em 1.2em;
    }

    #reg_logo_link {
        font-size: 3rem;
    }

    #reg_info {
        font-size: 0.9rem;
        text-align: center;
        padding: 0 1rem;
    }
	
/*****************checkout.php */
	
#checkout_page_header {
	padding:1.5rem;	
}
#checkout_form {
	width: 90%;
}

#payment_field{
	width: 100%;
}

#summe_field {
    width: 100%;
}
	
/****************reset.php */
	
}