.inhalt2Spalten{
    margin-top: 0;
}
.form h3{
    color: var(--color-primary);
    margin: 0;
    font-size: 3rem;
    line-height: 100%;
    font-weight: normal;
}
.rechteSpalte:first-child{
    justify-content: left;
}
.form{
    width: min(60%, 800px);
    margin: 0 auto;
    margin-top: 5rem;
    background-color: #fcfcf8;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 5%;
    align-items: center;
    /* padding: 20px max(50px, 20%); */
    border: 1px solid rgba(0,0,0,0.03);
    border-radius: 10px;
    box-shadow:
        inset 0 -0.57rem 2rem rgba(229, 225, 187, 0.5),
        inset 0 0.75rem 2rem rgba(229, 225, 187, 0.5),
        8px 8px 16px var(--color-shadow);
    resize: vertical;
}
.darkTheme .form {
    background-color: #363636;
    box-shadow: inset 0 -0.57rem 2rem rgba(28, 28, 28, 0.5), inset 0 0.75rem 2rem rgba(28, 28, 28, 0.5), 8px 8px 16px var(--color-shadow);
}

.form .button:hover,
.form .button:focus{
  color: var(--color-font);
}

.rechteSpalte{
    width: 100%;
    max-width: 600px;
    margin: 0 auto; /*mittig */
}
.form-section{
    min-width: min(100%, 500px);
    width: 100%;
    position: relative;
    height: 50px;
    margin-top: 10px;
    overflow: hidden;
}
.form-section input,
.form-section .input-select,
.form-section textarea{
    font-size: 16px;
    width: 100%;
    min-width: 150px;
    height: 100%;
    color: var(--color-font);
    background-color: transparent;
    padding-top: 20px;
    border: none;
    outline: none;
}
.textarea-section{
    /* border: 4px solid yellow; */
    padding-top: 15px;
    height: auto; /* muss auto für autmomatisches skalieren */
    min-height: 200px;
    max-height: 1200px;
    resize: none;
}
.textarea-section::after{
    content: attr(data-replicated-value) " ";
}
#autoresizing{
    min-height: 200px;
    max-height: 400px;
    overflow: hidden;
}
.form-section textarea,
.form-section div{
    padding: 5px 0;
    /* border: 4px solid red; */
    width: 100%;
    height: 100%;
    resize: none;
}
.form-section label{
    font-size: 20px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-bottom: 1px solid var(--color-font);
    color: var(--color-font);
}
.form-section label::after{
    content: "";
    position: absolute;
    left: 0px;
    bottom: -1px;
    height: 100%;
    width: 100%;
    border-bottom: 3px solid var(--color-primary);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}
.form-section .label-error{
    color: red;
    border-bottom: 1px solid red;
}
.button{
    margin-top: 20px;
}
.error{
    color: red;
    margin: 0;
    font-size: 14px;
    width: 100%;
}
.success{
    color: var(--color-font);
    font-size: 20px;
}
.noSuccess{
    color: red;
    font-size: 20px;
}
.form-content{
    position: absolute;
    bottom: 5px;
    left: 0px;
    transition: all 0.3s ease;
}
.textarea-content{
    top: 15px;
    bottom: auto;
}
.form-section .expandable-textarea:focus{
    outline: 0px solid transparent;
}
.form-section .expandable-textarea{
    border: 3px solid orange;
    line-height: 1.5rem;
    /* max-width: 400px; */
    overflow-wrap: break-word;
}
.expandable-textarea[placeholder]:empty:before {
    content: attr(placeholder);
    color: #555; 
}
.form-section .expandable-textarea[placeholder]:empty + .form-label .form-content{
    content: attr(placeholder);
    transform: translateY(-75%);
    font-size: 14px;
    color: var(--color-primary);
}
.form-section input:focus + .form-label .form-content,
.form-section input:not(:placeholder-shown) + .form-label .form-content,
.form-section .input-select:focus + .form-label .form-content,
.form-section textarea:focus + .form-label .form-content,
.form-section textarea:not(:placeholder-shown) + .form-label .form-content,
.form-section .expandable-textarea:focus + .form-label .form-content,
.form-section .expandable-textarea:not(:empty) + .form-label .form-content{
    transform: translateY(-75%);
    font-size: 14px;
    color: var(--color-primary);
}
.form-section input:focus + .form-label::after,
.form-section input:not(:placeholder-shown) + .form-label::after,
.form-section textarea:focus + .form-label::after,
.form-section textarea:not(:placeholder-shown) + .form-label::after,
.form-section .expandable-textarea:focus + .form-label::after,
.form-section .expandable-textarea:not(:empty) + .form-label::after{
    transform: translateX(0%);
}
.grundSelected + .form-label .form-content{
    transform: translateY(-75%);
    font-size: 14px;
    color: var(--color-primary);
}
.grundSelected + .form-label::after{
    transform: translateX(0%);
}


@media(max-width:1120px){

.form{
  width: 100%;
  padding-top: 8%;
  padding-bottom: 8%;
}

}