@font-face {
    font-family: 'Aller Display';
    src: url('/static/fonts/AllerDisplay.woff2') format('woff2'),
         url('/static/fonts/AllerDisplay.woff') format('woff'), /* Optional */
         url('/static/fonts/AllerDisplay.ttf') format('truetype'); /* Optional */
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cambay Regular';
    src: url('/static/fonts/Cambay-Regular.eot'); /* IE9 fallback */
    src: url('/static/fonts/Cambay-Regular.woff2') format('woff2'),
         url('/static/fonts/Cambay-Regular.woff') format('woff'),
         url('/static/fonts/Cambay-Regular.ttf') format('truetype');  
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*
 _    _                _           
| |  | |              | |          
| |__| | ___  __ _  __| | ___ _ __ 
|  __  |/ _ \/ _` |/ _` |/ _ \ '__|
| |  | |  __/ (_| | (_| |  __/ |   
|_|  |_|\___|\__,_|\__,_|\___|_|   

*/                                                                   

/*  Style for the header text */
.headr-text {
    text-align: center; /* Centers the header text horizontally within its container. */
    font-family: 'Aller Display', sans-serif; /* Applies a custom font 'Cambay Regular' with a fallback to sans-serif. */
    font-size: 34px; /* Sets the font size to 34px for the header text. */
    color: rgb(102, 0, 102); /* Sets the text color to a dark purple. */
    font-weight: 400; /* Applies a normal font weight (non-bold). */
    line-height: 75.6px; /* Sets the line height to create adequate vertical spacing between lines of text. */
}

.headr-upper-lower-case-text {
    text-align: center; /* Centers the header text horizontally within its container. */
    font-family: 'Cambay Regular', sans-serif; /* Applies a custom font 'Cambay Regular' with a fallback to sans-serif. */
    font-size: 34px; /* Sets the font size to 34px for the header text. */
    color: rgb(102, 0, 102); /* Sets the text color to a dark purple. */
    font-weight: 400; /* Applies a normal font weight (non-bold). */
    line-height: 75.6px; /* Sets the line height to create adequate vertical spacing between lines of text. */
}

/*
   ____        _               _      __ _      _     _ 
  / __ \      | |             | |    / _(_)    | |   | |
 | |  | |_   _| |_ _ __  _   _| |_  | |_ _  ___| | __| |
 | |  | | | | | __| '_ \| | | | __| |  _| |/ _ \ |/ _` |
 | |__| | |_| | |_| |_) | |_| | |_  | | | |  __/ | (_| |
  \____/ \__,_|\__| .__/ \__,_|\__| |_| |_|\___|_|\__,_|
                  | |                                   
                  |_|                                      

*/     

/* Style for the output field */
.ausgabe {
    border: 1px solid rgb(102, 0, 102); /* Gray border */
    padding: 10px; /* Inner spacing */
    border-radius: 4px; /* Rounded corners */
    background-color: #f7f2f8; /* Light background color */
    margin-top: 20px; /* Space above the field */
}

/*
  _____                   _      __ _      _     _ 
 |_   _|                 | |    / _(_)    | |   | |
   | |  _ __  _ __  _   _| |_  | |_ _  ___| | __| |
   | | | '_ \| '_ \| | | | __| |  _| |/ _ \ |/ _` |
  _| |_| | | | |_) | |_| | |_  | | | |  __/ | (_| |
 |_____|_| |_| .__/ \__,_|\__| |_| |_|\___|_|\__,_|
             | |                                   
             |_|                                   

*/ 

/* Custom input field sizes */
#addressFields .postal-code {
    width: 15%; /* Adjust this percentage as needed */
}

#addressFields .city{
    width: 30%; /* Adjust this percentage as needed */
}

#addressFields .street {
    width: 40%; /* Adjust this percentage as needed */
}

#addressFields .number {
    width: 15%; /* Adjust this percentage as needed */
}


/* Style for a custom input field */
.custom-input {
    border: 1px solid #b380b3; /* Sets a light purple border color around the input field. */
    background-color: #f7f2f8; /* Applies a light, semi-transparent purple background color. */
}

/*
  _    _      _         _____                
 | |  | |    | |       |_   _|               
 | |__| | ___| |_ __     | |  ___ ___  _ __  
 |  __  |/ _ \ | '_ \    | | / __/ _ \| '_ \ 
 | |  | |  __/ | |_) |  _| || (_| (_) | | | |
 |_|  |_|\___|_| .__/  |_____\___\___/|_| |_|
               | |                           
               |_|                                                            
*/ 

/* Style for the help icon */
.help-icon {
    display: inline-block; /* Ensures the element behaves like an inline block */
    width: 20px; /* Sets the width of the icon */
    height: 20px; /* Sets the height of the icon */
    border-radius: 50%; /* Makes the icon circular */
    background-color: rgb(102, 0, 102); /* Dark purple background color */
    color: rgb(255, 235, 0); /* Yellow text color */
    text-align: center; /* Centers text horizontally */
    line-height: 20px; /* Centers text vertically */
    font-weight: bold; /* Makes the text bold */
    cursor: pointer; /* Changes the cursor to a pointer when hovered */
    margin-left: 5px; /* Adds spacing to the left of the icon */
}


/* Hover effect for the help icon */
.help-icon:hover {
    background-color: #b380b3; /* Changes the background color to a lighter purple on hover */
}

/*
  ____        _   _                  
 |  _ \      | | | |                 
 | |_) |_   _| |_| |_ ___  _ __  ___ 
 |  _ <| | | | __| __/ _ \| '_ \/ __|
 | |_) | |_| | |_| || (_) | | | \__ \
 |____/ \__,_|\__|\__\___/|_| |_|___/
                                                                         
*/ 

/* Style for a custom button */
.custom-button {
    width: 100%; /* Set the button width to 100% */
    background-color: rgb(102, 0, 102); /* Set the background color to purple */
    color: rgb(255, 235, 0); /* Set the text color to yellow */
    border-radius: 20px; /* Set rounded corners with a radius of 20px */
    font-family: 'Aller Display', sans-serif; /* Change the font to Aller Display */
    border: 2px solid rgb(102, 0, 102); /* Set the border color to purple */
    transition: background-color 0.3s, color 0.3s, border 0.3s; /* Smooth transition for color changes */
}

.custom-button:hover {
    background-color: rgba(102,0,102,.25); /* Set the background color on hover to a lighter purple */
    color: rgb(255, 235, 0); /* Keep the text color yellow on hover */
    border: 2px solid rgba(102,0,102,.15); /* Set the border color to a lighter purple on hover */
}

.custom-button:active {
    background-color: rgb(255, 0, 255); /* Set the background color to bright pink when clicked */
    color: rgb(0, 0, 0); /* Set the text color to black when clicked */
    border: 2px solid rgb(255, 0, 255); /* Set the border color to bright pink when clicked */
}

.custom-button:focus {
    background-color: #b380b3; /* Set the background color to a light purple when focused */
    color: rgb(255, 235, 0); /* Keep the text color yellow when focused */
    border: 2px solid #b380b3; /* Set the border color to a light purple when focused */
}

.submit-button {
    width: 100%; /* Set the button width to 100% */
    background-color:rgb(255, 235, 0); /* Set the background color to purple */
    color: rgb(102, 0, 102); /* Set the text color to yellow */
    border-radius: 20px; /* Set rounded corners with a radius of 20px */
    font-family: 'Aller Display', sans-serif; /* Change the font to Aller Display */
    border: 2px solid rgb(255, 235, 0); /* Set the border color to purple */
    transition: background-color 0.3s, color 0.3s, border 0.3s; /* Smooth transition for color changes */
}

.submit-button:hover {
    background-color: rgb(255, 235, 0); /* Set the background color on hover to a lighter purple */
    color: rgb(102, 0, 102); /* Keep the text color yellow on hover */
    border: 2px solid rgb(255, 235, 0); /* Set the border color to a lighter purple on hover */
}

.submit-button:active {
    background-color: rgb(255, 255, 0); /* Set the background color to bright pink when clicked */
    color: rgb(0, 0, 0); /* Set the text color to black when clicked */
    border: 2px solid rgb(255, 255, 0); /* Set the border color to bright pink when clicked */
}

.submit-button:focus {
    background-color: #b2b380; /* Set the background color to a light purple when focused */
    color: rgb(102, 0, 102); /* Keep the text color yellow when focused */
    border: 2px solid #b2b380;; /* Set the border color to a light purple when focused */
}

.responsive-width {
    width: 200px; /* Standardbreite, z. B. für Desktop */
    text-align: right; /* Inhalt rechtsbündig ausrichten */
}

@media (max-width: 768px) { /* Anpassung für kleinere Bildschirme (z. B. Tablets und Handys) */
    .responsive-width {
        width: 100%; /* Ganze Breite für Handyansicht */
        text-align: center; /* Optional: Button mittig ausrichten */
    }
}

/*
  _____           _ _         ____        _   _                  
 |  __ \         | (_)       |  _ \      | | | |                 
 | |__) |__ _  __| |_  ___   | |_) |_   _| |_| |_ ___  _ __  ___ 
 |  _  // _` |/ _` | |/ _ \  |  _ <| | | | __| __/ _ \| '_ \/ __|
 | | \ \ (_| | (_| | | (_) | | |_) | |_| | |_| || (_) | | | \__ \
 |_|  \_\__,_|\__,_|_|\___/  |____/ \__,_|\__|\__\___/|_| |_|___/
                                                                                                                                     
*/

/* Style for a radio Buttons button */
.custom-radio {
    appearance: none; /* Removes the default style of the radio button */
    width: 20px;
    height: 20px;
    border: 1px solid black; /* Thin black border */
    border-radius: 50%; /* Round shape */
    display: inline-block;
    position: relative;
    background-color: white; /* White background */
    margin-right: 10px; /* Space between the radio button and the text */
}

.custom-radio:checked::before {
    content: '';
    width: 10px;
    height: 10px;
    background-color: rgb(102, 0, 102);
    border: 1px solid rgb(102, 0, 102);
    border-radius: 50%; /* Round shape */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the dot */
}

.custom-radio:checked {
    background-color: transparent; /* Removes the background */
    box-shadow: none; /* Removes the shadow */
    border: 1px solid rgb(102, 0, 102); /* Violette Umrandung */
}

.custom-radio-label {
    font-size: 1rem; /* Sets font size to 1 rem */
}

.custom-radio:focus {
    outline: none;
    border: 1px solid rgb(102, 0, 102);
}

/*
  _____ _               _    _               
 / ____| |             | |  | |              
| |    | |__   ___  ___| | _| |__   _____  __
| |    | '_ \ / _ \/ __| |/ / '_ \ / _ \ \/ /
| |____| | | |  __/ (__|   <| |_) | (_) >  < 
 \_____|_| |_|\___|\___|_|\_\_.__/ \___/_/\_\
                                            
*/                                             

.custom-checkbox {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    position: relative;
    vertical-align: middle; /* Wichtige Eigenschaft, um das Häkchen vertikal auszurichten */
    cursor: pointer;
    background-color: transparent; /* Hintergrund bleibt transparent */
    margin-right: 10px; /* Abstand zwischen Checkbox und Text */
}

/*
   _____ _               _               
  / ____| |             | |              
 | (___ | |__   __ _  __| | _____      __
  \___ \| '_ \ / _` |/ _` |/ _ \ \ /\ / /
  ____) | | | | (_| | (_| | (_) \ V  V / 
 |_____/|_| |_|\__,_|\__,_|\___/ \_/\_/  
                                                                                                                                                                           
*/

/* Shadow and border for the form */
.form-shadow {
    border: 1px solid #ddd; /* Border */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Shadow */
    padding: 20px; /* Padding inside the form */
    background-color: #fff; /* Background color */
    margin: 10px; /* Margin outside the form */
}

/*
  _      _       _    
 | |    (_)     | |   
 | |     _ _ __ | | __
 | |    | | '_ \| |/ /
 | |____| | | | |   < 
 |______|_|_| |_|_|\_\
                                                                                                                                                                                              
*/

a {
    color: rgb(102, 0, 102);
}

.empty-field {
    border: 2px solid red !important; /* Roter Rahmen, um leere Felder hervorzuheben */
    background-color: #ffe0e0; /* Optional: Hellrote Hintergrundfarbe */
}

input[type="checkbox"].empty-checkbox {  /* border-Stile wie in .empty-field funktionieren bei Checkboxen nicht sichtbar */
    outline: 2px solid red;
    outline-offset: 2px;
}

@keyframes blink-red {
    0% { border-color: red; }
    50% { border-color: transparent; }
    100% { border-color: red; }
}

.blink-error {
    animation: blink-red 0.6s ease-in-out 2;
    border: 1px solid red; /* Fallback für ältere Browser */
}

/*
 _   _               _______    _         
| \ | |             |__   __|  | |        
|  \| | __ ___   __    | | __ _| |__  ___ 
| . ` |/ _` \ \ / /    | |/ _` | '_ \/ __|
| |\  | (_| |\ V /     | | (_| | |_) \__ \
|_| \_|\__,_| \_/      |_|\__,_|_.__/|___/

*/                                         
                                          
/* Nicht aktive Tabs: Violette Textfarbe */
.nav-tabs .nav-link {
    color: rgb(102, 0, 102);
}

   
/* Aktiver Tab */
.nav-tabs .nav-link.active {
    color: black;       
    background-color: white;
    border-color: #dee2e6 #dee2e6 #fff; 
}

/*
 __  __             
|  \/  |            
| \  / | __ _ _ __  
| |\/| |/ _` | '_ \ 
| |  | | (_| | |_) |
|_|  |_|\__,_| .__/ 
             | |    
             |_| 

*/  

.layer-radio-legend {
    background: #f7f2f8;       /* violetter Hintergrund */
    color: black;              /* weiße Schrift */
    padding: 10px;
    font-size: 16px;
    border: 2px solid rgb(102, 0, 102); /* dunkleres Violett für Rahmen */
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.layer-radio-legend label {
    display: block;
    margin-bottom: 5px;
}