/* ############################### */
/* PART 1: NORMALIZE CSS */
/* ############################### */

/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
    
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul {
list-style: none;
}

ol {
margin: 1em 0 1em 1.5em;
}

/* Set core root defaults */
html:focus-within, html {
scroll-behavior: smooth;
}

/* Set core body defaults */
body {
min-height: 100vh;
line-height: 1.5;
font-family: Optima, Segoe, Segoe UI, Candara, Calibri,  arial, sans-serif;
}


/* Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}

/* ############################### */
/* PART 2: FONTS */
/* ############################### */

/* FONT-FACE FONT PRIMARY */

/* FONT-FACE FONT SECONDARY */

/* ############################### */
/* PART 3: USER VARIABLES */
/* ############################### */

:root {
    --Base-Farbe-Deg: 212;
    --Haupt-Farbe: hsl(var(--Base-Farbe-Deg), 100%, 22%); /* var(--Haupt-Farbe) */
    --Zweit-Farbe: hsl(var(--Base-Farbe-Deg), 100%, 97%); /* var(--Haupt-Farbe) */
    --BG-Farbe: hsl(var(--Base-Farbe-Deg), 100%, 85%); /* var(--Haupt-Farbe) */
    --Link-Farbe: hsl(var(--Base-Farbe-Deg), 100%, 90%);
    --BG-Farbe-White: #FFFFFF; /* var(--Haupt-Farbe) */
    --BG-Farbe-050: hsl(var(--Base-Farbe-Deg), 100%, 97%); /* var(--Haupt-Farbe) */
    --BG-Farbe-100: hsl(var(--Base-Farbe-Deg), 100%, 95%); /* var(--Haupt-Farbe) */
    --BG-Farbe-800: hsl(var(--Base-Farbe-Deg), 100%, 10%); /* var(--Haupt-Farbe) */

    --width-BOXED-section: 1180px;

    /* Form Widget */
       --FormFieldOutline: hsl(var(--Base-Farbe-Deg), 100%, 13%); /* var(--Haupt-Farbe) */

    /* Button */
        --FormButtonBorder: hsl(var(--Base-Farbe-Deg), 100%, 86%);
        --FormButtonBG: hsl(var(--Base-Farbe-Deg), 100%, 92%);
        --FormButtonChecked: hsl(var(--Base-Farbe-Deg), 100%, 56%);
        --FormButtonUnChecked: hsl(var(--Base-Farbe-Deg), 100%, 93%);
        --FormButtonBorderRadius: 0%;
        --size_Button: 1rem;

        --ButtonRadius: 15px;

    /* padding */
    --padding-M: 1em;

    /* form range */
    --range-track-height: 0.8rem;
    --range-thumb-height: 2.3rem;
    --range-thumb-width: 1.3rem;
    --range-thumb-margin-top: calc( (var(--range-track-height) - var(--range-thumb-height) ) / 2 );
}

/* ############################### */
/* PART 4: MAJOR LAYOUTS */
/* ############################### */

body, header, footer {
    width: 100%;
}

section > div {
    margin: 1em auto;
}

@media (min-width:768px) {
    .only-mobile {
        display: none;
    }
}
@media (min-width:1120px) {
    .only-mobile-tablet {
        display: none;
    }
}
@media (max-width:767px) {
    .not-only-mobile {
        display: none;
    }
}
@media (min-width:768px) and (max-width:1119px) {
    .not-only-tablet {
        display: none;
    }
}
@media (min-width:1120px) {
    .not-only-pc {
        display: none;
    }
}



.heroImage,
.heroImage.home {
    background-size: cover;
    width: 100%;
    height: 0;
    padding-top: 50%;
    background-image: url("/assets/bilder/home_500.jpg");
}
@media (min-width: 768px) {
    .heroImage.home {
        background-image: url("/assets/bilder/home_800.jpg");
    }
}
@media (min-width: 1200px) {
    .heroImage.home {
        background-image: url("/assets/bilder/home_1500.jpg");
    }
}
@media (min-width: 1920px) {
    .heroImage.home {
        background-image: url("/assets/bilder/home_1920.jpg");
    }
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}
.h1,
h1 {
    font-size: calc(1.375rem + 1.5vw);
    font-weight: bold;
}
@media (min-width: 1200px) {
    .h1,
    h1 {
        font-size: 2.5rem;
    }
}
.h2,
h2 {
    font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
    .h2,
    h2 {
        font-size: 2rem;
    }
}
.h3,
h3 {
    font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
    .h3,
    h3 {
        font-size: 1.75rem;
    }
}
.h4,
h4 {
    font-size: 1em;
}
@media (min-width: 1200px) {
    .h4,
    h4 {
        font-size: 1.5rem;
    }
}
.h5,
h5 {
    font-size: 1.25rem;
}
.h6,
h6 {
    font-size: 1rem;
}
p {
    margin-top: 0;
    margin-bottom: 0.3rem;
}

a {
    color: var(--Link-Farbe);
    text-decoration: none;
}
a:hover {
    color: black;
}

button a,
header a,
footer a {
    text-decoration: none;
}

header h1,
header h2,
header h3,
header p,
footer h1,
footer h2,
footer h3,
footer p {
    margin-bottom: 0;
}

button {
    padding: 0.3em 1em;
    background-color: var(--Haupt-Farbe);
    transition: 0.3s ease-in;
    margin: 0.5em auto;
    border-radius: var(--ButtonRadius);
}
button a {
    color: var(--BG-Farbe-White);
}
button:hover {
    background-color: var(--BG-Farbe-White);  
    transition: 0.3s ease-in;
}
button:hover a {
    color: var(--Haupt-Farbe);
}

.text-center {
    text-align: center;
}

.w100p {
    width: 100%;
}
.w50p {
    width: 50%;
}
.w33p {
    width: 33%;
}
.w100vw {
    width: 100vw;
}
.h100p {
    height: 100%;
}
.h100vh {
    height: 100vh;
}
.mh100vh {
    min-height: 100vh;
}

.padding-M {
    padding: 1em;
    padding: var(--padding-M);
}
.padding-zero {
    padding: 0;
}

img.logo {
    max-width: 180px;
}

div.separator {
    width: 100%;
    content: "";
    border: 1px solid var(--Haupt-Farbe);
    border-width: 0 0 2px 0;
    margin-bottom: 0.5em;
}




/* ############################### */
/* PART 5: ELEMENT LAYOUTS */

/* 5.1 --- 12 Grid Column Layout */
/* _____ parent element */
.grid-12-col {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
}
.logo-of-logo-nav-contact {
    grid-area: logo;
} 
.nav-of-logo-nav-contact {
    grid-area: nav;
} 
.contact-of-logo-nav-contact {
    grid-area: contact;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
} 
.grid-12-col.logo-nav-contact {
    grid-template-areas: 
        "logo logo logo logo logo logo logo logo logo logo logo logo"  
        "contact contact contact contact contact contact contact contact contact contact contact contact"
        "nav nav nav nav nav nav nav nav nav nav nav nav";
} 
@media (min-width: 768px) {
    .grid-12-col.logo-nav-contact {
        grid-template-areas: 
            "logo logo logo logo logo logo contact contact contact contact contact contact"  
            "nav nav nav nav nav nav nav nav nav nav nav nav";
    }
    .contact-of-logo-nav-contact {
        flex-direction: column;
        justify-content: center;
    }
}
@media (min-width: 1120px) {
    .grid-12-col.logo-nav-contact {
        grid-template-areas: 
            "logo logo logo nav nav nav nav nav nav contact contact contact";
    } 
}

/* _____ child element */


.grid-25P {
    grid-column: span 3;
}  
.grid-33P {
    grid-column: span 4;
}  
.grid-50P {
    grid-column: span 6;
}  
.grid-66P {
    grid-column: span 8;
}  
.grid-75P {
    grid-column: span 9;
}  
.grid-100P {
    grid-column: span 12;
}  

@media (min-width: 768px){
    .grid-25P-tablet {
        grid-column: span 3;
    }  
    .grid-33P-tablet {
        grid-column: span 4;
    }  
    .grid-50P-tablet {
        grid-column: span 6;
    }  
    .grid-66P-tablet {
        grid-column: span 8;
    }  
    .grid-75P-tablet {
        grid-column: span 9;
    }  
    .grid-100P-tablet {
        grid-column: span 12;
    }
    
}  
@media (min-width: 1120px){
    .grid-25P-pc {
        grid-column: span 3;
    }  
    .grid-33P-pc {
        grid-column: span 4;
    }  
    .grid-50P-pc {
        grid-column: span 6;
    }  
    .grid-66P-pc {
        grid-column: span 8;
    }  
    .grid-75P-pc {
        grid-column: span 9;
    }  
    .grid-100P-pc {
        grid-column: span 12;
    }  
}  

/* 5.2 --- Flex Layout */
/* _____ Flex Layout parent element */
    .flex-normal {
        display: flex;
        gap: 1em;
        flex-wrap: wrap;
    }

    .flex-column {
        display: flex;
        flex-direction: column;
        gap: 1em;
        flex-wrap: wrap;
    }

    .gap_0 {
        gap: 0;
    }

/* _____ Flex Layout parent element: CONTENT alignment MAIN axis */
    .flex-main-content-start {
        justify-content: flex-start;
    }
    .flex-main-content-end {
        justify-content: flex-end;
    }
    .flex-main-content-center {
        justify-content: center;
    }
    .flex-main-content-space-around {
        justify-content: space-around;
    }
    .flex-main-content-space-between {
        justify-content: space-between;
    }

/* _____ Flex Layout parent element: ITEMS alignment CROSS axis */
.flex-cross-items-start {
    align-items: flex-start;
}
.flex-cross-items-end {
    align-items: flex-end;
}
.flex-cross-items-center {
    align-items: center;
}
.flex-cross-items-space-around {
    align-items: space-around;
}
.flex-cross-items-space-between {
    align-items: space-between;
}
.flex-cross-items-stretch {
    align-items: stretch;
}

/* _____ Flex Layout child element */

/* 5.3 --- SECTION Layout */
/* _____ SECTION Full Width */
.section-test,
.section-fullwidth {
    width: 100%;
}
/* _____ SECTION BOXED */
.section-boxed {
    width: 100%;
    max-width: var(--width-BOXED-section);
    margin: auto;
    padding: 1em;
    border: none;
}
.section-boxed.padding-zero {
    padding: 0;
}

.section-test div {
    width: 100%;
    border: 1px blue solid;
    margin: 1em 0;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}


/* ############################### */

/* ############################### */
/* PART 6: STYLING LAYOUTS */
/* ############################### */

body {
    background-color: var(--BG-Farbe-White);
    color: var(--Haupt-Farbe);

    border: 1px var(--Haupt-Farbe) solid;

}

header, footer {
    background-color: var(--BG-Farbe);
    color: var(--Haupt-Farbe);

}

.Haupt-Farbe-BG {
    background-color: var(--Haupt-Farbe);
}
.BG-Farbe {
    background-color: var(--BG-Farbe);
}
.BG-Farbe-White {
    background-color: var(--BG-Farbe-White);
}
.BG-Farbe-050 {
    background-color: var(--BG-Farbe-050);
}
.Farbe-050 {
    color: var(--BG-Farbe-050);
}
.BG-Farbe-100 {
    background-color: var(--BG-Farbe-100);
}
.BG-Farbe-800 {
    background-color: var(--BG-Farbe-800);
}



/* ############################### */
/* PART 7: STYLING ELEMENTS */
/* ############################### */

/* ############################### */
/* PART 7.1: Navigation */

.navbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.navbar > .container,
.navbar > .container-fluid,
.navbar > .container-lg,
.navbar > .container-md,
.navbar > .container-sm,
.navbar > .container-xl,
.navbar > .container-xxl {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
}

.navbar-toggler {
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    transition: box-shadow 0.15s ease-in-out;
}
.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
}
.collapse:not(.show) {
    display: none;
}
.collapsing {
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
}
.navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
}


@media (min-width: 992px) {
    .navbar-expand-lg {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-nav {
        display: flex;
        flex-direction: row;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;

    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-lg .navbar-nav-scroll {
        overflow: visible;
    }
    .navbar-expand-lg .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
    .navbar-expand-lg .offcanvas-header {
        display: none;
    }
    .navbar-expand-lg .offcanvas {
        position: inherit;
        bottom: 0;
        z-index: 1000;
        flex-grow: 1;
        visibility: visible !important;
        background-color: transparent;
        border-right: 0;
        border-left: 0;
        transition: none;
        transform: none;
    }
    .nav-item {
        display: block;
    }    
/* 
    .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
    }
 */
}
.dropdown {
    position: relative;
}
.dropdown-menu {
    position: absolute;
    z-index: 1000;

    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    display: none;

}
@media (min-width: 768px) {
    .dropdown-menu {
        top: calc(100% + 1em);
        opacity: 0;
        pointer-events: none;
        display: block;

    }
}
.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.25rem 1rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}
.dropdown-item:focus,
.dropdown-item:hover {
    color: #1e2125;
    background-color: #e9ecef;
}
.dropdown-item.active,
.dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #0d6efd;
}
.dropdown-item.disabled,
.dropdown-item:disabled {
    color: #adb5bd;
    pointer-events: none;
    background-color: transparent;
}

.dropdown-menu.show {
    position: relative;
    display: block;
}
@media (min-width: 768px) {
    .nav-item.dropdown:hover > .dropdown-menu,
    .dropdown-menu.show {
        top: calc(100% + 0em);
        opacity: 1;
        transition: 0.3s ease-in;
        pointer-events: auto;
    }
}

.navitem {
    display: block;
    width: 100%;

}
.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    transform: rotate(0deg);
    transition: 0.3s ease-in;
}
.navbar-toggler-icon.toggled {
    transform: rotate(45deg);
    transition: 0.3s ease-in;
}
.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.dropdown-toggle {
    white-space: nowrap;
}
.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}
.dropdown-toggle:empty::after {
    margin-left: 0;
}

a.NavButton {
    text-transform: uppercase;
    padding: 0.5em 1em;
    border: 1px solid var(--Haupt-Farbe);
    border-radius: var(--ButtonRadius);
    background-color: var(--BG-Farbe-050);
    color: var(--BG-Farbe-800);
    transition: 0.3s ease-in;
    line-height: 1em;
    font-size: clamp(16px, 10px + 1vw, 24px);
}
a.NavButton:hover {
    background-color: var(--BG-Farbe-800); 
    color: var(--BG-Farbe-100);
    transform: 0.3s ease-in;
}







/* PART 7.1: Navigation ENDE */
/*  ---------------------------  */

/* ############################### */
/* PART 7.2: Form Widget */

/* ____________________ reset Browser Styling */
@supports(-webkit-appearance: none) or (-moz-appearance: none) {



    input[type='checkbox'],
    input[type='radio'] {
      -webkit-appearance: none;
      -moz-appearance: none;
      padding: 0;
      border: none;
      padding-left: calc( var(--size_Button) + 0.5rem);
    }

  }

input, textarea {
    border: 1px solid var(--FormFieldOutline);
    padding: 4px;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;

}
  
input:focus, textarea:focus { 
    outline: none;
    border-color: var(--FormFieldOutline);
}


/* ____________________ <form>...</form> */
form {
    padding: 0;   
    width: 100%; 
}

/* ____________________ <div> [InputField] </div> */
.Form-Field-Wrap {
    display: flex;
    flex-direction: column;
}
.Form-Field-Wrap:focus-within,
.Form-Field-Wrap:focus-visible {
    box-shadow: 1px 1px 3px var(--FormFieldOutline);

}
.FormFieldDivNichtZeigen {
    display: none;
}

/* ____________________ <div> [ErrorField within InputField] </div> */
/* .Form-Field-ErrorDiv {
    height: 2rem; fixe Höhe, damit beim Aus- & Einblenden der Fehlermeldung keine Form-Elemente verschoben werden
} */

/* ____________________ <span> [FehlerMeldung] </span>*/
.Form-Field-ErrorSpan {
    display: none; /* ausblenden, wenn kein Fehler */
}
.Form-Field-ErrorSpan.show {
    display: initial; /* einblenden, wenn Fehler */
}

.FormOptionWrapClass {
    background-color: var(--BG-Farbe-100);
}
.FormOptionWrapClass:focus-within,
.FormOptionWrapClass:focus-visible {
    box-shadow: 1px 1px 3px var(--FormFieldOutline);
}

.FormOptionWrapClass input {
    display: block;
    margin-top: 0.5em;
}

.FormFieldCheckBoxLabel {
    padding: 0.5rem;
    border: 1px solid var(--Haupt-Farbe);
    cursor: pointer;
}

.CheckBoxText {
    display: flex;
    padding: 0rem;
    margin: 0;
    line-height: 1rem;
}

.CheckBoxButton, .RadioButton {
    width: var(--size_Button);
    height: var(--size_Button);
    margin-right: 0.5rem;
    background-color: var(--FormButtonBG);
    border: 2px var(--Haupt-Farbe) solid;
    align-self: center;
    position: relative;
    border-radius: var(--FormButtonBorderRadius);
}
.CheckBoxButton::after, .RadioButton::after {

    --CheckedSize: 130%;
    opacity: 0;
    transition: 0.3s ease-in;
    position: absolute;
    width: calc(var(--CheckedSize) / 2);
    height: var(--CheckedSize);
    content: '';
    top: calc( ( 100% - var(--CheckedSize) ) / 2 );
    left: calc( ( 100% - var(--CheckedSize) ) / 2 );
    background-color: transparent;
    background: #ffffff00;
    border: 1px solid var(--Haupt-Farbe);
    border-width: 0 3px 3px 0;
    transform: rotate(30deg) translate(calc(var(--CheckedSize) / 3),calc(var(--CheckedSize) / -3));
}
.RadioButton {
    border-radius: 50%;
}

input[type="checkbox"]:checked + label .CheckBoxButton::after,
input[type="radio"]:checked + label .RadioButton::after
{
    /* background-color: var(--FormButtonChecked); */
    opacity: 1;
    transition: 0.3s ease-in;
}

input[type="checkbox"]:checked + label .CheckBoxButton,
input[type="radio"]:checked + label .RadioButton {
    border-color: var(--FormButtonBG);
}

.form-submit-error:not(.show) {
    display: none;
}

.SubmitButtonClass {
    --spinner-size: 1.4rem; /* VERSION 2.0.0 */
    position: relative;     /* VERSION 2.0.0 */
    width: 100%;
    padding: 1rem 0.3rem;
    background-color: var(--Haupt-Farbe);
    color: var(--BG-Farbe-White);
    cursor: pointer;
    text-transform: uppercase;
    border: 3px solid var(--FormButtonBG);
}
.SubmitButtonClass:hover {

    background-color: var(--BG-Farbe-White);
    color: var(--Haupt-Farbe);

}

/* VERSON 2.0.0  */
    .SubmitButtonClass::after {
        content: ""; /* Muss gesetzt werden */
        display: none; /* Standardmäßig unsichtbar */
        
        /* Positionierung in der Mitte des Buttons */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* Zentriert den Spinner */
        
        /* Größe des Spinners (passt sich gut an die 1rem Padding an) */
        width: var(--spinner-size);
        height: var(--spinner-size);
        /* ZENTRIERUNG NEU DEFINIERT: 
       Wir verschieben das Element um die Hälfte seiner eigenen Breite/Höhe
       (1.4rem / 2 = 0.7rem) */
        margin-left: calc(var(--spinner-size) / -2);; 
        margin-top: calc(var(--spinner-size) / -2);;
        
        /* 3/4-Kreis-Logik: Nutzt die helle Variable für die sichtbaren 3/4 */
        border: 4px solid var(--BG-Farbe-White); /* Sichtbare Farbe (3/4 des Kreises) */
        border-top-color: transparent; /* Unsichtbare Lücke (1/4 des Kreises) */
        border-radius: 50%;
        
        /* Animation starten */
        animation: spin 0.8s linear infinite;
    }
    .SubmitButtonClass.statusSending, .SubmitButtonClass.statusSending:hover {

        color: rgb(37, 37, 37);
        background-color: lightgray;

        /* Blockiert Maus-Events (Klicks) auf dem Element */
        pointer-events: none; 
        
        /* Verhindert, dass der Cursor auf 'pointer' wechselt */
        cursor: default;
    }

    /* 4. Spinner anzeigen, wenn der Status aktiv ist */
    .SubmitButtonClass.statusSending::after {
        display: block; 
    }

    /* 5. Keyframes für die Dreh-Animation */
    @keyframes spin {
        to { 
            /* Zentrierung beibehalten, Rotation auf 360 Grad */
            transform: rotate(360deg); 
        }
    }
/* VERSON 2.0.0  */


/* ERROR TEXT */
    [id^="Submit-Error-Div-Form-"] {
        background-color: white;
        padding: 1rem;
        border: 1px solid #ccc;
        border-radius: 6px;
    }

    [id^="Submit-Error-Text-Form-"] {
        color: red;
        margin: 0;
    }
/* ERROR TEXT */

/* BITTE WARTEN */
    .submit-status-warten {
        display: none; /* Standardmäßig ausblenden */
        background-color: #ffffff; /* Weißer Hintergrund */
        color: #333333; /* Dunkelgrauer Text */
        border: 1px solid #cccccc; /* Dezente Umrandung */
        padding: 16px;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        text-align: center;
        font-weight: bold;
        font-size: 1.1em;
        max-width: 300px;
        margin: 20px auto;
    }
    /* Spinner Kreis */
    .spinner {
        margin: 0 auto 12px auto;
        width: 32px;
        height: 32px;
        border: 4px solid #ccc;
        border-top: 4px solid #007bff; /* Blaue Farbe oben */
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    /* Spinner Animation */
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

/* BITTE WARTEN */

/* PART 7.2: Form Widget ENDE */

/* PART 7.3: Backgrounds START */

div.raute {
    width: 100%;
    height: 30px;
    background-image: url(/assets/bilder/Raute_6_10.png);
    background-repeat: space repeat;
    margin: 0;
    padding: 0;

}


/* PART 7.3: Backgrounds ENDE */

/* ############################### */