body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #f8f9fa;
    color: #333;
}

header {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background: #242424;
    color: white;
}

header .logo {
    max-height: 60px;
}

header .adresse {
    margin-top: 10px;
    font-size: 14px;
}

main {
    padding: 20px;
}

h1 {
    font-size: 28px;
    margin-bottom: 5px;
	text-align: center;
}

h2 {
    font-size: 20px;
    color: #555;
	text-align: center;
}

h3 {
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 18px;
	text-align: center;
}
p {
	text-align: center;
	font-size: 1rem;
}

checkbox {
	font-size: 1rem;
}



button {
    align-self: end;     /* aligns the button to the bottom of the grid row */
    background: #004080;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
	font-size: 1rem;
}

button:disabled {
    background-color: #cccccc;  /* Light gray background */
    color: #666666;  /* Dark gray text */
    border: 1px solid #aaaaaa;  /* Lighter border */
    cursor: not-allowed;  /* Change the cursor to a "not-allowed" symbol */
}

button:enabled {
    background-color: #007bff;  /* Normal background color when enabled (blue in this case) */
    color: white;  /* White text color */
    border: 1px solid #007bff;  /* Same color border */
    cursor: pointer;  /* Pointer cursor when hovering over a normal button */
}




button:hover {
    background: #003366;
}

footer {
    text-align: center;
    padding: 15px;
    background: #242424;
    color: white;
    margin-top: 30px;
	font-size: 10px;
}



legend {
    font-weight: bold;
    font-size: 1rem;
    margin-top: 30px;       /* Abstand zwischen Legend und Grid */
    margin-bottom: 10px;       /* Abstand zwischen Legend und Grid */
    padding: 0 5px;       
}

label {
    display: flex;
    flex-direction: column; /* Label über Input */
    margin-bottom: 10px;
	font-size: 1rem;
}

fieldset {

	border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px 15px;       /* kompakteres Padding */
    margin-bottom: 15px;      /* Abstand zum nächsten Fieldset */
}

input {
	font-size: 1rem;
}

input.small-input {
    width: 16rem;      /* adjust width as needed */
    max-width: 100%;  /* prevent overflow on small screens */
}


input.tiny-input {
    width: 1rem;      /* adjust width as needed */
    max-width: 100%;  /* prevent overflow on small screens */
}

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

form {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	grid-template-columns: 1fr 1fr; /* two columns on wide screens */
	
	display: grid;
    /* grid-template-columns: 50% 50%; /* first column 30%, second column 70% */ 
    gap: 15px 20px; /* row-gap column-gap */
}


.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* JAN ????  1fr */
    margin-top: 5px; /* Abstand nach legend */
    gap: 10px 20px;
    align-items: start;       /* top of the cell */
}


.form-grid label {
    display: flex;
    flex-direction: column; /* Label über Input */
}

.form-grid .checkbox-label {
    display: flex;            /* flexbox */
    flex-direction: row;      /* horizontal: checkbox left, text right */
    align-items: center;      /* vertical center */
    justify-content: flex-start; /* left align */
    gap: 8px;                 /* space between checkbox and text */
}

/* Remove the column flex for checkbox labels */
.form-grid label.checkbox-label {
    display: flex;            /* flexbox */
    flex-direction: row;      /* checkbox left, text right */
    align-items: center;      /* vertically center text */
    justify-content: flex-start; /* left-align the whole label */
    gap: 8px;                 /* space between checkbox and text */
}

.form-grid.three-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* three equal columns */
    gap: 10px 20px; /* row-gap, column-gap */
}


.form-grid.two-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* two equal columns */
    gap: 10px 20px; /* row-gap, column-gap */
}

.form-grid.one-column {
    display: grid;
    grid-template-columns: 1fr; /* Single column layout */
    gap: 10px 20px; /* Optional: row-gap, column-gap */
}


.form-grid label input,
.form-grid label textarea {
    margin-top: 6px; /* increase this value for more space */
}

.checkbox-label {
    display: flex;
    flex-direction: row; /* horizontal layout */
    align-items: center; /* vertically center checkbox and text */
    gap: 8px; /* space between checkbox and text */
}

input, textarea {
    width: 100%;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
}

.error-message {
	margin: 3px;
	font-size: 0.8rem;
}



.full-width {
    grid-column: 1 / -1; /* Nimmt beide Spalten ein */
}

fieldset hr {
    border: none;             /* remove default border */
    border-top: 1px solid #ccc; /* thin gray line */
    margin: 10px 0;           /* spacing above and below */
}

.big-checkbox {
  transform: scale(1.0); /* Increase size by 1.5x */
  margin: 10px;
}


.small-text {
    font-size: 0.8em;  /* Adjust the size as needed */
    color: #777;       /* Optional: adjust color to make it more subtle */
}

#changeDescription {
    width: 100% !important;
    box-sizing: border-box;
}

#modificationExplanation {
    width: 100% !important;
    box-sizing: border-box; /* Ensure padding and borders don't cause overflow */
}


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


@media screen and (width <= 1025px) {
    .form-grid {
        grid-template-columns: 1fr; /* eine Spalte */
    }
	
	form {
        grid-template-columns: 1fr; /* eine Spalte */
    }
	h1 {
		font-size: 48px;
	}

	h2 {
		font-size: 40px;
	}

	h3 {
		font-size: 36px;
	}
	
	
	
}


@media screen and (width <= 980px) {
    .form-grid {
        grid-template-columns: 1fr; /* eine Spalte */
    }
	
	form {
        grid-template-columns: 1fr; /* eine Spalte */
    }
	h1 {
		font-size: 56px;
	}

	h2 {
		font-size: 40px;
	}

	h3 {
		font-size: 36px;
	}
	legend, label, p, button, input, checkbox, textarea {
		font-size: 2rem;
	}
	.error-message {
		margin: 3px;
		font-size: 1.5rem;
	}
	
}