/* phone.css
//
// *******************************************************************
//
//                    smart phones
*/

@media (max-width: 767px) {
	:root {
		--primary-color: #254862;
	}
	
    #pageSlider {
        display: none;
    }
    body #headerBannerBar {
		min-height: 50px !important; 
        height: 50px !important;
    }

    header, main, footer {
        width: 100%; /* Make sure header, main, footer stretch full width */
		padding: 10px 0px 20px 20px;
    }

    #contentWrapper, #headerBannerBar, #footerBannerBar {
        max-width: 100%; /* Make sure these sections take up full width */
    }
	
	#footerBannerBar {
        flex-direction: column; /* Stack items vertically on smaller screens */
        align-items: center; /* Center items */
    }

    #footerBannerBar a {
        padding:0; /* Less horizontal padding on small screens */
        font-size: 10px; /* Smaller font size for mobile */
    }
	
	#contentWrapper {
		padding: 0px;
	}
	#content {
		padding-bottom: 50px;
	}

	.newsBox .title, #content h1{
		margin: 0px 0px 10px 0;
		font-size: 20px;
		font-weight: bold;
	}

	#content h2{
		margin-bottom: 8px;
		font-weight: normal;
		font-size: 16px;
		font-weight: bold;
	}

	#content h3{
		font-size: 14px;
	}

	.newsBox, #content {
		font-size: 14px;
		line-height: 1.5; /* Adjust the line height to see if it helps */
		font-weight: normal;
	}
	
    .newsBox {
        /*width: 100%;   /* Make boxes take full width on smaller screens */
        /*margin: 0;     /*px 10px 10px 0; /* Add space between boxes */
		/*padding: 10px 10px 10px 0px !important; */
        width: 100% !important;   /* Force full width on smaller screens */
        display: block;  /* Ensure they stack vertically */
        margin: 0 !important;     /* Remove any margin to the sides */
        padding: 10px 0px !important; /* Adjust padding for smaller screens */
        float: none !important;   /* Remove floating to ensure stacking */
    }

	footer {
		font-size: 10px;
		min-height: 10px;
		margin-top: 0px; /* Add space above the footer */
	}

	.hometext {
		font-size: 14px;
		margin: 6px
	}

	.hometext img {
		margin: 0 10px 0; /* Adds 20px space to the right and bottom */
		max-width: 50%; /* The image will scale down but never exceed 100% of its parent */
		height: auto;    /* Maintain aspect ratio */
	}

	.hometext img[style*="float:right"] {
		margin: 0 0 0px 10px; /* Adds 20px space to the left and bottom for right-aligned images */
	}
	
	.alert {
		font-size: 15px; /* Adjust this value to your preferred size */
	}
	
	
	
	
	
	/* *********************  navbar **************************/
	.mynav {
		flex-direction: row; /* Keep menu and language selector in a single row /
        justify-content: space-between; /* Ensure space between menu items and language selector */#
        align-items: center; /* Vertically align items */
        width: 100%; /* Full width */
		font-size: 16px;
		margin-left: -10px;
	}
   
    .mynav ul {
        display: none; /* do not show on phones */
        flex-wrap: wrap; /* Allow menu items to wrap if they don't fit */
    }

    .mynav ul li a {
        padding: 5px 15px; /* Reduce padding for smaller screens */
        font-size: 16px; /* Reduce font size */
    }

    .dropdown-content {
        min-width: 100%; /* Ensure dropdown takes up full width on mobile */
    }

    /*.language-select {
        margin-left: auto; /* Push the language selector to the far right *
        display: flex; /* Keep flex layout *
        align-items: center; /* Align language selector items vertically *
    }*/
	.language-select {
        /*margin-left: 0; /* Remove the left margin */
        margin-right: 0; /* Remove any right margin */
        /*padding-right: 0; /* Remove padding on the right side */
        /*display: flex;
        justify-content: flex-end; /* Push the language selector to the far right */
        /*width: 100%; /* Ensure it takes up the full width of the screen */
    }

    /* For tablets and above, you can adjust the image size if needed */
    .responsive-img {
        max-width: 50%; /* Or any value that suits the design on larger screens */
    }
	

	 /******************************************************************/
    /* Hamburger menu button */
    button.hamburger {
        display: flex; 
        cursor: pointer;
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 30px;
        background: none;
        border: none;
        z-index: 1000; /* Ensure it is above other elements */
        position: absolute;
        top: 10px;
        left: 10px; /* Align the button to the left */
    }

    button.hamburger div {
        width: 30px;
        height: 3px;
        background-color: white;
        margin: 3px 0;
        transition: all 0.3s ease;
    }

    
	
	/* Show the menu when "show" class is added */
	.mynav ul.show {
		display: flex; /* Ensure flexbox is used */
		flex-direction: column; /* Stack items vertically */
		background-color: var(--primary-color); /* Use the variable for color */
		position: absolute; /* Position the dropdown */
		top: 50px; /* Adjust to be below the hamburger button */
		left: 10px; /* Align with the hamburger button on the left */
		width: 200px; /* Adjust width */
		z-index: 999;
		padding: 10px; /* Add padding for better spacing */
		gap: 10px; /* Space between items */
	}

	.mynav ul.show li {
		list-style: none; /* Remove bullets */
		text-align: left; /* Align text to the left */
	}


	
/* **************************************************************************/	
	code {
		font-size: 14px;
	}	
/* **************************************************************************/	
/* listen mit Bilder, zB. gettings started */
	.stackContainer {
        padding-left: 0; /* Reset padding on mobile */
    }
    
    .stackContainer img {
        max-width: 100px; /* Adjust image size on mobile */
        margin-left: 0; /* Ensure no extra margin on the left */
    }
}