.gradient {
    background-image: linear-gradient(
        45deg,
        var(--cl-primary-500),
        var(--cl-accent-500)
    );
}

#slider{
    width: 100%;
    padding: 0;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 4px 2px 8px var(--cl-primary-500);
    color: var(--cl-primary-500);
    h2{
        margin: 0;
    }
    
    ul{
        width: 400%;
        padding: 0;
        margin: 0;
        list-style: none;
        gap: 0;
        
        animation: slider; /* Name der Animation */
        animation-duration: 20s; /* Dauer */
        animation-timing-function: linear; /* Beschleunigung */
        animation-iteration-count: infinite; /* Anzahl der Durchläufe */
        
        
        .slide{
            padding-block: 100px;
            width: 100%;
            padding-inline: 2rem;
            box-sizing: border-box; /* verrechnet 100% Breite - 32px Innenabstand links und rechts */

            background-repeat: no-repeat;
            background-size: cover;
            
            @media (width > 40rem) {
                grid-template-columns: 2fr 1fr;
                
                background-position: center;
                padding-block: 9rem;
            }
        }
        
        @media (width > 60rem) {
                grid-template-columns: 1fr 1fr;
            }
        
        .one{
            background-image: url(image/cux-abend.png)
        }
        .two{
            background-image: url(image/cux-abend.png)
        }
        .three{
            background-image: url(image/cux-fernweh.png)
        }
    }
}

@keyframes slider{
    0%{
        transform: translate (0);
    }
    5%{
        transform: translate(-25%);
    }
    33% {
        transform: translate(-25%);
    }
    38% {
        transform: translate(-50%);
    }
    66% {
        transform: translate(-50%);
    }
    71% {
        transform: translate(-75%);
    }
    100%{
        transform: translateX(-75%);
    }
}


form {
    
    background-color: hsl(324, 91%, 90%, 90%);
    border-radius: 10px;

    padding: var(--spacing-200);
    @media (width > 40rem) {
        padding: var(--spacing-400);
    }

    margin-block: var(--spacing-400);
    max-width: 50rem;
    margin-inline: auto;

    fieldset {
        color:var(--cl-primary-500);
        border-color: var(--cl-primary-500);
        border: 0;
        padding-inline: 0;
        padding-block-start: var(--spacing-200);

        @media (width > 40rem) {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 1rem;

            .colspan {
                grid-column: span 2; /* Element mit Klasse colspan geht über 2 Spalten */
            }
        }
    }
    
    
    fieldset.termin-auswahl {
        border-radius: 5px;
        padding: var(--spacing-200);
        border: double;
    }

    .form-field {
        display: grid;
        margin-block-end: var(--spacing-100);

        input {
            padding: var(--spacing-100);
            width: 100%;
            box-sizing: border-box;
            border-color: var(--cl-primary-200);
            border-radius: 5px;
            
        }

        input:focus {
            outline: 5px solid var(--cl-accent-500);
            outline-offset: -5px;
        }

        .error {
            min-height: 1lh;
            color: red;
            margin: 0;
        }
    }
    .form-option {
        align-items: baseline;
        gap: var(--spacing-100);
        
        input{
            /* accent-color: green; */
            
            appearance: none;
            width: 0.75rem;
            aspect-ratio: 1/1;
            outline: 2px solid var(--cl-primary-500);
            outline-offset: 2px;
            border-radius: 50%;
            margin-right: var(--spacing-100);
        }
        
        label{
            color: var(--cl-primary-500);
        }
        
        input:checked{
            background-image: url(
            icons/anker.svg);
            background-size: contain;
            outline: 2px solid var(--cl-primary-900);
            
        }
        input[type="checkbox"] {
            border-radius: 0%;
            flex-shrink: 0;
        }
        
        
    }

    button:focus {
        outline: 5px solid var(--cl-accent-500);
        outline-offset: -5px;
        /*    filter: invert(1); */
    }
}

#formular{
    filter: drop-shadow(4px 2px 8px var(--cl-primary-500));
    min-height: 730px;
    background-image: url(image/bg-jump-kid-small.svg);
    background-repeat: no-repeat;
    background-size: no-repaet;
    background-position: top -5px center;
    
    
       
    p{
        padding-inline: 2rem;
        color: var(--cl-accent-900);
        text-shadow: 1px 2px 1px var(--cl-primary-100);
        max-width:35rem;
    }
    
    h2{
        padding-inline: 2rem;
        padding-top: 2rem;
        margin-top: 0;
        color: var(--cl-primary-200);
        text-shadow: 
        1px 2px 1px var(--cl-accent-900);
    }
    
    p.error{
        color:red;
        text-shadow: none;
    }
}

.btn-margin{
    margin: 2rem;
  }