body, html {
	height: 100%;
	background-color: #CCCCCC; /* Light grey background */
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	color: #000000; /* Default text color set to black */
}

.container {
	max-width: 1020px;
	background-color: #FFFFFF; /* White background for the container */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

header {
	text-align: center;
	margin-bottom: 30px;
}

.header-logo {
	/* Adjust based on actual logo size */
}

nav {
	/* Navigation Styles */
}

body::after {
	content: "";
	display: block;
}


.content-page{
	padding: 20px;
}



.header-content {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.header-content h2 {
	margin-left: auto; /* Pushes the h2 to the left */
	flex-grow: 1;
	text-align: left;
	font-size: 15px;
}

.header-content a {
	display: inline-block;
	margin-right: 10px; /* Adjust spacing between elements as needed */
}

.header-content .icon {
	margin-left: auto; /* Pushes the hamburger menu to the right */
}

/* Ensure the images are not too large */
.header-content img {
	height: 35px; /* Adjust based on actual size of your images */
}


.header-content img img:not(.header-logo) {
	width: 40px; /* Sets the width of the images to 50px */
	height: 40px; /* Sets the height of the images to 50px */
	object-fit: cover; /* Ensures the images cover the area without losing their aspect ratio */
}
.header-content img.line {
	width: 3px; /* Resets the width for the line image to be automatic */
	height: 35px; /* Adjusts the height to be automatic, could be set to a specific value if desired */
	margin-top: -2px;
}

.header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%; /* Ensure the header content spans the full width */
}

.icon {
	margin-left: auto; /* Pushes the icon to the far right */
	padding-right: 0; /* Adjust or remove padding if it's causing extra space */
}

.Sucheword{
	color: #666666;
}


.hamburger-menu {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	width: 30px; /* Width of the hamburger menu */
	height: 35px; /* Height of the hamburger menu */
}

.hamburger-menu span {
	display: block;
	height: 4px; /* Height of each line */
	width: 100%; /* Makes each line span the full width of the parent */
	background-color: #9999CC; /* Red color; adjust as needed */
	border-radius: 2px;
	transition: background-color 0.3s;
	margin-top: -3px;
}


.custom-line {
	max-width: 100%; /* Example: Adjust based on the width of the hamburger menu */
	height: 2px;
	background-color: #666666;

}

.line{
	margin-right: 10px;
}


.header-content a:last-child {
	margin-right: 3px;
}

.information-text {
	color: rgb(0, 0, 102); /* This sets the text color to the specified dark blue */
	/* Add any other styling you want for this text here */
	font-size: 1.3rem;
}

.full-width-image {
	width: 100%; /* Makes the image full width of its containing element */
	height: auto; /* Adjusts the height automatically to maintain the aspect ratio */
	display: block; /* Ensures the image takes up the entire line */
}

.appointment-selection h3 {
	color: #000066; /* Blue headings */
	margin-bottom: 15px;
	text-align: center;
}

.container-checkbox {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	font-size: 18px;
	user-select: none;
	line-height: 25px; /* Adjust the line-height to vertically center the text */
}

/* Hide the browser's default checkbox */
.container-checkbox input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom checkbox */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
	border: 1px solid #9999CC;
	border-radius: 4px;
}

/* On mouse-over, add a grey background color */
.container-checkbox:hover input ~ .checkmark {
	background-color: #ccc;
}


.container-checkbox input:checked ~ .checkmark {
	background-color: #33CC33;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.container-checkbox input:checked ~ .checkmark:after {
	display: block;
}

/* Style the checkmark/indicator */
.container-checkbox .checkmark:after {
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

/* Style the PLZ input */
#plzInput {
	border: 1px solid #9999CC;
	border-radius: 4px;
	padding: 5px;
	margin-top: 8px; /* Spacing after the checkbox */
	display: inline-block; /* Show it inline with the checkboxes */
}

/* Align items in the container-checkbox label */
.container-checkbox {
	display: flex;
	align-items: center; /* This ensures vertical center alignment of checkbox, label text, and PLZ input */
}

#plzInput {
	/* No change needed, but you can adjust margin or padding for better visual spacing if desired */
	margin-left: 10px; /* Example: Adds a little space between the checkbox and the input field */
}

/* Align items in the container-checkbox label */
.container-checkbox {
	display: flex;
	align-items: center; /* This centers the checkbox, label text, and PLZ input vertically */
	gap: 10px; /* Adjust this value as needed to add space between elements */
}

/* Style adjustments for the PLZ input to ensure proper alignment */
#plzInput {
	height: 15px; /* Match the height of your custom checkboxes */
	margin: 0; /* Remove any default margin that might affect alignment */
	/* other styles like border, padding, etc., remain unchanged */
	width: 100px;
}

.container-checkbox {
	display: flex;
	align-items: flex-start; /* Align items to the start of the container */
	gap: 10px;
}

#submitBtn {
	background: url('px/flaeche_ergebnisse.gif') no-repeat center center;
	background-size: contain; /* This will ensure that the background image is contained within the button */
	border: none; /* Remove the border if you don't need it */
	width: 250px; /* Adjust the width as needed */
	height: auto; /* Adjust the height as needed */
	cursor: pointer;

}

#submitBtn:hover {
	/* You can add hover effects if you like, such as changing the opacity */
	opacity: 0.8;
}
.submit-container {
	display: flex;
	justify-content: center; /* Center horizontally */
	width: 100%; /* Take the full width of the form to center the button within it */
	margin-top: 12px; /* Add some space above the button if needed */
}


footer {
	font-family: Arial, sans-serif; /* Modern font */
	text-align: center;
	padding: 20px; /* Padding set to 20px, if you want no padding, change it to 0 */
	background-color: #E6E6E6; /* Light grey background for footer */
	border-radius: 0px 0px 8px 8px; /* Rounded corners at the bottom */
	font-size: 16px; /* Readable font size */
	line-height: 1.6; /* Spacing for readability */
}

.footer-wrapper {
	max-width: 1200px;
	margin: 0 auto; /* Centers the content within the footer */
}

footer p, footer a {
	text-align: center;
	display: block; /* Each paragraph and link is displayed as a block */
}

.footer-links a {
	color: #0066cc; /* Blue link color */
	text-decoration: none; /* No underline */
	padding: 0 10px; /* Spacing around links */
}

.footer-links a:hover {
	text-decoration: underline; /* Underline on hover for interactivity */
}


.hamburger-menu-content {
	height: 100%;
	width: 0; /* Initially hidden */
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: #FFFFFF; /* Light background for the menu */
	color: #000000; /* Dark text color */
	overflow-x: hidden;
	transition: width 0.5s ease; /* Smooth transition for sliding */
	padding-top: 60px;
	box-shadow: 2px 0px 5px rgba(0,0,0,0.5); /* Soft shadow for depth */
}

.hamburger-menu-content a {
	padding: 10px 15px;
	text-decoration: none;
	font-size: 22px;
	color: #000066; /* Dark blue color for links, similar to header */
	display: block;
	transition: color 0.3s ease;
	min-width: 250px;
}


.hamburger-menu-content a:hover {
	color: #9999CC; /* Lighter blue on hover */
}

.hamburger-menu-content a {
	text-align: left; /* Ensures consistent alignment */
	padding-left: 20px; /* Provides some padding to the left; adjust as needed */
}

.hamburger-menu-content {
	/* Other styles remain unchanged */
	transition: width 0.5s, opacity 0.5s ease; /* Adjust timing as needed */
}

.hamburger-menu-content.open {
	width: 260px; /* Visible state width */
}


.checkbox-group {
	flex-direction: column;
}

.checkbox-group label {
	margin: 5px 0;
}

.form-group, button[type="submit"] {
	width: auto;
}

.button-group button {
	padding: 8px 16px; /* Slightly smaller padding on mobile for better fit */
	font-size: 14px; /* Adjust font size for smaller screens */
}

.header-content {
	flex-wrap: wrap;
}

.appointment-form {
	width: 100%;
}

.checkbox-container {
	font-size: 16px; /* Smaller font size for mobile devices */
}

.container-checkbox {
	font-size: 16px; /* Smaller font size for mobile */
	padding-left: 35px;
}

.container-checkbox .checkmark {
	height: 25px;
	width: 25px;
}


.header-logo {
	height: auto; /* Adjust height to maintain aspect ratio */
	width: 120px; /* Adjust width as needed */
	object-fit: contain; /* Ensures the image is scaled correctly within the dimensions */
	margin-right: auto; /* Adds margin to the right to push other elements to the edge */
}

.header-content {
	display: flex;
	justify-content: space-between; /* Adjusted for even spacing */
	align-items: center;
	width: 100%;
}

/* Adjust .header-content img to not apply to the logo */
.header-content img:not(.header-logo) img:not(.line) {
	height: 35px; /* Existing styles for other images */
	width: 35px;
	object-fit: cover;
}

.header-logo {
	height: auto; /* Keeps aspect ratio intact */
	width: 175px; /* New width; adjust as needed */
	object-fit: contain; /* Ensures image scales properly */
	margin-right: auto; /* Ensures logo stays on the left */
}

.top-image-container{
	display: none;
}



.top-nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-items {
  display: flex;
  align-items: center;
}



.icon-menu {
  display: inline-block;
}

/* Ensure to add styles for responsiveness and additional browser compatibility */
.logo img{
	width: 175px;
	height: auto;
}

.logo{
	margin-top: 4px;
}


.nav-items a {
  display: inline-block; /* Ensures the anchor tag is properly aligned with inline content */
  margin-right: 10px; /* Your existing margin */
  /* Ensure this matches your layout's needs */
}

.nav-items a img {
  display: block; /* Prevents default inline image spacing */
  width: 35px; /* Explicit width */
  height: 35px; /* Explicit height */
  box-sizing: border-box; /* Includes padding and border in element's total width and height */
}

.top-nav-container{
	margin-bottom: 10px;
}

.hamburger-menu{
	margin-top: 2px;
}

.menu-line{
	height: 35px;
	width: 3px;
	margin-right: 10px;
}

.stichpunkte .list-item {
  display: flex;

  margin-bottom: 10px; /* Adds some space between list items */
}

.stichpunkte .list-item img {
  margin-right: 10px; /* Space between the dot and the text */
  width: 16px; /* Adjust based on your image size */
  height: 16px; /* Adjust based on your image size */
}

.checkboxen{
	width: 50%;
}

/* Ensures the checkbox is visually hidden but still functional */
.appointment-selection input[type="checkbox"] {
	opacity: 0;
	position: absolute;
	width: 0;
	height: 0;
	margin: 0;
}

/* Styles the area around the custom checkbox */
.container-checkbox {
	display: flex;
	align-items: center;
	position: relative;
	padding-left: 35px; /* Adjust as needed to accommodate the custom checkmark */
}

/* Custom checkmark styling */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
	border-radius: 4px;
	border: 1px solid #9999CC;
}

/* When the checkbox is checked, show a green background */
input[type="checkbox"]:checked + label .checkmark {
	background-color: #33CC33;
}

/* Style the checkmark indicator (hidden when unchecked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Display the checkmark indicator when the checkbox is checked */
input[type="checkbox"]:checked + label .checkmark:after {
	display: block;
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

.checkmark{
	cursor: pointer;
}

.container-checkbox label{
	cursor: pointer;
}


.tablet-auswaehlen-text{
	display: none;
}

.additional-content{
	display: none;
}

.additional-content p {
	color: #333333;		
}

.submit-container-desktop{
	display: none;
}

#desktop-content{
	display: none;
}

.tab {
	flex: 1;
	text-align: center;
	padding: 10px;
	margin: 0 5px;
	border-left: 2px solid #9999CC;
	border-right: 2px solid #9999CC;
	border-bottom: 2px solid #9999CC;
	border-top: none;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	background: #fff;
	cursor: pointer;
	color: rgb(0, 0, 102);
	font-size: 20px;

}

.tab a{
	text-decoration: none;
	color: rgb(0, 0, 102);
}

/* Add this class to the tab that is active */
.tab.active{
	font-weight: bold;
}

/* Clear the margins for the first and last tabs */
.tab:first-child {
	margin-left: 0;
	margin-right: 13px;
}

.tab:last-child {
	margin-right: 0;
}

.tab-container{
	display: none;
}

.search-directory-link{
	width: 188px;
	margin-left: 280px;
	margin-top: 5px;
	text-align: left;
}

.search-directory-link a{
	text-decoration: none;
	color: #666666;
}

.tab:hover{
	font-weight: bold;
}

.placeholder{
	height: 30px;
}

.ratgeber-artikel{
	display: flex;
	align-items: center;
	height: 44px;
}

.ratgeber-artikel img{
	height: 26px;
	margin-right: 12px;
}

.ratgeber-artikel{
	text-decoration: none;
	color: black;
	font-size: 20px;
}

.ratgeber-inhalt a{
	text-decoration: none;
}

.ratgeber-artikel.active{
	font-weight: bold;
}

.ratgeber-artikel-inhalt{
	font-size: 18px;
}

.hamburger-menu-content {
	display: flex; /* Enable Flexbox */
	flex-direction: column; /* Stack children vertically */
	justify-content: space-between; /* Space between items */
	height: 100%; /* Ensure it takes full height of its parent/container */
}

/* Ensure .menu-down-content is pushed to the bottom */
.menu-down-content {
	margin-top: auto; /* Pushes it to the bottom */
	margin-bottom: 110px;
}

.menu-down-content a{
	color: black;
	font-size: 20px;
}


.begriffe-container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  gap: 10px;
}

.begriff {
  width: 50%;
  flex: 1 0 48%;
  margin-bottom: 5px;
}


.contact-section form {
  display: grid;
  max-width: 500px; /* Keep the form's max-width */
  margin: auto; /* Center the form in the container */
}



.contact-section h2 {
  text-align: center;
  color: #333;
  margin: 0; /* Remove any default margins */
  padding-top: 20px; /* Adjust top padding as needed */
  padding-bottom: 20px; /* Adjust bottom padding as needed */
}

.contact-section label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold; /* Make labels bold */
  color: #333; /* Use a darker color for better contrast */
}

/* Apply a uniform height to text inputs, email inputs, selects, and textareas */
.contact-section input[type="text"],
.contact-section input[type="email"],
.contact-section select,
.contact-section textarea {
  width: 100%;
  max-width: 500px; /* Ensure max-width is consistent */
  padding: 10px; /* Add more padding for a better look */
  border: 1px solid #ccc;
  border-radius: 4px;
  margin: 0 auto; /* Center the inputs if the form is wider */
  margin-bottom: 15px;
  height: 40px; /* Set a fixed height for text inputs and email inputs */
  box-sizing: border-box; /* Include padding and border in the element's total height */
}

/* Remove the fixed height for textarea to allow for multiple rows */
.contact-section textarea {
  height: auto; /* Reset to default auto height */
  min-height: 100px; /* Provide a minimum height */
}

.contact-section .form-check {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.contact-section .form-check input[type="checkbox"] {
  margin-right: 10px;
}

.contact-section button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s; /* Smooth transition for hover effect */
  width: 100%; /* Make the button full width */
  max-width: 500px; /* Ensure button width matches input fields */
  height: 40px; /* Match the height of input fields */
  box-sizing: border-box; /* Include padding and border in the element's total height */
}

.contact-section button:hover {
  background-color: #45a049;
}


.contact-section .form-check {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

/* Style for the custom checkbox */
.contact-section .form-check input[type="checkbox"] {
  -webkit-appearance: checkbox; /* For Webkit browsers like Chrome and Safari */
  -moz-appearance: checkbox;    /* For Mozilla browsers like Firefox */
  appearance: checkbox;         /* Standard syntax */
  margin-right: 10px;
  cursor: pointer;
}

.contact-section .form-check label {
  cursor: pointer;
}

.contact-section .form-check {
  display: flex;
  justify-content: start; /* Aligns the checkbox to the start of the line */
  align-items: center; /* Vertically aligns the checkbox with the label */
  margin-bottom: 20px; /* Space below the checkbox */
}
.contact-section button:hover {
  background-color: #45a049;
}

.form-check input{
	margin-top: -4px;
}
.contact-section input[type="text"],
.contact-section input[type="email"],
.contact-section select,
.contact-section textarea {
  width: 100%;
  padding: 12px; /* Consistent padding for all input types */
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 15px;
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}



#first-info-text{
	font-size: 2.3rem;
}



.ratgeber-desktop-inhalt a{
	font-size: 20px;
	text-decoration: none;
	color: black;
	font-weight: bold;
}

.ratgeber-desktop-artikel{
	margin-bottom: 15px;
	margin-top:15px;
	display: flex;
	justify-content: space-between;
}

.ratgeber-desktop-artikel img{
	height: 22px;
	margin-left: auto;
}
#desktop-content{
	display: block;
}

#mobil-dist{
	margin-top: 34px;
}

.text-desktop{
	margin-right: 0px;
}

.therapist-access-container {
	background-color: #ffffff; /* A light background to stand out */


}

.therapist-access-title {
	color: #333333;
	margin-bottom: 15px;
	font-size: 17px;
}

.therapy-access-description {
	margin-bottom: 20px;
	color: #666666; /* Slightly muted text color for the description */
}

.therapist-access-buttons {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px; /* Adds space between buttons and labels */
}

.therapist-access-label {
	font-size: 16px; /* Increased font size for labels */
	color: #444444; /* Darker color for better readability */
	margin-bottom: 0px;
	margin-top: 24px;
}

.btn {
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	text-decoration: none; /* Removes underline from links styled as buttons */
	color: white;
	cursor: pointer;
	transition: background-color 0.3s;
	display: inline-block; /* Allows setting a width */
	min-width: 200px; /* Ensures minimum width for both buttons, adjust as needed */
	text-align: center; /* Centers text in the button */
	box-sizing: border-box; /* Ensures padding is included in the width */
}

.therapist-btn-login, .therapist-btn-register {
	width: auto; /* Allows the button to grow with content */
	margin: 0 auto; /* Centers the button if it's smaller than the max width */
}

.therapist-btn-login {
	background-color: #4CAF50; /* Green background */
}

.therapist-btn-register {
	background-color: #008CBA; /* Blue background */
}

.btn:hover {
	opacity: 0.9; /* Slight effect on hover for interaction feedback */
}


.login-container {
	background-color: #ffffff;
	padding: 20px;
	margin-top: 20px;
	border-radius: 8px;
	box-shadow: 0 5px 8px rgba(0, 0, 0, 0.25); /* More pronounced shadow for depth */
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

.login-title {
	text-align: center;
	color: #333333;
}

.login-form .form-group {
	margin-bottom: 15px;
}

.login-form label {
	display: block;
	margin-bottom: 5px;
}

.login-form input {
	width: 100%;
	padding: 10px;
	border: 1px solid #cccccc;
	border-radius: 4px;
}

.btn.login-btn {
	padding: 12px 25px;
	background-color: #4CAF50;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.3s, transform 0.2s;
	outline: none; /* removes the outline */
	width: auto; /* Auto width for button */
	font-size: 1rem; /* Font size for button */
}
.btn.login-btn:hover {
	background-color: #3e8e41;
}

.register-link {
	text-align: center;
	margin-top: 20px;
}

.register-link a {
	color: #008CBA;
}

.login-form input,
.btn.login-btn {
  box-sizing: border-box;
  width: 100%;
  /* other styles */
}

.registration-box {
	background: #fff;
	max-width: 600px;
	margin: 0 auto;

	box-shadow: 0 5px 8px rgba(0, 0, 0, 0.25); 
	border-radius: 4px;

}


.form-container {
	display: flex;
	flex-direction: column;
}

.form-title {
	text-align: center;
	margin-bottom: 30px;
}

.form-row {
	display: flex;
	justify-content: space-between; /* This will create space between the elements */
	flex-wrap: wrap;
}

.form-group-registration {
	width: calc(50% - 10px); /* Adjust this value to create the desired gap */
	margin-bottom: 15px;
}


.form-group-registration.full-width {
	width: 100%; /* Full width for elements like email */
}

.form-group-registration label {
	display: block;
	margin-bottom: 5px;
}

.form-group-registration input[type="text"],
.form-group-registration input[type="email"],
.form-group-registration input[type="password"],
.form-group-registration select {
	width: 100%;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}

.submit-btn-container {
	text-align: center;
	margin-top: 20px;
}

.submit-btn {
	padding: 12px 25px;
	background-color: #4CAF50;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.3s, transform 0.2s;
	outline: none; /* removes the outline */
	width: auto; /* Auto width for button */
	font-size: 1rem; /* Font size for button */
}

.submit-btn:hover {
	background-color: #3e8e41; /* darker shade of button color */
}

.error-message {
	display: block; /* Ensure it's a block-level element */
	width: 100%; /* Take the full width of its parent */
	text-align: center; /* Center the text */
	color: #D8000C; /* Example error color: dark red */
	background-color: #FFD2D2; /* Light red background */
	padding: 10px; /* Add some padding */
	margin-bottom: 5px; /* Add some space below the message */
	box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.error-message.full-width {
	grid-column: 1 / -1; /* Span across all columns */
}

.success-message {
	display: block;
	width: 100%;
	text-align: center;
	color: #4BB543; /* Success text color */
	background-color: #D4EDDA; /* Light green background */
	padding: 10px;
	margin-bottom: 20px;
	box-sizing: border-box;
}

.success-message.full-width {
	grid-column: 1 / -1; /* Span across all columns */
}




.access-outer-container {
    display: flex;
    flex-wrap: wrap;

    margin: 0;
    padding: 0;
}

.therapist-access-container, .additional-container {
    box-sizing: border-box;

}


.additional-container {
    display: flex;
    flex-direction: column;
}

.profile-entry {
    margin-bottom: 20px;
    width: calc(50% - 7px);
}

.profile-entry img{
	width: 100%;
	cursor: pointer;
}

.free-entry{
	margin-right: 14px;
}

.full-width-info {

    display: block;
    align-items: center;

}

.full-width-info img.bullet-point {
    width: 20px;
    height: auto;
}

.full-width-info p {
    width: 100%;
    margin-top: 10px;
}

.vorschau-img-container{
	display: flex;
	font-size: 17px;
}

.therapist-access-container{
	width: 100%;
}

.additional-container{
	width: 100%;
}

.therapist-access-container{
	margin-bottom: 25px;
}

.registration-box{
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  max-height: 80vh; /* 80% of the viewport height */
  max-width: auto;
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.ueberschrift-profil{
	color: rgb(0, 0, 102);
	font-size: 24px;
}

.profil-container {
  display: flex; /* Establish flex container */
  justify-content: space-between; /* This will put space between the two child elements */
  gap: 20px; /* This creates space between the flex items. If not supported, use margin instead */
}

.profil-links,
.profil-rechts {
	font-size: 18px;
	
}


.profil-links {
    order: 1; /* Ensure the form comes first */
    flex-basis: 100%;
    max-width: 100%;
}

.profil-rechts {
    order: 2; /* Ensure the image comes after the form */
    flex-basis: 100%;
    max-width: 100%;
}




.profil-rechts img {
  width: 100%; /* Makes the image responsive, adjusting to the width of its container */
  height: auto; /* Maintains the aspect ratio of the image */
}


.form-container-input-data .form-group-registration input[type="text"],
.form-container-input-data .form-group-registration select {
  height: 27px; /* Reduced height for inputs and select */
  padding: 4px 10px; /* Adjust padding to center the text vertically */
  font-size: 14px; /* Adjust font-size if necessary */
}

.form-container-input-data .form-group-registration textarea {
  padding: 4px 10px; /* Adjust padding to center the text vertically */
  font-size: 14px; /* Adjust font-size if necessary */
  height: auto; /* Height auto to allow resizing if necessary */
  min-height: 80px; /* Minimum height for textarea */
}


.form-container-input-data{
	margin-top: 14px;
}

.upload-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 20px;
}

.upload-btn:hover {
    background-color: #0056b3;
}

.profile-pic-uploader {
    position: relative;
    text-align: center;
    margin-bottom: 10px; /* Adjust as needed */
}





.preview-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px; /* Adjust as needed */
    height: 200px; /* Adjust as needed */
    margin: auto; /* Center the container */
    background-color: #f0f0f0; /* Light background to show boundaries */
    border: 1px solid #cccccc; /* Light border */
    border-radius: 100px; /* Optional: rounded corners */
    position: relative;
    overflow: hidden; /* Prevent overflow */
}

#profilePreview {
    width: 100%; /* Ensures the image stretches across the full width */
    height: 100%; /* Ensures the image stretches across the full height */
    object-fit: cover; /* Ensures the image covers the entire box, may clip the image */
}

#deleteImage {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10; /* Ensure it's above the image */
    background-color: #ff0000; /* Red background for visibility */
    color: white;
    border: none;
    border-radius: 50%; /* Circular button */
    cursor: pointer;
    padding: 5px;
    font-size: 12px; /* Adjust size as needed */
    display: flex; /* Center the text/icon inside the button */
    align-items: center;
    justify-content: center;
    width: 25px; /* Adjust width as needed */
    height: 25px; /* Adjust height as needed */
}

.form-group-registration.full-width textarea {
    width: 100%; /* Ensure full width */
    padding: 8px; /* Adjust padding as needed */
    border: 1px solid #cccccc; /* Consistent border styling */
    border-radius: 4px; /* Optional: rounded corners */
    /* Additional styling as needed */
    box-sizing: border-box;
    resize: vertical; /* Allows users to manually increase the height; remove if not needed */
    height: 140px;
}

.btn-add {
    background-color: #007BFF; /* Green for a positive action */
    color: white;
    padding: 8px 15px;
    margin-top: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}

.btn-add:hover {
    background-color: #0056b3; /* Darker green on hover */
}

/* Style for additional inputs for consistency */
.dynamic-input {
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px; /* Space between inputs */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: Arial, sans-serif;
}

.profil-rechts a{
	color: #000066;
	text-decoration: none;
}

.auswahlzeile{
	display: flex;
}

.auswahlkriterium-links{
	background-color: rgb(230, 230, 230);
	min-width: 225px;
}

.container-checkbox-small {
    display: flex;
    align-items: center; /* Center the checkbox vertically */
    position: relative;
    margin-bottom: 10px; /* Space between each checkbox */
}

.container-checkbox-small input[type="checkbox"] {
    opacity: 0; /* Hide the default checkbox */
    position: absolute;
    z-index: -1; /* Place it behind the custom checkbox */
}

.container-checkbox-small label {
    display: flex;
    align-items: center; /* Align the text and custom checkbox */
    cursor: pointer;
}

.container-checkbox-small .checkmark {
    display: inline-block;
    height: 12px; /* Small height for the custom checkbox */
    width: 12px; /* Small width for the custom checkbox */
    background-color: #eee; /* Background color for the custom checkbox */
    border: 1px solid #9999CC; /* Border color */
    margin-right: 5px; /* Space between the custom checkbox and the label */
    position: relative; /* Needed for absolute positioning of the checkmark */
    border-radius: 2px; /* Optional for rounded corners */
}

.container-checkbox-small input[type="checkbox"]:checked + label .checkmark {
    background-color: #33CC33; /* Background color when checked */
}

.container-checkbox-small input[type="checkbox"]:checked + label .checkmark:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    height: 6px; /* Half the height of the checkbox for the checkmark arm */
    width: 3px; /* Half the width of the checkbox for the checkmark arm */
    border: solid white;
    border-width: 0 2px 2px 0; /* Border for the checkmark */
    display: block;
}

.container-checkbox-small .plz-input {
    font-size: 14px; /* Match the font size of the label */
    padding: 4px; /* Padding inside the input box */
    border: 1px solid #9999CC; /* Border color */
    border-radius: 2px; /* Optional for rounded corners */
    margin-left: 10px; /* Space after the checkbox */
    width: 70px;
    height: 10px;
}

.container-checkbox-small .checkmark:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%) rotate(45deg); /* Adjust this to center the checkmark */
    height: 6px; /* Adjust based on your checkmark size */
    width: 3px; /* Adjust based on your checkmark size */
    border: solid white;
    border-width: 0 2px 2px 0;
    display: none; /* Ensure it's not displayed by default */
}

.container-checkbox-small input[type="checkbox"]:checked ~ label .checkmark:after {
    display: block; /* Only display the checkmark when the checkbox is checked */
}

.update-button-container {
    margin-top: 10px; /* Adds space above the image */
    text-align: center; /* Center-aligns the image */
}

.update-button-container img{
    width: 100px;
}

.auswahlkriterium-links {
    min-width: 220px;
    max-width: 220px;
    padding: 6px;
    border-radius: 10px;
    margin-right: 25px;
    margin-bottom: 10px;
    box-sizing: border-box; /* Includes padding and border in the width */
}

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



.update-button-container button{
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}


.therapy-entry {
    margin-top: 8px;

    border-radius: 5px;
    display: flex;
    justify-content: space-between;
}

.therapy-entry button {
    padding: 0 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.therapy-entry button:hover {
    background-color: #45a049;
}

.problem-entry {
    margin-top: 8px;

    border-radius: 5px;
    display: flex;
    justify-content: space-between;
}

.problem-entry button {
    padding: 0 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.problem-entry button:hover {
    background-color: #45a049;
}

.logout-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;             
    border-radius: 5px;       
    text-decoration: none;    
    transition: background-color 0.3s ease; 
    margin-left: auto;
}

.logout-btn:hover {
    background-color: #0056b3; // Darker blue on hover
}

.suche{
	display: flex;
}


.search-result-container {
width: 100%;
background-color: #FFFFFF;

}

.search-result-box {
display: flex;
align-items: center;

}

.search-result-text {
flex: 1;
}

.search-result-text h2 {
margin: 0;
color: #333;
}

.search-result-text p{
	margin-bottom:5px;
	margin-top:5px;
}


.search-result-image {
	width: 100px; /* Fixed width for the image container */
	height: 100px; /* Fixed height for the image container */
	margin-left: 20px;
	border-radius: 50%; /* Round image */
	background: #EEE; /* Placeholder color */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Ensure overflow is hidden to crop the image */
  position: relative;
}

.search-result-image img {
  width: 100%; /* Image width fills the container */
  height: 100%; /* Image height fills the container */
  object-fit: cover; /* Crop the image to fill the container */
  /* No need for border-radius here as the image itself should not be circular */
}

.form-suche{
	width: 100%;
}

.line-separator{
	height: 2px;
	background-color: #ccc;
	margin-top: 12px;
	margin-bottom: 12px;
}

.search-result-box{
	border: 2px solid #9999CC;
	border-radius: 10px;
	padding: 12px;
	margin-bottom: 12px;
}



/* Completely remove focus and active styles from the parent container */
.auswahlkriterium-links:focus-within,
.auswahlkriterium-links:focus,
.auswahlkriterium-links:active {
    outline: none !important; /* Remove any focus outline */
    box-shadow: none !important; /* Remove any potential shadow */
}

/* Remove focus outline from all child elements within .auswahlkriterium-links */
.auswahlkriterium-links *:focus, 
.auswahlkriterium-links *:active {
    outline: none !important;
    box-shadow: none !important; /* No shadow for child elements */
}

/* Aggressively remove focus, active, and hover outlines for the parent and children */
.auswahlkriterium-links:focus,
.auswahlkriterium-links:active,
.auswahlkriterium-links:hover,
.auswahlkriterium-links *:focus,
.auswahlkriterium-links *:active,
.auswahlkriterium-links *:hover {
    outline: none !important; /* Remove focus outline */
    box-shadow: none !important; /* Remove any shadows */
}

.premium {
    border: 2px solid #9999CC; /* Soft blue border for premium profiles */
    transition: background-color 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;
    cursor:pointer;
}

.premium:hover {
    background-color: #E8E8F0; /* Very light blue/grey on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */

}

/* Premium Badge Styles */
.premium-badge {
    background-color: #FFD700; /* Softer gold */
    color: #333; /* Darker text for readability */
    font-size: 12px; /* Smaller font */
    font-weight: bold;
    padding: 3px 6px; /* Reduced padding */
    border-radius: 3px;
    position: absolute;
    top: 10px; /* Adjusted to move above the image */
    right: 15px; /* Positioned at the right of the box, above the image */
    z-index: 1; /* Ensures it stays above other content */
}

/* Adjusting the box and image */
.search-result-box {
    position: relative;
    border: 2px solid #9999CC;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    display: flex;
    justify-content: space-between;
}

/* Sprechzeiten table styling */
.sprechzeiten-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.sprechzeiten-table th,
.sprechzeiten-table td {
    padding: 10px;
    border: 1px solid #ccc;
}

.sprechzeiten-table th {
    background-color: #f0f0f0;
    text-align: left;
}

/* Highlight rows */
.sprechzeiten-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Contact information styling */
.kontaktinformationen {
    margin-top: 30px;
    background-color: #f7f7f7;
    padding: 15px;
    border-radius: 8px;
}

.kontaktinformationen h2 {
    margin-bottom: 10px;
    color: #6c63ff;
}

#profilePreview {
    max-width: 100%;
    border-radius: 50%;
}


.sprechzeiten-list {
    list-style: none; /* Remove default bullets */
    padding: 0;
    margin: 0;
}

.sprechzeiten-list li {
    margin-bottom: 7px; /* Spacing between entries */
    position: relative; /* Allows us to position the custom image */
}

.sprechzeiten-list li::before {
    content: "";
    display: inline-block;
    background: url('/px/button_kreis_lila.gif') no-repeat center center;
    background-size: contain; /* Ensures the dot keeps its original aspect ratio */
    width: 16px; /* Set the size of the dot */
    height: 16px; /* Set the size of the dot */
    margin-right: 10px; /* Add space between the dot and the text */
    border-radius: 50%; /* Ensures the image is perfectly circular */
    vertical-align: middle; /* Aligns the dot with the text */
    margin-top: -4px;
}

.sprechzeiten h2 {
    margin: 0;
    margin-bottom: 8px;
    font-size: 20px;
}

.freitext-container h2 {
    margin: 0;
    margin-bottom: 8px;
    font-size: 20px;
}

.sprechzeiten{
	margin-bottom: 14px;
}


/* Container for the whole profile section */
.unterseite-profile-container {
    display: flex;
    align-items: center; /* Align items vertically */
    justify-content: flex-start;
    gap: 20px;
    margin-top: 20px;
}

/* Styles for the profile information */
.unterseite-profile-info {
    flex: 1; /* Make it take the remaining space */
}

/* Profile picture container */
.unterseite-profile-pic-container {
    width: 120px;
    height: 120px;
    background-color: #f0f0f0;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Profile picture styles */
.unterseite-profile-pic-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure the image covers the container without stretching */
}

/* Additional text styling for profile info */
.unterseite-profile-info p {
    margin: 5px 0;
    font-size: 20px;
}

/* Flexbox container for two columns */
.zweispaltig-container {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Adds space between the two columns */
    margin-top: 20px;
}

.unterseitenseite{
	width: 700px;
}

.sprechzeiten {
    flex: 1; /* Flex to evenly distribute space between columns */
}

.freitext-container p {
	margin: 0;
	padding: 0;
}

/* Container for no results message */
.custom-no-results-message {
    padding: 15px;
    background-color: #f8f8f8; /* Optional: Light background color for distinction */
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
    max-width: 100%;
}

/* Title for the section */
.custom-no-results-message .custom-title {
    font-size: 24px;
    font-weight: bold;
    color: rgb(0, 0, 102); /* Same color as the text you've defined */
    margin-bottom: 15px;
}

/* Regular paragraph text */
.custom-no-results-message .custom-paragraph {
    font-size: 18px;
    color: #000000;
    margin: 10px 0;
}

/* Title for paragraph sections */
.custom-no-results-message .custom-paragraph-title {
    font-size: 20px;
    font-weight: bold;
    color: rgb(0, 0, 102); /* Dark blue for paragraph title */
    margin: 20px 0 10px;
}

/* Link styled as green banner */
.custom-no-results-message .custom-green-banner {
    display: inline-block;
    background-color: #33CC33; /* Green background */
    color: white; /* White text */
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    margin-top: 12px;
}

/* Hover effect for the green banner */
.custom-no-results-message .custom-green-banner:hover {
    background-color: #28a745; /* Darker green on hover */
    opacity: 0.9;
}

/* Styles for the new offer section */
.offer-container {
    margin: 20px 0;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    width: 100%;
}

.offer-container h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.offer-container p {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.1em;
    color: #555;
}

.offer-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.offer-box {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;  /* Consistent padding */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.offer-box h3 {
    margin-bottom: 10px;
    color: #222;
    font-size: 1.2em;
}

.offer-box p {
    font-size: 1.1em;
    color: #444;
    margin-bottom: 10px;
}

.offer-box .list-item {
    display: flex;
    align-items: center;
    margin: 10px 0;
}

.offer-box .list-item img {
    margin-right: 10px;
    width: 16px;
    height: 16px;
}

.questions-contact {
    font-size: 1.1em;
    text-align: center;
    margin-top: 20px;
    color: #333;
}

.contact-link {
    font-weight: bold;
    color: #0073e6;
    text-decoration: none;
}

.contact-link:hover {
    text-decoration: underline;
}

.register-link {
    font-weight: bold;
    color: #0073e6;
    text-decoration: none;
}

.register-link:hover {
    text-decoration: underline;
}

/* Promotional Banner Styles */
.promo-banner {
    background-color: #f0f0f0;
    padding: 15px;  /* Updated padding to match offer-box */
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: left;
}

.promo-banner h3 {
    color: #333;
    margin-bottom: 10px;
    font-size: 1.4em;
}

.promo-banner p {
    margin: 5px 0;
    font-size: 1.1em;
    color: #555;
}

.promo-list {
    margin-top: 10px;
}

.promo-item {
    display: flex;
    align-items: center;
    margin: 8px 0;
    font-size: 1.1em;
    color: #444;
}

.promo-item img {
    margin-right: 10px;
    width: 16px;
    height: 16px;
}

.offer-box .register-button {
    display: inline-block;
    padding: 12px 24px;
    background-color: #0073e6;  /* Primary blue color */
    color: #ffffff;  /* White text */
    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 5px;
    text-align: center;
    transition: background-color 0.3s ease;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  /* Subtle shadow for depth */
}

.offer-box .register-button:hover {
    background-color: #005bb5;  /* Darker blue on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);  /* Enhanced shadow on hover */
}

.offer-box .register-button:active {
    background-color: #004494;  /* Even darker blue when clicked */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  /* Revert shadow on click */
}



@media (max-width: 767px) {
    /* General mobile styles */
    #mobil-text-artikel a {
        font-size: 18px;
    }

    .form-group-registration {
        width: 100%; /* Full width on small screens */
    }

    .form-row {
        flex-direction: column;
    }

    .modal-content {
        margin: auto;
        display: block;
        max-height: auto; /* 80% of the viewport height */
        max-width: 80vw;
    }

    .profil-container {
        display: flex;
        flex-direction: column;
    }

    .auswahlzeile {
        margin-bottom: 35px;
    }

    /* Search page specific mobile styles - prefixed with .sucheseite */
    .sucheseite .suche {
        flex-direction: column; /* Stack search criteria and results vertically */
    }

    .sucheseite .form-kriterien {
        width: 100%; /* Full width for the search criteria section */
        margin-bottom: 20px; /* Space below the criteria section */
    }

    .sucheseite .search-result-container {
        width: 100%; /* Full width for the search results */
    }

    .sucheseite .search-result-box {
        display: flex;
        flex-direction: row; /* Image on the left, text on the right */
        text-align: left; /* Left-align the text */
        padding: 15px;
        align-items: center;
    }

    .sucheseite .search-result-image {
        margin-right: 15px; /* Space between image and text */
        width: 60px; /* Smaller image on mobile */
        height: 60px; /* Smaller image on mobile */
        border-radius: 50%; /* Maintain circular shape */
    }

    .sucheseite .search-result-image img {
        width: 100%; /* Ensure the image fills the container */
        height: auto; /* Maintain aspect ratio */
    }

    .sucheseite .search-result-text {
        flex: 1; /* Text takes up the remaining space */
    }

    .sucheseite .search-result-text p {
        margin: 5px 0; /* Adjust margins for better spacing */
        font-size: 14px; /* Adjust font size for better readability */
    }

    /* Expandable search criteria sections */
    .sucheseite .auswahlkriterium-links {
        border: 1px solid #ccc;
        border-radius: 8px;
        margin-bottom: 10px;
        padding: 10px;
        cursor: pointer;
        position: relative;
        min-width: 100%;
        max-width: 100%;
        transition: max-height 0.3s ease, padding 0.3s ease; /* Smooth transition for height */
        background-color: #f0f0f0; /* Light grey background */
    }

    .sucheseite .auswahlkriterium-links > b {
        font-size: 16px;
    }

    .sucheseite .auswahlkriterium-links.collapsed {
        max-height: 40px; /* Only show the title when collapsed */
        padding-bottom: 10px; /* Adjust padding for proper spacing */
        overflow: hidden;
    }

    .sucheseite .auswahlkriterium-links.expanded {
        max-height: 1000px; /* Arbitrarily large value for expansion */
        padding-bottom: 20px; /* Adjust padding for proper spacing when expanded */
    }

    .sucheseite .auswahlkriterium-links.collapsed:after {
        content: ' \25BC'; /* Down arrow symbol */
        font-size: 12px;
        position: absolute;
        right: 10px;
        top: 10px;
    }

    .sucheseite .auswahlkriterium-links.expanded:after {
        content: ' \25B2'; /* Up arrow symbol */
        font-size: 12px;
        position: absolute;
        right: 10px;
        top: 10px;
    }

    /* Prevent unwanted elements from showing up when collapsed */
    .sucheseite .auswahlkriterium-links .container-checkbox-small, 
    .sucheseite .auswahlkriterium-links select {
        display: none; /* Hide all content by default */
    }

    .sucheseite .auswahlkriterium-links.expanded .container-checkbox-small, 
    .sucheseite .auswahlkriterium-links.expanded select {
        display: flex; /* Show content when expanded */
    }

    /* Style the checkbox container and PLZ input to keep them inline */
    .sucheseite .container-checkbox-small {
        display: flex;
        align-items: center; /* Align checkbox and PLZ input inline */
        position: relative;
        margin-bottom: 10px; /* Space between each checkbox */
    }

    .sucheseite .container-checkbox-small input[type="checkbox"] {
        opacity: 0; /* Hide the default checkbox */
        position: absolute;
        z-index: -1; /* Place it behind the custom checkbox */
    }

    .sucheseite .container-checkbox-small label {
        display: flex;
        align-items: center; /* Align the text and custom checkbox */
        cursor: pointer;
    }

    .sucheseite .container-checkbox-small .checkmark {
        display: inline-block;
        height: 12px; /* Small height for the custom checkbox */
        width: 12px; /* Small width for the custom checkbox */
        background-color: #eee; /* Background color for the custom checkbox */
        border: 1px solid #9999CC; /* Border color */
        margin-right: 5px; /* Space between the custom checkbox and the label */
        position: relative; /* Needed for absolute positioning of the checkmark */
        border-radius: 2px; /* Optional for rounded corners */
    }

    .sucheseite .container-checkbox-small input[type="checkbox"]:checked + label .checkmark {
        background-color: #33CC33; /* Background color when checked */
    }

    .sucheseite .container-checkbox-small input[type="checkbox"]:checked + label .checkmark:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
        height: 6px; /* Half the height of the checkbox for the checkmark arm */
        width: 3px; /* Half the width of the checkbox for the checkmark arm */
        border: solid white;
        border-width: 0 2px 2px 0; /* Border for the checkmark */
        display: block;
    }

    .sucheseite .container-checkbox-small .plz-input {
        font-size: 14px; /* Match the font size of the label */
        border: 1px solid #9999CC; /* Border color */
        border-radius: 2px; /* Optional for rounded corners */
        margin-left: 10px; /* Space after the checkbox */
        width: 70px; /* Adjust width for the postal code input */
    }

    /* Ensure the postal code input stays inline with the checkbox */
    .sucheseite .container-checkbox-small label, 
    .sucheseite .container-checkbox-small .plz-input {
        display: inline-block; /* Keep them inline */
        vertical-align: middle; /* Align them vertically */
    }

    /* Adjust the layout for the search result box */
    .sucheseite .search-result-box {
        display: flex;
        flex-direction: row; /* Ensure profile image and text are side by side */
    }

    .sucheseite .search-result-image {
        order: 1; /* Ensures the image is on the left */
        margin-right: 20px; /* Space between image and text */
    }

    .sucheseite .search-result-text {
        order: 2; /* Text content on the right */
        flex: 1; /* Allow the text to take the remaining space */
    }

    input:focus,
    textarea:focus,
    select:focus {
        -webkit-box-shadow: none !important; /* Disable box-shadow on WebKit browsers */
    }

    .sucheseite .auswahlkriterium-links {
        -webkit-tap-highlight-color: transparent !important; /* Remove tap highlight color on mobile */
    }

    .zweispaltig-container {
        display: flex;
        flex-direction: column; /* Switch to single-column layout */
        gap: 0px; /* Maintain some space between the elements */
        margin-top: 0px;
    }

    .sprechzeiten {
        width: 100%; /* Ensure each column takes up the full width */
        margin-bottom: 10px;
    }

    .unterseite-profile-container {
        flex-direction: column; /* Stack the image and profile info vertically */
        align-items: center; /* Center align the image and profile information */
        text-align: center; /* Optional: Center align the text on mobile */
        width: 100%;
        margin-bottom: 10px;
    }

    .unterseite-profile-pic-container {
        margin-bottom: 15px; /* Add some space below the image */
    }

    .unterseite-profile-info {
        text-align: center; /* Center-align the text content on mobile */
    }

    .unterseite-profile-info {
        width: 100%; /* Ensure profile info takes the full width */
        padding: 0 15px; /* Add some padding for better spacing */
        box-sizing: border-box; /* Include padding in the width calculation */
    }

    .unterseite-profile-pic-container {
        width: 150px; /* Set a fixed width for the image container */
        height: 150px; /* Set a fixed height for the image container */
        margin-bottom: 0px; /* Add some space below the image */
    }

    .unterseite-profile-pic-container img {
        width: 100%; /* Make sure the image fills the container */
        height: auto; /* Maintain the aspect ratio */
        object-fit: cover; /* Crop the image to fill the container */
    }

    .unterseitenseite{
			width: 100%;
		}

	.freitext-container{
		margin-bottom: 12px;
	}

}







@media (min-width: 768px) {
	footer a {
		text-align: center;
		display: inline; /* Each paragraph and link is displayed as a block */
		font-size: 18px;
	}

	.footer-wrapper p{
		font-size: 18px;
	}

	.top-image-container{
		display: block;

	}

	.top-image-container img{
		width: 100%;
		height: auto;

	}

	.top-image-container {
		display: flex;
		justify-content: center; /* Center horizontally */
		align-items: center; /* Center vertically */
		height: 100%; /* You may adjust this as needed */
		margin-bottom: 30px;
	}

	.content-page{
		padding: 44px;
	}
	
	.content-page{
		padding-top: 0px;
	}


	.full-width-image{
		display: none;
	}

	.logo img{
		width: 310px;
		height: auto;
	}

	.menu-line{
		height: 50px;
	}

	.hamburger-menu{
		width: 42px;
		height: 50px;
	}
	
	.nav-items a img{
		width: 50px;
		height: 50px;
	}

	.information-text{
		font-size: 2.25rem;
	}

	.appointment-selection h3{
		font-size: 1.6em;
	}

	.container-checkbox{
		font-size: 21px;
	}

	#submitBtn{
		width: 325px;
	}

	.sub-infromation-text{
		font-size: 18px;
	}

	.einleitungstext{
		font-size: 20px;
	}

	#plzInput {
		/* No change needed, but you can adjust margin or padding for better visual spacing if desired */
		margin-left: 0px; /* Example: Adds a little space between the checkbox and the input field */
	}

	/* Flex container to hold checkboxes and additional content side by side */
	.flex-container {
		display: flex;
		align-items: flex-start; /* Aligns items to the top */
		gap: 20px; /* Adjust the space between the checkboxes and the additional content */
	}

	/* Optional: Ensure the checkboxes container doesn't grow too large if additional content is short */
	.checkboxen {
		flex: 1; /* Allows this div to grow */
		max-width: 40%; /* Adjust based on your layout preferences */
	}

	/* Style for the new additional content div */
	.additional-content {
		flex: 1; /* Allows this div to grow */
		/* Add more styling here as needed */
		display: flex;
		align-self: flex-start;
		font-size: 18px;
		margin-top: 0;
		margin-bottom: 0;
	}

	.additional-content p{
		margin-top: 0px;
		margin-bottom: 0px;
	}

	.appointment-selection{
		border: 3px solid #9999CC;
		border-radius: 40px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.submit-container{
		padding-bottom: 20px;
	}

	.appointment-selection h3{
		color: black;
		text-align: left;
		font-size: 1.34em;
	}

	.tablet-auswaehlen-text{
		display: block;
	}

	.mobile-auswaehlen-text{
		display: none;
	}

	.tab-container {
		display: flex;	
	}

	.search-directory-link{
		margin-left: 140px;
	}

	.auswahlzeile {
        flex-direction: row; /* Adjust back to row for side-by-side layout */
    }

}




/* Desktop styles */
@media screen and (min-width: 1024px) {
	.container {
		margin: 20px auto 0px;
		border-radius: 8px;
	}

	body::after {
		height: 20px; /* Removes the bottom spacing on mobile devices */
	}

	.submit-container{
		display: none;
	}

	.flex-container {
		display: flex;
		flex-wrap: wrap;
	}

	.checkboxen, .additional-content {
		flex: 1;
	}

	/* Assuming .additional-content-wrapper is a new wrapper for .additional-content and .submit-container-desktop */
	.additional-content{
		display: block;
	}

	.submit-container-desktop {
		order: 2; /* Ensures the button is placed after the additional content */
		width: 100%; /* Adjust based on your layout */
		display: block; /* Ensures it is treated as a block-level element */
		margin-top: 20px; /* Space above the submit button */
	}

	#submitBtn{
		width: 280px;
		margin:0;
		margin-bottom: 20px;
	}

	#mobil-tablet-content{
		display: none;
	}

	.flex-container-content{
		display: flex;
	}

	#desktop-content{
		display: block;
	}

	.information-text{
		font-size: 24px;
	}

	

	#ueberschrift-desktop{
		margin-bottom: 15px;
	}

	

	.text-desktop,
	.ratgeber-desktop{
		width: calc(50% - 25px);
	}

	#mobil-dist{
		margin-top: 0px;
	}

	.text-desktop {
		margin-right: 50px; /* Add spacing between the two elements */
	}

	.search-directory-link{
		margin-left: 280px;
	}

	.therapist-access-container{
		width: calc(60% - 10px);
		margin-right: 10px;   
	}

	.additional-container{
		width: calc(40% - 10px);
		margin-left: 10px;  
	}

	.therapist-access-container{
		margin-bottom: 0px;
	}

	.profil-links,
	.profil-rechts {
	  flex-basis: calc(50% - 10px); /* Subtract half the gap from each to account for the space between */
	  max-width: calc(50% - 10px); /* This ensures that the max width is also accounting for the gap */
	}

	.search-result-image span {
	    display: inline-block;
	    width: 100px; /* Adjust the size as needed */
	    height: 100px; /* Adjust the size as needed */
	    border-radius: 50%;
	    overflow: hidden;
	    text-align: center;
	    line-height: 100px; /* Adjust the size as needed */
	}

	.search-result-image span img {
	    width: 100%;
	    height: auto;
	    display: inline-block;
	    vertical-align: middle;
	}

	.no-results-message {
	    margin: 0; /* Remove default margin */
	    padding: 0; /* Adjust padding as needed */
	}

	.no-results-message p {
	    margin: 0; /* Remove margin from paragraph */
	    padding: 10px; /* Optional: Add padding for better readability */
	    background-color: #f8f8f8; /* Optional: Background color for the message */
	    border: 1px solid #ccc; /* Optional: Border for the message */
	    border-radius: 5px; /* Optional: Rounded corners */
	    text-align: center; /* Optional: Center align the text */
	}

}