/* Mitgliedschaftsauswahl-Seite */

:root {
    --color-primary-dark: #bcbe4b;
    --color-primary:#bcbe4b;
    --gradient-primary-start: #bbbe46;
    --gradient-primary-end:  #bcbe4b;
    --gradient-primary: linear-gradient(var(--gradient-primary-start), var(--gradient-primary-end));

    --color-secondary: #3D5DA5;
    --gradient-secondary-start: #4265B2;
    --gradient-secondary-end: #3D5DA5;
    --gradient-secondary: linear-gradient(var(--gradient-secondary-start), var(--gradient-secondary-end));
    --textfarbe: #1E1E1E;
}
 *, *::before, *::after,  html, body {
    box-sizing: border-box;
}
#selectionboxWrapper{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    gap: 1rem;
}
.row > div{
    width: 100%;
}
.box-primary{
  border: 2px solid var(--color-primary);
    color:var(--textfarbe);
}
.box-primary:hover{
    background: var(--gradient-primary);
}
.box-secondary{
background: var(--gradient-secondary);
    color: white;
}
.box-simple{
    border: 2px solid var(--color-primary);
}
.selectionbox{
    padding: 1rem;
    display: flex;
    flex-direction: column;
/*    gap: 0.5rem;*/
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}
.selectionbox h2{
    margin: 0.3rem 0;
    text-transform: uppercase;
    font-size:1.5em;
}
.selectionbox label{
font-weight: 600;
    font-size: 1.1rem;
}
.selectionbox label input[type="radio"]{
    transform: scale(1.5); /* 1.5x default size */
transform-origin: bottom ;
    margin-right: 10px;
    cursor: pointer;
}
.selectionbox label:after, /* zum Testen */
.selectionbox input[required="required"]:after,
.selectionbox .required:after {
    content: '\a0*' !important;
    color: black;
}
/* Hide native radio */
.custom-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Label layout */
.custom-radio {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
}

/* Custom circle */
.custom-radio .pw-no-select::before {
    content: "";
    width: 18px;
    height: 18px;
    border: 2px solid #999;
    border-radius: 50%;
    margin-right: 10px;
    display: inline-block;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

/* Checked state */
.custom-radio input[type="radio"]:checked + .pw-no-select::before {
    border-color: black;
    background-color: black;
    box-shadow: inset 0 0 0 4px #fff;
}

/* Hover effect */
.custom-radio:hover .pw-no-select::before {
    border-color: #6c6c6c;
}

/* Optional focus state (keyboard accessibility) */
.custom-radio input[type="radio"]:focus + .pw-no-select::before {
    outline: 2px solid #6C6C6CFF;
    outline-offset: 2px;
}
.constrain-length{
    max-width: 90ch;
}

.child-counter{
    text-transform: uppercase;
}
/* Form utility classes */
       /* margin-top */
.mt-1 { margin-top: 0.2rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 2rem; }

/* margin-bottom */
.mb-1 { margin-bottom: 0.2rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 2rem; }

/* padding-top */
.pt-1 { padding-top: 0.2rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 1rem; }
.pt-4 { padding-top: 1.5rem; }
.pt-5 { padding-top: 2rem; }

/* padding-bottom */
.pb-1 { padding-bottom: 0.2rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 1rem; }
.pb-4 { padding-bottom: 1.5rem; }
.pb-5 { padding-bottom: 2rem; }

/* width utilities (percentage minus half flex gap) */
.w-10 {
    width: calc(10% - 0.5rem);
}

.w-20 {
    width: calc(20% - 0.5rem);
}

.w-30 {
    width: calc(30% - 0.5rem);
}

.w-40 {
    width: calc(40% - 0.5rem);
}

.w-50 {
    width: calc(50% - 0.5rem);
}

.w-60 {
    width: calc(60% - 0.5rem);
}

.w-70 {
    width: calc(70% - 0.5rem);
}

.w-80 {
    width: calc(80% - 0.5rem);
}

.w-90 {
    width: calc(90% - 0.5rem);
}

.w-auto{
    width: auto;
}
.child-wrapper {
    --i: 0;
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
    max-height: 500px;            /* set >= the tallest child-wrapper */
    margin-top: 0;               /* adjust if you use margins */
           /* adjust if you use padding */

    transition:
            opacity 220ms ease,
            transform 220ms ease,
            max-height 220ms ease,
            margin-top 220ms ease,
            padding-top 220ms ease;

    transition-delay: calc(var(--i) * 60ms);
}
.child-wrapper { --i: 0; }

.child-wrapper:nth-of-type(1) { --i: 0; }
.child-wrapper:nth-of-type(2) { --i: 1; }
.child-wrapper:nth-of-type(3) { --i: 2; }
.child-wrapper:nth-of-type(4) { --i: 3; }
.child-wrapper:nth-of-type(5) { --i: 4; }

.child-wrapper.is-hidden {
    opacity: 0;
    transform: translateY(6px);
    max-height: 0;
    margin-top: 0;               /* set to 0 if you add margin when shown */
    padding-top: 0;              /* set to 0 if you add padding when shown */
    pointer-events: none;
}
.hidden{
    display: none;
}
@media only screen and (min-width: 800px) {
    #selectionboxWrapper {
        flex-wrap: nowrap;
        flex-direction: row;
    }
    .row{
        display: flex;
        flex-direction: row;
        gap: 1rem;
    }
    .row > div{
        width: calc(50% - 1rem);

        input{
            width: 100%;
        }
    }
    .formfieleds-wrapper{
        display: flex;
        gap: 1rem;
        flex-wrap: nowrap;
    }
    .hidden{
        display: block;
    }
}

a.button {
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    font-family: "montserrat", sans-serif;
    background: #fff;
    color: var(--textfarbe);
    text-align: center;
    border: 2px solid var(--textfarbe);
    position: relative;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
a.button:hover {
    background-color: transparent;

}
.box-secondary a.button:hover{
    color: white;
}


/*  Formulare mit Browser-Resets
   ========================================================================== */

fieldset {
    margin: 1em 0;
    border: 0;
    padding: 1px 0;
    min-width: 0;
}

legend {
    font-family: "montserrat", sans-serif;
    text-transform: uppercase;
    letter-spacing: .02em;
    border: 0;
    padding: .5em 0;
}

button, input, optgroup, select, textarea {
    font-size: 100%;
    font-size: 1em;
    line-height: 1.5em;
    margin: 0;
    max-width: 100%;
    font-family: "montserrat", sans-serif;
    vertical-align: baseline;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #999;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #999;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #999;
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"],  textarea {
    width: 100%;
    -webkit-transition: box-shadow 0.2s linear;
    transition: box-shadow 0.2s linear;
    -webkit-appearance: none;
    border: 1px solid #aaa;
    border-radius: 0;
    padding: 0.5em 0.1875em;
    height: 2.5em;
    background: #ffffff;
}

input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="email"]:focus, input[type="month"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus, select:focus, textarea:focus {
    background: #efefef;
    border-color: #777;
}

input[type="color"] {
    padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

input[type="checkbox"], input[type="radio"] {
    padding: 0;
}

input[type="checkbox"],
input[type="radio"] {
    margin: 0 0.5em 0 0;
}

select {
    text-transform: none;
    width: auto;
    -webkit-transition: box-shadow 0.2s linear;
    transition: box-shadow 0.2s linear;
/*    -webkit-appearance: none;*/
    border: 1px solid #aaa;
    border-radius: 0;
    padding: 0.5em 1.1875em;
    height: 2.5em;
    background: #ffffff;
}

select[size], select[multiple] {
    height: auto;
}

select[size="0"], select[size="1"] {
    height: 2.5em;
}

form ul {
  /*  list-style-type: none;*/
}

form ul input[type="checkbox"],
form ul input[type="radio"] {
    margin: 0 0.5em 0 -1.4em;
}

label {
    padding: .6em 0 0 0;
    display: block;
}

#wrap_Inputfield_einverstanden > label.InputfieldHeader,
.Inputfield_website {
    display: none;
}

#ui-datepicker-div {
    background: rgba(255, 255, 255, 0.85);
    font-family: "montserrat", sans-serif;
}


/*
}  Ende @media screen

@media screen and (-webkit-min-device-pixel-ratio: 0) {

select[size], select[multiple], select[multiple][size]
													{ padding-right: 0.5em; background-image: none; }
select, select[size="0"], select[size="1"] 			{ padding-right: 1.5em; background-size: 1.0625em 0.3125em;
													  background: #ffffff url("data:image/svg+xml,<svg version='1.1' baseProfile='full' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='17px' height='5px' viewBox='0 0 17 5' enable-background='new 0 0 17 5' xml:space='preserve'><polygon fill='#333333' points='0,0 5,5 10,0'/></svg>") right center no-repeat; }

} Ende @media screen and (-webkit-min-device-pixel-ratio: 0)

@media screen {
*/

optgroup {
    font-style: normal;
    font-weight: normal;
    color: #333333;
}

textarea {
    height: auto;
    min-height: 3em;
    overflow: auto;
    resize: vertical;
    vertical-align: top;
    width: 100%;
}

button[disabled], input[disabled], input[type="button"][disabled], input[type="reset"][disabled], input[type="submit"][disabled], select[disabled], select[disabled] option, select[disabled] optgroup, textarea[disabled], span.disabled {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    opacity: 1;
    border-color: #e3e3e3 !important;
    color: #aaaaaa !important;
    background: #eeeeee !important;
    text-shadow: none !important;
    cursor: default !important;
}

.small input {
    width: 25%;
    min-width: 151px;
}

.small textarea {
    height: 5.5em;
}

.large input {
    width: 50%;
    min-width: 302px;
}

.large textarea {
    height: 9.75em;
}

label:after, /* zum Testen */
input[required="required"]:after,
.required:after {
    content: '\a0*' !important;
    color: var(--color-primary-dark);
}

label.not-required:after {
    content: '' !important;
}

form ul label:after {
    content: normal !important;
}

/*:not(output):invalid,
:not(output):-moz-submit-invalid,*/
:not(output):-moz-ui-invalid {
    box-shadow: 0 0 1.5px 1px var(--color-primary);
    border-color: var(--color-primary);
}

/*
input:focus:invalid, select:focus:invalid, textarea:focus:invalid
													{ -webkit-box-shadow: none; box-shadow: none; border-color: #9d261d; }
*/

/*   Buttons
   ========================================================================== */

button {
    overflow: visible;
    text-transform: none;
    margin: 1em 0;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

button, input[type="button"], input[type="reset"], input[type="submit"] /* SVG-Hintergrundbilder entfernt */
{
    color: black;
    text-transform: uppercase;
    letter-spacing: .02em;
    border: 1px solid #aaa;
    border-radius: 0.5em;
    padding: 0.5em 0.75em;
    width: auto;
    height: 2.5em;
    font-weight: normal;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    background-color: #dddddd;
    background-size: 100%;
    background-image: -webkit-linear-gradient(#eeeeee, #dddddd);
    background-image: linear-gradient(#eeeeee, #dddddd);
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
    -webkit-appearance: none;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    background-clip: padding-box;
}

button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
    border-color: #777;
    color: var(--color-primary);
    background-color: #e8e8e8;
    background-size: 100%;
    background-image: -webkit-linear-gradient(#f8f8f8, #e8e8e8);
    background-image: linear-gradient(#f8f8f8, #e8e8e8);
    text-decoration: none;
}

button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active {
    border-color: #777;
    color: #1a1a1a;
    background-color: #e4e4e4;
    -webkit-box-shadow: inset 0 0.2em 0.25em rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 0.2em 0.25em rgba(0, 0, 0, 0.15);
    background-size: 100%;
    background-image: -webkit-linear-gradient(#d3d3d3, #e4e4e4);
    background-image: linear-gradient(#d3d3d3, #e4e4e4);
    text-decoration: none;
}

button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus {
    border-color: #7fb2ff;
}


/* ==========================================================================
     Anmeldeformular
   ========================================================================== */
#FormBuilder_privatmitgliedschaft-familien #wrap_Inputfield_mitgliedschaft {
    display: none;
}