@charset "UTF-8";
/* CSS Document */


/* CONTENEDOR (acompaña el estilo general de tangokurse.ch) */
/* CONTENEDOR GENERAL */
.tango-img{
    width:100%;
    border-radius:4px;
    margin-bottom:20px;
    box-shadow:1px 1px 8px rgba(0,0,0,.15);
}

.anmeldung-wrapper{
    display:flex;
    gap:40px;
    max-width:1200px;
    margin:40px auto;
    padding:0 20px;
}

/* COLUMNA FORMULARIO */
.form-col{
    flex:1;
}

/* COLUMNA TEXTO */
.text-col{
    flex:1;
    font-family:'Helvetica Neue',Arial,sans-serif;
    color:#333;
}
.text-col h3{
    color:#8b0000;
    margin-bottom:10px;
}

/* FORMULARIO */
#anmeldungForm{
    background:#fff;
    padding:25px;
    box-shadow:1px 1px 8px rgba(0,0,0,.1);
    border-radius:4px;
}

#anmeldungForm h2{
    color:#8b0000;
    margin-bottom:20px;
}

#anmeldungForm label{
    font-size:14px;
    font-weight:bold;
    display:block;
    margin-bottom:4px;
}

#anmeldungForm input,
#anmeldungForm select,
#anmeldungForm textarea{
    width:100%;
    padding:10px;
    margin-bottom:14px;
    border:1px solid #ccc;
    border-radius:3px;
    font-size:15px;
}

/* BOTÓN */
#anmeldungForm button{
    background:#8b0000;
    color:#fff;
    width:100%;
    padding:14px;
    font-size:16px;
    font-weight:bold;
    border:0;
    cursor:pointer;
    transition:background .3s ease;
}
#anmeldungForm button:hover{
    background:#a30000;
}

/* PARTNER */
#partner{
    margin-top:20px;
    padding-top:10px;
    border-top:1px dashed #ccc;
}

/* MENSAJES CON ANIMACIÓN */
#respuesta .error,
#respuesta .success{
    animation:fadeSlide .4s ease forwards;
    margin-bottom:15px;
    padding:12px;
    border-radius:3px;
}

#respuesta .error{
    background:#fdecea;
    color:#900;
    border-left:4px solid #c00;
}

#respuesta .success{
    background:#ebf7eb;
    color:#155724;
    border-left:4px solid #2e7d32;
}

@keyframes fadeSlide{
    from{opacity:0;transform:translateY(-10px);}
    to{opacity:1;transform:translateY(0);}
}

/* OCULTO */
.hidden{display:none;}

/* RESPONSIVE */
@media(max-width:900px){
    .anmeldung-wrapper{
        flex-direction:column;
    }
}